profile
Always Awake
post-thumbnail

#11.TIL | Debouncing

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

7일 전
·
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개의 댓글
post-thumbnail

#5.Project(개발회고-핵심성분페이지)

핵심성분페이지는 제일 마지막에 작업하게 되었는데, 시간적으로 구독하기와 기본적인 커머스 기능에 더 집중하기로 하여 처음에 계획하였던 ingredientAPI에 GET통신은 못하였고, 대신 mockdata로 UI를 그려주었다. 핵심성분페이지 컴포넌트 ![](http

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

#4.Project(개발회고-구독관리 및 배송주기 설정페이지)

구독관리페이지는 장바구니페이지 구현 후 추가기능 구현사항으로 작업하게 되었다. 처음 구독중인 유저정보와 배송정보, 구독중인 상품을 GET 요청을 통해 보여주고, 정기배송 주기 변경은 PATCH요청으로 변경된 배송일을 전달받고, 구독중인 상품 구독취소는 DELETE요청

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

#3.Project(개발회고-장바구니페이지)

장바구니페이지는 정말 기억에 오래 남을것 같다. API GET밖에 몰랐는데 PATCH, DELETE, POST등 다양한 매서드를 사용해 보며, 이런게 통신이구나 하고 알 수 있었고, 제품을 추가, 감소, 삭제 등의 기능을 해보면서 state관리법 및 불변성이라는 것을

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

#2.Project(개발회고-상품리스트페이지)

이번에 프로젝트를 진행하며 상품리스트, 장바구니, 구독 및 배송주기 관리, 핵심성분 페이지를 제작하였다. 급한 마음에 어떻게든 기능 구현을 하기위해 안간힘을 썼지만 부족한 부분이 많아 페이지 하나씩 좋았던 점과 아쉬웠던 점을 남겨 볼까 한다.(둘러보기를 클릭하면 스크롤

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

#1.Project(프로젝트 소개, 협업 및 소통)

어떠한 일이든 처음하는 일은 설레이는 것 같다. 그리고, 기억에도 오래 남는다. 9월 말에 처음으로 코드를 치면서 나의 코드가 UI로 보여지는것에 대해 느꼈던 그 희열감은 아직도 잊지 못하고 있는데, 약 2주간 진행되었던 이 프로젝트도 기획부터 제작, 배포까지 직접해봄

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

#10.React(sort를 활용하여 분류하기)

먼저, 목록들을 정렬하기 위해 select태그를 사용하여 각각의 태그의 value를 알아낼려고 했었는데 select태그에서는 onClick이벤트 사용이 불가능 하였고, onChange이벤트를 사용해 선택한 value가 무엇인지 알 수 있었다.따라서, 알아낸 value를

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

#10.React(MockData활용하여 피드 여러개 만들기)

HTML,CSS,JavaScript로 구현하였던 인스타그램 클론을 React와 Scss로 재구현해보면서 React의 이점을 느끼지 못했었다.그 이유를 생각해보니, 백엔드로부터 API를 받아서 UI를 만드는것이 아닌 내가 직접 피드 사진, 게시글, 댓글 등을 하드코딩하고

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