프론트 엔드 공부 블로그

axios fetch API 처럼 백엔드와의 비동기 처리를 가능케 하는 또 다른 방법으로 axios 가 있다. 설치 npm i axios 터미널에 해당 명령어를 입력해 axios를 설치해줘야 한다. import axios from 'axios' 사용을 원하는 파일에 import를 하면 된다. 사용 방법 const response = await axios(url, option); 위와 같은 방법으로 써도 되고, 아래와 같은 방법도 있다. const response1 = await axios(option) // option 안에 url 프로퍼티로 url 전달 const response2 = await axios.post(...) // 메서드 방식으로 http 통신 방법 설정 url - http 통신을 할 (..

1. setInterval 0.) 목표 현재 가리키고 있는 slide 의 index 를 currIndex 라고 한다. 이때 currIndex 를 2초마다 +1 시키고, 그에 따라 pagination 의 색이 변하게끔 만드려고 한다. 1.) 문제점 setInterval(() => { setCurrIndex((curr) => { curr++; if (curr > IMAGE_LENGTH) curr =1; return curr; }) }, 2000); 1-2-3-1-2-3 의 순서를 바랐는데... 예상과 달리 숫자가 이상하게 돈다. 2.) 문제 해결 state가 변함에 따라 setInterval도 함께 re-rendering이 되는 문제로, useEffect()를 사용하여 해결했다. 컴포넌트가 마운트 됐을 때만..

기본 개념 ! Redux는 컨텍스트와 마찬가지로 데이터를 필요한 컴포넌트에서만 요청해 사용할 수 있다. ! 스토어 (store) 컨텍스트는 부모 컴포넌트에서 생성한 데이터에 모든 자식 컴포넌트가 접근할 수 있다. Redux는 컴포넌트 외부의 스토어라는 곳에서 데이터를 관리한다. 따라서 컴포넌트의 위치에 상관없이 스토어에 접근해 데이터를 사용하고 변경할 수 있다. npm install --save redux 명령어로 redux를 설치해준다. ! Redux의 데이터 변경 과정 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어 ! 액션 앱의 변경사항을 기술한 객체이다. 어떤 형태의 action을 수행할지 지시하는 type필드가 있어야 한다. 예시 export const ADD = 'ADD'; export co..

http://www.yes24.com/Product/Goods/97126219 노마드 코더 강의와 더불어 해당 책을 공부하고 있다. 초보자를 위한 리액트 200제 (React) - YES24 따라하면서 이해하는 React A to Z리액트를 시작하기 전에 개발 환경을 준비하는 과정부터 시작하여 예제 파일을 실행하는 방법을 안내한다. 입문부터 초급, 중급, 활용, 실무까지 5개의 파트로 나 www.yes24.com 예제 76번부턴 이해가 잘 안 됨 + 처음 보는 애들이라 블로그에 정리하면서 예제를 직접 따라하는 게 더 좋을 것 같다. 해당 책은 클래스 기반 컴포넌트로 돼 있어서... 클래스 기반 컴포넌트 문법을 이 참에 공부하자는 마음가짐으로 하나씩 따라했다... 76. 컨텍스트 API 사용하기 ? 부모 ..

노마드 코더로 React에서 쓰이는 문법 후다닥 배워서 React로 선배 졸작에 쓰일 웹 페이지 만들어보려고 한다!! 한달 동안 열심히 해봐야겠다... 만드는 데 거의 2주 반 정도 걸린 것 같다. (조금 농땡이 피운 걸 후회...) 기능, 디자인, 컴포넌트 구성, 코드 해석, 배운 점 등등을 해당 포스트에 정리할 예정이다. 1. 기능 1.) 기본 페이지 - 주식 입력창 - 사용자가 입력한 값과 비슷한 주식 띄우기 - 주식 추가 확인, 삭제, 전송 2.) 이메일 페이지 - 이메일 양식 확인 - 이메일 전송 3.) 마지막 페이지 - 이메일 전송 완료 페이지 2. 디자인 html이랑 css로 후다닥 만들었다 포인트 컬러는 빨강! 반응형도 해보고 싶긴 한데... 기능 공부하고 구현하는 것만으로도 시간이 빠듯할..

노마드코더에서 useState 예제로 단위 변환을 할 수 있는 웹 사이트를 만들었다. 이번에도 완전히 따라하기 보다는 어떻게 하는지를 대충 훑어보고 직접 처음부터 다시 만드는 식으로 복습했다. 1. useState(data, setData) react의 useState는 데이터의 상태를 관리하는 함수다. 첫번째 매개변수인 data에는 데이터의 초기값을 넣어줄 수 있다. 두번째 매개변수인 setData는 첫번째 데이터를 변경할 때 사용하는 함수다. 데이터의 상태가 setData함수를 통해 변경되면 자동으로 재렌더링을 시켜주기 때문에 유용하다! 관습! 두번 째 매개변수는 set' data이름 ' 으로 지어준다. 2. 전체 코드 App() 표시되는 화면 변환할 단위를 선택하는 창을 띄운다. function A..