맨 땅에 프론트엔드 개발자 되기

Context API 란? Context API는 React에서 16.3 버전부터 공식적으로 제공하는 기능으로 Redux와 비슷하지만, Redux는 '상태(state)'를 관리하는 툴이고, Context API는 React 컴포넌트들끼리 props로 정보를 주고 받지 않고 전역적으로 데이터를 가져다 쓸 수 있게 만든 툴로써 약간 역할이 다르다고 볼 수 있다. Context API 문법 일단 Context API를 사용하기 위해서는 공통 데이터를 사용하는 컴포넌트들의 최상위 컴포넌트에 createContext()를 만들어주어야 한다. 컴포넌트가 위의 사진처럼 구성되어 있을 때, 4번 컴포넌트와 5번 컴포넌트가 공통으로 사용하는 데이터를 전역으로 관리하고 싶으면, 2번 컴포넌트 혹은 그 상위 컴포넌트에 cr..

React 가상 돔(Virtual DOM) React에서는 가상 돔을 사용한다. 이 가상 돔은 실제 DOM(Document Object Model)을 조작하는 방식이 아니라 실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM과 비교해서 달라진 부분을 리렌더링 시켜주는 방식으로 작동을 한다. 그런데 이 때 가상 돔을 잘 이해해야만 React의 '상태'를 잘 다룰 수 있다. - Virtual DOM을 사용하는 이유 그렇다면, 왜 실제 DOM을 조작하지 않는지에 대해서 알아보자. Vanilla JS를 이용하여 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 React는 깜박거림 없이 부드러운 UX를 사용자에게 제공하..

오늘은 대망의 첫 면접을 봤다. 면접관들의 질문에 어찌저찌 잘 대답을 하고, 드디어 코딩테스트!! 두둥!!! 리액트로 구현하는 문제였는데, 1에서 25까지 숫자를 5X5 빙고 배열에 랜덤으로 출력하고 랜덤 버튼을 누를 때 마다 다시 랜덤으로 숫자 위치가 바뀌는 것을 구현하는 것이었다. 나는 랜덤 배열을 구성하기 위해 아래와 같은 코드를 작성했다. function randomBingo() { let index = bingoEl.length - 1 while(index > 0) { const randomIndex = Math.floor(Math.random() * bingoEl.length) [bingoEl[index], bingoEl[randomIndex]] = [bingoEl[randomIndex], b..

1. HTML 파일과 CSS 파일을 파싱(Parsing)해서 각각 Tree를 만든다. 브라우저가 HTTP 프로토콜을 통해 IP 주소에 해당하는 서버에 접속해서 웹사이트를 구성하기 위한 리소스(HTML, CSS, JavaScript)를 받아오면 가장 먼저 HTML 파일을 해석(Parsing)한다. 그리고 해석 단계를 거쳐 DOM(Document Object Model) 트리를 구성한다. HTML 파일에 스타일시트도 연결이 되어 있다면, 스타일시트도 해석해서 CSSOM(CSS Object Model) 트리를 구성한다. - DOM 트리 생성 브라우저가 HTML의 원시 바이트를 읽어와서, HTML 파일에 정의된 인코딩 방식(예: UTF-8)에 따라 개별 문자로 변환한다. 브라우저가 문자열을 W3C 표준에 지정된..

쿠키의 탄생 배경 HTTP는 상태를 계속 유지하지 않는 스테이트리스(Stateless)프로토콜이다. 서버와 클라이언트 간에 리퀘스트와 리스폰스를 교환하는 동안에 상태를 관리하지 않기 때문에 이전에 되돌려준 리스폰스에 대해 기억하지 못한다. 이는 많은 데이터를 매우 빠르고 확실하게 처리하기 위해 설계되었다. 하지만 웹이 진화함에 따라 스테이트리스 특성만으로 처리하기 어려운 일이 증가하게 되었다. 예를 들어, 로그인을 했을 때 다른 페이지로 이동하더라도 로그인 상태를 유지할 필요가 있다. 그러나 페이지를 넘나들 때 즉, 리퀘스트 요청과 리스폰스 결과를 받을 때 로그인 상태를 주고 받지 않으므로, 이러한 스테이트리스의 특성을 보완하기 위해 쿠키(Cookie) 라는 기술이 도입되었다. 쿠키란? 쿠키는 리퀘스트와..

이 글은 기본적인 네트워크 지식을 쌓기 위해 제 방식대로 정리한 글로 오류가 있을 수 있습니다. 오류가 있으면 댓글로 알려주시면 감사하겠습니다 :) 1. www.google.com 을 브라우저 주소창에 친다. 2. 브라우저는 캐싱된 DNS 기록들에서 www.google.com 에 대응되는 IP 주소가 있는지 확인한다. DNS 란? DNS(Domain Name System)은 URL들의 이름과 IP주소를 저장하고 있는 데이터베이스다. 인터넷에 있는 모든 URL들에는 고유의 IP 주소가 지정되어있다. 이 IP 주소를 통해서 해당 웹사이트를 호스팅하고 있는 서버 컴퓨터에 접근을 할 수 있다. (예를 들어, www.google.com의 IP 주소를 알아보기 위해서는 nslookup www.google.com 을..