profile
개발은 낭만이다
post-thumbnail

[React]useEffect

useEffect 함수는 컴포넌트가 렌더링 될때마다 특정작업을 실행할 수 있도록 하는 Rect Hook이다즉 컴포넌트가 mount / unmount / update 됐을때 특정 작업을 처리할 수 있다(class형 컴포넌트의 생명주기 메서드)기본문법컴포넌트가 처음 렌더링

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

[React]useCallback

useCallback은 useMemo와 마찬가지로 렌더링 최적화를 위해 사용하는 React Hook 중에 하나이다함수를 메모이제이션 하는 Hook이고 첫번째 인자로 넘어온 함수를, 두번째 인자로 의존성 배열을 사용한다ex)기본적으로 react 컴포넌트 내에 선언된 함수

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

[React]useMemo

오늘은 React의 많은 Hook 중에 렌더링 최적화를 위해 주로 사용하는 useMemo에 대해 알아보자리액트는 기본적으로 부모 컴포넌트의 state / props 가 변경될때 마다 Rerendering 이 된다하지만 컴포넌트의 state / props가 하나밖에 없는

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

[WEB]Cookie 란?

Cookie ?

2022년 8월 15일
·
0개의 댓글
·

[WEB]LocalStorage / SessionStorage

Web Storage HTML5 부터 도입된 데이터를 브라우저에 저장할수 있는 저장소 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회 상대적으로 덜 중요한 데이터를 보관 문자열(String) 타입만 지원(다른 타입을 넣어도 자동으로 문자열로 변환) 같은

2022년 8월 2일
·
0개의 댓글
·

[React]Props란?

React에서 state에 이어 중요한개념인 props에 대해 알아보자Components의 속성(property)을 의미, 외부로 부터 전달받은 값(변하지 않아야 함) 으로 해당 컴포넌트가 가진 속성에 해당부모 컴포넌트로 부터(상위 컴포넌트) 전달받은 값(React는

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

[React]State(상태)란?

리액트에서 많이쓰이고 중요한 개념인 State(상태)에 대해 알아보자 State(상태) 란? 리액트에서 상태란 컴포넌트 내부에서 변할수 있는 값 이다 예를들어 어떤 홈페이지에서 로그인이 되어있어야 접근할 수 있는 페이지가 있다고 해보자 그렇다면 로그인이 되어 있는

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

[React]JSX란?

JSX는 JavaScript XML의 줄임말이다 React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다 이 문법으로 React 엘리먼트를 만들 수 있다 하지만 공식적인 JavaScript 문법이 아니여서 'Babel' 같은 컴파일러로 Ja

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

[JS]클로저(Closures)

처음 자바스크립트를 배우면서 클로저를 배울때는 '아 이런게 있구나, 음...그렇군... 대충 알겠다' 정도로 넘어갔었다 하지만 이번에는 좀더 공부하고 알아본 내용을 토대로 블로그를 작성하면서 정리 해 보려 한다 먼저 클로저의 정의에 대해서 알아보자. 클로저의 정의 사

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

[JS]Event Loop

최근 자바스크립트와 CS 공부를 더 해야겠다는 마음이 들어서 자바스크립트의 중요한 내용인 Event Loop에 대해 정리 해보려한다. 이벤트루프를 이해하려면 먼저 자바스크립트가 싱글스레드 언어이고 이것이 무엇을 의미하는지 이해해야 한다고 생각한다. 그렇다면 스레드가

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

[React]Redux-toolkit 사용법

store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다.기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서

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

[React]관심사 분리

하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(concerns)을 부여하게 되면 그 코드를 읽는 사람은 혼란스러울 수 있다.가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 것이다. 즉, 코드는 단위 별로 하나의 관심사만 갖도록

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

[React]ESLint / Prettier

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다.그러나, 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않다.이 때문에 런타임

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

Webpack 기본적인 사용법

우선 로컬에 웹팩을 설치한다. 터미널에서 명령어로 실행하기 위해 webpack-cli도 함께 설치하자. 웹팩은 테스트 도구인 cypress와 마찬가지로, 배포할 때 필요한 패키지가 아니라 개발할 때 필요한 패키지이니까 -D 또는 --save-dev 옵션을 준다. 그러면

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

[JS]What is Webpack

웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다.하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다

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

[React] Redux vs React Hooks

출처 https://delivan.dev/react/stop-asking-if-react-hooks-replace-redux-kr/Redux 와 context 관련 글들을 찾아보던중 흥미로운 글이 있어서 가져와 봤습니다많은 동료들이 내게 같은 질문을 다양한 방

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

[React] Virtual DOM

Virtual DOM 을 알기위해선 먼저 DOM이 뭐하는 친구인지 알아보자.DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다즉, 웹 페이지

2022년 4월 25일
·
0개의 댓글
·
post-thumbnail

[JS]var, let, const 차이 / 스코프, 호이스팅

memory allocationhttps://medium.com/@ethannam/javascripts-memory-model-7c972cd2c239먼저 자바스크립트에서 변수가 무엇인지 알아보자. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모

2022년 4월 24일
·
0개의 댓글
·
post-thumbnail

Prototype

서비스 론칭전에 다방면 적으로 유저경험을 테스트 하기위해 사용되는 최종 제품의 시뮬레이션 또는샘플 버전 이라고 간단히 설명 할 수 있다. 그렇다면 어떻게 생겼고 갖는 이점이 뭘까?현재 진행중인 프로젝트의 로그인화면 프로토타입이다, 제 3자들에게 말이나 글로 제작중인 서

2022년 4월 21일
·
1개의 댓글
·
post-thumbnail

Wire-frame

우리 프로젝트 팀은 여행관련 서비스를 이번 프로젝트 주제로 정해 개발을 진행하기로 했다. 서비스 소개와 기능들은 차후 블로그에 올릴 예정이다. 그 전에 먼저 프론트엔드 SR기획에서 핵심이라고 할수있는 와이어프레임과 프로토타입을 만들었고 그중에 와이어 프레임이 뭔지 알아

2022년 4월 20일
·
0개의 댓글
·