게으른 개발노트

리액트의 모든 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트는 생성(mount) => 업데이트(update) => 제거(unmount)의 생명주기를 갖는다. 여기서 클래스 컴포넌트는 라이프사이클 메서드를 활용하고, 함수형 컴포넌트는 Hook을 사용한다. 리액트 라이프사이클 개념은 클래스컴포넌트를 사용할때 명확히 사용되는 부분인데 16.8이후 함수형 컴포넌트의 개념이 등장하면서 생명주기의 개념이 이전처럼 명확히 구분되어 사용되지 않는다. 그럼에도 리액트에서는 공식적으로 클래스,함수형 컴포넌트 모두 지원할 것이라고 발표했고, 이전에 작성된 코드들은 대부분 클래스 컴포넌트로 작성되어 있기 때문에 라이프 사이클에 대해 알고 넘어가야한다. 그리고 함수형 컴포넌트에서 클래스 컴포넌트처럼 명확히 모든 케이스를 구분해..

클라이언트와 서버 간에 정보를 주고 받는 통신 방법을 HTTP라고 한다. 쿠키와 세션이 왜 등장했는지를 알기 위해 먼저 HTTP의 특징부터 짚고 넘어가면 좋다. Stateless한 HTTP 쿠키와 세션이 등장하게 된 배경에는 HTTP 통신의 Stateless한 특징 때문이다. Stateful과 Stateless 클라이언트와 서버간의 네트워크 통신이 어떻게 이루어지는지에 대한 개념. 즉, 네트워크 프로토콜 세션 상태 - 클라이언트와 서버간 통신 인증이 된 상태 세션 정보 - 한 세션 내에서 클라이언트가 서버에 전송할 데이터 정보를 의미함 Stateful - 세션이 종료될 때까지, 클라이언트의 세션 정보를 저장하는 네트워크 프로토콜 Stateless - 서버가 클라이언트의 세션 상태 및 세션 정보를 저장하지..

개인프로젝트로 웹툰 커뮤니티 서비스를 개발하고 있다. 네이버, 카카오, 카카오페이지 이렇게 큰 플랫폼들의 웹툰 리스트를 요일, 신작, 완결별로 보여준다. 한 플랫폼의 요일별 웹툰 리스트는 몇십개밖에 안되지만 신작이나 완결은 몇천개의 데이터와 사진을 불러와야했다. 처음엔 일단 한번에 다 불러오고, 로딩 스피너를 추가해서 스크롤이 밑에 닿으면 처음 불러온 데이터(20개) * 2씩 slice를 하며 데이터를 추가적으로 사용자에게 보여줬다. 문제는 요일별 웹툰들은 데이터가 그렇게 많지가 않아서 이 방법이 가능했지만 신작과 완결은 몇천개라서 스크롤이 밑에 닿으면 흰 화면과 함께 Minified React error가 뜨는 문제가 발생했다. Minified React Error? "Maximum update dep..

1월 6일부터 20일까지 약 2주간 진행했던 프롱이들의 첫 팀 프로젝트가 끝났다. 프로젝트가 끝나고 바로 쓰려고 했지만, 구현하고 싶었던 좋아요 기능 리팩터링과 설 연휴 때문에 이제야 쓰게 되었다. 목차 HIT이 뭔가요? 기술 스택 와이어프레임 기능 구현 마치며 HIT이 뭔가요? How about IT의 줄임말로 IT기기 리뷰 서비스다. 처음엔 "리뷰잇"으로 시작해서 "이거어때?" => "How about IT" => "HIT" 으로 이름이 진화했다. (3depth 이상으로 깊이 생각하는 우리 나영팀..⭐) 데브코스의 프로젝트 요구사항이 소셜 네트워크 서비스를 만드는 것이였고, 개발자 지망생인 우리들도 "이 서비스는 사용하겠다." 싶은걸로 주제를 선정했다. 기술 스택 HIT의 기술 스택은 다음과 같다. ..

자바스크립트는 싱글스레드 언어이다. 스레드(Thread)란? 즉, 자바스크립트 엔진의 Call Stack이 하나밖에 없음을 의미하고 동시에 하나의 작업만 할 수 있다는 뜻이다. 하지만 자바스크립트로 쓰여진 웹사이트들을 보면 HTTP요청, 버튼 클릭, 애니메이션 실행 등 여러가지 일을 한번에 처리한다. 그럼 하나 작업할 때 30초씩 걸리는 작업을 실행한다면 화면엔 로딩창만 주구장창 보이게 될 것이다. 다행히 브라우저에서 Web API를 제공하기 때문에 이런 현상들은 보이지 않는다. 싱글스레드인데 이런 여러가지 일을 할 수 있는 동시성처럼 동작하는 이유를 알기 위해 먼저 이벤트 루프에 대해 알아야한다. 이벤트 루프 함수를 호출하면 Call Stack에 쌓이게 되고 이는 말 그대로 스택구조로 쌓이며 LIFO(..

프로그래머스 데브코스에서 API를 활용한 팀 프로젝트를 진행했다. 우리팀은 IT기기 리뷰 사이트를 주제로 HIT(How about IT)이라는 서비스를 개발했다. 나는 여기서 상세페이지를 맡아서 개발을 진행했고, 상세페이지의 기능은 다음과 같다. 리뷰 게시글 상세보기 (사진, 글쓴이, 제목, 내용, 작성일, 댓글 목록 출력) 리뷰 게시글 좋아요 / 좋아요 취소 리뷰 게시글에 댓글 작성 / 삭제 물론 로그인을 했다는 가정하에 위 기능들을 이용할 수 있고, 댓글은 내가 쓴 댓글만 삭제가 가능하도록 구현했다. 타입스크립트와 리액트로 개발을 했는데 타입스크립트로 개발해본 경험이 없어서 타입선언 부분에서만 조금 해매고 다른 부분들은 크게 어려움 없이 개발했다. 하지만 좋아요 기능에서 상당히 거슬리는 현상이 있었는..

실행 컨텍스트 (Execution Context) 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 즉, 실행 가능한 코드가 실제로 실행되고 관리되는 영역이라고 할 수 있다. 실행 컨텍스트가 활성화가 되면 다음과 같은 현상이 발생한다. 호이스팅 발생 외부 환경 정보를 구성 this 값을 설정 실행 컨텍스트의 구성 var x = 10; function outer() { var y = 10; function inner() { var z = 10; } inner(); } outer(); 다음과 같은 코드가 있을때 실행 과정을 보면 최초 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 생성 outer 함수가 실행, outer에 대한 실행 컨텍스트가 생성 outer안에 있는 inner함수가..

HTTP는 Hypertext Transfer Protocol의 약자로 처음엔 하이퍼텍스트 문서(링크를 통해 서로 다른 문서들을 연결한 문서)를 주고받기 위해 설계되었다. 그리고 최초의 HTTP는 오직 HTML문서만 주고 받을 수 있었다. HTTP의 역사 1989년에 팀 버너스리와 CERN기관의 연구자들이 연구를 하면서 논문을 읽을 일이 잦았는데 논문에 첨부된 참고 문헌을 일일이 찾기가 번거로운 문제가 있었다. 이런 문제를 해결하기 위해 문서를 링크로 연결할 수 있는 HTML이라는 문서 양식을 개발하였고, 네트워크를 통해 이 HTML을 주고 받을 수 있도록 고안한 프로토콜이 바로 HTTP이다. HTTP/0.9 HTTP초기 버전에는 버전 번호가 없었는데 이후에 차후 버전과 구별하기 위해 0.9로 불리게 되었..