Will find a way

들어가기 전필자가 프론트엔드 프로젝트를 하면서 겪었던 사소한 문제가 있었다. 프론트에서는 카멜 케이스를 사용하는데 백엔드는 스네이크 케이스를 사용하기 때문에 데이터를 주고 받으면서 생기는 문제이다. 내가 받은 데이터의 key를 다시 스네이크로 변환하여 백엔드한테 요청을 보내야할 때가 생긴다. 이 문제를 해결하는 방법을 간단하게 알아보자.camelCase -> snake_case 변환// camelCase -> snake_case 문자열// ex: userName -> user_namefunction camelToSnake(str: string): string { return str.replace(/([A-Z])/g, '_$').toLowerCase(); // 대문자 앞에 언더스코어 추가하고, 전체를 ..

들어가기 전Axios는 웹 개발을 공부하고 프로젝트를 경험해본 사람이라면 많이 경험해봤을 것이다. 특히 프론트엔드 개발에서 API 호출을 매우 많이 사용하게 된다. 오늘은 이 Axios에 대해서 알아보고 더불어 Axios instance에 대해서 알아보려고 한다. Axios 란?Axios는 브라우저와 Node.js 에서 작동하는 Promise 기반의 HTTP 클라이언트 라이브러리다.import axios from 'axios';axios.get('https://jaka.com/api/user') .then(res => console.log(res.data)) .catch(err => console.error(err)); // 가독성을 위해 들여쓰기 - axios는 HTTP 메서드 GET, POST,..

들어가기 전타입스크립트를 사용하다보면 객체 일부만 수정하거나, 특정 필드를 제외한 타입을 필요로 할 때가 있다. 필자도 타입스크립트를 이런 상황을 마주하곤 했다. 그럴 때 Partial과 Omit이 매우 유용하게 쓰였다. 오늘은 Partial과 Omit에 대해서 간단히 알아보자. Utility Type (유틸리티 타입)먼저 Partial과 Omit을 알기 전에 유틸리티 타입에 대해 간단하게 설명하겠다.Utility type(유틸리티타입)은 TypeScript에서 기본 타입을 변헝하거나 조합해서 새 타입을 만들 수 있게 도와주는 타입이다. PartialPartial은 T 타입의 모든 속성을 선택적으로 만든다.type User = { id: number; name: string; email: strin..

제네릭이란?제네릭은 타입을 매개변수화하는 기능.함수나 클래스를 정의 할 때 궤적인 타입 대신 타입변수를 사용하여실제 사용할 때 타입을 결정할 수 있게 해줌 사용 목적1. 코드 재사용성동일한 로직을 여러 타입에서 사용할 수 있음 2. 타입 안정성any를 사용하지 않고도 유연한타입 처리가 가능 3. 가독성과 유지보수성코드 중복을 줄이고 의도를 명확히 표현이 가능 제네릭 사용 전 / 후// 제네릭 사용 전function getFirstString(arr: string[]): string { return arr[0];}function getFirstNumber(arr: number[]): number { return arr[0]}// 제네릭 사용 후function getFirst(arr: T[]): T { ..

들어가기 전웹이나 앱 개발을 공부하다 보면, 페이지네이션을 구현해야 할 일이 한 번쯤은 생긴다.이 글은 페이지네이션의 개념과 구현 원리를 설명하는 데 목적이 있으며, 언어에 구애받지 않고 개념 중심으로 서술된다.코드나 언어는 단지 도구일 뿐, 핵심 원리를 이해하면 어떤 기술 스택을 쓰더라도 직접 구현할 수 있다.페이지네이션이 무엇이며 어떤 원리로 구현되는지 알아보자. 페이지네이션(Pagination)이란?페이지네이션은 보여줄 데이터가 많을 때 사용하는 기능중 하나로 한번에 많은 양의 데이터를 보여줄 수 없을 때 사용하는 기능이다.일상생활에서 우리는 일반 게시판에서 게시글 밑에 번호, 다음, 이전 버튼들이 있는것을 쉽게 접할 수 있다. 클릭을 할 때 각각의 페이지로 이동할 수 있는 것. 그 기능이 '페이지..

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

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

타입스크립트로 프로젝트를 진행하던 중 에러가 발생했다.타입 지정을 제대로 하지못해 발생했다.밑에는 내가 겪은 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도 써주면 되는거 아니야?? 결론당연히 내가 틀렸다..

들어가기 전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)- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각(쿠키는 유효기..