한땀한땀 코딩하기

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

공식 문서 https://developer.chrome.com/docs/devtools/console/ Console console.log 만이 아니라 console.warn, console.error를 이용해 메시지를 출력하고 필터를 적용하여 개발자 도구에서 확인할 수 있다 console.table을 이용해서 표 형태로 출력할 수 있다. 속성이 여러 개인 객체의 배열인 경우 유용하다 console.group: 여러 console 메시지를 묶어서 출력 console.count: 해당 함수가 몇 번 호출되었는지 출력 console.time, console.timeEnd: 호출이 시작된 시간과 끝 시간을 출력 관련된 공식 문서 live expressions 반복적으로 찍어보고 있는 값이 있다면 live ex..

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

상반기가 이렇게 또… 벌써 정신을 차려보니 달력이 6월로 바뀌어있네요. 앞으로 현충일 이후로는 광복절까지 휴일이 없다는 슬픈 현실을 자각하면서 상반기 반성 및 회고를 작성해보려고 합니다. 올 상반기는 3월까지는 일이 바빴던 것도 크고 개인적으로 큰 일들이 많이 생기면서 사실상 업무 외적인 개발이나 관련 공부에 많이 소홀했지 않나 싶습니다. 일을 하면서 트러블슈팅 위주로 많이 기록을 해보고 싶었는데, 아직도 산발적으로 해결한 이슈들을 어떻게 정리하면 좋을지 어려운 거 같습니다. 해결을 하고 나면 그때그때 바로 정리를 해야 잊지 않고 기록을 남길 수 있는데, 귀찮음 + 다른 이슈 해결 같은 문제들이 발목을 잡지 않았나 싶습니다. 그래서 막상 글또를 하면서도 처음 의도한 잘 정리된 글은 작성하지 못했던 거 같..

chatGPT, 나도 활용해볼 수 있을까? 업무와 업무 외적으로도 최근에 chatGPT를 굉장히 잘 사용하고 있습니다. 코드를 물어보기도 하고, 무엇보다 아이디어를 얻기 위해서 많이 사용하고 있었는데요, 정작 직접 Open API를 호출해 본 적이 없다는 걸 깨달았습니다. 이제는 이런 생성형 AI가 활성화되면서 내가 직접 백지부터 창조해 내는 것보다 AI를 활용하여 모든 것을 만들어가는 방향으로 변화할 거 같다는 생각이 듭니다. 그래서 일단 시작을 해보자는 마음으로 간단하게 ‘긍정 확언’을 자동으로 생성하는 페이지를 만들어보았습니다. (매번 유튜브에서 긍정 확언 영상들을 찾다가 그냥 새롭게 생성해주는 사이트가 있으면 좋겠다 싶었습니다 😂) 코드는 공식 예제에서 제공하는 레포에서 config와 프롬프트만 ..

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

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

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

UI 컴포넌트는 어떤 테스트를 붙여야 할까? 최근에 리액트 기반의 UI 라이브러리를 만들 일이 있었습니다. 서비스와는 다르게 특정 페이지가 있는 것이 아니기 때문에, 컴포넌트를 만들 때마다 화면에 그려보기 위해 선택한 도구는 평소에 애용하던 Storybook이었습니다. 서비스와 분리하여 시각적으로 UI를 확인하기엔 최적의 도구라고 생각하는데, 한 가지 고민은 코드 레벨에서의 테스트였습니다. 특히, 단순 기능 동작이 아닌, 스타일이나 스크롤 같은 변화를 감지할 필요가 있었는데, jest나 react-testing-library에서는 이런 부분이 정확히 확인이 어려웠습니다 (이미 작성한 스토리를 재활용하여 테스트를 붙일 수 있게 해주는 testing-react addon). 단순히 값이 변화하는지의 문제보단..

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