한땀한땀 코딩하기

css-in-js 와의 첫 만남 프론트엔드 개발에 입문했던 시기에 리액트와 함께 모두가 사용하던 것이 있었으니 바로 styled-components였습니다. 솔직하게 고백하자면 그때는 왜 쓰는지를 크게 고민하지 않고 모두가 사용한다는 점과, JS 파일에 같이 스타일을 작성해서 관리한다는 점이 좋아 보여서 사용했던 기억이 있습니다. 그리고 막연하게 이 좋은 걸 두고 왜 굳이 힘들게 css 파일을 따로 만들고 클래스 형태로 적용하는지 이해를 못 했습니다. 그러다 일을 시작하고 2년 정도 이런저런 형태를 많이 보다 보니 css-in-js가 마냥 정답은 아니라는 생각이 들었습니다. 특히 제가 속한 팀에서는 scss modules를 많이 사용하고 있는데요, 사용해 보니 의외로 관리가 편하고 마크업, 퍼블리싱 쪽과..

크롬 개발자 도구: Memory 최근에 코드 내 메모리 사용량을 알아보던 도중 크롬 개발자 도구 문서에서 메모리 관련 용어를 정리해 둔 것을 발견하여 가볍게 읽어보았습니다. 생각보다 V8 엔진에 대해서 알아야 하는 것도 많고 생소한 용어도 많아서 간단하게 이해한 부분과 더 학습이 필요할 거 같은 부분을 정리해 보았습니다. Memory terminology - Chrome Developers Object Sizes 생성되는 객체의 사이즈는 heap profiler에서 확인이 가능한데, shallow size와 retained size가 있습니다. shallow size: 객체가 직접 안고 있는 메모리 크기 보통 배열과 문자열이 shallow size가 크다고 합니다. 또한 주 저장소가 renderer me..

번들러 번들링은 JavaScript와 프론트엔드의 생태계에서 빼먹을 수 없는 큰 요소라고 생각합니다. 번들링과 모듈 개념만 두고 공부해 보면 거의 웹 개발의 역사를 훑게 되다 보니 항상 공부할 엄두가 잘 안 나기도 합니다. 코드 번들링을 정의한다면, 어플리케이션이 돌아가기 위해 필요한 모든 코드와 파일을 효율적으로 합치는 작업이라고 볼 수 있습니다. 이런 작업이 필요한 이유는 애플리케이션 개발에는 외부 의존성도 많이 쓰이고, 개발의 편의를 위해 여러 파일로 나눠둔 코드를 실행을 위해서 하나로 합치는 것이 리소스 면에서 효율적이기 때문입니다. 제가 처음 공부를 할 때는 번들러가 이렇게 다양한지 몰랐고, 근본이라 볼 수 있는 Webpack으로만 번들을 했었습니다. 막상 일을 시작하고 실제로 라이브러리를 만드..

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

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

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

HTTP란? 개발을 공부하기 한참 전부터 웹서핑을 하다 보면 HTTP라는 단어는 심심치않게 목격했던 기억이 납니다. 늘 인터넷 주소 앞에 붙어있었지만, 주소창에서나 잠시 보고 넘길 뿐, 실제로 주소는 www로 시작했다 보니 깊게 생각을 하지 않았던 것 같습니다. 웹 공부를 시작하고나서야 HTTP라는 것의 존재가 확 다가오기 시작했는데, 대충 웹 세계에서의 통신 규약/프로토콜 정도로만 간단하게 이해하고 넘어갔던 것 같습니다. 그런데 막상 생각해보니 누군가 제게 http가 뭐야,라고 물었을 때 '그냥 인터넷 통신 프로토콜 중 하나야' 라고 대답을 할 수는 없지 않나 하는 생각이 들어 한번 정리를 하면 좋겠다는 생각에 다다랐습니다. HTTP는 OSI 7 계층과 TCP/IP를 기준으로는 애플리케이션 레이어 속하..

웹 개발과 관련된 JD를 살펴보면, REST API 제작 경험을 요구하는 경우가 종종 있습니다. 서버가 직접 템플릿을 이용해서 필요한 데이터를 넣은 뒤 화면을 출력해주는 SSR(Server-side Rendering)과 반대된다고 말하기엔 무리가 있지만, 아무래도 사용자가 보는 화면을 누가 담당하느냐의 기준에서 차이가 나기에 서로 비교의 대상이 되는 것 같습니다. 간단하게 생각해서 SSR은 서버가 데이터를 직접 찾아 넣어준다면, REST API는 클라이언트와 서버 쪽이 분리되어 서버는 클라이언트가 필요해서 http 형식으로 요청한 내용을 json 같이 약속된 형태로만 전달하고, 이를 가지고 클라이언트는 별도로 작업을 하여 사용자에게 제공하게 됩니다. RESTful API 사실 REST API를 찾아보면 ..

웹 사이트의 이름? 우리는 평소에도 큰 고민 없이 인터넷에 소위 말하는 '주소'를 이용하여 접근하고 있다. 모든 서버나 서비스는 고유한 주소를 가지고 있는데, 이는 보통 숫자로 된 ip 주소로 구성되는데, 이걸 인간이 이해하기 쉽게끔 문자로 표현하고 이를 연결 지어주는 것이 dns 서버의 역할이라 할 수 있다. 그래서 그런지, 우리는 꼭 개발자가 아니더라도 url이라는 표현을 일상적으로 사용하는데, 일전에 회사에서 URI라는 단어를 처음 접하고 굉장히 당황했던 기억이 난다. 선배들이나 동료들에게 물어봐도 그냥 url이랑 비슷한 거예요, 라고만 대답이 돌아왔는데 최근에 다시 접하게 되어 기회가 닿은 김에 정리를 해보았다. URI vs URL vs URN URI: Uniform Resource Identif..