본문 바로가기

전체 글

 (220)
[Next.js] redirect 함수, notFound 함수는 try/catch 밖에서 사용해야 합니다 1. Next.js의 redirect 함수는 특별한 타입의 에러(NEXT_REDIRECT)를 throw하는 방식으로 작동합니다. 2. try/catch 블록 안에서 redirect를 사용하면 redirect가 던진 에러가 catch 블록에서 잡혀버리고redirect 는 동작하지 않게 됩니다. 3. 클라이언트 컴포넌트의 경우,  useRouter를 사용하는 것이 더 적절할 수 있음 4. 추가로 notFound() 함수도 아래와 마찬가지 패턴으로 처리해야 합니다.  import { redirect } from 'next/navigation';// ... 생략 ... let isRedirect = false; try {// ... 생략 ... isRedirect = true; } catch (err..
[Next.js] Next.js의 환경 변수 파일 우선순위와 용도 1. 환경변수 로드 순서 : 우선순위 (높음 -> 낮음)시스템 환경 변수 .env.$(NODE_ENV).local .env.local (.env.test.local 제외) .env.$(NODE_ENV) .env $(NODE_ENV)는npm run devnpm run build / npm run startnpm test 에 따라 자동으로 할당되는 값이며 일반적으로 development, production, test 세가지 값을 가질 수 있습니다. 그래서 # 개발 환경에서 실행 시 우선순위1. .env.development.local2. .env.local3. .env.development4. .env# 프로덕션 환경에서 실행 시 우선순위1. .env.production.local2. .env.local3..
[Next.js] layout.js 와 templete.js 의 차이점 1. Layout.js공유 UI를 여러 페이지에서 재사용페이지 전환시 리렌더링되지 않음한번 마운트된 후 계속 유지되는 특성상태가 유지됨헤더, 네비게이션 바와 같은 지속적으로 유지되어야 하는 UI 요소에 사용리렌더링되지 않아 성능상 이점2. Templete.js매 페이지 전환시 새로운 인스턴스 생성상태가 유지되지 않음 (not preserved)매번 새로 마운트됨페이지 뷰 추적 , 페이지 전환 애니메이션, 입력 값 초기화가 필요한 경우에 사용컴포넌트 격리가 필요할 때도 사용템플릿은 매번 새로 마운트되어 메모리 관리 필요 // Layout.tsx'use client'export default function Layout({ children }) { console.log('Layout 마운트됨!') // 최..
[Git] Gitflow 브랜칭 전략 용도에 맞춰 브랜치 이름을 달리 해나가는 전략입니다feature 브랜치는 기능에 따라 다수가 존재할 수도 있습니다.  타입설명타입설명feat새로운 기능 추가fix버그 수정docs문서 수정style공백, 세미콜론 등 스타일 수정refactor코드 리팩토링perf성능 개선test테스트 추가chore빌드 과정 또는 보조 기능(문서 생성기능 등) 수정 예시  feat: 압축파일 미리보기 기능 추가 사용자의 편의를 위해 압축을 풀기 전에 다음과 같이 압축파일 미리보기를 할 수 있도록 함  - 마우스 오른쪽 클릭  - 윈도우 탐색기 또는 맥 파인더의 미리보기 창 Closes #123 ( 여기는 이슈 번호입니다 ) https://nvie.com/posts/a-successful-git-branching-model/ ..
[Git] 브랜치 다루기 고급 기능 : cherry-pick, rebase --onto, merge --squash 1. cherry-pick : 다른 브랜치의 단일 커밋 가져오기 다른 브랜치의 원하는 하나의 커밋만 가져올 때 사용합니다.   예를 들어 b브랜치의 b2 커밋 내용만 main 으로 가져오고 싶으면  # b 브랜치의 커밋로그 확인후 b2의 커밋 해시 알기git log b# 메인브랜치에서 실행git cherry-pick (b2 의 해시) 그럼 아래의 표처럼 main 의 a4 커밋 뒤에 b2를 가져올 수 있습니다    2. rebase --onto : 다른 가지의 잔가지 가져오기 ( 브랜치의 자식 브랜치 옮겨 심기)  신기능 개발로 b 브랜치를 작업하던 도중, 추가기능 c 브랜치를 개발하고 있는데c 기능만 사용하는 걸로 바뀐 경우입니다.  git rebase --onto (도착 브랜치) (이동 대상 브랜치의 ..
[Git] git reset --hard 실수했을 때 복구하는 방법: reflog로 살리기 1. reset --hard는:작업 디렉토리가 완전히 깨끗해짐 Staged 파일들도 모두 사라짐 Untracked 파일들은 남아있음 (단, git clean -f와 함께 사용하면 이것도 삭제) git status로도 이전 변경사항을 확인할 수 없음 오직 git reflog로만 이전 상태 확인 가능# 1. 정상적인 작업 상태git add .git commit -m "중요한 작업 완료"# 2. 실수로 hard reset 실행git reset --hard HEAD~10 # 10개 이전 커밋으로 되돌림# (여기서 패닉!)  2. reflog는 HEAD가 가리켰던 모든 이력을 보관하는 로그입니다. reflog에서 볼 수 있는 정보:커밋 해시 HEAD@{n}: HEAD가 n번째로 가리켰던 위치 어떤 명령이 실행되..
[Git] 추적되지 않는 파일 깔끔하게 정리하기 : git clean git 에서 추적하지 않는 파일들 삭제할 때 사용하는 명령어 입니다. options-n삭제될 파일들 보여주기-i인터렉티브 모드 시작(선택해가며 삭제작업 시작)-d폴더 포함-f강제로 바로 지워버리기-x⚠️ .gitignore에 등록된 파일들도 삭제 여러 개 명령어를 붙여서 사용 가능합니다.git clean -nd# Would remove test/# Would remove toClean1.txt# Would remove toClean2.txt  위 처럼 i 옵션을 주면 선택해서 삭제할 수도 있고 바로 삭제도 할 수 있습니다. 삭제하면 되살릴 수 없지에 처음에는 n 옵션 (지울 파일 대상 확인하기) 사용하시길 권장드립니다.   아니면 바로 삭제하려면 아래를 사용하시면 됩니다.git clean -fd # 폴더..
[Git] 커밋하지 않은 변경사항 되돌리기 ( restore ) 1. 변경된 파일 원래대로 돌리기 git restore (파일명) // 특정 파일의 상태 되돌리기 (ctrl + z 효과) git resotre . // 모든 파일 되돌리기  2. stage 상태의 파일  add 이전으로 되돌리기git restore --staged (파일명)  3. 파일을 특정 커밋의 상태로 되돌리기git restore --source=(헤드 또는 커밋 해시) 파일명# HEAD 를 사용해서 2개 이전 버전으로 특정 파일 복원git restore --source=HEAD~2 file.txt (커밋 해쉬는 git log 로 확인 가능합니다. 아래 노란색 ab4..)  하지만 vscode는 딸깍으로 가능하죠.. vscode 만쉐이..?

티스토리툴바