이미지 업로드 전 미리보기 기능 구현하기 이미지를 미리 보여 주는 기능을 만들려고 생각했을 때 아래 두 가지 방법을 생각했다. 이미지를 서버에 올리고 반환된 이미지 주소로 이미지를 미리 보여주는 방법 이미지를 서버에 올리기 전 이미지를 미리 보여주는 방법 두 번째 이미지를 서버에 올리기 전 이미지를 미리 보여주는 방법을 선택했는데...

변경된 커밋 메세지 해시 코드를 확인해 보면 해시 코드가 변경된 것을 확인할 수 있다. 때문에 서버에 아직 업로드되기 전에 사용하고, 개발자와 협업하고 있는 상황에서는 서버에 업로드된 history에는 사용하지 않는 것이 좋다. 최근 커밋 메세지 수정하기 git commit --amend -m "<메세지 변경>" ...

git stash 커밋을 하지 않고 스택에 잠시 하던 작업물을 임시로 저장할 수 있다. 잠시 하던 작업물을 stash stack에 저장 후 다른 브랜치로 이동할 때 유용하다. stack 구조로 새로운 것이 위로 쌓이는 구조이다. 기본 명령어 stash stack에 저장하기 (push 생략 가능) git stash or ...

install npm init npm i express morgan express-async-errors typescipt ts-node 기본적으로 typescript, express.js, node.js를 사용하기 위해 필요한 라이브러리를 설치한다. npm i nodemon concurrently @types/node @types/ex...

Portal 이란? Portal 이란 부모 컴포넌트를 벗어나 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법이다. DOM은 트리구조로 부모와 자식 관계를 가지면서 렌더링 되는데 엘리먼트가 위치한 부모와 자식 관계의 구조 따라 z-index가 먹히지 않는 경우가 있다. 아래와 같이 1-modal이 fixed에 z-index를...

To do 라이브러리 없이 아래 나열된 기능을 기준으로 이미지 슬라이드 구현을 해보았다. < (이전), >(다음) 버튼 클릭으로 슬라이드 이미지 전환 모바일에서 터치로 슬라이드 이미지 전환 무한 루프로 마지막 이미지에서 다음 이미지로 터치 또는 클릭 시 자연스럽게 첫 번째 이미지로 이미지 전환, 첫 번째 이미지에서 이전 이미...

Commit(커밋 합치기) git log 위 명령어로 아래와 같이 git history를 확인한다. 예를 들어, .으로 되어있는 커밋들을 합쳐서 2 commit으로 만들고 싶다면 합치고 싶은 이전 commit 해시 키값 3ab1e91ea735703d92fb264c25316ca01a0e70c4을 복사한다. re...

마음에 들지 않는 커밋을 삭제하고 싶을 때 git log 위 명령어로 아래와 같이 git history를 확인한다. 삭제하고 싶은 커밋 이전 커밋 해시 키값을 복사한다. 예를 들어, 3 commit 을 삭제하고 싶거나 3 commit ~ 4 commit을 삭제하고 싶다면 2 commit해시 키값을 복사한다. ...

Next.js & Typescript install npx create-next-app --ts <project-name> touch tsconfig.json npm run dev 에러 나면 아래와 같이 설치 후 다시 실행 npm install --save-dev @types/node package.json ...

Safe Area 아이폰 디스플레이에서 영역이 상/하단 라운드 영역을 포함하고 있는 경우 추가적으로 상단 영역은 카메라, 스피커 등의 센서가 있는 노치(notch) 영역 존재하므로 안정적으로 콘텐츠가 보일 수 있도록 Safe Area를 설정해 주어야 한다. 해결방법 _app.tsx 파일에 뷰포트 메타태그에서 viewport-fit=cov...