차곡차곡 개발일지

성장하는 개발자가되자!

• 동기 & 비동기

  개발/알아둘 기본 개념 2023. 12. 23. 15:23

  👉 들어가면서... 동기방식은 코드순서대로 실행되기때문에, 위의 코드가 완료되지않으면, 완료될때까지 기다렸다가, 다음코드가 실행된다. 하지만, 이러한 방식은 효율적이지 못하기때문에 비동기방식을 사용한다. 비동기방식은 먼저 완료된 코드부터 실행되는 방식이다. 동기방식은 이어달리기라고 생각하면될거같다. 👉 코드 //동기적 방식 function taskA() { console.log("A작업 끝"); } taskA(); console.log("코드 끝"); //비동기적 방식 function taskB(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskC(a, cb) { setTimeout(() => { cons..

  Read More
• Spread 연산자 사용

  개발/알아둘 기본 개념 2023. 12. 23. 14:07

  Spread 연산자란, 기존 객체나 배열의 요소들을 다른 배열이나 객체로 복사 할 수 있다. //spread 연산자사용 (객체) const cookie = { base: "cookie", madeIn: "korea", }; const chocochipCookie = { ...cookie, toping: "chocochip", }; const blueberryCookie = { ...cookie, toping: "blueberry", }; const strawberryCookie = { ...cookie, toping: "strawberry", }; console.log(chocochipCookie); console.log(blueberryCookie); console.log(strawberryCookie..

  Read More
• 비구조화 할당

  개발/알아둘 기본 개념 2023. 12. 23. 13:58

  비구조화 할당이란 , 배열이나 객체의 속성을 해체하여 개별 변수에 값을 담을 수 있는 JS 표현식. //배열의 비 구조화 할당(구조분해 할당) 적용 전 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; //비 구조화 할당(구조분해 할당) 적용 let arr2 = ["one", "two", "three"]; let [one1, two2, three3] = arr2; console.log(one1, two2, three3); //배열선언 분리 비 구조화 할당 let [one11, two22, three33] = ["one", "two", "three"]; console.log(one11, two2..

  Read More
• 장바구니 기능 간단하게 해보기(feat. Redux)

  프로젝트/개인프로젝트 2023. 12. 14. 16:45

  리덕스를 사용하여 간단하게 장바구니에 추가하고 삭제하는것을 구현해보려고 한다. 🔎 설치 npm install redux 설치는 간단하다. npm을 통해 설치해줬다. 🔎 기본셋팅 index.js(/market/src/index.js) import { Provider } from "react-redux"; import { legacy_createStore as createStore } from "redux"; import { rootReducer } from "./reducer"; const store = createStore(rootReducer); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 1. pr..

  Read More
• Cannot read properties of undefined (reading 'NaN')TypeError: Cannot read properties of undefined (reading 'NaN')

  개발/오류정리 2023. 12. 13. 14:16

  🔎 들어가면서... 상품목록 페이지에서 한가지의 상품을 클릭했을 때 오류가 발생했다. 더미데이터를 만들어, 상품목록페이지에서 map함수로 뿌려주고, 해당 상품을 클릭했을 때 상세페이지로 이동하면서 url에 해당 상품에 대한 정보를 가지고가도록 했는데, url에는 잘 가져갔지만, 정작 상세페이지에서는 오류와 함께 출력되지 않았다. 상세페이지(detail)에서 const { brandIndex, ItemIndex } = useParams(); 더미 데이터는 2차원 배열의 형태로, nike = [{가격,이름,타입},{가격2,이름2,타입2}] asics = [{가격,이름,타입},{가격2,이름2,타입2}] ader = [{가격,이름,타입},{가격2,이름2,타입2}] productDummy = [[nike],[a..

  Read More