Hello World!!

학원 수업 Day32 먼저 node 와 react 를 연결해서 사용할 예정이기 때문에 폴더 하나에 node, react 폴더를 생성한다. gitHub 업로드시에도 node, react 두 폴더가 모두 업로드 될 수 있도록 상위 폴더에서 push 한다. node express node 세팅을 위해 node 폴더로 이동해 node express 을 설치 후 세팅한다. node express 는 서버 개발을 간편하게 할 수 있도록 하는 프레임워크이다. 먼저 아래 명령어로 package.js 을 초기값으로 생성한다. npm init -y 그리고 아래 명령어로 express 를 설치한다. npm i e... Read More

학원 수업 Day31 styled components styled components 를 활용해 개별 스타일을 지정한 컴포넌트를 만들 수 있다. css 또는 scss 파일을 생성하지 않고 js 파일 내에서 스타일을 지정해서 컴포넌트에 입히는 방식이기 때문에 해당 컴포넌트에서 사용할 css만 정의해주면 사용, 관리하기 편리하다. 컴포넌트 js 파일 내에서 사용하게 되므로 props 값을 사용할 수도 있다. 설치 npm i styled-components 스타일지정 요소 생성 import styled from 'styled-components'; 먼저 스타일을 적용할 컴포넌트에 style... Read More

학원 수업 Day30 커스텀 슬라이드 js로는 엘리먼트.append(엘리먼트.firstElementChild), prepend(엘리먼트.lastElementChild) 를 통해 하위 엘리먼트의 위치만 지정하고, 모션 효과는 css를 활용한 슬라이드이다. css ul{ width: 800px; height: 400px; border: 1px solid #000; position: relative; } li{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: hotpink; display: f... Read More

원하는 커밋 시점 보기 git checkout 커밋아이디 gitHub 페이지 상에서 확인 가능한 commit 의 고유한 아이디를 입력해서 파일을 되돌린다. branch 생성 git branch 브랜치명 새로운 branch를 생성한다. 이 때 현재 작업중인 파일이 해당 branch 에 업로드 된다. branch 이동 git checkout 브랜치명 생성한 브랜치로 이동해서 작업한다. commit 모든 브랜치 push git push origin --all 원하는 브랜치만 push git push origin 브랜치명 merge 특정 브랜치에서 작업한 내용을 다른 브... Read More

학원 수업 Day29 redux-toolkit redux-toolkit은 redux-saga에 비해 간편하게 상태관리를 할 수 있다. redux 나 redux-saga 를 사용하면서 많은 파일, 함수들을 만들었던 것에 비해 createAsyncThunk(), createSlice() 만을 사용해서 개별 Slice 파일만 만들면 된다. 설치 또한 간편하다. npm i @reduxjs/toolkit 한번만 설치하면 redux, redux-thunk, redux-saga가 모두 설치된다. react 에서 사용을 위해 react-redux 만 별도로 설치하면 된다. 사용 방법 파일은 호출할 데이터 별... Read More

학원 수업 Day28 generator 비동기 함수의 동기작업을 처리하기 위해 그동안은 promise, then, asyn, await 등의 구문을 사용했었다. 위의 구문을 사용하면 앞에서 일어난 상황이 끝난 직후 다음 상황이 실행하게 되는데, 이렇게 즉시 실행하지 않고 원하는 타이밍에 실행하도록 하려면 generator 를 사용해야 한다. 사용 방법 먼저 순차적으로 실행하고 싶은 내부 함수들을 작성한다. function 내부함수1() { console.log('text1'); return '리턴값1'; } function 내부함수2() { console.log('text2'); retur... Read More

학원 수업 Day27 git Clone git clone 레포지토리주소 원하는 경로에서 터미널을 열어서 해당 명령어를 사용하면 해당 경로에 레포지토리 내용이 복제된다. Redux 리액트같은 싱글 페이지 어플리케이션에서 상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리이다. 자바스크립트 라이브러리이기 때문에 리액트 뿐 아니라 뷰, 앵귤러 등 여러 라이브러리 또는 프레임워크에서 사용할 수 있다. 그동안 리액트를 사용하면서 특정 컴포넌트에서 axios 등을 이용해 데이터를 불러오면 그 데이터를 다른 컴포넌트로 넘겨주기 위해서는 받는 쪽이 하위 컴포넌트 일 경우 props로 넘기거나, 받는 쪽이 상위 ... Read More

학원 수업 Day26 Framer Motion 컴포넌트 마운트 시에는 애니메이션 효과를 주기 쉽지만, 언마운트시에는 컴포넌트 자체가 사라져버려 애니메이션 효과를 주기 어렵다. Framer Motion플러그인을 사용하면 애니메이션 효과 후 언마운트 되도록하여 언마운트 효과를 손쉽게 구현할 수 있다. npm i framer-motion@6 --force @6을 지워서 최신 버전을 설치할 수도 있지만 현재 제작 환경을 고려하여 6버전으로 인스톨했다. 사용방법은 간단하다. 먼저 컴포넌트 최상단에 아래와 같이 framer-motion을 import 해야 한다. import { motion, AnimatePr... Read More

학원 수업 Day25 Flickr API Flickr API 활용 두번째 시간. buddy icon 표시 <div className="profile"> <img src={`http://farm${item.farm}.staticflickr.com/${item.server}/buddyicons/${item.owner}.jpg`} alt={item.owner}/> <span>{item.owner}</span> </div> JSX내 데이터.map()으로 개별 데이터를 뿌려주는 부분에서 이미지 게시자의 프로필 아이콘과 ID를 받아올 수 있다. <... Read More

학원 수업 Day24 Flickr API HTML 버전으로 했었던 Flickr API를 리액트 페이지에서도 적용했다. const [ Items, setItems ] = useState([]); const frame = useRef(null); const searchInput = useRef(null); 먼저 데이터를 담고 받아올 초기 변수 지정을 해준다. const showSearch = (e)=>{ e.preventDefault(); const keyword = searchInput.current.value; frame.current.classList.remove('on'); get... Read More