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

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

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

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

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

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

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

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

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

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

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

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

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

인스타그램 클론코딩을 진행해보면서 하나의 피드 Component를 만들었던 것을 가지고 데이터를 통해 map을 활용하여 여러개의 피드를 찍은것을 보며 React의 장점을 다시금 알게 되었다. 오늘은 Monsters라는 과제를 하면서 Component재사용과 Props의

\-LifeCycle Methods가 없음. 그 대신 useEffect라는 Hook이 있음. \-useEffect는 Hook이므로 함수 —> 페이지가 리랜더할때 마다 이게 실행됨.(이런 리랜더를 컨트롤할 수 있음. 그것은 바로 두번째 parameter에 있는 배열.)

Hook은 함수 컴포넌트에서 State와 LifeCycle을 연동할 수 있게 해주는 함수이다. 따라서 class컴포넌트형에서는 동작하지 않는다. 내가 자주 사용하고 있던 useState와 같은것은 내장 Hook이고, 컴포넌트 간에 상태 관련하여 로직을 재사용하기 위해

SASS는 기존 CSS를 조금 더 프로그래밍스럽게 다룰 수 있는 대체 문법이다. 이걸 활용하면 변수, 함수, 반복문등을 활용하여 CSS를 사용할 수 있다.$변수명 : 집어넣을값 을 사용하여 자주 쓰는 CSS속성을 변수에 담아서 사용할 수 있다.CSS에서 속성을 주다보면

내가 쇼핑몰페이지를 제작할때 상품의 이름과 가격 등 정보들의 데이터를 서버에서 받아온다고 하면 이것들을 일일이 HTML에 넣기 힘들것이다. 이럴때는 데이터를 다른 파일 등에 넣고 Import해올 수 있다. 예를 들어 data.js라는 파일안에 위와 같은 정보들을 담고(

위 처럼 h2태그안에 {글제목0}을 넣었었다. 하지만 당연히 작동하지 않았고, 그 이유는 글제목이라는 State 변수는 다른 Component인 function App(){}안에 선언되어 있기 때문이었다. 이럴때는 Modal이 자식Component이고, App이 부모C

State안에 있는 데이터는 변수처럼 쉽게 수정되지 않았다..예를 들어, 좋아요 이모지와 좋아요수가 표현되는 것을 구현한다면, 수정이 자주 일어나는 좋아요수를 State로 지정하여 다음과 같이 표현할 수 있다.그러면 이모지를 클릭했을때마다 재랜더링 되지 않고 좋아요수가