들어가며 개발자 글쓰기 커뮤니티 글또 9기 활동 중, Udemy의 React Query/TanStack Query : React로 서버 상태 관리하기 강의를 협찬받아 수강했다. Tanstack Query는 React를 사용하는 프로젝트에서 서버 상태 관리를 위해 거의 필수적으로 사용하고 있는 라이브러리인 만큼 중요도가 높고, 현재 실무에서 사용하고 있지만 그때그때 필요한 기능을 공식문서에서 찾아 활용해본 정도라 강의로 들으면 더 탄탄하게, 미처 놓쳤던 부분도 알아갈 수 있을 것 같아 수강하게 되었다. 강의 목차 강의는 아래의 순서로 진행되고, 외국인 강사분이 영어로 진행하기에 한글 자막이 제공된다. 쿼리 생성 및 로딩/에러 상태 페이지매김, 프리페칭과 변이 동적 데이터 로드를 위한 무한 쿼리 더 큰 앱에서의 React Query:설정,집중화,커스텀 후크 쿼리 특성 1:프리페칭과 페이지 매김 쿼리 특성 2:데이터 변환과 데이터 리페칭 React Query와 인증 변이(Mutation…

본 글은 원글 patterns - HOC Pattern을 학습용으로 번역한 것입니다. 고차 컴포넌트 패턴 애플리케이션에서 여러 컴포넌트에 동일한 로직을 사용하고자 할 때가 있습니다. 이 로직에는 컴포넌트에 특정한 스타일링을 적용시키는 것, 권한 요구, 전역 상태룰 추가하는 것 등이 포함될 수 있습니다. 여러 컴포넌트에서 같은 로직을 재사용할 수 있도록 하는 방법 중 하나는 고차 컴포넌트 패턴을 사용하는 것입니다. 이 패턴으로 애플리케이션 전체에서 컴포넌트 로직을 재사용할 수 있습니다. 고차 컴포넌트(HOC)는 또다른 컴포넌트를 전달받는 컴포넌트입니다. 고차 컴포넌트는 매개변수로 전달하는 컴포넌트에 적용시키고자 하는 특정 로직을 포함하고 있습니다. 해당 로직을 적용한 후, 고차 컴포넌트는 추가적인 로직이 포함된 요소를 반환합니다. 애플리케이션에서 여러 컴포넌트에 특정한 스타일링을 추가하고 싶다고 가정해봅시다. 매번 로컬에서 style 객체를 만드는 대신, 전달하는 컴포넌트에 …

본 글은 원글 patterns - Compound Pattern을 학습용으로 번역한 것입니다. 들어가며 라는 문장에 깊은 감명을 받았던 최근.. patterns에 정리된 패턴 하나하나를 뽀개보려 한다. 원문 자체가 단순한 영문으로 이루어져 있지만 이해한 후 다시한번 정리해내는 경험 또한 유익할거란 생각. 첫 주자는 ! Compound Pattern 우리의 애플리케이션엔 종종 서로 관련된 컴포넌트들이 있습니다. 이것들은 공유된 상태를 통해 서로 의존하고, 로직을 공유합니다. 이는 select, dropdown, menu item과 같은 컴포넌트에서 자주 볼 수 있습니다. compound component pattern을 사용하면 특정 작업을 수행하기 위해 함께 작동하는 컴포넌트를 만들 수 있습니다. Context API 예를 들어봅시다: 우리는 다람쥐 사진 목록이 있습니다! 단순히 다람쥐 사진을 보는 것을 넘어서, 우리는 유저가 사진을 수정하거나 삭제하는 버튼을 추가하고자 합니다. …

HTTP 캐시 웹 브라우저가 서버로부터 받은 데이터를 일시적으로 저장하는 공간을 HTTP 캐시라고 한다. 캐시는 데이터,값을 복사해 임시로 저장하는 장소를 가르키고 AWS에 따르면 다양한 유형이 있다. (데이터의 복사본을 저장하는 장소는 캐시, 캐시에 복사본을 저장하고 있다가 요청시 제공하는 과정 전체는 캐싱이라 한다.) 다만 조건부 요청 헤더와의 상호작용에 대한 이 글에선 HTTP 캐시(웹 캐시)만 다룰 예정. HTTP 캐시는 웹 서비스 성능 최적화에 도움을 주는데, 이미지나 자바스크립트 파일 등을 매번 다운로드하지 않고 복사본을 캐시에 저장해 두었다가 이후의 요청에 (유효시간 검증 후)캐시의 리소스를 사용할 수 있기 때문이다. 우리가 어떤 페이지에 처음 진입할 때와 n번째 진입할 때의 로딩 속도가 차이나는 이유도 여기에 있다. HTTP 캐시는 주로 HTTP 헤더를 통해 제어되는데, 대표적인 헤더는 아래 정도가 있다. : 캐시의 유효시간을 초 단위로 설정하거나 (max-age)…

2024년 첫 주를 마무리하며 돌아보는 2023년. 기억에 남는 키워드를 중심으로 회고를 작성해 본다. 메인 기능 릴리즈, 이슈&해결 시설관리 서비스의 신규 메인 기능으로 사진을 첨부해 이슈를 등록하고, 해결하는 일종의 신문고와 같은 기능을 개발했다. 하나의 모달 안에서 이슈 조회/해결/수정이 모두 이루어져야 했고, 각 상태에 따른 모달 구조가 비슷하지만 조금씩 달랐다. 이슈 등록도 유사한 형태였기에 모달 내부는 각 상태에 따라 세부적으로 달라지는 컴포넌트들을 조합해 개발했다. 이때 다양한 상태에 대응하기 위해 어떻게 하면 각 컴포넌트의 재사용성을 최대한 높일 수 있을까 고민하며 비즈니스 로직을 컴포넌트 외부로 빼내려 고민했다. 이 덕분인지 개발 기간 끝 무렵 기획이 자잘하게 계속 변경되었는데 큰 혼선 없이 대응할 수 있었다. 모든 기능은 사진 첨부/삭제/다운로드를 지원했는데, 이때 첨부된 사진을 개별/압축 다운로드하는 이미지 뷰어도 함께 개발했다. 최근 새롭게 담당하는 서비스에…

들어가며 업무 중 react-hook-form을 사용하다보니 공식문서에 기재된 best practice뿐만 아니라 이런 저런 방법으로 응용이 필요했다. 나름의 방법으로 고심해보며 중간중간 드는 궁금증들은 실제 구현된 코드도 찾아보며 해결해보기도 했다. 그 여정을 간단히 기록해보는 글. react-hook-form은 앞으로도 계속해서 사용할테니 아래 내용은 더 추가될 예정. 서로 다른 컴포넌트에서 form 상태 공유하기 한 파일 안에 모든 input이 존재해 form data가 관리되는 형태라면 큰 어려움이 없겠지만, component 단위로 개발하는 react 특성상 form data를 공유하는 여러 component가 존재할 수 있다. React Hook Form은 React의 Context API를 활용해 서로 다른 컴포넌트 간에도 form의 상태를 공유하는 custom hook 와 컴포넌트를 제공한다. 각각 코드로 살펴보자. FormProvider, form 태그 외부에서…

들어가며 준비 없이 갑작스레 맞닥뜨린 구조조정 이후 어느새 3개월이란 시간이 흘렀다. 사내 구성원 중 30% 정도가 퇴직 절차를 밟게 되었고, 그 외에도 조직 구조에 크고 작은 변화가 생기게 되었다. 그 변화는 내게 좀 더 직접적으로 작용했다. 애정을 가지고 함께 키워나가던 신규서비스팀에서 다른 서비스팀으로 이동하게 된 것. 하루아침에 다루는 서비스와 협업하는 인원이 바뀐 상황이 당황스럽기도 했고, 개인적으로 가까이 지내던 분들이 대부분 퇴사하시게 되며 회사생활의 의욕도 다소 떨어졌다. 물론 회사는 일을 하는 곳이지만, 좋은 동료도 이 회사의 복지다라고 생각하며 주변 분들과 즐겁게 회사 생활을 했던 터라 심리적 타격이 있었다. 부정적인 감정에 마냥 잠식되어 버리기 전 우선 지금 내가 할 수 있는 것에 집중하자라는 생각을 하며 서서히 변화를 받아들여갔다. 그렇게 묵묵히 눈 앞에 닥친 것들을 해결해 나가다보니 시간이 흘렀고, 이렇게 관련된 생각을 글로 적어볼 수 있을 정도로 상황을 객…

들어가며 사이드 프로젝트 결과물을 vercel에 배포하려는데, organization 내부의 팀 repository는 vercel에 배포할 때 과금이 되어 내 개인 계정으로 fork하고 그 repo를 vercel에 올렸다. 그러다보니 팀 repo에 변경사항이 생길 때마다 fork한 내 개인 repo도 fetch해야해서 참으로 번거로웠다. 수익성있는 팀 프로젝트는 과금되는 플랜을 사용해야 하지만, Frontend & Server repo를 묶어두려 organization을 만든거고 말 그대로 hobby project이긴 하니까요..😇 fork한 repo에서 fetch하는 작업을 github action으로 해결할 수 있지 않을까싶어 기웃거리다 자동화에 성공했다. 누군가가 (혹은 미래의 내가 또) 비슷한 고민을 할 수 있다고 생각되어 방법을 정리해보는 글. 편의상 organization repository를 로, 이를 fork한 개인 계정의 repository를 로 표기했다. 환경 변…

올해 2월부터 7월까지, 6개월동안 진행한 글또 8기 활동이 마무리되었다. 글또 개발 직군에 속한 회원들이 일정 금액을 예치하고 2주에 한 번씩 블로그 포스팅 + 인증을 하는 형태로 운영되는 커뮤니티. 직군별로 자체 컨퍼런스, 랜덤 오프라인 만남도 진행된다. 처음엔 기술블로그에 주기적으로 글쓰는 습관을 길러보자라는 패기 반, 6개월이란 시간동안 2주에 한 번씩 꾸준히 포스팅 할 수 있을까란 걱정 반으로 시작했는데 어느새 6개월이 지났다. 그 기간동안 느낀 좋았던 점과 아쉬웠던 점, 그리고 앞으로의 실행 계획에 대해서 적어보는 글. 만족한 점 꾸준히 다양한 주제로 글쓰기 앞서 적었듯이 활동을 시작할 때부터 걱정했던 격주 포스팅. 다행히 과거의 나는 2주 간격으로 꾸준히 포스팅을 해나갔고 예치금 차감없이 활동을 마무리지을 수 있게 되었다 🥳(물론 주어진 패스권 2회도 야무지게 활용했다.) 글또 활동을 하며 작성한 글 unicode-range로 언어(문자)에 따라 다른 폰트 적용하기…

들어가며 흔히 local 환경에서 Next.js 프로젝트를 만들고 를 실행하면 command line에 아래의 흐름대로 표기된다. 그렇다면 뒷편에선 코드가 어떻게 돌아가고 있을까? package.json Next.js 공식 문서에 따르면, 새로운 프로젝트를 만들 때 필요한 패키지 설치 후 에 아래 내용을 수동으로 추가하라고 안내하고 있다. 이 중 주목할 스크립트는 로, 해당 스크립트를 입력하면 코드가 실행된다. yarn start 혹은 npm run start으로 입력하면 된다. next-start.ts 코드가 실행되면 그 이후엔 어떤 파일을 실행시킬까 살펴보니 경로에 가 있었다. 코드를 보니 next start 뒤에 위치하는 옵션 command에 대한 안내를 해주는 로직, 혹여나 잘못 입력했을 때 경고 및 프로세스를 종료하는 로직 등이 담겨있다. 그리고 가장 하단에서 라는 함수를 실행시켜 준다. 정확한 버전은 모르지만 작년 무렵만 해도 아래처럼 바로 startServer 함수…

들어가며 알고리즘 스터디 중 많은 혼선을 겪었던 DFS, 그 중 응용되는 범위가 넓은 만큼 헷갈리기도 했던 순열과 조합 파트를 정리해본다. 한 경로를 따라 가능한만큼 멀리까지 탐색하고, 더 이상 갈 곳이 없을 때 되돌아와 다른 경로로 탐색을 진행하는 방식. 순열 (Permutation) 정의 주어진 요소들을 나열하는 모든 순서를 구하는 것. 서로 다른 n개에서 r개를 고르는 순열은 nPr로 표기한다. 요소의 순서가 다르면 다른 경우로 취급하기 때문에 과 같이 같은 요소라도 다른 순서이면 별개의 경우로 취급한다. 구현 DFS를 활용해 순열을 구현할 땐 아래의 단계를 따른다. 재귀 함수를 사용해 DFS를 구현한다. 순열을 구하는 함수는 탐색할 배열과 주어진 순열의 길이를 매개변수로 받는다. DFS 함수에서 현재까지 구한 순열의 길이가 주어진 값과 같을 때 : 구한 순열을 저장하고 탐색을 종료한다. DFS 함수에서 현재까지 구한 순열의 길이가 주어진 값과 다를 때 : (아직 사용…

들어가며 Typescript로 개발을 하다보면 자주 마주치는 타입 ReactNode, JSX.Element 그리고 ReactElement. 어느 날 문득 나는 각 타입의 차이를 명확히 설명할 수 있나라는 의문이 들었고, 그 대답은 아니다였기에 정리해본다. ReactNode 위 코드를 보면 알 수 있듯이 Javascript 데이터 타입 대부분을 아우르는 타입으로, 아래에서 설명할 ReactElement 역시 포함한다. 정확히 어떤 타입을 prop으로 받을지 확실치않을 때, 혹은 어떤 타입이라도 허용 가능하게 하고싶을 때 any대신 ReactNode를 활용할 수 있다. ReactElement와 JSX.Element 와 는 모두 React.createElement()의 리턴 타입이라는 공통점을 가진다. 이를 더 정확히 알기 위해선 JSX에 대한 배경지식이 필요하니 간략하게 짚고 넘어가보자. JSX JSX는 Javascript의 확장 문법으로, Javascript 파일 하나에 렌더링…

원문 : Understanding JavaScript Function Invocation and “this” 본 글은 Typescript Handbook - 함수 부분을 학습하던 중 본문에 링크되어있던 원문 글을 읽고 Javascript에서의 함수 호출과 알듯 말듯 모호했던 this를 학습하며 번역한 글입니다. 의역이 포함되어 있는 점 양해 부탁드리며, 잘못된 부분을 발견하셨을 경우 댓글로 알려주시면 감사하겠습니다. 😊 지난 시간동안 자바스크립트 함수 호출에 대해 많은 혼란이 있었습니다. 특히, 함수 호출에서의 this의 의미를 혼란스러워하는 사람들이 많았습니다. 이 혼란은 함수 호출의 핵심 원리를 이해하고, 그 원리를 기반으로 함수 호출 방법을 살펴보는 식으로 해결할 수 있다고 필자는 생각합니다. 사실 이것은 ECMAScript에서 이 문제를 다루는 방식이기도 합니다. 이 글은 ECMAScript보다는 단순하게 쓰여진 감이 있지만, 기본적인 아이디어는 같습니다. 핵심 기본 원…

본 글은 쏙쏙 들어오는 함수형 코딩 - 에릭 노먼드 저서를 읽고 학습한 내용을 정리한 글입니다. 들어가며 이전 글에서 액션과 계산, 데이터의 개념에 대해 알아보았다면, 이번 포스팅은 실습시간! 여러 예제로 상세히 알아본 개념을 활용해 리팩토링을 해보자. 함수의 입출력 액션에서 계산을 빼내기 위해선 우선 어떠한 함수를 액션 혹은 계산으로 구분할 줄 알아야한다. 이를 위해선 함수의 입출력에 대한 이해가 필요하다. 모든 함수에는 입력과 출력이 존재한다. 입력은 함수가 동작하기 위해 외부에서 유입되는 정보, 출력은 함수의 결과로 나오는 정보/또다른 동작을 뜻한다. 함수의 입출력은 아래와 같이 명시적이거나 암묵적인 속성을 가진다. 입력 출력 명시적 인자 리턴값 암묵적 인자 외 다른 입력 리턴값 외 다른 출력 여기서 기억해야 할 것은, 함수가 암묵적 입출력을 가지면 액션, 명시적 입출력을 가지면 계산이 된다. 또, 어떠한 함수가 액션을 포함한다면 그 함수 전체는 액션이 된다. 따라…

본 글은 쏙쏙 들어오는 함수형 코딩 - 에릭 노먼드 저서를 읽고 학습한 내용을 정리한 글입니다. 예제로 작성한 코드는 책을 옮겨 적은 것이 아니라 학습한 내용을 바탕으로 직접 작성하였습니다. 들어가며 기존에 함수형 프로그래밍이라 하면 순수 함수(결과값이 인자에만 의존)와 부수 효과(결과값을 리턴하는 것 외의 다른 동작)를 구분하고, 부수 효과를 피하며 순수 함수만을 합성해 프로그래밍하는 기법이란 기조가 강했다. 다만 부수 효과를 완전히 제거하고 순수 함수를 합성하는 것만으로 프로그래밍을 하기는 다소 어렵다는 애매함이 존재했다. 예를 들어 특정한 리턴값이 존재하지 않는 부수 효과인 1) 전역 상태 수정이나 2) 무언가를 전송하는 동작을 하지 못한다면.. 🤯 프로그래밍하기에 분명한 어려움이 있다. 해당 서적에서는 함수형 프로그래밍을 액션, 계산, 데이터 3가지의 개념으로 프로그래밍하는 것이라 재정의하고 있다. 에릭 노먼드가 설명하는 함수형 프로그래밍을 이해하기 위해 이 핵심 개념들…

