CSS Flexbox란?
CSS Flexbox란 기존 콘텐츠를 수직/수평 배치할 때, float나 inline-block으로 마크업할 때의 불편함을 쉽게 해결할 수 있게 추가된 기능이다. 다양한 디바이스 환경에서 언제나 같은 레이아웃을 유지시켜 반응형 웹사이트 제작에 유용하게 쓰인다. Flex는 콘텐츠를 감싸는 상위 부모 요소인 flex container와 각각의 콘텐츠들인 자식 요소 flex Item으로 구성되어 있다. CSS Flexbox를 적용하는 방법은 부모 요소인 container에 display:flex를 선언하면 된다. flex container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 등을 정의하고, 자식 요소인 flex item에는 크기나 순서에 관련된 속성인 flex-grow, flex-shrink 등을 정의한다.
주소창에 naver.com을 입력하면 벌어지는 일을 차례대로 설명 (어려움)
- 사용자가 입력한 URL 주소에서 도메인 네임을 DNS 서버에서 검색한다.
- DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다.
- 웹 페이지 URL과 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지를 생성한다.
- HTTP 요청 메시지는 TCP 프로토콜을 사용해 인터넷을 거친 뒤 해당 IP 주소의 컴퓨터로 전송된다.
- 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용해 웹 페이지 URL 정보로 변환된다.
- 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색한다.
- 검색된 웹 페이지 데이터는 또다시 HTTP 프로토콜을 사용해 HTTP 응답 메시지를 생성한다.
- 이렇게 생성된 HTTP 응답 메시지는 TCP 프로토콜을 사용해 인터넷을 거친 뒤 원래 컴퓨터로 전달된다.
- 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환되어 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 된다.
HTTP와 HTTPS의 차이점은? (어려움)
HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있게 해주는 프로토콜이다. HTTPS는 HTTP의 암호화된 버전이다. 공개키/개인키 방식을 이용해 데이터를 암호화한다. HTTP는 암호화 기능이 없어 보안에 취약하지만, HTTPS는 데이터를 안전하게 주고받을 수 있다. HTTPS를 사용하면 암호화 및 복호화 과정이 필요하기 때문에 HTTP보다 속도가 느리다. 그러나 실사용에는 큰 차이가 없다. HTTPS는 인증서를 발급하고 유지하는 데 추가 비용이 발생한다. 최근에는 대부분의 웹 사이트가 HTTPS 프로토콜을 사용하고 있다.
Kraken Crypto Exchange, HTTP vs HTTPS
useCallback와 useMemo의 차이점?
useCallback과 useMemo는 메모이제이션 Hook으로 연산된 값을 자료 구조에 저장하고 재사용 시 계산을 반복하지 않고 꺼내서 사용할 수 있게 해준다. 메모이제이션 Hook은 React의 불필요한 렌더링(예: 자식 컴포넌트 상태가 변경되지 않아도 렌더링하는 경우)을 방지해 퍼포먼스 최적화에 도움을 준다. 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하고, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱한다는 것이다. 다시 말해 useCallback은 메모이제이션된 콜백을 반환하고, useMemo는 메모이제이션된 값을 반환한다.
별코딩, React Hooks에 취한다 - useCallback 짱 쉬운 강의 | 리액트 훅스 시리즈
별코딩, React Hooks에 취한다 - useMemo 제대로 사용하기 | 리액트 훅스 시리즈
비동기 함수란?
JavaScript에서 비동기적(asynchronous)이라는 말은 어떤 작업을 요청할 때 그 작업이 종료될 때까지 기다리지 않고 다른 작업을 하고 있다가 해당 작업이 종료되면 추가 작업을 수행해나가는 방식이다. 반대로 동기적(synchronous)이라는 말은 어떤 작업을 요청할 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식이다. 비동기 함수는 현재 실행 중인 코드의 완료 여부와 상관없이 바로 다음 코드로 넘어간다. 그래서 요청과 응답이 동시에 이루어지지 않는다. 비동기 함수가 필요한 이유는 화면에서 서버로 데이터를 요청할 때, 요청에 대한 응답을 계속 기다릴 수 없(빈 화면을 보여줄 수는 없음)고 기다리는 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있기 때문이다. 대표적인 예로 setTimeout()이라는 Web API가 있다.
드림코딩, 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱
코딩애플, 코딩초보들이 헷갈리는 용어 : API가 뭐냐면
Promise란?
Promise란 비동기 동작을 다루기 위한 패턴으로, 비동기 요청을 보낼 때 resolve(성공)나 reject(실패)가 다양한 형태로 발생된다. Promise를 사용하면 성공 및 실패를 간편한 방식으로 환원할 수 있다. new 연산자와 함께 호출한 Promise 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행되고, 그 내부에 resolve 혹은 reject 함수를 호출하는 구문이 있으면 둘 중 하나가 실행되기 전까지 다음의 then이나 catch 구문으로 넘어가지 않으며, 세 가지 상태(pending, fulfilled, rejected)를 갖는다.
코딩앙마, 자바스크립트 중급 강좌 #16 프로미스(Promise)
async function이란?
async function은 비동기 작업을 callback과 Promise보다 일반 함수에 가까운 형태로 실행하기 위해 나온 객체이다. 동기식으로 비동기 코드를 작성할 수 있다. 함수 앞에 async를 붙여주고, 비동기가 필요한 작업 앞에 await를 붙여 결과를 기다린다. 다수의 비동기 처리 작업을 할 때 유용하고, try...catch문을 이용해 에러를 핸들링할 수 있다.
드림코딩, 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱
async function과 Promise의 차이는? (다시 정리)
Promise를 쓸 때는 catch()문으로 에러 핸들링이 가능하다. 그러나 async function은 에러 핸들링 기능이 없어서 try...catch문을 활용해야 한다. Promise는 then()을 연속적으로 사용하게 되는 콜백 지옥에 빠질 가능성이 있으므로 코드가 길어질수록 async function을 사용하는 편이 좋다.
ESLint란?
ESLint란 JavaScript 언어 및 소스코드 분석 도구이다. ESLint 패키지를 설치하면 코드에 특정 스타일과 규칙을 대입해 에러를 찾고 패턴을 적용시킬 수 있다. 사용 시 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정해주는 유용한 도구이다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거하는 게 목적이다. 코드를 더 보기 좋게 변환해주는 Prettier를 ESLint와 함께 사용해주면 더 효율적이다.