profile
프론트엔드개발
post-thumbnail

redux-thunk, redux-saga

redux를 공부중에 추가로 사용하게되는 미들웨어 2가지를 알아봤다.조금 어려운 개념인거같아서 대강 정리해두고 실무에서 필요할때 다시 꺼내보려한다 react컴포넌트는 상태에 따른 화면을 정의하는것이 기본 목적이다.redux만 사용해서는 비즈니스로직이 컴포넌트내에 섞이는

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

redux

프로젝트를 만드는중 무수히 많아지는 state들을 매번 자식으로 넘겨주는 과정이 매우 번거롭게 느껴졌다. 그래서 많이 사용하는 redux를 공부해보자초기 상태값 지정reducer에서 초기 상태값을 받고, action을 지정해준다(switch문 사용)action을 지정

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

regeneratorRuntime is not defined 에러

async/await를 사용하려는데 제목과 같은 에러가 발생해서 처리방법을 메모하려한다async/await를 컴파일링 해주는 regenerator를 제공하기위해 @babel/plugin-transform-runtime 을 설치해준다.npm i -save -d @babe

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

async, await

데이터 CRUD공부를 시작하고부터 async await가 엄청나게 많이 보이기 시작했다. 어떤건지 개념을 잡고 가야할거같아 정리해보았다, async, await를 쓰는이유? 기존의 비동기 방식인 callback과 Promise의 단점을 보완하고 코드의 가독성을 높여준

2021년 12월 21일
·
0개의 댓글

React LifeCycle

리액트에서 라이프사이클을 이해하는것이 중요한거같다. 컴포넌트가 생기기 직전, 생긴직후, 사라기전 등 여러가지 상황을 이해하기위해 공부해보자.// 최초 화면렌더링시1\. constructor1\. componentWillMount 이제 안쓰임 쓰지마세요2\. render

2021년 12월 20일
·
0개의 댓글

React에서 불변성을 지키는 이유

React에서 상태값의 불변성을 지키기위해 ...arr, item 이런식으로 spread Operator를 사용한다.단순히 그렇구나 하고 넘어갔는데, 원리가 궁금해서 공부한 내용을 정리해봤다우선 react에서는 state, props가 변경되거나 부모컴포넌트가 렌더링

2021년 12월 20일
·
0개의 댓글
post-thumbnail

SWR

SWR은 React-Query와 함께 데이터Fetching 라이브러리다.SWR은 매번 지속적으로 요청을 보내거나, 페이지에 포커싱을 했을시 업데이트가 되는 등 기능이 있다단, 데이터를 가져오는 get에 특화된 라이브러리다.최초에 데이터를 가져온뒤 매번 불필요한 호출로

2021년 12월 20일
·
0개의 댓글
post-thumbnail

Axios

ES5에 내장된 Fetch와 같이 rest에서 데이터를 가져오고 보내기위한 라이브러리,하지만 Fetch보단 장점이 많아 많이들 사용하는 라이브러리다,브라우저 호환, 자동 json변환, 보안, 부가기능등으로 Fetch보단 Axios를 사용하는것같다.간단한 사용법만 정리해

2021년 12월 20일
·
0개의 댓글

조건부렌더링(&&), optional chaning(?.)

react에서 undefined가 될 수 있는 변수를 map 돌릴때 undefined인경우 오류가 발생한다.이는 조건부 렌더링 또는 optional chaining을 사용해서 undefined일때를 대비해야한다.특히 DB에서 데이터를 받아와 뿌리는경우 필수로 사용해주는

2021년 12월 20일
·
0개의 댓글

useState

useState가 무엇인지는 알지만, 동작원리에 대해서 좀더 깊게 고촬해봤다useState는 보통 아래처럼 구조분해(distrcuturing) 형식으로 선언한다. 이는 아래 예시처럼 두개의 쌍 형태로 state(==fruit), setState(==setFruit)형식