들어가며 사실 정규 표현식은 필요할 때마다 구글링을 해 원하는 식을 손쉽게 찾아낼 수 있고, 요즘 핫한 chatGPT에게 질문만 하면 적절한 예시까지 곁들여주기도 한다. 다만 알고 사용하는 것과 모르고 복붙하는 것은 큰 차이가 있다고 생각하기에 (또 서치한 결과를 스스로 검증하는 능력도 중요하기에) 정리해보는 글. 정규 표현식이란 정규 표현식 (Regular Expression)은 특정 패턴을 가진 문자열 집합을 뜻하며, 이를 활용해 문자열에서 원하는 패턴의 문자열을 찾아내고 테스트하거나 치환할 수있다. 예를 들면 이메일주소의 형식에 맞는 문자열인지 테스트하거나 휴대폰번호 입력 input에 숫자만 입력되도록 할 수 있다. 정규 표현식은 대부분의 프로그래밍 언어에 내장되어 있고, 코드 에디터에서 검색할 수도 있는데 자바스크립트에는 ES3부터 도입되었다. 여러 기호가 혼합되어 있는 형태가 처음엔 낯설 수 있지만 명확한 구조를 익히면 반복문, 조건문없이 문자열의 패턴을 정의하고 테스트할…

들어가며 회사 서비스는 Pretendard Variable 폰트를 사용하고 5개 국어 다국어 처리를 하고 있다. 어느 날 일본어의 일부 문자에서만 폰트가 깨지는 이슈를 발견했는데, 비단 우리만 겪었던 문제는 아니였는지 기존 폰트와 별도로 일본어/한자 대응을 위한 Pretendard JP 폰트가 배포되어 있었다. 해당 이슈는 Pretendard JP 폰트와 unicode-range를 활용해 해결했는데, 이와 같이 언어마다 혹은 문자에 따라 다른 폰트를 적용해야 할 경우 어떻게 처리하면 될지 정리해보는 글 @font-face unicode-range는 @font-face 로 정의한 폰트가 적용될 범위를 설정하는 속성으로, 우선 @font-face부터 정리해보자. @font-face는 웹에 표시할 사용자 지정 글꼴을 정의하는 CSS의 규칙으로 사용자의 컴퓨터에 설치되지 않은 웹 폰트를 적용할 수 있게 해준다. 적용할 땐 아래의 문법에 따라 사용하면 된다. : 사용자가 지정하는 폰…

