MOLLY

(1) 브랜치 종류(2) Git Flow 사용한 개발 흐름(3) Git Flow, 언제 사용하면 좋을까?  Git Flow 전략 Git Branch 전략은 여러 가지가 있지만, 대표적으로 여러 프로젝트에서 널리 사용되고 있는 대표 브랜치 전략 중 하나인 Git Flow에 대해서 알아보도록 하자. (위 출처의 내용 중 필요한 부분만을 뽑아서 요약했다는 것을 참고해주었으면 좋겠다.) Git Flow는 가장 전통적으로 많이 사용되는 방식이다.  (1) 브랜치 종류1. master: 제품 출시 버전을 관리하는 메인 브랜치2. develop: 다음 출시 버전을 위해 개발하는 브랜치3. feature: 새로운 기능을 개발하는 브랜치4. release: 다음 출시 버전을 준비하는 브랜치5. hotfix: 출시된 제품..

0. 한 줄 요약1. unknown 타입2. never 타입3. enum 타입  TypeScript의 unknown, Never, 열거형인 enum 타입의 개념 및 특징에 대해 알아보자.  0. 한 줄 요약- unknown: 타입을 모를 때 안전하게 처리하려고 사용- never: 절대 실행되지 않을 코드를 명시- enum: 한정된 값의 집합을 정의하여 가독성과 유지보수를 높임  1. TypeScript 컴파일러 옵션 중 암묵적인 any 타입 비허용 옵션 on   1-1) [효과] 개발자가 냅다 any 타입으로 작성하고 잊어서 코드가 JavaScript처럼 동작하는 상황을 미연에 방지 가능 ⇒ 안정적인 개발 가능   1-2) [방법] tsconfig.json 파일에서 noImplicitAny 옵션을 tru..

1. Page Router2. App Router (Next.js 13+)3. 주요 차이점  Next.js 공식 문서: https://nextjs.org/docs/app/building-your-application/routing Next.js에서의 Routing 방식은 총 2가지다.전통적인 파일 라우팅 방식인 Page Router와 서버 중심의 렌더링 최적화를 제공 중인 새로운 라우팅 방식인 App Router. 이 둘의 차이점과 Next.js에서 추천하고 있는 라우팅 방식에 대해 알아보자. 결론부터 말하자면, Next.js에선 App Router를 추천 중이다.정확히 어떤 차이가 있길래 Next.js는 App Router를 추천할까?바로 App Router에서는 최신 기술과 구조적 이점을 최대한 활용..

1. Git 초기 세팅 명령어(1) npm으로 pnpm을 전역에 설치(2) Next.js 설치(3) Tailwind CSS 설치 및 세팅(4) TanStack Query, Zustand 설치 및 세팅(5) eslint-config-airbnb 설치 및 세팅(6) .gitignore(7) 끝! 커밋을 잊지 말자2. 팀원들과 따옴표, 쌍따옴표 Prittier가 안 맞아요!3. GitHub에 빈 폴더를 넣고 싶어요!  pnpm 패키지 매니저를 사용해서 Next.js + TypeScript + Tailwind CSS + TanStack Query + Zustand 를 설치하려고 한다면 축하한다. 지금부터 프로젝트 설치 명령어와 세팅을 아주 상세하게 알려주겠다. 터미널에 다음과 같은 명령어를 입력하면 된다.  1..

(1) 문제 인식(2) 해결을 위한 고민과 시도들(3) 해결(4) 문제의 원인이었던 pnpm과 패키지 매니저에 대하여  배포 시, NextUI 적용이 안 되는 에러 → .npmrc 파일 추가 및 pnpm을 다시 설치해 해결yarn을 사용했었던 직전 프로젝트에서는 NextUI가 잘 적용됐었는데, pnpm을 사용하는 이번 프로젝트에서는 적용이 수월하지 않아 2일 간 우울하기도 했고 고생했다. 하지만 깊게 몰입하여 문제를 해결한 경험이 하나 더 생겼다. UI 관련 문제로 꽤나 시간을 보내게 되다 보니 아예 ‘다른 디자인 시스템으로 변경’하거나 ‘내가 직접 CSS를 할지’에 대해 깊게 고민하며 갈등하였다.하지만 문제를 포기하는 것은 내키지 않아서 더욱 다양한 관점에서 바라보고, 시도를 해보았다. 다른 분들은 나..

