Will find a way

들어가기 전성공은 200번이라 익숙하지만, 실제로는 다양한 에러를 더 많이 마주하게 된다. 최근에 수정하면서 원래 기능을 하던 API들이 작동하지 않는 경우가 있었다. 예를 들어, 404 에러를 자주 경험했는데 "Not Found(찾을 수 없는)"로 없는 url 요청으로 나는 오타로 인한 404 코드가 많이 발생했다. 그런데 프로젝트 코드수정 후 422 에러가 발생했다. 왜 422 코드였나?422 Unprocessable Entity는 요청이 서버에는 도달했지만, 전달된 데이터가 서버에서 기대하지 않는 유효성 조건을 만족하지 않을 때 발생하는 에러다. 기존의 코드를 수정하던 중 객체를 불필요하게 한번더 중괄호로 감싸서 보냈다.그 결과, 유효성에 맞지 않는 422 에러가 발생하였다. (다행히 POST ..

들어가기 전프로젝트를 진행하면서 클릭 시 페이지 이동과 함께 데이터를 요청하는 작업을 자주 하게 됐다. 리액트에서 페이지를 이동하는 방법으로는 보통 useNavigate 훅을 사용해, 함수를 변수에 담아 활용해왔다. 그렇게 당연하게 사용하던 중, 문득 redirect라는 개념이 떠올랐다.이 차이를 알기 전에는 redirect와 navigate가 단순히 페이지를 이동시켜주는 같은 도구라고 생각했다. “둘 중 아무거나 써도 되는 거 아닌가?“라는 의문이 들었고, 곧 두 방식이 사용 목적부터 다르다는 사실을 알게 되었다. navigate와 redirect 차이를 알아보자. 이 글은 리액트와 리액트 훅에 대해서 안다는 가정하에 쓰여진 글이다. navigate 란?const navigate = useNaviga..

들어 가기 전프로젝트를 진행하며 깃을 관리하는 도중 git checkout을 하고 싶은 경우가 있다. git 명령어를 잘 모를 때는 commit을 하고 checkout을 하는 번거로운 작업을 해야만 했다. 임시로 사용할 commit이라 커밋 내용은 애매한 내용을 저장하는 방법밖에 몰랐다. 그래서 다시 checkout을 하여 커밋 내용을 수정하거나 삭제하여 커밋을 수정하기도 했다. 그러던 중 임시 저장을 하는 'Stash'라는 깃 명령어를 알게됐다. 오늘은 이 stash에 대해서 알아보자. git stash 란?현재 작업 중인 변경사항(수정된 파일, 생성된 파일) 을 임시로 "숨겨놓는" 기능이다.stash : 숨기는 장소를 의미 (영어 사전 참고) stash를 하게 되면- 커밋하지 않아도 된다.- 워킹 ..

들어가기 전프로젝트를 하면서 API들을 따로 관리하는 폴더를 만들어 관리하고 있다. axios 인스턴스 안에 baseURL과 withCredentials을 미리 세팅을 해놓았다. 그리고 내가 기존에 했던 일반 axios 호출을 따로 user.ts 에 추가를 했다. 처음에는 그냥 axiosInstance를 가져와서 무작정 user.ts에 사용하기 시작했다. 하지만 내가 필요한 axios 요청들이 withCredentials: true가 필요없는 상황에서도 쓰는게 맞을까 하는 의문이 들면서 쓰기 시작한 글이다. 지금 밑의 코드는 api를 관리하는 예시 코드이다. index.tsimport axios from 'axios';// 서버 주소를 가지고 있고, 요청 시 쿠키를 포함하는 axios instance 생..

들어가기 전나는 평소에 레이아웃을 만들 때 flex로만 구성하기도 한다. grid로도 할 수 있지만 이미 flex에 익숙해져 있어서 grid 사용 경험이 따로 없다. grid로도 할 수 있는 것들은 flex로 다 할 수 있지만 그래도 상황에 따라서는 grid가 더 나을 수 있기도 하다. 그래서 grid를 한번 사용해보고 간단하게 grid에 대해서 포스팅해보려고 한다. Grid 에 대해서grid도 flex처럼 레이아웃을 배치할 때 사용한다.물론 grid로 할 수 있는 것들은 flex에서도 가능하지만flex 와 grid가 편한 경우가 상화에 따라 각각 다르다. flex 는 간단하게 한줄의 레이아웃을 할 때 간편하고grid 는 조금 더 복잡한 2D 레이아웃을 제작할 때 간편하다. (쉽게 말해 1줄로 정렬과 가..