자아가 성립된 즈음부터 내 손아귀엔 늘 낙서가 가득한 삶의 지도가 들려있었다. 지도는 하도 많이 접었다 펴내 꼬깃해지기도, 여러 번 수정된 좌표와 경로가 덧씌워져 지저분해지기도 했다. 그럼에도 지금까지 그 지도를 놓지 않은 건 여러 관점에서 내가 향하고자 하는 목표점과 현재 위치를 끊임없이 확인하려는 의지이기도 하다. 다양한 경로 중 현재에도 활발하게 나아가고 있는 ‘직업’ 경로를 소개해본다. 큰 고민없이 선택한 첫 직업, 로펌비서 경영학도인 나는 대부분의 문과생들이 그렇듯 졸업반이 되자 대기업의 상대적으로 티오가 많은, 영업관리와 같은 직무에 벌떼같이 지원하고 떨어지기를 반복했다. 그러다 지인의 추천으로 로펌비서라는 직업을 처음 알게 됐다. ‘엄격한 관리자’라는 MBTI를 가진 사람답게 수 년간 내 일정을 관리하고 계획을 세우는 습관을 가지고 있기에 큰 고민없이 나와 잘 어울릴 거라 생각했다. (우선 취업을 해야겠다는 마음이 강했고, 주변에서 외모와 분위기 모두 잘어울린단 말을…

이직 성공 직후 첫 출근 전 작성했던 2022년 상반기 회고글 이후, 새로운 직장에서 보낸 하반기 돌아보며 쓰는 글 내게 2022년 하반기는 한 마디로.. 맷집을 키워낸 시간이였다. 유일한 프론트 개발자로 일하며 속성으로 맷집 키우기 이직한 직장에선 신규 서비스의 프론트 개발 업무를 혼자 담당하게 되었다. 테크리드 역할을 해주시는 시니어 개발자분께서 내 입사 전까지 홀로 프론트를 담당하셨던 터라 히스토리를 여쭤보거나 프론트 관련 질문을 할 수 있는 환경이였지만, 많은 경력을 가지고 있는 게 아니기에 앞으로 프론트 개발은 대부분 혼자 담당한다는 사실에 막중한 책임감이 느껴졌다. 첫 스프린트, Demo 체험하기 / 튜토리얼 개발 팀에 대한 별도의 온보딩 가이드나 문서가 부재한 상황에서 입사 3일 만에 Demo체험하기 / 튜토리얼 개발에 투입되었다. 신규 기능 개발의 프론트 개발 담당자는 나 혼자였고, 회사와 서비스에 적응하랴 기존 코드를 파악하랴.. 정신없는 나날이었다. 첫 스프린트에…

문제상황 회사 프로젝트에 드디어 storybook을 도입하게되어 싱글벙글했던 것도 잠시.. storybook을 설치해 실행하고 기존에 만들어두었던 component의 story를 하나하나 작성하는데 SVG 파일이 import된 component에선 undefined가 렌더된다는 아래의 에러가 떴다. 해당 에러는 storybook의 기본 웹팩 설정에서 svg 파일을 로 변환하고 있기 때문에 나는 것. React cra로 초기셋팅을 하며 storybook을 함께 적용할 때는 해당 에러가 나지않았고 monorepo환경의 기존 프로젝트 (w/ React+Typescript)에 적용할때만 났다. 해결법 기존 웹팩 설정에서 svg와 관련된 설정을 삭제하고, SVG를 React Component로 변환해주는 tool인 SVGR을 통해 SVG를 로드하도록 설정해 문제를 해결할 수 있다. 1. SVGR 설치 먼저, 기존 svg 처리 설정을 대체할 SVGR을 설치한다. 2. webpack 설정 …

COVID의 영향으로 대부분의 기술 컨퍼런스가 온라인으로 진행되는 현 상황에서 운좋게 NHN 주최 기술 컨퍼런스에 당첨되어 연차까지 내고 두근거리는 마음으로 참석하게 되었다. 개발자 인생 첫 오프라인 컨퍼런스인만큼 인터컨티넨탈 호텔의 두 층을 모두 대관한 넓은 공간에서 오로지 기술 이야기를 하러 2500여명에 달하는 사람이 모였다는게 벅차오르기도 했고 신기하기도 했다. 다시금 되새겨보는 그 날의 기억과 느낀점들 좋은 기술이란? 컨퍼런스의 시작인 키노트에서 좋은 기술이란 사용자가 체감하는 고마운 기술이라 생각한다는 내용이 있었다. 개발자로서 어떤 서비스를 만들어나가고, 더 나아가 어떤 기술에 기여하고 싶은가? 라는 질문을 스스로에게 던질 때 지금껏 일상의 불편함을 해결해주는 기술이라고 생각해왔는데 두 정의 모두 일맥상통하는 결을 가지고 있다고 생각했다. 다만 일상 속 불편함을 어느 정도 해결해주는 것과 1) 사용자가 체감하고 2) 고마움을 느끼는 게 반드시 일치하지는 않는다.…

