헬리_storage

조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에..

구현하고자 한것 useState를 선언합니다. 선언한 state는 숫자를 관리하는 state가 되어야 합니다. - 버튼을 누르면 숫자가 하나씩 줄어들도록 구현해주세요 (단, 숫자가 1일때는 더 이상 숫자가 내려가지 않게 구현해주세요) + 버튼을 누르면 숫자가 하나씩 늘어나도록 구현해주세요 reset 버튼을 누르면 숫자가 1로 되도록 구현해주세요 함수실행 방법 2가지 1. (); 만 오는경우 자체가 함수 즉시실행 2. () => {} 무언가 인자값을 넘겨줘야 할때 콜백함수를 이용하며, 함수를 나중에 호출해 준다 예시) 차이 : 인자값을 넘겨줘야 할때 () => {} 콜백함수를 이용 . state 가져올때 2가지 방법 1. setState(state - 1 ); -> 이전값이뭐든 상관없고 그냥 -1 해줘 2..

난진짜 이런게 있는지 몰랐지... 😭 보충수업을 듣다가 알게된 scss 관련 몇가지 지식들 끄적여 보겠다 ! * scss 안에서 다른 scss 파일 불러오기 @import "경로"; * className에서 {``} 을 쓰면 함수 넣기 가능 !!! 진짜 이건 몰랐다... 내가 구현해야 했던 것이 색상 버튼을 누를 때 마다 그 색상으로 색이 변경되고, text가 같이 변경되는 것을 구현해야 했다. 일반적으로 className은 "" 문자열이지만 이러한 구문의 test 가 아닌 blue 등 다른 변수가 오면서 동적으로 변해야 할때 `` (백틱) => 문자열에서 자바스크립트 혹은 변수를 사용할때 사용 할 수 있다고 멘토님이 알려주셨다. 일단 useState를 이용해 색상을 변경하는 것은 알겠으나 classNa..

🙋🏻‍♀️위코드에서 첫 1차 프로젝트를 진행하였다🙋🏻‍♀️ 선물가게 커머스 프로젝트 배민문방구 우리조는 국내 '배민문방구'를 모티브로 하는 프로젝트를 진행하였고, 깔끔하고 심플한 사이트 UI를 가졌으며, 프론트엔드 및 백엔드 공부를 위한 필수적인 기능들이 있고, 구현하기 크게 어렵지 않을 것 같은 사이트라 생각되었지만, 2주라는 짧게느껴진 기간동안 원하는 모든 기능을 넣지는 못했다. 프론트엔드와 백엔드가 같이 협업 한 생애 첫 번째 프로젝트이다 보니 다소 부족하기도 하다... 1. 프로젝트 개요 1-1. 기간 및 인원 기간 : 23년 2월 6일 ~ 2월 17일 (약 2주) 인원 - 프론트엔드 : 이동민, 이해인, 박준현 - 백엔드 : 이홍렬, 황수영, 박세희 1-2. 프로젝트에 사용된 기술 스택 Fron..

내가 여태 동적 라우팅을 배우기 전에 사용했던 정적라우팅..! 정적라우팅이란? 이렇게 미리 사용할 수 있는 경로들과 해당 경로로 접속 했을 때 보여줄 컴포넌트를 모두 정의 해 두는 방식이다. 하지만 이런 간단한 페이지가 아니라 복잡하고 규모가 큰 어플리케이션에서는 이렇게 일일이 다 정의 해 두는데에 어려움이 있다. 여태까지 나는 이렇게 쓰고있었다... 그렇지만 이번에 동적 라우팅을 배우게 되어 이제 정적라우팅이라는 작별이다 ...! ⭐️ 예시로 블로그 어플리케이션이 있다고 가정해보자! 블로그에 포스팅 목록을 보여줄 수 있는 '리스트 페이지' 와 포스팅의 내용을 보여주는 '상세페이지' 가 있다고 가정할때, 일반적으로 '리스트페이지'를 기본경로 route ( / ) 로 설정하고, ' 상세페이지 '를 ( /p..

1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리..

위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 ..