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줄로 정렬과 가..

Zustand는 전역상태를 관리하는 라이브러리다.(글 마지막 부분에 Zustand에 대해 정리한 주소를 올렸다.)전역상태를 다루기 위해서는 create 함수 안에 매개변수인 set함수를 써야 상태(state)를 변경할 수 있다. 보통 set함수는 보통 두가지 형태로 쓴다.const store = create((set, get) => ({ count: 0, increase: () => set({ count: 2 }), decrease: () => set(state => ({ count: state.count - 1}))})); 여기서 increase 와 decrease 함수를 보자.increase 함수는 set 함수의 매개변수로 객체 형태로 count 에 직접 2를 할당하고decrease 는 set..

들어가기 전자바스크립트를 그냥 저냥 사용하고 있다. 늦었지만 의문이 하나 생겼다.function sayHello(){ console.log("Hello!!");};const sayHello = function(){ console.log("Hello!!");}; 함수를 선언하는 것 / 변수에 함수를 담는 것볼 땐 무슨 차이인가 싶다이 둘의 차이는 호이스팅(hoisting)과 스코프(scope)와 같은 차이가 있다. 1. 함수 선언문 (Functional Declaration)function sayHello() { console.log("Hello!!");}; 이처럼 함수를 선언하는 것을 "함수 선언문"이라고 한다.호이스팅 : 전체 코드에서 최상단으로 끌어올려지기 때문에 정의하기 전에 호출이 가능하다...

들어가기 전프로젝트를 진행하면서 프론트를 같이 담당하고 있는 팀원이 새로운 라이브러리를 써보자. 라는 의견을 제시해서 나온 것중에 하나가 저번 글에 작성했던 Zod였고 다른 하나는 React-hook-form 이다. 인터넷을 검색하다 보면 Zod와 React-hook-form을 같이 쓰는 글들을 찾아 보기 쉽다. 그 만큼 이 두 라이브러리 조합이 좋다는 것을 의미한다고 생각한다. 본론으로 들어가서 React-hook-form에 대해서 알아보자. React-Hook-Form (RHF) 란?이름에서 알 수 있듯이 form을 관리하는 라이브러리 중 하나다.유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다.줄여서 RHF라고도 하는 듯하다.RHF 를 사용..

들어가기 전TypeScript는 코드를 미리 검증해서 오류를 줄이고, 개발을 더 빠르고 안정적으로 만드는 도구다.가장 좋은 장점 중 하나는 명확한 타입 정의로 큰 프로젝트 유지보수가 가능하다는 점이다.타입을 정의함으로써 데이터 유효성 검증을 할 수 있게된다. 그리고 클라이언트와 서버간의 통신 사용자가 입력한 데이터API응답 데이터를 검증하는데 이 작업은 필요하다.TypeScript는 컴파일 시점에서 타입은 검증하지만, 런타임에서 발생하는 에러는 방지하기가 어렵다.(런타임은 타입스크립트가 아닌 자바스크립트 실행이기 때문이다.)Zod를 사용하면 이를 해결할 수 있다. 오늘은 Zod에 대해서 알아보겠다.Zod 란?Zod는 스키마 선언 및 유효성 검사 라이브러리다.Zod는 앞서 말했듯이 타입스크립트의 런타임에서..

프로젝트를 진행하면서 여러 에러와 마주하면서 처리하며 나아가고 있다. 그러면서 문뜩 생각이 스쳐 지나갔다.에러는 처리하고 있는데 내가 지금 에러를 처리했지만 문제를 해결하고 있는 것이 맞는것인가?아직 초심자고 신입을 준비하는 사람이라 더 생각할 필요는 없지만 그래도 한번쯤 생각나게 만드는 키워드가 2개가 있다. '코더'와 '개발자' . 이 2개이다. 코더도 물론 힘들다. 하지만 개발자는 그보다 더 힘들 것이다.내가 생각한 코더와 개발자의 차이는 '코드를 치는 사람'과 '문제를 해결하는 사람' 이라는 차이이다.이 차이는 분명 엄청난 차이가 있다."코드를 치는 사람이 다 문제를 해결하진 않지만 문제를 해결하는 사람은 다 코드를 쳤을 것이다."라고 나는 생각한다. 그래서 코더가 아닌 개발자가 되려면 어떻게 해..