들어가며 올해 3월, 개발자로서 커리어를 막 시작한 6명이서 시작한 알고리즘 스터디가 약 7개월이 지난 10월 초, 최종인원 4명으로 1회차의 막을 내렸다. 1회차에서 얻은 교훈을 바탕으로 바로 2회차를 시작하기로 했지만 정확히 무엇이 좋았고 아쉬웠는지, 또 무엇을 배웠는지 돌이켜 정리해보는 글 스터디의 시작 3월 18일 개설된 스터디 slack 채널 인프런을 탐색하다가 흔치않은 ‘자바스크립트’ 알고리즘 문제풀이 강의를 찾은게 시초였다. 이전까진 코딩테스트의 ㅋ만 들어도 내 길이 아니다하며 회피했는데, 문제 유형별로 상세하게 나뉘어진 강의 커리큘럼과 긍정적인 후기를 보며 이 강의를 완강하면 두려움이 완화되지않을까싶었다. 평소 퇴근 후 공부인증 스터디를 진행하며 이런저런 고민을 나누던 부트캠프 동기 개발자 6분(프론트엔드 5명, 백엔드 1명)과 스터디를 제안했고, 모두 긍정적인 의견을 가지고 계셔서 본격적으로 Slack 채널과 GitHub Repo를 꾸려 시작하게 되었다. 스터디 …

