본문 바로가기

개발에 도움이 되는

 (78)
Flex - Flex FlexBox라고도 부르며, 레이아웃 배치 전용 기능으로 고안됨. container와 item으로 구분함. direction에 따라 main axis과 cross axis가 바뀐다. - 속성 1. container 적용 속성 1) display : flex 설정 - flex : 기본 flex 설정 - inline-flex : container가 들어있는 item 크기만큼 크기 설정 2) flex-direction : 정렬 방향 - row : 가로축 기준 정렬, 기본 값 - row-reverse : row 순서를 반대로 - column : 세로축 기준 정렬 - column-reverse : column 순서를 반대로 3) flex-wrap : Wrapping(줄 넘김) 여부 - nowrap :..
가상 요소(Pseudo Element) - 가상 요소 (Pseudo Element) 의사 요소라고도 불리며, 일반적인 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용한다. 요소에 따라 적용되는 효과가 다르며, 사용하는 방법은 CSS3을 기준으로 선택자 앞에 ::사용할 요소 이름을 붙여서 사용한다. (: 하나도 가능) ex) .div::before - 가상 요소의 종류 1. ::before : 선택자의 내용(content) 바로 앞쪽에 내용(content)을 삽입한다. 2. ::after : 선택자의 내용(content) 바로 뒤쪽에 내용(content)을 삽입한다. 3. ::first-letter : 선택자의 내용 첫 글자를 선택한다. 4. ::first-line : 선택자의 첫 번째 줄을 선택한다. (반응형에 따라 바뀜)..
JavaScript : Array.(forEach, map, filter, reduce) Array를 처리하는 기능들 1. forEach : Array.forEach((value, index, array) => { 수행 코드 }); - value : 요소 값 - index : index 값 - array : Array 원본 testList = [1, 2, 3, 4, 5]; testList.forEach((num, idx) => { console.log(num, idx); }); // 실행 결과 1 0 2 1 3 2 4 3 5 4 2. map : Array.map((value, index, array) => { 수행 코드 }); - value : 요소 값 - index : index 값 - array : Array 원본 forEach와 다른 점은 map은 새로운 Array를 return tes..
JavaScript : sort() 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 (복사본이 만들어지는 것이 아닌 원 배열에 정렬) Default는 각 문자의 유니 코드 코드포인트 값에 따라 정렬 (그래서 숫자를 정렬하려고 단순히 sort()를 썼다간 원치 않은 결과가 나온다) - 구문 arr.sort([compareFunction]) 매개변수에 정렬 순서를 정의하는 함수를 넣을 수 있고 이 함수를 통해 숫자 오름차순 or 내림차순 정렬을 할 수 있다. compareFunction의 return 값이 음수면 a를 더 낮은 index로 정렬하고, 양수면 b를 a보다 낮은 index로 정렬, 0이면 서로에 대해 변경하지 않는다. 위 코드는 오름차순 정렬을 한 것이고, 짧게 쓰려면 화살표 함수로 numbers.sort((a, b)=> ..
SSR(Server Side Rendering), CSR(Client Side Rendering) - SSR : 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식 - 동작 과정 1) 클라이언트는 초기 화면 로드를 위해 서버에 요청을 보냄 2) 서버는 화면 표시하는데 필요한 데이터를 얻어와 모두 적용하여 렌더링 준비를 마친 HTML과 해당 JS 파일을 전달 - 특징 1) 페이지를 이동할 때마다 위 과정을 거치기 때문에 새로고침되어 화면이 깜빡임 2) 먼저 화면을 보여주고 나서 처리하기 때문에 TTV (Time To View)와 TTI (Time To Interact) 간에 시간 간격이 존재한다. - 장점 1) 검색 엔진 최적화 (SEO) 2) 빠른 초기 로딩 - 단점 : 1) 요청 할 때마다 새로고침을 하면서 깜빡임이 생겨 UX 관점에서 좋지 않음 2) 서버 렌더링에 ..
동시성(Concurrency), 병렬성(Parallelism) - 동시성 : 여러 개의 작업이 있을 때 Context Switching을 통해 여러 작업을 시분할 방식으로 처리하여 동시에 실행되는 것 처럼 보이는 것 (ex. 싱글 코어에서 여러 작업 수행) - 병렬성 : 실제로 동시에 여러 작업이 처리되는 것 (ex. 멀티 코어) 동시성은 여러 일을 한꺼번에 다루는 데 관한 것이다. 병렬성은 여러 일을 한꺼번에 실행하는 데 관한 것이다. - Rod Pike (Google Developer) - 암달의 법칙 (Amdahl's Law) : 코어가 N배 늘어나더라도 성능이 N배로 늘어나지 않음. 그 이유는 프로그램의 모든 부분을 Parallel 하게 짤 수 없기 때문에 이런 현상이 발생
WebSocket - WebSocket : HTML5 표준 기술로, 클라이언트와 서버 사이의 동적인 양방향 연결 채널을 구성하는 통신 프로토콜 - 특징 1. 단방향 통신인 HTTP의 단점을 보완하기 위해 등장 2. WebSocket은 HTTP에 비해 Header 크기가 작기 때문에 오버헤드를 줄일 수 있음 3. Real-Time Web Application 구현에 사용 4. 연결지향 양방향 전이중 통신 - 작동 원리 1. Opening Handshake 웹 소켓 클라이언트에서 Handshake 요청(HTTP Upgrade)을 하고 이에 대한 응답으로 101(Protocol 전환 승인)을 받는다. Header 정보는 아래와 같다. - Upgrade : Protocol 전환을 위해 사용함. WebSocket 요청시 반드시 W..
실행 컨텍스트(Execution Context) - 실행 컨텍스트 (Execution Context) : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다. - 호이스팅 발생 (호이스팅이 궁금하다면 보러 가기) - 외부 환경 정보를 구성 - this 값을 설정 실행 컨텍스트를 Call Stack에 쌓는 경우는 아래와 같다. 1. 전역 코드 : 전역 영역에 존재하는 코드 2. Eval 코드 : eval 함수로 실행되는 코드 (eval은 현재는 안 쓰는 것을 권장하며, 오히려 evil이라는 소리를 들음) 3. 함수 코드 : 함수 내에 존재하는 코드 4. 블록 문 : { } 안에 있는 코드 (ES6 이후) - 실행 컨텍스트 구성 - Variable Environment : 현재 컨..
반응형

티스토리툴바