한땀한땀 코딩하기

1장) HTTP 개관 HTTP: 인터넷의 멀티미디어 배달부 신뢰성 있는 데이터 전송 프로토콜 웹 클라이언트와 서버 가장 흔한 클라이언트는 웹브라우저 리소스 정적 파일 & 동적 파일 꼭 파일이 아니라 검색엔진, 웹 게이트웨이 등도 리소스로 볼 수 있다 미디어 타입 MIME (Multipurpose Internet Mail Extensions) 은 원래 각기 다른 전자메일 시스템 사이에서 메시지가 오갈 때 겪는 문제점을 해결하기 위해 설계되었다. HTTP에서도 멀티미디어 콘텐츠를 기술하고 라벨을 붙이기 위해 채택. 웹 서버는 모든 HTTP 객체 데이터에 MIME 타입을 붙인다. 주타입과 부타입을 기술하는데 / 로 구분한다 text/html, image/jpeg, video/quicktime(애플 퀵타임 동영..

Cache-Control HTTP 완벽 가이드를 캐시 챕터를 읽으면서 header에 대해 처음으로 고민하면서 읽게 되었는데, 스터디를 하면서 재미있는 질문과 논의가 나온 거 같아 정리해보면 좋을 거 같아 글을 작성하게 되었습니다. E-tag 등도 캐시에서는 빼놓을 수 없는 헤더지만, 이번 글에서는 Cache-Control 필드에 해당하는 네 가지 디렉티브를 중심으로 정리해보려고 합니다. no-store no-cache max-age must-revalidate no-store no-store 디렉티브는 캐시에 응답을 저장하는 것을 금지합니다. 말 그대로 아예 저장(store)을 하지 않는 걸 의미합니다. 캐시를 하지 않는다, 라고 하면 당연히 이런 옵션만 있을 거 같은데 no-cache라는 디렉티브가 따..

Storybook? Storybook은 컴포넌트 단위로 나뉜 UI를 프로그램과 별개로 띄워서 확인해볼 수 있게 해주는 일종의 테스트 도구입니다. 리액트 컴포넌트를 개발할 때, props나 상태 값에 따라 디자인부터 기능까지 달라질 수 있는데, 이를 매번 실제 개발하고 있는 페이지에 심어서 테스트하는 것은 번거롭고 놓치게 되는 부분이 많습니다. 제가 Storybook을 사용하면서 느꼈던 장점들은 이렇습니다. 개발 중인 화면과 분리하여 UI를 확인 및 테스트 가능 props 값에 따라 달라지는 모든 형태를 기록해둘 수 있어 디자인 docs 작성 + 개발을 한번에 처리 가능 디자이너와 협업 시 개발 상태를 공유 가능 Jest (React Testing Library)와의 차이 기존에 컴포넌트 테스트를 Reac..

SameSite vs SameOrigin 웹 개발을 공부하다 보면 origin이 달라서 발생하는 CORS 관련 이슈를 접하는 일이 잦습니다. 이와 관련해서는 일전에 포스팅으로 한번 정리한 적도 있습니다. 그러나 최근 스터디에서 쿠키와 관련된 이야기가 나오면서 그렇다면 쿠키는 same origin일 때만 세팅할 수 있는가, 라는 질문이 나왔는데 MDN의 쿠키 세팅 설명에 따르면, 아무것도 세팅하지 않은 상태에선 동일한 호스트(서브도메인도 제외)만 허용한다고 합니다. 이와 관련한 부분은 Domain 옵션인데, 이곳에 특정 호스트를 명시하게 되면 오히려 해당 호스트의 same-site를 모두 허용해줄 수 있기 때문에 더 제약이 없어집니다. 쿠키와 관련해선 별도의 포스팅을 할 필요가 있을 것 같아 이번 포스팅에..

npm install의 그것 최근 Vue로 작업을 하던 중 작성하던 코드의 컴포넌트를 다른 사람들과 공유하는 방법이 뭘지 의문이 생겼습니다. 어떤 사이트를 배포하여 여러 사람들이 접근하게 하는 것은 늘 익숙한 일이지만, 그 중 일부의 기능만을 재사용할 수 있는 형태로 배포하려면 제가 아는 선에서는 라이브러리로 배포하는 방법이 가장 익숙했습니다. npm 패키지가 이런 맥락의 것이라는 사실은 잘 알고 있었지만, 늘 가져다 사용하기만 한 입장에선 굉장히 복잡한 프로세스가 있다고 생각했었습니다. 뭔가 저와 다른 차원의(?) 개발자들만이 범접할 수 있는 영역이란 생각이 들었었는데, 어떤 의미로는 맞기도 합니다 (제가 오픈소스를 만든 것은 아니기 때문에...). 하지만 npm 패키지 자체를 만들어 올리고 공개하는 ..

동공 지진, 그 시작 자바스크립트를 이용해 본격적으로 웹 개발에 입문할 때, 주기적으로 세뇌(?)당하는 이야기가 있는데 바로 자바스크립트가 싱글 스레드 기반의 언어라는 것입니다. 취업 준비하면서도 종종 나오는 주제 중 하나로 언급되고, 관련한 문제도 봤던 기억이 있습니다만, 도대체 이게 왜 자꾸 강조가 되는지 마음속으로 받아들이지 못했던 것 같습니다. 무엇보다 싱글 스레드라면 굉장히 제한적일 거 같은데 가능한 것들 중에는 이런 질문들이 있었습니다. 비동기는 어떻게 가능한 것인가. 동시에 두 가지가 동작하려면 멀티 스레딩을 해야한다고 배웠는데! 그럼 node 기반의 서버는 무조건 하나의 스레드에서만 동작한다는 뜻일 텐데 느리지 않을까? 아쉽게도, 아니 정확히는 이 질문에 대해 이해를 시켜주기에는 넓은 영역..

CORS 그 첫 만남 최근 프로젝트를 진행하면서 또 마주친 것이 있으니 바로 CORS 정책입니다. GET 요청은 문제없이 보내져서 막연하게 생각하고 넘어갔지만, POST 요청이 시작되면서 브라우저가 이런 경고창을 띄우기 시작했습니다. 이 오류 메시지는 프론트와 백의 서버를 분리하여 배포하면서부터 처음 접했었는데, 이렇게 잊을만하면 마주치게 되는 것 같습니다. 웹 브라우저 기반으로 작업하는 프론트엔드 개발자라면 늘 신경 쓰고 백엔드 개발자와 소통해야 하는 부분이지 않나 싶습니다. CORS 경고 메시지 위의 오류 메시지를 읽어보면 브라우저의 오리진으로부터 서버로 보내는 XMLHttpRequest 요청이 CORS 정책에 의해 막혔다고 안내하고 있습니다. preflight request의 응답에 Access-C..

페이지는 누가 렌더 하는가? 리액트를 공부하다 보면 접하게 되는 용어 중 CSR(Client-Side Rendering)이 있습니다. 이름 그대로 클라이언트 측에서 렌더링을 하는 것인데, 이것이 정확히 무슨 의미일까요? 이와 비교되어 항상 등장하는 다른 용어로는 SSR(Server-side Rendering)이 있는데 둘은 어떻게 다를까요? 이를 설명하기 위해선 다양한 방법이 존재하겠지만, 이번 글에서는 간단하게 Next.js를 사용해보면서 Next.js가 제공하는 data-fetching 함수와 연결하여 설명해보려고 합니다. Next.js란? Next.js by Vercel - The React Framework Production grade React applications that scale. Th..

서버 API 나왔나요? 네? 아직 없다고요? 아직 기업 규모의 프로젝트를 경험해보진 못했지만, 웹 서비스를 만들게 되면 크게 프론트엔드 개발자와 백엔드 개발자로 나누어져 작업을 했습니다. 서로 처음 기획 단계에서 도란도란 어떻게 통신할지, API는 어떤 것이 필요한지 논의를 한 뒤 각자 할 수 있는 걸 열심히 뚝딱뚝딱 만들어갑니다. 그러다 프론트엔드 개발자는 이제 api로 데이터를 받아와 화면에 출력하는 작업을 하고 싶어집니다. 그래서 백엔드 개발자에게 물어봅니다. '서버 API 나왔나요?' '아 아직 완성이 안 돼서 없는데요...!' 없더라도 침착하자 사실 당연한 상황이라고 생각합니다. 서버나 API가 미리 갖춰진 프로젝트에 새로이 프론트가 붙는 것이 아니라 무언가 바닥부터 만들기 시작했다면 어떻게 보..

Snippet이란? VS Code를 사용해보면 종종 무의식 중에 사용하는 자동완성 코드가 많습니다. 개인적으로 프론트엔드 개발을 하면서 종종 사용한 것들이 rsc, for 등인데, 해당 문자열만 입력하면 VS code가 자동으로 템플릿을 불러올 수 있게끔 드롭다운 메뉴*가 등장합니다. 대표적으로 리액트를 사용하면서 rsc 스니펫을 불러오면 아래와 같이 코드 템플릿이 완성됩니다. IntelliSense VS Code에서 드롭다운 메뉴처럼 자동완성을 통해 코드 작성을 도와주는 기능 전반을 IntelliSense라고 부릅니다. 템플릿만이 아니라 변수명, 파라미터, 멤버 자동 완성 등등 다양한 기능을 제공합니다. 이렇게 아주 기본적인 리액트 functional component의 코드가 완성이 됩니다. 즉, s..