vscode에서 인텔리제이를 사용하게된지 어언 한달 반.. 단축키에 익숙하지않아 뚝딱거리는 날 더이상 마주하고 싶지 않아 적어보는 단축키 모음집. 아래의 Mac symbol을 사용했다. symbol 의미 ⌘ command ⌥ option ⇧ shift ⏎ Enter 검색 동작 단축키 비고 전체 파일에서 검색 ⌘ + ⇧ + f 특정 함수나 변수 등을 찾을 때 유용하다. 라인 검색 ⌘ + i 특정 파일에서 에러가 났을 때, 그 라인을 찾는데 유용하다. 최근 본 파일 검색 ⌘ + e 파일명으로 검색 ⌘ + ⇧ + o 특정 파일을 찾을 때 사용한다. 전체에서 검색 ⇧ + ⇧ 검색 범위가 너무 광범위해서 오히려 불편할 수도 있다. 도구창 열기 동작 단축키 비고 Project 열기 ⌘ + 1 프로젝트 디렉토리 확인 Commit 열기 ⌘ + 0 Changes 확인 및 commit 작성 Git 열기 ⌘ + 9 Git log / Console 확인 Bookmark 열기 ⌘ + 2 본인이 표시해두…

2022년 상반기에는 사내 팀 이동이 있었고, 좋은 기회로 개발자 채용 과정에 참여해보았고, 또 나름의 기준을 정해 이직에 성공하기도 했다. 팀 이동, 채용 참여, 이직 등의 키워드만 보아도 알 수 있듯이 꽤나 역동적이였던 시간이였다. 그 흐름이 이제야 일단락되어 다소 늦었지만 상반기 중 배우고 깨달은 것들을 정리해본다. 사내 팀 이동으로 배운 스스로의 힘 회사 내부 사정으로 어드민을 개발하던 팀에서 랜딩페이지를 다루는 팀으로 이동하게 되었다. 이동한 팀에서 새로운 스택인 Next.JS, emotion을 접했고, 실제 사용자가 존재하는 서비스의 유지보수 작업도 해보았다. 자신의 의견을 자유롭게 개진해볼 수 있는 환경 덕분에 아래의 경험들도 해볼 수 있었다. 사용자 관점에서 스스로 개선점을 찾아내 고쳐본 경험 사용자의 액션을 불러일으켜야 하는 UI에 애니메이션을 더할 것을 제안하거나, 데이터 로딩을 개선하기 위해 lazy loading을 고민하고 skeleton UI를 도입하는 등…

