Will find a way

제네릭이란?제네릭은 타입을 매개변수화하는 기능.함수나 클래스를 정의 할 때 궤적인 타입 대신 타입변수를 사용하여실제 사용할 때 타입을 결정할 수 있게 해줌 사용 목적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)- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각(쿠키는 유효기..

1. HTML 태그 생성2. JavaScript 코드 부분// 1. 캔버스 요소 가져오기const jakaCanvas = document.getElementById('jaka_canvas');const ctx = myCanvas.getContext('2d');// 2. 캔버스 크기를 브라우저 창 전체로 설정jakaCanvas.width = window.innerWidth;jakaCanvas.height = window.innerHeight;// 3. 마우스 위치를 지정할 객체 (초기값은 중앙)const mouse = { x: jakaCanvas.width / 2, y: jakaCanvas.height / 2 };// 4. 원(circle)의 현재 위치와 반지름 정보const circle = { x: mo..

들어가기 전마우스 포인터를 따라가게 하는 코드를 한번 구현해보고 싶어서 예시 코드를 찾게 되었고 그 중에 canvas 태그를 이용하여 하는 방법을 알게 됐다. 그래서 오늘 알아볼 것은 canvas 태그와 어떻게 사용하는지 알아보려고 한다. 이 글을 읽는 사람들 대부분은 이미 HTML, CSS 에 대해서 어느 정도 알 것이라고 생각한다. 처음에 이 글을 작성할 때, HTML의 카테고리로 넣을 것인지 CSS에(?) 넣어야 하는지 잠시 생각하게 되었는데, 결국에는 JavaScript 카테고리에 넣으려고 한다. 그 이유는 canvas 태그는 자바스크립트로 자주 DOM 조작을 하는 태그이기 때문이다. canvas 태그가 무엇이며 어떻게 쓰는지 알게 된다면 이 말을 납득할 수 있을것이라 생각한다. 바로 알아보자...

들어가기 전지금 간단한 프로젝트를 하는 중이다. react를 사용 중이고 ul안에 li를 map() 메서드로 순회하여 출력하다가 객체 key값을 출력해야할 일이 있었다. 그렇게 찾아보던중 Object.entries() 라는 것을 알게 됐다. 오늘은 Object.entries()가 어떤건지, 언제 쓰면 좋은지에 대해서 간단히 글을 써보려고 한다.1. Object.entries()Object.entries()는 객체를 [key, value] 쌍의 배열로 변환해주는 메서드이며 반환 타입은 2차원 배열이다.객체는 원래 순회가 불가능하다. 그렇기 때문에 배열에만 쓸 수 있는 메서드 (forEach, map 같은 것을 바로 사용하지 못한다.)그래서 사용하는 것이 Object.entries()이다. 그러면 객체를 배..