본문 바로가기

분류 전체보기124

[Essay] 깃 컨벤션 작성 방법 💻 깃 컨벤션이란 깃 컨벤션은 팀 내에서 일관된 커밋 메시지 작성 규칙을 정하는 것이다. 이를 통해 프로젝트 관리와 협업을 효율적으로 할 수 있어서, 혼자 사이드를 할 때나, 팀 단위로 프로젝트를 관리할 때도 매우 좋은 습관이어서 기록 겸 공유하고자 한다. 🤷‍♀️ 커밋 메시지 규칙이 없다면? 깃 컨벤션이 왜 필요한가? 초보 개발자이거나, 혼자 개발하는 데에 익숙한 사람이라면 아직 필요성을 못 느낄 수 있다. 그렇다면 만약의 상황을 가정해 보겠다. 프로젝트를 진행하는 중간에 버그 히스토리를 파악하고 싶거나, 복잡한 브랜치들 사이에서 특정 커밋을 찾아 머지를 하고 싶은 상황이 생긴다. 이때, 커밋들이 모두 '수정', '수정2', '최종수정' 이런 식으로 작성되어 있다면 어떻게 하겠는가? 내가 모든 변경사항.. 2024. 4. 21.
[Book] Do it! 리액트로 웹앱 만들기 with 타입스크립트 (리액트 + 익스프레스 + 몽고DB로 만드는 SPA와 API 서버) 서평 📚서론틈만 나면 서점의 개발 서적 코너에 가서 어슬렁거리던 나날들.. React 최신 버전과 타입스크립트로 나에게 좋은 코드 예시를 보여줄 책을 찾다가, 이 책의 서평단을 모집하기에 바로 신청하게 되었다. 드디어 React 18 버전과 타입스크립트를 사용해서 자세하게 기초부터 프로젝트까지 알려주는 책이 나왔구나! 하고 책을 펼쳤는데.. 이 책으로 가볍게 프로젝트 하나 만들어보고 말려고 생각하는 나같은 사람들이 있다면 그건 큰 오산이라고 말하고 싶다. 생각보다 훨씬 자세하고 모든 챕터의 글자 하나하나 씹어서 소화하고 싶은 책의 내용에 감동을 받아버렸다. 웬만한 인강, 책 저리가라다. 우선 구성부터 보면 정말 알짜배기 구성인 것을 알 수 있다. 먼저 리액트 환경 세팅하면서 리액트 프레임워크의 탄생 배경, 웹.. 2024. 4. 9.
[Book] 아는 만큼 보이는 백엔드 개발 도서 리뷰 📚 서론 4년 차 FE 개발자지만 기본적으로 풀스택이어야 한다고 생각하기에, 백엔드 지식에 항상 관심을 두고 있었다. 하지만 독학으로 조금씩 습득하는 지식보다는, 백엔드 신입처럼 정석 코스로 실제 선배/선생님들이 어떻게 알려주는지 세세하게 알고 싶다는 생각을 항상 하던 중에... + 백엔드 개발자들이 쉽게 풀어쓴 백엔드 지식을 날로 먹고 싶다.. 는 욕망과 함께 눈에 들어온 책. 목차를 살펴보니 나의 니즈를 채워줄 수 있는 내용인 듯해서 궁금해졌다. 마침 리뷰어 모집을 하길래 신청했는데, 당첨이 되어 책을 받아서 읽어보았다! 🏷️ 구성 우선 구성을 보면 이렇게 백엔드 시작하기!로 귀엽게 플로우가 그려져 있다. 신입/취준생 커리어 패스가 싹 정리되어 있고, 이 책에서 어떤 내용을 다룰지를 알려준다. 어떻게.. 2024. 2. 21.
[CSS] Vanilla Extract 사용방법 💡 시작하며 현재 사이드 프로젝트를 진행하고 있는데, 프론트엔드 CSS 아키텍처를 선택할 때 Vanilla-Extract를 사용하기로 해서 사용 방법을 공부하고 정리해두려고 한다. 👍🏻 Vanilla Extract 장점 우선 Vanilla Extract는 아래와 같은 장점이 있다. 빌드타임에 ts 파일을 css 파일로 만든다. (CSS Modules-in-TyepScript) type-safe하게 theme을 다룰 수 있다. 프론트엔드 프레임워크에 구애받지 않는다. Tailwind처럼 Atomic CSS를 구성할 수 있다. Sttitches 처럼 variant 기반 스타일링을 구성할 수 있다. ⚙️ Vanilla Extract 사용 방법 0️⃣ 설치 vanilla-extract를 설치한다. npm ins.. 2023. 7. 31.
[Essay] 코드 리뷰 할 때 중요한 것 나는 지난 2022년 팀에서 코드리뷰 문화를 개선하고자 집중 코드리뷰 시간을 도입하고 PR 작성 방법을 논의하여 실무에 적용해 현재까지 실행 및 유지하고 있다. 현재까지 느낀 내가 코드 리뷰 할 때 중요하게 생각하는 것들을 정리하고자 한다. 💻 코드 리뷰란 코드 리뷰란 개발자가 어떤 기능/이슈를 위한 코드를 작성하면, 다른 개발자들이 피드백을 주고받는 과정이다. ✨ 코드 리뷰의 장점 본인이 놓쳤을 수도 있는 이슈를 다른 사람이 먼저 발견하여 Side Effect를 미리 대응할 수 있고, 서비스의 안정성이 높아진다. 팀 내 컨벤션 규칙에 따랐는지 확인하여 일관성을 유지할 수 있고, 코드 품질이 향상된다. 코드 검토 과정에서 지식 공유가 이루어지고, 서로 다른 시각과 스타일을 공유하며 협업을 바탕으로 개발문.. 2023. 7. 23.
[NodeJS] NVM으로 Node 버전 여러 개 사용하기 (MacOS) 🔎 Node Version 관리의 필요성 개발을 하다 보면 Node Version을 여러 개 관리해야 할 상황이 생긴다. 예를 들어, 프로젝트마다 Node 버전을 다르게 사용해야 할 경우가 있다. 또는 기존 프로젝트의 Node Version을 업데이트하면서 다른 의존성 라이브러리와의 충돌을 체크하며 마이그레이션해야 하는 경우가 있다. ✅ 배경 Node Version 관리가 필요해진 이유는 기존 프로젝트에 테스트 코드를 적용을 하기 위해서이다. 현재 실무에서 진행하는 프로젝트는 Node v10.16.0을 사용하고 있다. 해당 프로젝트에 테스팅 라이브러리인 Jest를 사용해서 테스트 코드를 적용하려고 시도했으나, import 할 때부터 에러가 발생하고 순탄하지 않아서 Jest 공식 문서를 확인해 보니 Nod.. 2023. 7. 21.
[TIL] useRef current null 이슈 해결 📘 TL;DR 특정 element를 조건부로 호출하고 있기에 초기 렌더링 시 컴포넌트가 만들어지지 않은 상태에서, ref.current가 null인 이슈가 발생한다. ref 특성상 렌더링 될 때 데이터를 받아오고, 읽기 전용이라 리렌더링을 발생하지 않고 업데이트되지 않도록 동작하므로 발생하는 문제이다. 따라서 ref에 있는 조건을 하위로 옮겨서 element가 항상 렌더링 되도록 수정하여 해결하였다. ✅ 요구사항 🙋🏽 PO: 리뷰를 작성할 때 리뷰 작성 영역이 최상단으로 스크롤되도록 만들어주세요~ 👩🏻‍💻 FE: textarea 쪽에 ref 추가해서 focus되었을 때 scrollto 하면 되겠다! ❗️ 에러 발생 를 감싸는 상위 태그 의 element를 useRef를 사용하여 가져왔는데, const c.. 2023. 7. 17.
[JavaScript] Moment.js 사용법 (현재 날짜, 날짜 포맷, 날짜 비교) 💡Moment.js란?Moment.js는 JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리입니다. 개발할 때 현재 날짜를 가져오거나, 특정 날짜의 년/월/일만을 가져오거나, 내가 원하는 날짜 포맷으로 형식을 변경해 주거나, 특정 날짜와 비교해 주는 등 날짜 관련해서 다양한 처리가 필요할 때 사용합니다. ⚠️ 참고사항더 이상 업데이트가 없어 deprecated 되었고 레거시 프로젝트가 되었지만, 아직 실무에 사용하는 곳이 많고 다른 라이브러리에 의존성을 가진 경우가 많으며 정통 날짜 라이브러리로 많이 사용되고 있습니다. 제가 실무에서 개발하는 프로젝트에서도 Moment.js를 사용하고 있습니다. 그래서 오늘은 자주 사용하는 Moment.js의 사용법을 정리하고자 합니다. 🖥️ Moment.js.. 2023. 6. 23.
[React] CRA(create-react-app) + TypeScript 세팅하기 이제는 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다. 우선 해야 할 작업들은 다음과 같다. CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기 eslint, prettier를 적용하여 코드 컨벤션 보장하기 typescript가 필요한 라이브러리 세팅 tsconfig.json에 src 절대 경로 세팅 1️⃣ CRA(create-react-app) + TypeScript TypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 작성한다. .. 2023. 4. 28.
[React] Hooks란? 사용방법과 배경 정리 (useEffect, useState, Custom Hook) Hook Hook을 사용하여 기존 Class 바탕의 코드를 작성할 필요 없이, 상태 값 관리와 여러 React 기능을 사용할 수 있다. (v16.8 부터 추가됨) Hook이 만들어진 배경 기존 컴포넌트 사이에서 상태 로직 재사용이 어려웠다. React는 컴포넌트 간 재사용 가능한 로직을 붙이는 방법을 제공하지 않는다.(ex. 스토어에 연결) 따라서, render props나 HOC(고차 컴포넌트) 패턴으로 해결해 왔지만, 이런 패턴은 컴포넌트 재구성을 강요하며, 코드 추적을 어렵게 만든다. provicders, consumers, HOS, render props 그리고 다른 레이어로 둘러싸인 wrapper hell이 될 수 있다. 그래서 React는 상태 관련 로직 공유를 위한 좀 더 좋은 기초 요소가 .. 2023. 4. 21.
[OpenAI] 음악 추천 서비스 만들어보기 (React) 2.5부 오늘은 2부에 이어서 가볍게 2.5부로 리팩토링을 진행해보도록 하겠습니다. 원래 다음 포스팅은 3부로 기분 / 날씨 / 장르 등 키워드를 선택하여 노래 추천받는 기능 및 디자인까지 마무리 지으려고 했는데, 중간점검할 겸 조금이나마 정리된 코드를 공유하려고 합니다. 2부 포스팅은 아래를 클릭하면 볼 수 있습니다. [OpenAI] 음악 추천 서비스 만들어보기 (React) 2부 오늘은 저번에 이어서 OpenAI 를 사용한 서비스를 만들어보겠습니다. 1부 포스팅은 여기에서 볼 수 있습니다. 1부: https://bolob.tistory.com/entry/OpenAI-%EC%9D%8C%EC%95%85-%EC%B6%94%EC%B2%9C-%EC%84%9C%EB%B9%84%EC%8A%A4-%E bolob.tistor.. 2023. 3. 21.
[Level 3][그래프] 가장 먼 노드 (JavaScript) 문제 설명 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 갯수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요. 제한사항 노드의 개수 n은 2 이상 20,000 이하입니다. 간선은 양방향이며 총 1개 이상 50,000개 이하의 간선이 있습니다. vertex 배열 각 행 [a, b]는 a번 노드와 b번 노드 사이에 간선이 있다는 의미입니다. 입출력 예 n verte.. 2023. 3. 11.

티스토리툴바