2021년 12월 20일
·
0개의 댓글

useReducer & context API

프로젝트 단위가 커진다면 useState만으로 상태관리가 힘들어진다. 컴포넌트가 A->B->C->D->E 구조일때 A->E로 props를 보내려면 B,C,D를 모두 거쳐야 하기 때문이다. 이를 효율적으로 관리하기 위한 Hooks를 알아보자 요약부터 하자면, create

2021년 12월 20일
·
0개의 댓글
post-thumbnail

useEffect

Class형 컴포넌트에서의 componentDidMount, componentDidUpdate componentWillUnmount의 기능을 하나로 묶은 Hooks이다여기서 리액트의 라이프사이클을 이해하는게 매우중요하다한가지 겪었던 문제인데 아래코드를 실행해보면 엄청난

2021년 11월 27일
·
0개의 댓글

webpack + babel

모듈단위의 js들을 모아서 하나의 app.js로 번들링해주는 기능 크로스브라우징을 위해 es6문법으로 작성된 js를 es5로 변환해주는 기능루트폴더에 npm init을 해준다.\*이때 폴더에 package.json파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개

2021년 11월 12일
·
0개의 댓글

Mount, unMount

react에서 key값이 변하는경우, 조건부렌더링의 경우 컴포넌트는 Mount, umMount과정을 거친다.mount시에 새로 엘리먼트를 그리기 떄문에 개발자툴에서 해당 엘리먼트를 찍어보면 div가 펼쳐졌다가 감춰졌다한다.

2021년 10월 29일
·
0개의 댓글
post-thumbnail

vanilla JS를 이용한 TodoList

리액트를 들어가기 앞서 vanilla JS만 사용한 TodoList를 만들어보았다화면 업데이트시 db의 값들을 화면에 뿌려준다 화면의 input에 할일을 입력(enter키 || button클릭)하면 todoList배열에 해당 내용을 push하고 db에 업로드한다. 그리

2021년 10월 23일
·
0개의 댓글

FireStore를 이용한 DB사용

firebase에서 제공하는 관계형 database개념.하나의 프로젝트 개념인 collection안에 객체 개념의 document가있다.document안은 key-value구조로 이루어져있다. 아래와 같은 구조로 이해하자.firestore프로젝트를 생성한다head태그에

2021년 10월 23일
·
0개의 댓글

Firebase를 이용한 hostiong

google의 firebase api를 이용해 여러가지 웹서비스를 이용 할 수 있다. 이번 포스트에서는 간략하게 web hostiong 방법을 알아본다 과정 firebase 공식 사이트에서 프로젝트 생성 vscode의 터미널에 아래의 순서대로 입력

2021년 10월 22일
·
0개의 댓글
post-thumbnail

git flow 전략

main : 실제 배포되는 브랜치 (version명 명시)dev : 작업 내용들이 merge되는 브랜치개인 : 협업자들이 작업단위로 작업을 하게되는 브랜치hotfix : 긴급상황시 일회성으로 생성되는 브랜치개인 브랜치에서 작업한 내용을 dev 브랜치에 pullreque

2021년 10월 19일
·
0개의 댓글

Fetch(GET,POST)

클라이언트단에서 http통신으로 요청 및 응답을 받는 함수get호출방식을 디폴트로 가지고있다.아래와같이 사용되며 url은 데이터를 받을 주소, option은 post호출시 사용\*response는 promise타입으로 반환되며 response.json()은 데이터를 자

2021년 10월 17일
·
0개의 댓글

Promise

외부에서 json형태의 데이터를 불러올때 promise타입으로 불러와져서 선행이 필요해서 공부하였다.JS에서 원래 비동기 처리를 하기위해선 콜백함수를 사용했는데 콜백함수의 경우 2가지 단점이 있다.비동기 함수의 처리결과를 반환하는 경우 순서가 보장되지않으므로 후속처리를

2021년 10월 17일
·
0개의 댓글