Promise 객체란 무엇인가Promise : 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드(producing code)가 준비되었을 때, 함수가 결과를 사용할 수 있도록 해주는 역할.비동기 처리를 하기 위한 자바스크립트의 방식 중 하나로 콜백

React - Styled Component

Hooks (useState, useEffect)

Function Component

👉 데모 영상 전체보기 👉 웹 사이트 방문 프로젝트 소개 > ### WASH KOREA WASH 제품 판매 및 구매 서비스 제공 스파 트리트먼트 안내 및 예약 서비스 제공 구매자들의 별점 및 후기 제공 가장 많이 찾는 제품군 검색 기능 제공 개발 인원 및

Using Fetch 네트워크를 통해 json 파일을 호출해서 콘솔에 data를 찍어보는 과정이다. fetch( )함수는 url, 즉 API 주소를 첫번째 인자로 옵션 객체를 두번재 인자로 받고, Promise 타입의 객체를 반환한다. 두번째 then에서는 data를 응답 받은 후의 로직을 작성한다. API 호출 성공시 응답(response)...

> 필수구현 사항 구매 수량 버튼을 눌렀을 때 수량에 따른 가격 변동 탭 메뉴 클릭 시 스타일 변경 및 스크롤 위치 이동 새로고침시 scrollTop 구현 Mock Data 활용해서 리뷰창 구현하기 → 추후 API 통신 > 1. state를 활용하여 구매 수량에 따른 가격 변동 버튼 만들기 🐝debugging : 백만원 단위 이후로 ,표시가 안...

Default Export : 하나의 파일에서 단 하나의 변수 또는 클래스 등으로만 export 한다. import 할 때는 아무 이름으로나 import 할 수 있다. 참고 : var, let, const`를 바로 default 할 수 없다. > Named Export : 한 파일 내에서 여러 변수 또는 클래스 등으로 export 할 수 있다. ...

전체 UI화면에 공통사항으로 적용될 Navigation 컴포넌트 작성하기 > 필수구현사항 대메뉴에 마우스 Enter시 메뉴 slide-down, 메뉴에서 마우스 Leave 시 메뉴 slide-up 반복되는 내용은 컴포넌트로 분리, Array.map( ) 활용 state와 props 적절하게 활용할 것 > * Refactoring Review* 1. i...

인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. 🥑 첫번째 풀이 접근 방식 : height배열 ...

nums는 숫자로 이루어진 배열입니다. 가장 자주 등장한 숫자를 k 개수만큼 return해주세요. 예시 nums = [1,1,1,2,2,3], k = 2 return [1,2] nums = [1] k = 1 return [1] 🥑 나의 풀이 예를 들어 nums=[1,2,2,2,3,3]이라고 가정해보자. nums배열에서 중복된 숫자들을 제거한 ...

리액트의 컴포넌트는 생명주기를 가지고 있다. 컴포넌트의 수명은 페이지가 랜더링 되기 전 준비 과정 ~ 페이지가 사라질때까지이다. 컴포넌트를 처음 랜더링 할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트 하기 전후에 대한 어떤 작업을 처리해야 할 때 라이프 사이클 메서드를 활용한다. ✔ 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. (함수...

반복되는 코드의 경우 컴포넌트화 하기 위해 배열의 내장 함수인 map함수를 사용해서 랜더링 할 수 있다. > array.map(콜백함수, thisArg) 콜백 함수 -currentValue : 현재 요소 -index : currentValue의 인덱스 값 -array: 현재 처리하고 있는 원본 배열 thisArg : 콜백함수 내부에서 사...

1. React 기본용어  React  : UI를 만들기 위한 자바스크립트 라이브러리  CRA  : Creative-React-App 의 줄임말, react 개발환경을 더 편리하게 사용하기 위해서 사용하는 tool chain  node.js  : 탈웹! 브라우저 외에서도 자바스크립트를 실행하게 해주는 실...

📌SPA(Single Page Application) : 단일 페이지로 이루어진 어플리케이션 한 페이지로 여려 UI들을 보여줄 수 있는 어플리케이션. 📌Router? Routing을 해주는 도구 route(라우트): 경로 , url 주소 CRA를 통해서 만든 프로젝트의 경우 기본적으로 SPA를 준수한다. 즉, react에는 단 한 개의 html이 존재...

로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다. 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 , XII = 12 , XXVII = 27 입니다. 🥑 나의 풀이 로마자 split으로 쪼개서 배열에 담기 (ar...

[ Mission : ToDo List - React로 구현해보기 ]

💁 Array 공부 2탄 > ### Array.prototype.some() some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다. ✔빈 배열에서 호출 시 무조건 fasle 반환 🥑 적어도 한 명 이상이 성인인가? some

Props 컴포넌트에 내장되어 있는 객체이다. 그 중에서 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주는 객체이다. 넘겨주고 싶은 정보는 부모 영역에 존재한다. 자식 요소에게 넘겨주고 싶을 때 : 작명 = {변수명} 📌부모 컴포넌트 📌자식 컴포넌트 넘겨주는 행위가 아니라, 넘겨주는 자료가 있어야 할 공간을 'props'라고 한다. 변수, 배열,...

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부) 예시 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때...