0. Map과 Set 딥 다이브 계기1. Set2. Map3. Set과 Map 차이4. Set과 Map, 일반 객체의 차이점5. 왜 일반 객체는 키가 문자열로 변환되는 거고, Map은 객체나 배열도 키로 저장되게끔 설계된 걸까?  0. Map과 Set 딥 다이브 계기 여느 때처럼 알고리즘 문제를 풀기 위해 돌아다니던 중, '캐시'라는 문제를 발견했다.기업에서 실제로 낸 코테 문제를 좋아하는 나는 어렵든 말든 일단 도전해봤다.  LRU랑 cache hit, cache miss가 뭔지 도통 전혀 모르겠어서 다른 분의 풀이를 보며 찬찬히 이해하기 시작했다. function solution(cacheSize, cities) { // DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 let answer..

0. TL;DR1. 타임라인 다이어그램 그리는 단계2. 더 빠르게 동작하는 타임라인3. 모든 병렬 콜백을 기다리는 Cut(컷)4. 멱등성*을 적용해, 여러 번 호출하더라도 한 번만 실행되도록5. 명시적 시간 모델6. 기타 | 어떠한 응답이 다른 응답보다 가끔 늦어지는 이유?  드디어 쏙쏙 들어오는 함수형 코딩 스터디 마지막이다!유익한 내용도 꽤 있었지만 설명이 좋지 않아서 이해하는 데 시간이 꽤 걸리기도 하였다. 다음에 읽을 땐 하이라이트 처리한 부분 위주로 읽어야겠다. 스터디 내용은 블로그와 개인 노션에 핵심 정리하며 읽었는데 확실히 큰 도움이 되었다.이해가 안 되는 부분이나 이해는 되었으나 필자가 제대로 설명하지 못해 헷갈리는 부분은 내 표현대로 다시 개념과 내용을 정립했다. 기억에 오래 남을 것 같..

0. TL;DR 1. 타임라인 다이어그램 | 기본 규칙 2. 타임라인 다이어그램 | 좋은 타임라인의 원칙 3. 타임라인 다이어그램 | 타임라인 단순화 4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결 0. TL;DR 타임라인 다이어그램: 코드가 순서대로 실행되는지 or 동시에 실행되는지 알림 자원을 공유하는 부분: 버그 발생 확률이 높음 자원을 공유하지 않는 부분: 독립적으로 이해하고 실행 가능 타임라인 다이어그램의 기본 규칙 두 액션이 순서대로 나타나면 같은 타임라인에 넣음 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음 좋은 타임라인의 원칙 타임라인이 ‘적을수록’ 이해하기 쉬움 타임라인이 ‘짧을수록’ 이해하기 쉬움 공유하는 자원(e.g. 변수)이 적을수록..

[들어가며] 알아둬야 할 개념0. TL;DR1. 복잡한 반복문을 함수형 도구 체인으로 바꾸는 방법2. 반복문을 함수형 도구로 리팩토링3. 체이닝 디버깅을 위한 Tip    [들어가며] 알아둬야 할 개념시퀀스: 컴퓨터 과학 & 프로그래밍에서 ‘특정한 순서대로 내열된 데이터’를 표현하는 자료구조 or 데이터 유형데이터의 순서가 중요각 요소가 그 순서에 따라 접근할 수 있는 특성을 갖고 있음e.g. 자바스크립트에선 배열, 문자열이 해당항등 함수: 인자로 받은 값을 그대로 return 하는 함수아무 일도 하지 않지만, 아무것도 하지 않아야 할 때 유용하게 사용 가능  0. TL;DR체인: 여러 단계를 조합하는 것원하는 결과에 가까워지도록 데이터를 한 단계씩 변환기존에 있던 반복문을 함수형 도구 체인으로 리팩토링..

[들어가며] 알아둬야 할 개념0. TL;DR1. 카피-온-라이트 리팩토링2. 함수를 return 하는 함수   [들어가며] 알아둬야 할 개념일급 함수: 함수가 다른 데이터 타입(숫자, 문자열 등)과 동일하게 취급되는 것⇒ 함수를 변수에 할당하거나, 함수의 인자로 전달, 함수에서 반환할 수 있는 함수를 의미. 자바스크립트에서 함수는 일급 객체다.고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수[차이점] 일급은 인자로 ‘전달’할 수 있음. 고차는 함수가 다른 함수를 인자로 ‘받을’ 수 있음  0. TL;DR고차 함수 사용 시, 장점패턴 or 원칙을 코드로 만들 수 있음 ⇒ 중복된 많은 코드를 없애줌 (사용하지 않으면 일일이 수작업 해야 함)함수를 리턴하는 함수를 만들 수 있음단점: 가독성이 안 좋을 수..