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!!");}; 이처럼 함수를 선언하는 것을 "함수 선언문"이라고 한다.호이스팅 : 전체 코드에서 최상단으로 끌어올려지기 때문에 정의하기 전에 호출이 가능하다...

들어가기 전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()이다. 그러면 객체를 배..

들어가기 전C++, JAVA 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 클래스와 상속, 캡슐화를 위한 키워드인 public, private, protected 등이 없어서 JavaScript는 객체지향 언어가 아니라고 오해하는 경우도 있다. 하지만 JavaScript는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이며 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다.자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 '모든 것'이 객체다. (원시타입 제외) 객체지향 프로그래밍프로그래밍에서 필요한 데이터를 추상화시켜 속성과 메서드를 가진 객체를 만들고객체 간의 상호작용을 통해 로직을 구성하는 프로그래밍 패러다임 객체지향 프..

출처 : https://www.yes24.com/Product/Goods/92742567 모던 자바스크립트 Deep Dive - 예스24『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드www.yes24.com Class 란 무엇인가?- 프로토타입객체를 생성하기 위한 템플릿- ES6 생긴 문법 (ES6 이전에도 생성자 함수로 프로토타입 객체를 생성할 수 있었음)- 새로운 객체를 생성하는 메커니즘- 읽는 사람 or 작성하는 사람이 편하게 디자인 된 문법(문법적 설탕)으로 직관적인 특징을 지님객체지향프로그램을 객체들로 구성하고 서로 상호작용을 통해 구현하는 방법 (방법론)..