profile
프론트엔드개발

Typescript 시작하기

typescript 공부중, 간단한 todoLIst를 만들어 보고자한다. CRA를 이용하여 typescript를 react에 적용한뒤 린트설정까지 해보자. CRA(feat. Typescript) 아래 순서대로 cra를 설치, 리액트관련 @types설치, cra(ty

1일 전
·
0개의 댓글
post-thumbnail

개발시 유용한 html태그들

퍼블리싱을 하다보면 매번 같은 태그만 반복해서 사용한다.. 따라서 더이상 배움의 필요성을 느끼지 못했는데, 세상은 빠르게 변화한다.. 겁나 좋은 태그들이 나왔다 연습해보자.여기서 아코디언, 자동검색기능을 지원하는 강력한 태그는 꼭 외워서 써먹자js없이 아코디언 기능이

4일 전
·
0개의 댓글

redux-persist

redux를 사용하면서 서브페이지에서 새로고침시 글로벌상태값이 날라가는 경우가 생겼다. 이를 해결하기위해 글로벌상태값을 localStroge | sesstionStorage에 저장하는 redux-persist를 알아보자persistConfig를 작성하여 persis

5일 전
·
0개의 댓글
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개의 댓글