Will find a way

들어가기 전현재 포트폴리오를 만드는 중 한가지 이슈를 겪었다. 이슈의 내용은 다음과 같았다.이슈 상황- DOM객체를 반환하는 element.getBoundingClientRect() 호출함- 객체의 프로퍼티 중에 y값과 height 값이 필요- 구조분해 할당 이용 1) const { y, height } = element.getBoundingClientRect(); 2) y는 정상적으로 됐으나 height 0으로 출력 (요소의 높이가 나와야함) 이 문제를 해결하는 방법을 알아보던 중 getter 평가라는 키워드를 알게 되서 포스팅 하게 됐다. getter란?JS에서 객체의 속성을 함수처럼 계산해서 돌려주는 프로퍼티를 getter라고 한다.주의 : 값을 "저장"하는 게 아닌, "계산해서 반환"..

들어가기 전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,..

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

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

들어가기 전간이 프로젝트 때 로그인 기능을 구현할 예정이다. 로그인 기능을 구현하기 위해서는 반드시 알아야 할 '쿠키(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 작성하는 사람이 편하게 디자인 된 문법(문법적 설탕)으로 직관적인 특징을 지님객체지향프로그램을 객체들로 구성하고 서로 상호작용을 통해 구현하는 방법 (방법론)..