들어가며 우리는 종종 숫자를 count하는 애니메이션을 접하게된다. 예를 들어 게임 화면에서 유저가 획득한 포인트를 보여줄 때, 할인된 가격을 안내할 때, D-day까지 남은 일수를 보여줄 때 등등 숫자값을 강조해야하는 상황에서 자주 사용된다. 그럼 이 애니메이션은 어떻게 구현해야할까? 단순한 count 애니메이션을 생각하고 setInterval로 금방 구현하겠네!하며 호기롭게 접근했다가 count 속도를 조절하는 방법이 까다로워 혼쭐이 나 그 여정을 기록해보고자 한다. 해당 기능은 재사용성을 고려해 custom Hook으로 구현했다. 1. setInterval 함수로 애니메이션 구현 우선 단순히 숫자를 count하는 애니메이션부터 구현해보자. 숫자를 카운트하는 애니메이션은 일정 기간동안 특정 작업을 반복 실행하는 setInterval 함수로 구현할 수 있다. setInterval 함수의 구조 및 사용예시는 아래와 같다. 이를 이용해 우선 동일한 속도로 숫자를 count하는 cus…

들어가며 프로젝트를 진행할 때 JWT를 활용한 인증 방식으로 로그인을 구현한 적이 있다. 백엔드 개발자분과 협업을 하며 key값을 맞춰보고, 인증이 완료되었다고 기뻐하던 추억은 선명하지만.. JWT가 무엇인가란 질문에 자신있게 대답할 수 없었다. 추억속의 JWT를 꺼내 등장 배경부터 인증 프로세스, 장단점까지 알아보자. JWT의 등장배경 JWT가 무엇이고 어떤 형태로 사용되는지도 중요하지만, 먼저 그 배경을 알아야 어떤 장점과 특징을 가지고 있는지 제대로 이해할 수 있다. 그렇다면 JWT는 어떻게 등장하게 되었을까? 이는 HTTP의 특징과 연관된다. HTTP의 특징 HTTP는 (클라이언트의 요청이 처리되면 연결이 끊어짐), (서버가 클라이언트의 이전 상태를 저장하지 않음)라는 특징을 가지고 있어 인증이 필요한 페이지에 접근할 경우 서버는 클라이언트가 누구인지 매번 확인해야했다. 예를 들어 쇼핑몰에서 로그인을 하고 마음에 드는 제품을 장바구니에 담을 때마다 다시 로그인을 …

