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

◎ 뒤늦게 2차 프로젝트를 진행할 때 기억하고 싶은 코드에 대해 블로깅한다. 2차 프로젝트 때 나를 가장 괴롭혔던 naver 소셜 로그인... 유일하게 우리 프로젝트만 naver 소셜 로그인을 사용하였다. 다른 조와 정보도 공유할 수 도 없고 혼자 해야만 했다.. 고생한 만큼 기억하고 싶은 코드이다. 1. 네이버 애플리케이션 등록 ◎ 사용 목적에 맞게 설정을 해준다. - API에 필요한 정보들을 체크해준다. - API를 사용할 url을 적어주고, 네이버 아이디로 로그인 시 Callback URL도 적어준다. 2. 네이버 애플리케이션 목록 확인 ◎ Application에서 자기가 만든 애플리케이션의 목록들을 확인할 수 있다.(test를 많이 해서 애플리케이션이 많다..) 3. public 폴더 안에 있는 ..

◎ 백엔드와 통신할 때 자주 목격한 에러에 대해 정리하겠다. 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 :..

◎ 리덕스.. 어렵다.. 처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다. 프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다. 그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다. 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..

1. fetch란 ◎ fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. 2. 특징 fetch( )로 부터 반환되는 HTTP Status Code가 404나 500을 반환하더라도 Promise 객체는 HTTP error 상태를 reject하지 않는다. 대신 ok 상태가 fasle인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다. 보통 fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야 하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는..

◎ Javascript에서 내장 함수를 배울 때 이미 다뤘던 함수들이다. 하지만 리액트에서 이 두 개의 함수를 상황에 맞게 잘 사용하 여야 성능이 좋아진다. 간략하게 차이를 알아보자. 1. push ◎ push는 기존 배열에 값을 추가하여 원본을 바꾼다. 1-2. 예시 const array = [1, 2]; array.push(3); console.log(array); // [1, 2, 3] 위의 코드를 확인해보면 array배열에 array.push(3)를 하고 array를 결과를 확인해보면 array 배열 자체가 변경된 걸 확인할 수 있다. 2. concat ◎ concat은 기존 배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다. 2-1. 예시 const array =[1, ..