profile
Always Awake
post-thumbnail

#18.TIL | localStorage사용하여 DataGrid Column저장 & 로딩할때 props Column과 비교하여 업데이트해주기 (feat. storybook)

위 화면과 같이 DataGrid의 default column순서를 변경 시켜 내가 중요하다고 생각되는 정보의 순서만 보고 싶은데, 새로고침했을때 다시 default 순서로 돌아간다면 사용자에게 하여금 매우 불편한 경험을 느끼게 해준다.(매번 똑같은 정렬을 해야 하니)그

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

#17.TIL | 📊 React Apex Chart 종류, 데이터 타입, 사용법 정리

1. 📊 React Apex Chart ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

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

#16.TIL | 리액트 상대 경로 탈출하기(Craco)

리액트에서 페이지를 만들다 보면 여러 컴포넌트들과 recoil을 사용한다면 atom을 import해와야 한다. 그렇게 파일의 규모가 방대해지다 보면 위와 같이 수 많은 ../ 으로 이루어진 import 지옥을 경험할 수 있다. 만약, 리팩토링 등을 이유로 파일의 위치가

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

#15.TIL | Component 성능 최적화(React.memo)

데이터의 양이 많아지면 렌더링하는데 시간이 많이 걸리고 애플리케이션이 느려지게 된다. 이러한 경우에는 컴포넌트 성능 최적화를 통해 렌더링 시간을 단축 시킬 수 있다.자신이 전달받은 props가 변경될 때자신의 state가 바뀔 때부모 컴포넌트가 리렌더링될 때forceU

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

#14.TIL | React Testing, TDD

Test 내가 작성한 코드가 잘 작동하는지 검증하는 작업. 의도대로 잘 동작하는지 직접 일일히 마우스로 클릭하고, 키보드로 입력하여 확인할 수 있지만 모든 기능을 다 확인하는것은 사실상 어려움.(모든 기능 작성 및 테스트 완료 후 수정사항이 생길때마다 test를 해야

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

#13.TIL | Immer

기존 리액트에서 배열이나 객체를 업데이트 해야 할때는 직접 원본을 수정하면 안되고, 아래와 같이 불변성을 지켜주면서 업데이트를 해주어야 했다.배열도 마찬가지로 push, splice 등 원본을 바꾸는 메서드가 아닌 concat, filter, map 등 새로운 배열을

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

#12.TIL | MVC & Flux Architecture

controller, model, view로 구분이 됨.View:사용자에게 보여지는 요소들(컴포넌트, JSX 등)Model: 데이터들을 정의하고, 관리하는 요소들(state 등)Controller: client에서 이벤트 등이 발생하면 Model의 데이터를 변경하는 요

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

#11.TIL | Debouncing

이번 프로젝트에서 검색창을 통한 filtering을 구현하였다. onChange가 일어날때마다 이벤트가 일어나는 target의 값을 recoilState에 업데이트 시켜줬다. 물론, 값이 입력될때마다 api와 통신은 하지 않았지만, 만약 데이터양이 방대해져 입력값을 통

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

#10.TIL | forEach, Object.keys(), Object.values()

위와 같은 데이터를 사용하여 industry비중을 나타내는 pie Chart를 구현하는 중에 series를 weight(비중)으로, 또 labels를 industry로 사용하니 위와 같이 중복되는 label들도 따로 표현되는 문제가 생기게 되었다. 그래서 내가 위 데이

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

#9.TIL | Recoil Selector Options(Cache)

위 코드는 내가 oneValueState, twoValueState, threeValueState라는 Atom을 설정해두고, onChange이벤트가 일어나 이들의 Atom state값이 바뀌게 되면 이 state의 value를 params로 하여 GET요청을 보내는 부

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

#8.TIL | Axios intercepter사용하기

Axios intercepter Axios intercepter는 then이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있다. 따라서, 이를 다양한 방식으로 활용할 수 있는데 interceptors.request.use()를 사용하여 요청할때 header에

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

#7.TIL | RefreshToken

기존에 내가 알고 있던 로그인 방식은 로그인 성공시 암호화된 accessToken을 result로 받고, 이를 localStorage 나 sessionStorage에 setItem했다가, 매 api요청때마다 Headers에 accessToken을 getItem하여 첨부

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

#6.TIL | Hoisting

Hoisting 호이스팅이란 함수 안의 변수 선언을 모두 최상단으로 끌어 올려주는 JavaScript의 독특한 기능이다. 나는 처음 배운 언어가 JavaScript였기 때문에 당연하다고 생각했었는데, C언어 및 Java에서는 변수를 사용하거나, 어떤 함수를 호출하기 위

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

#5.TIL | Synchronous & Asynchronous

참고 영상: (https://www.youtube.com/watch?v=8aGhZQkoFbQ) Synchronous 동기식 처리는 직렬적으로 태스크를 수행한다. 우리가 매장에서 상품을 구입할때 계산대가 1개 밖에 없는 경우를 생각하면 되는데, 어떤 작업이 수행중이면 다

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

#4.TIL | Authentication(Access Token & Session with Cookie)

HTTP(HyperText Transfer Protocol) 프로토콜은 클라이언트가 서버로부터 리소스들을 가져올 수 있도록 해주는 클라이언트와 서버간의 의사소통 수단이다. 특징으로 HTTP 통신은 Request(요청)과 Response(응답)으로 이루어 지고, 매 요청

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

#3.TIL | Mock Server만들어 Axios로 GET 통신해보기

Mock Server는 실제 서버처럼 request와 response를 주고 받는 가짜서버이다. 나는 이때까지 Constant Data와 Mock Data를 직접 타이핑하여 사용했었는데, 정적인 GET요청밖에 하지 못했다. 서버가 미리 구성되어 있다면 좋겠지만, 프로젝

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

#2.TIL | Axios(장단점, Fetch와 차이점)

프로젝트를 진행하게 되면 서버와 클라이언트 간의 HTTP통신을 통해 데이터를 주고 받게 된다. 나는 이 과정에서 JavaScript ES6버전의 내장 라이브러리인 fetch를 사용했었는데, 생각해보니 내가 왜 쓰는지에 대한 고민없이 당연하게 사용을 했었던것 같다. 당장

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

#1.TIL | Recoil(리액트의 상태관리)

React에서는 변경된 상태를 파악하여 이전과 다르게 변경된 상태를 화면에서 재렌더링해준다. 따라서 화면을 전체만 렌더링 하는것이 아닌 변경된 곳만 다시 렌더링시켜 사용자에게 하여금 경험을 향상시켜준다. 하지만, React의 파일이 복잡하면 복잡해질수록 트리구조가 방대

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

#1.Next.js(배우는 이유, 장점)

Next.js의 공식문서에 들어가면 위와 같은 글이 쓰여 있다. 즉, 제작을 위한 리액트 프레임워크임을 알 수 있다. 또한, 리액트를 위한 풀스택 프레임워크라고도 한다. 클라이언트 대신 서버에서 페이지 렌더링리액트는 클라이언트 사이드 렌더링(CSR)을 하여 서버에 영향

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

#1.Project(프로젝트 소개, 회고)

취향을 기반으로 개인공간에서 오프라인 커뮤니티를 주최 및 참가를 할 수 있는 사이트이다. 이 사이트에 대한 아이디어는 내가 내었다. 그 이유는 반응형 웹사이트와 SPA로 이루어져있으며, 전체적으로 UI가 정말 깔끔하다고 생각되었기 때문이다.2021.12.13(월) ~

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