들어가며 최근 작은 부분부터 팀문화를 개선하는 데에 관심이 생겼고, 1순위로 눈에 들어온 건 Commit Convention이였다. Commit Convention을 정하고, 앞으로도 계속 지켜나가기 위해 소소한 시스템을 구축한 이야기를 적어보는 글. 문제점 팀원별로 commit style이 통일되지 않았다. (각자 다른 기준으로 정해진 commit Header를 사용했고, 첫글자를 대문자로/소문자로 작성하는지도 차이가 있었다.) commit convention을 정하는 것보다 꾸준히, 혼선없이 지키는 게 어렵다. 해결방안 commit의 목적별로 Header를 정해 commit만 봐도 어떤 작업인지 예상가도록 하자. commitizen을 이용해 Header 입력을 반자동화하고, 상세 작업만 직접 작성하는 시스템을 구축해보자. (commitizen은 팀원분과 이야기를 해보다가 힌트를 얻었다.) Commit Convention 정하기 금방 끝날거라 생각했지만 생각보다 세세한 범위까지 …

들어가며 회사에서 소속팀이 변경되어 지금까지 봐오던 코드와 다른 코드를 보게 되었다. 그러다 눈에 띈 상단의 경로들. 대부분의 경로가 보다 짤막하고 의 형태로 이루어져있었다. 팀원분께 여쭈어보니 별칭 경로라는 걸 알게되었고, 보다 편리하게 개발할 수 있는 수단이라 생각되어 조금 더 배워보고 정리해본다. 별칭 경로를 사용하는 이유 Javascript/Typescript 환경에서 import 구문을 사용할 땐 보통 상대 경로를 사용한다. 이 때 각 모듈의 디렉토리 depth가 깊어진다면, 아래와 같이 보기만 해도 아찔한 경로를 사용해야한다. 이런 경우 아래와 같은 몇 가지 문제점이 존재한다. 정확히 어느 경로에 있는 모듈인지 한 눈에 파악하기가 어렵다. 경로를 작성할 때 오류가 날 가능성이 크다. 문제 해결을 위해선 경로를 알아보기 쉽게 + 깔끔하게 정리해주는 절대 경로를 활용할 수 있다. 여기서 더 나아가 절대 경로를 활용해 특정 디렉토리 경로에 별칭을 달아주는 별칭 경로를 활용한…

