Will find a way

들어가기 전자바스크립트를 그냥 저냥 사용하고 있다. 늦었지만 의문이 하나 생겼다.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개이다. 코더도 물론 힘들다. 하지만 개발자는 그보다 더 힘들 것이다.내가 생각한 코더와 개발자의 차이는 '코드를 치는 사람'과 '문제를 해결하는 사람' 이라는 차이이다.이 차이는 분명 엄청난 차이가 있다."코드를 치는 사람이 다 문제를 해결하진 않지만 문제를 해결하는 사람은 다 코드를 쳤을 것이다."라고 나는 생각한다. 그래서 코더가 아닌 개발자가 되려면 어떻게 해..

타입스크립트로 프로젝트를 진행하던 중 에러가 발생했다.타입 지정을 제대로 하지못해 발생했다.밑에는 내가 겪은 TypeScript 에러다.Type 'AxiosResponse' is missing the following properties from type 'Promise>': then, catch, finally, [Symbol.toStringTag]ts(2739)const res: Promise> 의미는 다음과 같다."야! AxiosResponse 을 Promise>라고 착각한거야!!!" 내가 착각한 부분은 다음과 같다.- axios면 비동기니까 당연히 Promise 객체를 받아야하는거 아니야??- 그럼 Promise도 써주고 AxiosResponse도 써주면 되는거 아니야?? 결론당연히 내가 틀렸다..

들어가기 전깃을 쓰면서 원하지 경우를 마주하는 때가 종종 있다. 브랜치를 잘못 생성하거나 생성을 못하거나. (종종 나의 실수에 의해서 일어나는 경우가 많다.) 그래도 어떻게든 내가 해결해야하는 것이라 찾아보던 중 cherry-pick이라는 알게되었고 오늘은 cherry-pick에 대해서 알아보려고 한다.git cherry-pick 이란?특정 커밋 (여러개도 가능)을 현재 브랜치로 복사해서 적용하는 명령어다.(즉, 특정 커밋만 골라서 따오고 싶을 때 사용한다.) 사용법git checkout 브랜치이름git cherry-pick - 해당 커밋의 내용이 현재 브랜치에 새 커밋으로 복사된다- 해시값은 변경된다 (원본과 동일한 커밋은 아님 !!!) 예시 시나리오하나의 상황을 가정해보자.1) feature-a 브..

약관동의 구현 (모든 약관, 필수약관)React + Typescript 회원가입 기능을 구현하고 있다.그 중에 하나인 회원가입 전 약관동의를 하는 페이지를 만들었다.그래서 내가 한 방법을 공유해보려고 한다. 원하던 것- 모든약관 동의(체크)하면 필수/선택 약관 모두 체크 박스 체크- 이 중 하나의 약관만 체크가 해제되면 모든 약관 해제- 모든 약관 + 필수 약관 둘중 하나만 조건 충족되면 다음 페이지 활성화 기능구현1. 체크박스가 여러개 쓰일 것을 고려하여 컴포넌트로 제작CheckBox.tsxtype CheckBoxType = { id: string; className?: string; checked: boolean; onChange: (e: React.ChangeEvent) => void;};c..

들어가기 전React 프로젝트 진행중 객체의 상태관리를 필요로 하던 중 Record라는 타입정의 하는 법을 알게 됐다.오늘은 Record가 뭔지 간단하게 알아 보겠다. Record란 무엇인가?타입스크립트에서 객체의 타입을 정의할 때 자주 쓰이는 유틸리티 타입이다. 기본 문법RecordKey's type : 객체의 키 데이터 타입 / Value's type : 객체의 값의 데이터 타입 예시 1 (문자열 키에 불리언 값)const checks: Record = { age: true, terms: false, privacy: true,};// 다음과 같다type Checks = { [key: string]: boolean;} 예시 2 (특정 키들만 허용)type TermKey = 'age' | 'te..

들어가기 전간이 프로젝트 때 로그인 기능을 구현할 예정이다. 로그인 기능을 구현하기 위해서는 반드시 알아야 할 '쿠키(Cookie)'라는 것이 있다. 쿠키에 대해서 예전에 써놓은 글이 있으니 참고하면 된다.쿠키의 속성 중에 HttpOnly와 SameSite라는 것이 있다.HttpOnly는 JS에서 접근이 불가능 하고 XSS 방어를 할 수 있고 SameSite는 CSRF를 방지할 수 있다고 한다.이번에 쓸 글은 XSS가 무엇이며 CSRF가 뭔지에 대해서 알아보는 글이다.https://jakapark.tistory.com/21 [JS] 쿠키 세션 로컬스토리지목차1. 쿠키2. 세션 스토리지3. 로컬 스토리지 1. 쿠키 (Cookie)- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각(쿠키는 유효기..