REACT (11) 썸네일형 리스트형 React 실습한 사이트 https://ain1117.github.io/ React App ain1117.github.io 결과물은 좀 쪽팔리지만 정말 멋진 수업이었다. React 자습 메모 - React Hook. react-router-dom, styled-components , useEffect, Contaxt API, Redux 리액트 라우터 돔 설치 npm install react-router-dom@6 index.js 의 를 로 감싼다. import문에서 내가 만든 것들은 대부분 ./으로 시작한다. App.js import {Routes, Route, Link} from 'react-router-dom' use가 붙어있는 것들을 React Hook이라고 한다. Hook은 유용한 함수가 들어있는 집합체이다. let navigate = useNavigate() 페이지 이동을 도와준다. { navigate('/')}}>Home 형식으로 사용하며, navigate(1)은 앞으로 가기, navigate(-1)은 뒤로가기이다. nested Routes 태그 안에 태그가 들어간 Route. Nested Routes는 이동한 페이지에서 상.. 패스트캠퍼스 react 강의 학습후기 8주차 리액트 문서의 항목을 참고해 리액트를 조금 디테일하게 공부한다. 리액트 문서 ▼ https://ko.reactjs.org/docs/accessibility.html 접근성 – React A JavaScript library for building user interfaces ko.reactjs.org 페이지 이동을 쉽게 하기 위해 리액트 라우터 돔을 사용할 수 있다. 터미널을 새로 열어 아래 명령어를 입력하면, 리액트 라우터 돔 6버전의 설치가 가능하다. npm install react-router-dom@6 Routes import {Routes, Route, Link} from 'react-router-dom' 태그 사이에 태그를 이용하여 이동할 페이지를 설정할 수 있다. path에는 url 뒤에 붙.. 공부 기록 옛날 react 문법 class Profile extends React.Component { constructor() { super(); this.state = {name:'Kim', age:30} } changeName() { this.setState( {name:'예전 리액트는 React의 setState 함수를 사용한다'}) } render() { return( 프로필입니다 저는 {this.state.name} { this.changeName() } }>변경합니다 ) } } class = 변수와 함수를 보관하는 덩어리 React.Component를 상속받아 class를 만든다. constructor는 class의 변수와 초기값을 저장할 때 사용하는데, 예시로 state는 constructor 안에 .. 패스트캠퍼스 react 강의 학습후기 7주차 리액트 공식 문서를 보면서 공부해본다. https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 개발자는 공식 문서를 참고할 일이 아주 많이, 매우 많이 생긴다. 7주차는 리액트를 강사님과 함께 현명한 공식 문서 읽는 법을 배우며 진행하는 주차이다. element 엘리먼트는 리액트의 가장 작은 요소이다. 엘리먼트는 화면에 표시할 내용을 기술한다. React DOM은 UI가 변경될 경우 변경된 내용만 업데이트한다. const element = Hello, world; component 만드는 법 return ( ) 안에 html 문법을 작.. 패스트캠퍼스 react 강의 학습후기 6주차 왜 리액트 부분부터 강사가 바뀌는거지? 사전에 안내된 사항도 없었던것 같은데... 아무튼 그렇다. 리액트 부분 부터는 강사가 바뀌고 만다... 헤로피 선생님 감사했습니다.ㅠ lodash - js의 인기있는 라이브러리 중 하나 - Array, Collection, Data 등 데이터의 구조를 쉽게 다루고 싶을 때 사용한다. _를 사용하여 이용하기 떄문에 lodash라는 이름이 되었다. lodash 사용법 공식 문서 : https://lodash.com/docs/4.17.15 Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods t.. 패스트캠퍼스 react 강의 학습후기 5주차 이번 주차에는 JS에 대한 필수적인 학습을 한다. 지난 주차에 깔았던 npm을 이용해 parcel-bundler를 이용한다. 여기서 잠시 지난주에는 대강 알고만 넘어갔던 npm과 bundler에 대해 복습을 해본다. npm은 Node Packaged Manager의 약자이다. Node.js로 만들어진 모듈을 웹에서 받아서 설치하고, 관리해주는 프로그램이라는 뜻인데 npm을 설치하면 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있다. node.js를 설치하면 npm은 자동으로 내장되어 있기 때문에, npm을 따로 설치할 필요 없이 node.js만 설치하면 된다. npm init -y 이 명령어를 터미날 창에 입력하면 package.json 이 생성된다. npm init parcel-bund.. 패스트캠퍼스 react 강의 학습후기 4주차 이번 주차에는 강사님을 따라 스타벅스 페이지를 html, css로 클론 코딩하고, node.js에 발을 살짝 담근다. node.js는 자바스크립트를 이용해 만들어진 서버 전용 언어인데, js 하나를 공부해도 프론트에서 백엔드까지 모두 할 수 있게 하는 매력적인 소프트웨어 플랫폼이다. 당연한 이야기지만 무조건 화면만 보고 따라치기만 해서는 실력이 늘지 않기 때문에.. 여기서 배운걸 이용해 기획하고 있는 웹서비스를 직접 만들어보았다. 클론 코딩만 해서는 개발 지식이 머리에 제대로 들어오지 않기 때문에, 응용하는 과정이 꼭 필요하다. 제대로 공부하고 싶은 사람들을 위한 주차 자율 과제같은게 있으면 참 좋았을텐데.. 조금 아쉽다. node.js 이번 주차의 마지막 강의는 npm 설치와 nvm 사용법이다. 개발 .. 이전 1 2 다음