한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란 React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. ‘부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드’ 라는 표현의 예시를 들어보자면, 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 이때의 modal은 부모 컴포넌트(root)의 DOM 계층 구조 바깥에 있는 DOM 노드라고 할 수 있다. react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있는데 이런 tree구조는 종종 불편함을 가져다주기도 한다. …

익숙하던 일상에서 잠시 벗어나, 새로운 커리어와 인생을 위해 있는 힘껏 몰입했던 3개월이 마무리되었다. 2개월간 하루 10시간이상 스스로 문제를 해결하는 연습도 해보고, 2주간의 협업 프로젝트를 2회 진행했다. 그 후 마지막 1개월은 프론트엔드 개발자로서 초기 스타트업에서 인턴쉽을 진행하며 부트캠프 과정을 수료했다. 쉴새없이 인풋을 채워넣기 바빴던 3개월은 마무리 되었지만 개발자로서의 커리어는 이제 시작이기에 지난 시간을 회고해보며 남겨진 것들을 동력으로 삼고자 한다. 개발자로 직무 전환을 한 이유 이전에 포스팅했었던 4년차 로펌비서였던 내가 개발자가 되기로 한 이유 글에서 적어둔 내용이긴 하지만 그 생각에 변함이 없기에 간략하게 다시 적어본다. 내게 개발자는 (1) 그 과정은 다소 고통스러울지라도 기능이 구현되었을 때 짜릿한 성취감과 자기효능감을 가져다주고 (2) 공부하는 만큼 내 실력을 업그레이드 할 수 있는 직업이고, 이는 내 성향 및 직업관과 일치한다고 생각해 직무 전환…