프론트 엔드 공부 블로그

기본 개념 ! 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..

꺄 드디어 React 공부한다! 역시 시작은 노마드 코더 리액트 클론 코딩으로 한다! 노마드코더 React 초급 강의에선 이전에 유튜버 코딩애플님께서 React 설치하는 법과는 다른 방법으로 React를 설치하길래 따라해본다. 1. react, react-dom import 2. JSX import 이 세 개의 스크립트를 import 했는데도 JSX 문법이 먹히지 않아서 왜 그런가 했는데... 작성한 문법을 감싼 script 태그에 type =" text/babel "을 추가해 줘야 한다고 한다. 3. script 속성 type ="text.babel" 추가 출력 확인! html 요소도 onClick 이벤트 출력도 모두 잘된다~ 4. 컴포넌트 형식 const root = document.getElemen..

학교 선배가 데이터를 받아오는 프로젝트를 참고하라고 하시면서 직접 작성한 블로그 링크를 보내주셔서 너무너무 감사했는데... 코드를 해석하거나 내가 코드를 짜기엔 너무 지식이 없어서(ㅋㅋㅋ ㅠㅠ) 선배에게 무척 죄송하지만 제대로 JS를 공부하는 게 먼저였다. 다행히 JS를 하다보니까 재미있고... 실용적인 메소드들을 많이 접해서 여기까지 올 수 있었던 것 같다. 아무튼! Json도 긁어왔겠다 fetch도 사용해봤겠다...! 이제 선배가 알려주신 블로그를 조금 이해할 수 있게 돼서 따라해보고자 한다! 아직 React를 제대로 배우지 않았으니 최대한 바닐라 자바스크립트로 작성할 것이당 참고한 API 호출 프로젝트는 >> 여기!