천천히 느리게 천천히 느리게

◎ 문제 2: 배열의 내장 함수 부분에 배열 내장 함수를 이용하여 코드를 입력하고 다음과 같이 출력되게 하세요. 데이터 let arr = [200, 100, 300]; //pass console.log(arr); 출력 [200, 100, 10000, 300] ◎ 정답 부분에 배열 내장함수를 이용하여 코드를 입력하고 다음과 같이 출력되게 하세요. let arr = [200, 100, 300]; 출력 [200, 100, 10000, 300] ◎ 해설 - .splice()는 배열에서 특정 범위의 값들을 추출하고, 그 자리에 새로운 값을 넣는 내장 함수이다. 예를 들어 jbAry.splice( 1, 2, 'abc' )는 jbAry 배열의 두 번째 값부터 2개를 추출하고, 그 자리에 abc 값을 넣습니다. 추출한..

◎ 오늘부터 1일 1 알고리즘을 시작!! 기초부터 시작하여 끝내보자!! ◎ 문제 1: 배열의 삭제 다음 배열에서 400, 500를 삭제하는 code를 입력하세요. let nums = [100, 200, 300, 400, 500]; ◎ 정답 다음 배열에서 400, 500를 삭제하는 code를 입력하세요. let nums = [100, 200, 300, 400, 500];

◎ 백엔드와 통신할 때 자주 목격한 에러에 대해 정리하겠다. 1. 문제 ◎ 백엔드와 통신할 때 Unexpected end of JSON input 에러 메시지를 몇 번 목격하였다. 코드는 다음과 같다. handleGoCart = () => { const token = localStorage.getItem("access_token"); const { productDetail , optionId, number } = this.state; fetch(`${API}/order/cart` , { method: "POST", headers: { "Content-Type": "application/json", Authorization : token }, body: JSON.stringify({ product_id :..

1. 비동기 방식 ◎ 비동기 방식이란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말한다. 기다리는 과정에서 다른 함수를 호출할 수 있다. ※ 동기적 방식 : 작업이 끝날 때까지 다른 작업을 할 수 없다. 동기적과 비동기적 방식을 밑의 그림처럼 표현할 수 있다. 동기적은 1번이 끝날 때까지 2번을 시작하지 못한다. 1번이 끝나야 비로소 2번이 실행되고, 2번이 끝나야 3번을 시작할 수 있다. 하지만 비동기는 1번이 끝나기 전에 2번의 코드를 실행할 수 있고, 2번이 끝나기 전에 3번을 시작할 수 있다. setTimeout() 함수가 대표적인 비동기 함수이다. setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 것..

◎ 리덕스.. 어렵다.. 처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다. 프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다. 그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다. 0. 설치 npm install redux npm install react-redux npm install redux-devtools-extension 1. 리덕스 모듈 ◎ 리액트 프로젝트에서 리덕스 모듈 만드는 방법은 다양하다. 리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 자바스크립트 파일을 의미한다. 첫 번째 방식은, 액션과 리듀서가 서로 다른 파일로 만드는 법이다. ● actions 폴더 - index.js 파일 ● reducers 폴더 - index.js 파일 ..

1. Redux 란 ◎ 리액트 생태계에서 가장 많이 사용하고 있는 상태 관리 라이브러리이다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있으며, 글로벌 상태 관리에도 좋다. 참고로 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만, 무조건 리액트와 함께 사용할 필요는 없다. 일반 Javascript 환경이나 Angular 와 같은 다른 프레임워크에서도 사용되기도 한다. 위의 사진을 보면, 시간이 좀 된 그래프이지만, 리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다. 단순히 글로벌 상태 관리를 위한 것이라면 ContextAPI를 활용하는 것도 괜찮다. 2. Redux 와 Context API의 차이점. (리덕스 위주) 미들웨어: 리덕스에는 미들웨..

◎ 1차 프로젝트 정육각에서 주문하기 페이지에 우편번호 검색 기능이 있다. 구글링 해본 결과 react-daum-postcode 라이브러리를 사용하면 구현할 수 있다고 나와있어서 설치 후 정육각에 맞게 코드를 구현하였다. 1. 준비 npm install --save react-daum-postcode 2. AddressModal.js(전체적인 코드는 길기 때문에 postcode에 대한 코드만 편집해서 올림.) import React, { Component } from 'react'; import DaumPostCode from 'react-daum-postcode'; import './AddressModal.scss' class AddressModal extends Component { construct..

◎1차 프로젝트 정육각에서 내가 맡은 상품 디테일 페이지에 탭 버튼 기능이 있었다. 탭 버튼 자체는 처음이라 어떻게 하는지 감이 안 와서 구글링을 해보고 그에 맞게 코드를 적용시켰다. 1. Detail.js import React, { Component } from 'react'; import Header from '../../components/Header/Header'; import Product from './Product/Product'; import TabContainer from './TabContainer/TabContainer'; import Tab from './Tab/Tab'; import Explicate from './Explicate/Explicate'; import ReviewC..