본문 바로가기

전체 글

 (44)
점차 느려지는 Count 애니메이션 구현하기 들어가며 우리는 종종 위처럼 느려지는 속도로 숫자를 count하는 애니메이션을 접하게된다. 예를 들어 게임 화면에서 유저가 획득한 포인트를 보여줄 때, 할인된 가격을 안내할 때, D-day까지 남은 일수를 보여줄 때 등등 숫자값을 강조해야하는 상황에서 자주 사용된다. 그럼 이 애니메이션은 어떻게 구현해야할까? 단순한 count 애니메이션을 생각하고 setInterval로 금방 구현하겠네!하며 호기롭게 접근했다가 count 속도를 조절하는 방법이 까다로워 혼쭐이 나 그 여정을 기록해보고자 한다. 해당 기능은 재사용성을 고려해 custom Hook으로 구현했다. 1. setInterval 함수로 Count 애니메이션 구현하기 우선 단순히 숫자를 count하는 애니메이션부터 구현해보자. 숫자를 카운트하는 애니..
JWT(JSON Web Token)과 인증 방식 들어가며 프로젝트를 진행할 때 JWT를 활용한 인증 방식으로 로그인을 구현한 적이 있다. 백엔드 개발자분과 협업을 하며 key값을 맞춰보고, 인증이 완료되었다고 기뻐하던 추억은 선명하지만.. JWT가 무엇인가란 질문에 자신있게 대답할 수 없었다. 추억속의 JWT를 꺼내 등장 배경부터 인증 프로세스, 장단점까지 알아보자. JWT의 등장배경 JWT가 무엇이고 어떤 형태로 사용되는지도 중요하지만, 먼저 그 배경을 알아야 어떤 장점과 특징을 가지고 있는지 제대로 이해할 수 있다. JWT는 어떻게 등장하게 되었을까? HTTP의 특징 : contactless, stateless HTTP는 contactless(클라이언트의 요청이 처리되면 연결이 끊어짐), stateless(서버가 클라이언트의 이전 상태를 저장하지 ..
헤이조이스 여성개발자 컨퍼런스 참가기 현업개발자가 된지 6개월여만에 처음으로 참석해본, 헤이조이스에서 주최한 여성 개발자 컨퍼런스. 각기 다른 곳에서 다른 포지션으로 일하고 계시는 분들의 이야기를 들으며 느낀 점을 정리해본다. '개발자다움'에 갇힐 필요는 없다 평소 패션도 개발자룩으로 여겨지는 체크셔츠와 거리가 먼 편이고, 공부하고 개발하는 것만큼 책읽고 글쓰고 사람들과 이야기하는 것을 좋아하는 비전공자 개발자인 나. '모름지기 개발자라면 ~해야지'라는 편견 속에서 괴리감을 느꼈던 것도 사실이다. 메타 비즈니스 엔지니어 김민혜님 의 강연에서 느낀 건, 개발자는 개발만 해야한다는 편견에서 벗어나면 다양성이 강점이 될 수 있다는 것. 하버드에선 공부만 해서 A+을 받는 학생보다 운동, 동아리도 하면서 A를 받는 학생이 더 훌륭한 학생이라는 이..
commitizen으로 보다 쉽게 commit convention 지키기 들어가며 최근 작은 부분부터 팀문화를 개선하는 데에 관심이 생겼고, 1순위로 눈에 들어온 건 Commit Convention이였다. Commit Convention을 정하고, 앞으로도 계속 지켜나가기 위해 소소한 시스템을 구축한 이야기를 적어보는 글. 문제점 1. 팀원별로 commit style이 통일되지 않았다. (각자 다른 기준으로 정해진 commit Header를 사용했고, 첫글자를 대문자로/소문자로 작성하는지도 차이가 있었다.) 2. commit convention을 정하는 것보다 꾸준히, 혼선없이 지키는 게 어렵다. 해결방안 1. commit의 목적별로 Header를 정해 commit만 봐도 어떤 작업인지 예상가도록 하자. 2. commitizen을 이용해 Header 입력을 반자동화하고, 상세..
Babel을 활용해 별칭 경로 설정하기 들어가며 회사에서 소속팀이 변경되어 지금까지 봐오던 코드와 다른 코드를 보게 되었다. 그러다 눈에 띈 상단의 경로들. 대부분의 경로가 보다 짤막하고 '@디렉토리/디렉토리..' 의 형태로 이루어져있었다. 팀원분께 여쭈어보니 별칭 경로라는 걸 알게되었고, 보다 편리하게 개발할 수 있는 수단이라 생각되어 조금 더 배워보고 정리해본다. 별칭 경로를 사용하는 이유 Javascript/Typescript 환경에서 import 구문을 사용할 땐 보통 상대 경로를 사용한다. 이 때 각 모듈의 디렉토리 depth가 깊어진다면, 아래와 같이 '../'가 반복되는.. 보기만 해도 아찔한 경로를 사용해야한다. import component from "../../../../../../../../../../../../../dir..
Vanilla JS로 구현한 debounce로 성능 최적화하기 debounce란? 주어진 시간 내에 동일한 이벤트가 반복적으로 시행되는 경우, 마지막 이벤트 발생 후 새로운 이벤트가 발생하지않고 제한 시간이 모두 지나면 해당 이벤트가 실행되도록 하는 이벤트 핸들링 기술. 연이은 이벤트를 하나의 그룹으로 묶어주는 역할을 한다. Vanilla JS로 debounce 구현하기 debounce는 lodash 등의 라이브러리를 사용하면 상대적으로 편리하게 구현할 수 있다. 하지만 그 원리를 알기 위해선 한 번쯤 Vanilla JS로 구현해보는 것이 최고의 방법 🔥 Vanilla JS로 구현한 debounce코드는 아래와 같다. const handleDebounce = (callback, limit) => { let timeout; return function (...args..
실행 컨텍스트와 클로저(Closure) 들어가며 클로저는 자바스크립트의 주요 특징으로 뽑히는 개념이지만, 그만큼 애매하고 헷갈리는 개념이기도 하다. 검색하면 수십 수백가지의 자료가 나오긴 하지만, 열 번 읽는 것보다 한 번 정리해서 써보는게 더 빠르게 내 것으로 만들 수 있다고 생각하기에 내 언어로 다시 정리해보는 글. MDN에 클로저를 검색하면 나오는 문장은 아래와 같다. 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 이 문장을 통해 클로저를 알기 위해선 Lexical Environment에 대한 이해가 필요하다는 것을 알 수 있다. Lexical Environment의 토대가 되는 실행 컨텍스트부터 차근차근 알아가며 클로저와 가까워보자. 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경..
나는 어떤 T를 그려나가고 있고, 또 그려나가야 할까 더 좋은 방향으로 성장하고 싶고, 더 잘하고 싶은 마음은 한결같다. 하지만 구체적으로 어떻게 해야할까? 재직중인 회사의 프론트엔드 파트엔 비슷한 연차의 주니어들로만 구성되어 있고, 코드 리뷰를 진행하기 쉽지않은 환경이라 최근 들어 내가 개발하고 또 학습하고 있는 방향이 올바른 것일까 더더욱 자주 고민하게 됐다. 유투브로 이런 저런 영상을 찾아보다 드림코딩을 운영하시는 앨리님의 개발 공부 방법, 개발자 경력관리 영상을 보게 되었는데, (특히 주니어 개발자에게는) 가로로 다양한 스킬을 가지되 T자로 커리어를 쌓고 학습해나가는 것을 추천한다는 내용이였다. 앨리님의 드림코딩 강의 팬으로서 깊이 가슴에 새기며 보았고.. 그렇다면 현재 개발자로서 내 T는 어떻게 그려지고 있는지, 또 어떻게 그려나가야 할지에 대한 ..

티스토리툴바