Hook이란? Hook은 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 class형 컴포넌트가 아닌 함수형 컴포넌트에서만 사용할 수 있게 도와주는 것이기 떄문에 클래스형 컴포넌트에서는 작동하지 않는다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 보기위해 버튼을 클릭하면 카운트가 1 증가하는 기능을 가진 컴포넌트를 두가지로 구현해보겠다. 클래스형 컴포넌트 //this 개념을 정확히 이해하지못하면 기능구현자체가 힘들 수 있고, 직관성 또한 떨어진다. class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncr..

Virtual DOM을 하기이전에 DOM(Real DOM)이 뭔데? DOM은 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 트리구조로 표현함으로써, 프로그래밍 언어가(JS) 해당 문서에 접근하고 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다. 언제 내가 하나하나 HTML요소 만들어주고, 클래스만들어주고, 또 클래스 지워주고 이런 번거로운 짓을 하겠나. 자바스크립트를 통해 좀 더 웹페이지를 효율적으로 다룰 수 있다. (예를들면, 원래는 집을 따뜻하게 하기위해서는, 아궁이에 불을떼건, 연탄을 가서 피우건 해야 했다면 지금은 보일러 버튼 하나로 집의 온도를 조절가능한것과 비슷한 맥락이다.) Virtual DOM DOM은 알겠는데, Virtual DOM은 또 뭘까요? 가상 DOM? Virtua..

번들링 이런식으로 어떠한 제품을 묶음으로 판매하는 걸 '번들링' 이라고 한다. 웹 개발에서 번들링 그럼 웹 개발을 할 때 '번들링'을 한다고 하면 무슨 의미일까? (참고로 웹 개발에서 번들링 = 빌드 라고 할 수 있다.) 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다. 번들링이 없던시절 문제점은? 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났다. 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자 불편함을 겪음. 번들 파일 사이..

브라우저의 특징과 웹의 동작 원리 브라우저는 현존하는 브라우저끼리 조금씩 그 특징이 다르지만, 공통점이 하나 있습니다. 그것은 바로 동작 방식입니다. 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작합니다. 여기서 자원은 대개 HTML 문서이지만 가끔 PDF, 멀티미디어 등 다른 형태일 수 있으며, 자원의 주소는 URI(Uniform Resource Identifier)로 되어 있습니다. 먼저, 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력합니다. 그러면 DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색합니다. 그리고 해당 도메인 네임에 해당하..

🐯Section.3 회고🐯 남들보다 느리기에 더 멀리가기위해 애썼던 나름의 노력을 한 Section.3 빨리 달리지 못한다면 멀리 달려보자. 혼돈의 섹션1,2를 거치면서 멘탈적으로도, 육체적으로도 적응이 되어 훨씬 안정적이였던 시간이였다. 더이상 남들보다 뒤쳐질까봐 불안에 떨지않고, 나만의 페이스를 찾는데에 시간을 많이 쏟았다. 섹션2 회고에서 내가 개선하고자 목록들인데, 개인적으로 이 모든것을 지켜냈다고 생각한다. 더이상 동기들과 나를 비교하며 나를 몰아넣지 않았고, 실패라는 결과가 두려워 시도하지않는 일은 없었으며, 동기들과 토이프로젝트를 진행했다. 토이프로젝트에서 나온 피드백들에 대해 적극적으로 질문하며, 최대한 많은 피드백을 수용하고 개선했다. 무엇보다 동기들과 비교하는 대신, 섹션 2의 박수범과..

Cookie 란? (누가만든 쿠키이~) 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단. 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다. 쿠키는 클라이언트의 로컬에 저장되는 키와 값이 들어있는 데이터 파일이다. (ex. 이름,값,만료 날짜/시간(쿠키 저장기간), 경로정보 등) 쿠키는 서버에서 HTTP Response Header에 Set-Cookie 속성을 이용하여 클라이언트에 쿠키를 제공한다. 쿠키는 삭제하지않으면 사라지지 않는다라는 특성을 가지고있다. 그렇기에 장기간 저장해야 할 옵션을 클라이언트에 저장하기에 적합하다. 그럼 쿠키는 내가 삭제하지않으면 평생남아있는가? 아니다. 세션쿠키(Session Cookie)와 지속 쿠키(Persi..