한땀한땀 코딩하기

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으로만 번들을 했었습니다. 막상 일을 시작하고 실제로 라이브러리를 만드..

최근까지 Storybook 6 버전을 사용하다가 7 버전 마이그레이션을 살펴보던 도중, Vite 또한 스토리북의 빌더로 사용이 가능한 것을 알게 되었습니다. Vite가 빠르고 사용하기 편하다, 등의 이야기는 많이 접하고 있었는데, 구체적으로 어떤 면에서 유리한지를 스토리북, Vite의 공식문서를 보면서 가볍게 정리해 보았습니다. Vite Vite Vite는 개발 서버 시작 속도를 개선한 바가 있는데, 이는 의존성과 소스코드를 분리하기 때문이라고 합니다. 의존성 - esbuild를 이용하여 사전에 번들링 합니다. esbuild는 Go로 작성되어 있어 JS 기반의 번들러보다 속도 면에서 유리합니다. 소스코드 - 브라우저가 번들러의 역할을 대신하는 느낌으로, 요청이 있는 경우에만 코드를 변환하여 제공합니다. ..

문제 어떤 배경 상황이 있을지는 사람마다 다르겠지만 HTML img 요소에 src의 값이 빈 문자열인 경우 대체 이미지를 띄우고 싶은 상황이 있다고 가정해 봅시다. 대체용 이미지를 만들어두고 집어넣을 수도 있겠지만 제 경우 별도로 파일을 관리하기도 귀찮았고, inline으로 이미지의 사이즈가 주어지는 경우도 있어 고정된 사이즈의 이미지를 사용하면 비율이 엉망이 될 가능성이 높았습니다. 검색과 chat GPT의 도움을 받아 방법을 찾아보던 중, 단지 css 만으로도 이 문제를 해결할 수 있다는 놀라운 사실을 알게 되어 글을 작성해보려고 합니다. 물론 세련된 디자인을 원하신다면 적절하지 않을 수도 있으나 정적 파일이나 JS 조작이 없다는 점에서 다른 비슷한 문제 해결에도 참고가 될 수 있을 거 같습니다. 코..

14장) 보안 HTTP HTTP를 안전하게 만들기 안전한 http를 만들기 위해선 다음과 같은 고려사항들이 있다. 서버 인증: 위조된 서버가 아님을 인증 클라이언트 인증: 위조된 클라이언트가 아님을 인증 무결성: 데이터 위조 방지 암호화: 도청에 대한 걱정 없이 대화 효율: 저렴한 클라이언트 & 서버를 지원하는 빠른 알고리즘 편재성 (Ubiquity) 관리상 확장성: 누구나 어디서든 즉각적인 보안 통신 가능 적응성: 현재 알려진 최선의 보안 방법 지원 사회적 생존성: 사회적, 문화적, 정치적 요구 만족 HTTPS HTTPS는 HTTP의 하부에 전송 레벨 암호 보안 계층을 제공하며, 이 보안 계층은 안전 소켓 계층 (SSL) 혹은 그를 계승한 전송 계층 보안 (TLS)를 이용하여 구현된다. 어려운 인코딩,..

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

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 패키지 자체를 만들어 올리고 공개하는 ..