Web/Basic (Front-end)
[#7] HOC를 이용한 Auth
📒HOC? Higher Order Component 다른 컴포넌트를 받아서 새로운 컴포넌트를 리턴함. 📒HOC 동작 구조 Auth라는 HOC에서 Back-end에 Request를 날려서 현재 페이지에 들어와있는 사람의 상태정보(Admin 유저인지, 로그인된 유저인지, 로그인이 안된 유저인지) 를 가져옴. 페이지에 들어갈 수 있는 자격이 되는 유저면 들여보내고, 자격이 안되는 유저면 다른 페이지로 보내버림. ex) *페이지 자격 아무나 진입 가능한 페이지: Landing Page, About Page 로그인한 회원만 진입 가능한 페이지: Detail Page 로그인한 회원은 진입 불가능한 페이지: Regitser Page, Login Page 관리자만 진입 가능한 페이지: Admin Page 📒소스코드 S..
[#6] React Hooks
📒 Class Component vs Functional Component 비교 Class Component Functional Component Provide more features Provide less features Longer Code Shorter Code More Complex Code Simpler Code Slower Performance Faster Performance React 16.8 Hooks update. 📒React Hook 대략적 구조 constructor: state를 할당. render: HTML DOM Tree에 알맞게 넣어서 화면에 띄워줌. componentDidMount: 하고자 하는 동작. *React Hook에서는? this. state -> useState ..
[#5] Redux 이론 및 Settings
📒Redux란? predictable state contatiner for Javascript apps. (상태 관리 라이브러리) 부모-자식 관계의 구조로 되어있는데 Redux가 없다면 직접적으로 연관된 컴포넌트를 찾아찾아 가야하지만 Redux는 Srore를 이용해 빠르게 원하는 컴포넌트로 접근하고 커뮤니케이션할 수 있도록 해줌. 📒Props vs State Props: 부모 컴포넌트->자식 컴포넌트로 데이터를 주고받을 때 사용. 그렇게 자식 컴포넌트가 받은 value는 변경 불가능. State: 그 컴포넌트 안에서 데이터를 전달할 때 사용. 컴포넌트 안에서 데이터 변경 가능. 데이터가 값이 변할 때마다 re-render 됨. 📒Redux Data Flow unidirectional (한방향으로만 흐름...
[#4] CSS Framework: Antd
📒Antd https://ant.design/docs/react/introduce Ant Design of React - Ant Design Polyfills are needed for IE browsers. We recommend @babel/preset-env for it. You can set targets config if you are using umi. We recommend using npm or yarn to install, it not only makes development easier, but also allow you to take advantage of the rich ant.design cd client로 이동 후 npm install antd --save [index.js]에서..
[#3] Concurrently를 이용해 Front, Back server 한번에 켜기
📒Concurrently? terminal 두개 열어서 한쪽에서 Server, 한쪽에서 Client를 실행시키지 않고 한번에 실행시킬 수 있음. https://www.npmjs.com/package/concurrently concurrently Run commands concurrently www.npmjs.com [package.json] - "scripts" 부분에 추가. "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" npm run dev 로 실행
[#2] Data Flow & Axios 정리 / Request 보내고 Response 받아보기
📒Data Request, Response Flow Axios: jQuery의 AJAX 역할. (npm install axios --save) 📒Request 보내고 Response 받아보기 [Server] index.js app.get('/api/hello', (req, res)=> { res.send("hi~!") }) [Client] LandingPage.js import React, {useEffect} from 'react'; import axios from 'axios'; function LandingPage(){ useEffect(() => { axios.get('/api/hello') //get형식으로 받고 .then(response => console.log(response.data))..