Programing

[Git] Rebase를 활용한 커밋 메세지 합치기

프로젝트를 진행하면서 특정 기능 개발을 위한 브런치를 만들고 기능이 완성될 때까지 중간중간 커밋 기록이 남는다. 기능 추가, 버그 수정, 리펙토링 등등 수많은 커밋 내역을 거쳐 기능이 완성되면 Main 브런치에 푸시하게 된다. 이때 Main에 기능 개발까지 남겨둔 커밋 내역들이 모두 넘어가게 되면 히스토리가 지저분하게 느껴질 수 있다. rebase를 활용하면 특정 커밋 메시지를 수정하거나 개발과정에서의 여러 커밋 내역들을 깔끔하게 합쳐 히스토리를 간결하게 만들 수 있다. commit log 확인하기 git log --oneline log를 볼 때 --oneline 옵션을 추가하면 간단하게 커밋과 메세지만 확인할 수 있다. 예시를 위해 위 로그 중 06045a8 ~ 4601787 까지의 커밋을 합쳐보려 한..

[React] vite 프로젝트 + vercel 배포 후 새로고침 404

에러난 시점의 상황 1) React + Vite 로 프로젝트 생성 2) Vercel 에 프로젝트 배포 3) 배포 후 정상적으로 작동하지만 URL을 직접 입력해서 페이지를 이동하거나 라우터 진입 후 새로고침 시 404에러 해결한 방법 1) package.json과 같은 위치에 vercel.json 생성 후 아래 코드 입력 { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] } 2) 재배포 후 확인

[TS] 타입스크립트 png파일 import Cannot find module

타입스크립트에서 png 같은 로컬 파일 받아올 때 모듈을 찾을 수 없다며 아래와 같은 에러가 뜰경우 Cannot find module '' or its corresponding type declarations. 왜 발생하는가? 타입스크립트에서 기본적으로 import 해올 수 있는 파일은 확장자가 .ts .tsx .d.ts 인 경우이다.( 정적인 에셋 가져오기를 유효한 모듈로 인식하지 않음 ) 따라서 확장자가 .png 혹은 .jpg 같은 파일을 import해오면 찾을 수 없다는 에러가 발생한다. 자세한 내용은 module resolution 해결 방법 1. 프로젝트 폴더 ( ex. src ) 에 types 폴더를 생성해 주고, index.d.ts 파일을 만든다. 생성한 파일에 declare module '..

[React / TypeScript] Debouncing을 활용한 검색기능 구현

디바운싱 이벤트가 연속적으로 발생할 때 마지막으로 발생한 이벤트를 기준으로 일정 시간 후에 마지막 이벤트만 실행되도록 한다. 유사한 개념으로 쓰로틀링이 있으나 검색 기능에 적용하기에 디바운싱이 더 적합한 거 같아 적용해 보았다. 디바운싱 없이 input 값을 인식하는 경우 단순히 input 태그에 들어오는 값을 받을 경우 사용자가 입력하려는 검색어가 들어올 때 매입력마다 불필요한 리랜더링이 일어난다. const Search = () => { const searchHandler: React.ChangeEventHandler = e => { console.log(e.target.value); }; return ( e.preventDefault()}> ) } 이 경우에 디바운싱을 적용시켜 볼 수 있다. 예컨대..

[React] vite 프로젝트 만들기

노드 패키지 매니저(npm)를 사용한 방법이다. 시작하기 호환성 Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구한다. 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다. //이미 설치되어 있는 Node.js의 버전을 확인하고 싶다면 node -v 프로젝트 생성 1. 기본 명령어 npm create vite@latest 위 명령어로 vite 최신 버전을 설치하면서 프로젝트 이름, 프레임워크, 템플릿을 순서대로 고르면 프로젝트가 생성된다. 2. 옵션 추가 npm create vite@latest project-name -- --template react-ts // npm 7 이상의 버전에서는 꼭 '--'를 붙여줘야한다. // JS를 사용하는 리엑트라면 끝에 react, T..

[Git] github repository 연결하기

로컬 저장소에서 작업한 후 깃허브에서 만든 원격 저장소에도 저장할 수 있다. 1. 깃허브에서 레포지토리 생성 자신의 깃허브에서 레포지토리로 들어가면 New 버튼을 눌러 새 레포지토리를 만들 수 있는 버튼이 있다. 레포지토리를 만들고 나면 다음 화면을 볼 수 있는데, 우측 복사 버튼을 눌러 주소를 가지고 로컬 저장소로 이동한다. 2. 로컬 저장소를 원격 저장소와 연결 git remote -v 로컬 저장소에서 해당 명령어를 입력하면 현재 로컬 저장소와 연결된 레포지토리의 주소를 보여주는데, 연결되어있지 않다면 아무것도 나오지 않는다. 원격 저장소의 등록 레포지토리와 연결시키기 위한 명령어는 // git remote [name] [레포지토리 주소] git remote add origin https://gith..

[React] 소셜웹페이지 - 서버 통신 & 로그인

서버의 도움을 받아 회원가입 - 로그인 - 메인 페이지로 로그인 유저 넘기는 과정까지 진행해보았다. 목데이터가 아닌 실제 서버랑 통신하게 되면서 오류도 많이 봤지만, 이런저런 정보를 받아보면서 재밌었던 것 같다. 회원가입 const navigate = useNavigate(); const [id, setIdValue] = useState(''); const [pw, setPwValue] = useState(''); const onSubmit = (e) => { // email : justpoy@email.com // pasword : 11111 e.preventDefault(); fetch("http://localhost/users/signup", { method: "POST", headers: { "C..

[React] 댓글 입력 오류

댓글을 받으면서 공백인 상태에서도 댓글 입력이 들어가는 문제가 있었다. 처음엔 button에 집중해서 문제를 해결했지만 form에서 해결하는 방법이 더 만족스러웠다. button에서 onClick 게시 form 태그 안에서 input과 button이 있고, button에 onClick으로 클릭 시 input 값을 댓글로 쓰도록 만들었다. const [userName] = useState('codelike'); const [commmentArr, setCommentArr] = useState([]); const [isValid, setIsValid] = useState(true); const [id, setId] = useState(0); const value = useRef(); const post = ..