Hello World!!

학원 수업 Day35 웹사이트 규모가 작을 경우 가입된 회원의 데이터 관리는 자체 DB에서 하는 것보다 firebase를 이용해 구글에서 관리하게 하는 것이 보안 등의 측면에서 편리하다. firebase firebase 를 react 폴더에서 설치한다. npm i firebase firebase 를 사용하기 위해 src 폴더에 firebase.js 파일을 생성한다. //firebase추가 import firebase from 'firebase/compat/app'; //firebase auth 추가 import 'firebase/compat/auth'; const firebaseConfig = ... Read More

학원 수업 Day34 지난 시간에 이어서 수정, 삭제 기능을 구현했다. 게시글 수정 back-end 먼저 edit로 호출이 들어오면 같이 넘어온 정보들을 temp 에 저장한다. router.post('/edit', (request, response)=>{ const temp = { title: request.body.title, content: request.body.content } }) updateOne() 메서드를 이용해 데이터를 수정한다. 첫번째 인자로 원하는 조건(고유 id값, 여기서는 communityNum 값)으로 수정할 Document를 하나 검색하고, 두... Read More

학원 수업 Day33 mongoDB를 활용해 본격적으로 커뮤니티 게시판을 생성했다. 게시글 출력 back-end app.post('/api/read', (request, response)=>{ Post.find() .exec() .then(doc=>{ response.json({success: true, list: doc}); }) .catch(error=>{ console.log(error); response.json({success: false}); }) }) node/index.js에서 find(조건) 메서드... Read More

Router-DOM V5 useHistory() JSX에서 라우터를 이동할 때 라우터의 Link 를 사용하지만 js에서 이동을 시키고 싶을 때는 useHistory() 를 사용한다. react 로부터 useHistory 를 import 하고 history 로 정의해 사용한다. const history = useHistory(); history.push() 실제로 페이지를 이동할 때는 history.push(경로) 형태로 사용한다. 인자로 문자열만 넣으면 단순하게 해당 경로로 이동하지만, 객체 형태로 넣으면 경로 뿐만이 아니라 다른 데이터도 같이 보낼 수 있다. history.push({ pa... Read More

Function 컴포넌트와 Class 컴포넌트의 차이는 기존에 궁금했던 부분이어서 강의를 찾아보고, 검색을 통해 추가적인 내용을 보충해서 이해했다. 인프런 - React class vs. function style coding class형 보다 함수형 컴포넌트가 사용이 더 쉽지만, 예전에는 class형 컴포넌트만 state나 react life cycle을 이용할 수 있었기 때문에 대부분 class 문법으로 작성이 되었다. 하지만 Hook이 등장하면서 함수형에서도 state나 react life cycle을 이용할 수 있게 되어서 함수형으로도 많이 쓰인다. 컴포넌트 생성 function 컴포넌트 ... Read More

학원 수업 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