게으른 개발노트

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

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

프로그래머스 데브코스에서 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로 불리게 되었..

CORS CORS은 Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유이다. CORS란 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 쉽게 얘기하자면, 동일한 출처가 아닌 다른 출처에서 데이터를 주고 받는 것을 허용하는 정책이다. CORS의 반대 개념으로는 SOP(Same-Origin Policy) 동일 출처 정책이 있다. SOP 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식이다. 즉, SOP는 웹 브라우저에서 보안을 강화하기 위하여 동일한 출처에서만 리소스를 주고 받도록 하는 정책이다. COR..

동기화(Synchronization)란 공유자원의 일관성을 유지하는 것이다. 그렇다면 프로세스 동기화란 여러 프로세스가 공유하는 자원의 일관성을 유지하는 것이라고 볼 수 있다. 프로세스 동기화의 시작은 경쟁 상태(Race Condition)와 임계 구역(Critical Section)에 대한 이해부터 시작한다. 경쟁 상태 (Race Condition) 경쟁 상태란 여러 프로세스들이 동시에 데이터에 접근하는 상황에서, 어떤 순서로 데이터에 접근하느냐에 따라 결과 값이 달라질 수 있는 상황을 말한다. 쉽게 말해서, 다수의 프로세스 혹은 스레드가 동기화 없이 공유 자원에 접근하려는 현상이다. 이런 현상에서 데이터의 불일치 문제를 발생시킬 수 있다. 따라서 일관성을 유지하기 위해 동기화가 필요하다. 경쟁 상태의..

뭐했다고 벌써 2개월이..? 1차 단위기간 회고 쓴지 얼마 안지난 것 같은데 벌써 2차 단위기간이 끝이다. 😥 저번달에 적응도 했겠다, 확실히 과제도 많아지고 강의 시간도 길어져서 몇배는 바쁘게 지냈던것같다... 사실 어제까지 Vue 과제 부랴부랴 제출하고 이제야 한숨 돌리면서 밀린 회고들을 쓰고 있다. 꿀같은 3일간의 방학(?)을 활용해서 2차 단위기간 회고를 해보고자 한다. 목차 바닐라JS 노션 클론 프로젝트 완성! 과제지옥 CS 기술 면접 스터디 굿바이 재호팀 바닐라JS 노션 클론 프로젝트 🍦 4주차 과제 겸 개인 프로젝트로 지금까지 배웠던 바닐라JS를 활용하여 노션을 클론하는 프로젝트였다. 2주 넘는 시간동안 로토님 강의와 함께 바닐라 자바스크립트 기본 역량 강화를 했고 노션 프로젝트를 하기 위한..