사진찍는 웹 개발자의 블로그
- All
- css
- books
- react.js
- 회고
- maker-log
- javascript
- vue.js
- clerk
- mystory
- 생산성
- 트러블슈팅
- feedback
- culture
- opensource
- supabase
- eslint
- growth
- test
- vscode
- nuxt
- pwa
- aws
- vue3
- excel
- vite
- prettier
- php
- tools
- TIL
- CI/CD
- Vue.js
- Backend
- Tools
- serverless
- Node.js
- Storybook
- OpenSource
- Husky
- Nuxt.js
- Github
최근에 내가 구현했던 흔하지 않았던 UI들 모음
프론트엔드 개발자로 일하다 보면 디자이너가 제안한 UI를 구현하는 과정에서 표준 패턴만으로는 해결하기 어려운 상황을 종종 마주치게 된다. 이런 사례들을 해결하다 보면 역시 css 세계는 드넓구나 하는 생각이 들고 css의 가능성에 대해서 더 시야가 트이는 것 같다. 그리고 거기서 찾아오는 성취감은 덤이다. 사례가 아직 많진 않지만 마주할 때마다 이것도 모…
전문가를 위한 리액트 도서 리뷰(한빛미디어)
“한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.” 책 소개 “전문가를 위한 리액트”는 단순히 리액트의 기본 사용법을 넘어 고급 패턴과 성능 최적화, 확장 가능한 아키텍처를 구축하는 방법을 다루는 책이다. 이 책은 리액트를 이미 사용해 본 개발자가 더 깊이 있는 이해와 실무적인 기술을 습득하는 데 초점을 맞추고 있다. …
CSS white-space 속성 적재적소에 활용하기!
웹 개발하면서 white-space 속성은 신경쓰지 않으면 놓치기 쉬운 부분인 것 같다. 계속 필요할 때마다 찾아 봤었는데 머리 속에서 제대로 정리되지 않아서 계속 찾아보게 되는 거 같아 이번에 좀 정리해보려고 한다. 결국엔 각 속성이 어떤 역할을 하고 어떤 상황에서 써야 할지 정리해두는 게 좋을 것 같다. white-space 속성이란? 속성은 텍스트…
Zustand의 shallow comparison으로 최적화하기
Zustand store에서 객체 상태를 구독할 때 비교를 사용하면 불필요한 리렌더링을 방지할 수 있다는 것을 알게 되었다. Zustand의 기본 동작 Zustand는 기본적으로 상태를 비교할 때 Object.is를 사용한다. shallow 비교란? 는 간단한 데이터에 대해서 빠르게 비교할 수 있는 방식이다. 중첩된 객체의 경우에는 내부 속성까지 비교하…
가운데 정렬된 네비게이션 혹은 헤더 grid로 구현하기
UI를 구현하다보면 이런 식으로 가운데 정렬된 네비게이션 혹은 헤더를 구현해야 할 때가 있다. 를 이용해서 가운데 요소를 가운데 정렬하거나 의 사용해서 레이아웃을 구현하기도 한다. 하지만 후자의 경우에는 왼쪽이나 오른쪽 요소가 사라질 경우 레이아웃이 깨질 위험이 있다. 이번 포스트에서는 를 사용해서 구현하는 방법을 알아보려고 한다. HTML 구조 CSS…
테오의 스프린트 18기 참가 후기
들어가며 라는 슬로건으로 운영중인 테오의 스프린트에 드디어 참여했다. 후기 글들과 스프린트 결과물을 보면서 꼭 한번 참여해 보고 싶었는데 항상 시간이 안 맞아서 참여하지 못해서 항상 아쉬웠다. 컨퍼런스 발표를 마치고 숨을 돌리고 있던 와중에 모집 글이 올라와서 다행히 이번엔 참여할 수 있겠다 싶어서 부리나케 지원 폼을 작성했다. 테오의 스프린트란 구글 …
소플의 처음 만난 AWS 리뷰(한빛미디어)
AWS는 처음 접할 때부터 어렵게 느껴졌다. 서비스가 워낙 많기도 하고 공식 문서나 자료를 읽는 것도 쉽지 않아서 공부 과정에서 많은 어려움을 겪었는데, 이 책은 그런 저에게 새로운 길을 열어주었다. 쉽고 친근한 설명 이 책의 가장 큰 장점은 쉽게 풀어 쓴 설명이다. AWS의 기본 개념과 서비스 사용법을 마치 친근한 선생님이 알려주는 듯한 방식으로 전달해…
테오콘(TEOConf 2024) 참가 후기
테오콘 작년 테오콘은 참석하지 못했는데 이번 테오콘은 스피커라서 100% 확률로 참석할 수 있었다. 😎 발표 준비를 하면서 테오님이 이 컨퍼런스를 열게 된 계기를 말씀해 주셨었는데 나도 실제로 컨퍼런스가 끝나고 공허한 상태에서 집에 간 적이 많았다. 머릿속은 발표 내용들로 꽉 찼는데 딱 거기까지였었다. 그래서 이번 테오콘이 기대됐다. 과연 이 문제를 어…
소프트웨어 엔지니어 가이드북(The Software Engineers Guidebook) 리뷰 - 한빛미디어
“소프트웨어 엔지니어 가이드북”. 이 책이 나온다고 했을 때 꼭 읽어보고 싶었는데 운좋게 한빛미디어에서 제공받을 수 있었다. 이 책의 저자는 Pragmatic Programmers의 창시자인 게르겔리 오로스이다. 커리어를 시작한 단계부터 수석 엔지니어까지 커리어 전반에 걸친 포괄적인 가이드를 제공한다. 📑 책의 구성 이 책은 크게 6부로 구성되어 있다: …
[I in We x AWS] Mentoring Program 2024 후기
[I in We x AWS] Mentoring Program 2024 후기 이번달은 유난히 바빴다. 항상 일을 벌여 놓으면 한번에 몰려 오더라. 컨퍼런스 발표 준비와 멘토링이 겹치니 한달동안 퇴근 후에도, 주말에도 카페에 가면서 달렸다. 멘토링 시작할 때 쯤에 자취생의 야매요리도 시작했는데 그것도 이젠 잠시 쉬고 있다. 💡 드디어 고민 해소 정신없이 하루…