# What I learned

24개의 포스트
post-thumbnail

React | React Query

UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어

2023년 1월 6일
·
0개의 댓글
·
post-thumbnail

Library | Axios

신규 프로젝트를 진행하기 위해 서버와 데이터를 주고받기 위해 HTTP 통신을 해야하는법을 알아야 했다. 그 중 Axios를 통해 HTTP 통신하는 방법에 대해 알고 싶어서 찾아봤다. 주요 HTTP 통신방법 왜 React에서 주로 Axios를 이용해 통신하는

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

API | RestAPI

REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

Node | Express

1Express란 Node.js의 프레임워크이다. 자바스크립트 프레임워크로 React, 자바 프레임워크로 Spring 등등이 있는 것처럼 Express는 Node.js를 빠르고 간결하게 사용할 수 있게 해준다. 2. Express의 특징E

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

Node | NVM, NPM

Node.js는 Javascript의 runtime 이다.runtime이란? 프로그램이 실행될 때, 그 프로그램이 동작하는 곳이다.기존의 Javascript 런타임은 크롬, 사파리 같은 웹 브라우저였다. 그런데 Node.js의 등장으로 웹 브

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

React | useDeferredValue, useTransition

자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다.대표적인 예가 바로 자동완성이다. 구글에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트하면서 추천 검색어를 띄워줘

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

React | ContextAPI

react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다.일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다.즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, funct

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

React | useReducer

useState의 대체할 수 있는 함수다. useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 

2022년 12월 29일
·
0개의 댓글
·
post-thumbnail

React | Hooks Tip

공부하면서 얻은 Hooks Tip!두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다.첫 렌더링 때 실행된다고 생각하면 된다.첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidU

2022년 12월 29일
·
0개의 댓글
·
post-thumbnail

JavaScript | async & await

async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다.이처럼 async 를 사용하면 promise 코드를 훨씬 직관적으로 나타낼 수 있다.함수에 async만 붙이면 자동으로 promise 객체로 인식되고, return값은 

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

Web | 이벤트루프 & 태스크 큐

자바스크립트는 싱글 스레드 기반의 언어 이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다.이는 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리할 수 있음 을 의미한다.만약 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면 네트워

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | 프로미스(Promise)

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.ES6에서는 비동기 처리를 위

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | 클로저(Closure)

클로저(closure)는 자바스크립트에서 중요한 개념 중 하나다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | this

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체 와 this를 암묵적으로 전달 받는다.Java에서의 this 는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다.

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | 실행 컨텍스트

실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는개념이다.실행 컨텍스트는 자바스크립트 코드가 실행되는 환경이다. 모든 JavaScript 코드는 실행 컨텍

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | use strict

"use strict" 혹은 'use strict' 는 단순한 문자열처럼 생겼다. 하지만 이 문구가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작하게된다."use strict"는 평범한 JavaScript에 몇가지 변경이 일어나게 한다.기존에는 조용히

2022년 12월 26일
·
0개의 댓글
·
post-thumbnail

JavaScript | TDZ

TDZ(Temporal Dead Zone)를 해석하면 "일시적 사각지대"다.첫 번째 코드 인스턴스 생성 후 클래스 선언두 번째 코드 함수 호출 후 함수 선언위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면ReferenceEr

2022년 12월 26일
·
0개의 댓글
·

날짜 차이 계산

예시 코드내 전역일로부터 지금까지 얼마나 시간이 흘렀는지 계산해보았다.결과를 보니..벌써 1년 20일이 흘렀다.여기서 주의할 점은 getDays는 1년 20일의 기간 차이를 일로 환산해 385일을 반환하는 것이 아닌 1년 0월 20일 중 day의 값만 반환한다는 것을

2022년 10월 6일
·
0개의 댓글
·

LocalDateTime & LocalDate & LocalTime

여행을 DAMDA 프로젝트는 여행계획을 세우는 서비스이기 때문에 날짜, 시간 등의 데이터를 당연히 사용한다.이걸 계기로 자바의 날짜, 시간 데이터 클래스인 LocalDateTime, LocalDate, LocalTime 등 을 살펴보려한다.날짜와 시간 정보가 모두 필요

2022년 10월 6일
·
0개의 댓글
·

Spring Boot - model로 넘겨준 변수 javascript에서 사용하기

Spring Boot를 사용하는 사람이라면, 스프링 컨트롤러에서 model로 html에 정보드을 넘겨주고 html에서 그 정보들을 사용하게 할 것이다.난 프로젝트를 하면서 model에서 넘겨준 정보들을 javascript에서 사용해야 하는 경우가 많이 있었다.그래서 질

2022년 10월 6일
·
0개의 댓글
·