profile
FrontEnd Developer
post-thumbnail

React Hook 정리

useState 훅은 함수형 컴포넌트에서 상태값 관리를 위해 사용 / 상태값 변경 함수는 비동기로 동작 / 참조타입을 상태값으로 관리하는 경우 깊은비교, 얕은비교 주의 / 상태값 변경 시, 컴포넌트는 re-rendering(자식 컴포넌트 포함)useEffect 훅은

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

Closure - javascript

javascript의 closure는 react hook 등 여러 곳에 사용되며 중요한 개념 중 하나이다.closure에 대해 공부한 개념들을 정리해보고자 작성해보려한다.javascript에는 함수 레벨 스코프 / 블록 레벨 스코프가 있으며 es6(const, let)

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

React의 특징과 사용하는 이유는?

나 또한 jquery를 사용해 DOM을 변경하여 UI를 개발했던 경험이 있었다. 2018년도 즈음부터 React를 jquery 보다 이용하는 사용자수가 많아졌고 현재는 UI 개발 라이브러리의 흐름이 변경되었다.웹은 DOM(Document Object Model)이라는

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

✨ [React] Typescript + eslint + prettier 적용하기

새로운 사이드 프로젝트를 진행하면서 CRA로 구축한 환경에 Typescript, Eslint, Prettier 세가지를 먼저 적용해 보려고 한다.먼저 CRA(typescript) 생성한다.다음으로 필요한 패키지들을 설치해야하는데 먼저 Eslint 적용을 위한 패키들을

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

Typescript의 비구조화 할당

한글로 풀어 쓰면 '구조 분해 할당' 또는 '비구조화 할당'으로 표현위의 객체에서 name, age, gender를 각각 분리해서 사용하고자 할 때 destructuring을 사용name, age, gender를 각각 string, number, string으로 명명하

2022년 11월 25일
·
0개의 댓글
·

IIFE로 비동기 구문 간결하게 정리하기

React useEffect hook의 비동기 구문을 간결하게 정리하는 방법에 대해 알게 되어 정리하고자 한다. React hook에 상관 없이 사용될 수 있는 Javascript Function이다. ()()은 IIFE (즉시 실행 함수 표현, Immediately

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

Search Navie String

주어진 문자열에서 2개 이상의 특정 문자열이 포함되어 있는지 또는 몇개가 있는지 확인하는 알고리즘을 구현해보았다.다음과 같이 작성하였다.기존의 문자열 검색 함수로 indexOf는 인덱스 값을 반환, includes는 boolean 값을 반환하였고,위 알고리즘으로 특정

2022년 7월 16일
·
0개의 댓글
·

binary search algorithm

선형검색과 다르게 이진검색은 특정 조건에 정렬되어있어야 하지만 선형검색 보다 효율성이 높다.다음과 같이 이진 검색을 작성해 보았다.

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

helper method recursion

재귀함수에서 중요한점은 죵료 시점을 넣어야 한다는 것.동작은 Call Stack으로 이루어진다.다음 방식으로 입력한 배열 중 홀수를 골라내는 재귀함수를 만들어 보았다.

2022년 7월 11일
·
0개의 댓글
·

[Javasript] const array는 왜 push(), pop()이 가능할까?

const 는 상수를 정의한다는 의미로 재할당, 재선언이 불가능하다. 그렇지만 위와 같이 const로 선언한 array가 push(), pop()은 가능하다. push 와 pop 은 재할당이 아닌걸까?참고 - 나무위키 \[\[https://namu.wiki/w

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

[Javascript] 비동기와 Axios 통신

지난번에 알아보았던 비동기 작업 패턴을 활용하여 비동기 통신을 알아보려고 한다. Axios란? fetch Api와 마찬가지로 비동기 통신에 사용되는 라이브러리로 많이 사용되고 있는 비동기 통신 방법이다. 둘은 간단히 비교 하자면 이렇다.

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

[javascript] 비동기/Promise/async & await 이해하기

앞서 동기란 순차적으로 작업을 수행해 나가는것을 말함. ex) A 작업 종료 > B 작업 수행비동기는 진행중인 작업이 있음에도 다른 작업을 수행해 나가는것을 말함.오래전에 jquery ajax로 비동기 통신을 사용하면서 유기적인 흐름제어가 안된다는 점과 callback

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

브라우저 렌더링 과정

1. 브라우저 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. ( 명세는 웹 표준화 기구인 W3C에서 정해짐) 브라우저의 기본 구조 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 페이지 뷰 이외의 다른 모든 부...

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

React - proxy/cors

React 개발 환경에서 react 주소는 http://localhost:3000, node 주소는 http://localhost:5000인데api를 요청할 경우 SOP라는 동일한 프로토콜, 호스트, 포트의 Origin에 요청된 자원만 응답이 가능한

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

[JS] Optional Chaining

Optional Chaining은 ?. 앞의 평가 대상이 null이나 undefined인 경우 평가를 멈추고 undefined를 반환위와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.?. 을 사용하면 프로퍼티가 없는 객체에 에러 없이 안전하게 접근이

2022년 5월 31일
·
0개의 댓글
·