elice/WIL
[week_09] React 문법 | React-Router-Dom v6, useReducer, useContext
1. React-Router-Dom 라이브러리 v6 1-1. Routes, element Router ➡ Routes ➡ Route 구조로 구현하고, element props를 사용해서 렌더링할 컴포넌트를 전달한다. import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( ); } 1-2. useNavigate 특정 경로로 이동할 때는 useNavigate 훅을 사용한다. const navigate = useNavigate() navigate("/login") navigate("/login", {replace: true}) 1-3. path="*" SPA 라우팅에 걸러지지 않는 링크..
→2022.03.13
elice/WIL
[week_09] React 상태 관리
1. 상태 관리 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함 1-1. MPA와 SPA에서의 상태 관리 MPA: 서버의 데이터를 이용해 페이지를 렌더링 ➡ 클라이언트 데이터와 서버의 데이터가 큰 차이를 가지지 않는다. SPA: 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리. 그 외의 데이터는 클라이언트만의 데이터로 유지. 1-2. 상태 관리 기술이 해결하는 문제들 1) 데이터 캐싱과 재활용 SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘들다. 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활..
→2022.03.11
elice/study
[BE] Passport.js를 활용한 간단한 회원인증 구현
1. 필요한 모듈 설치 npm install express passport passport-local express-session mongoose passport, passport-local : 회원가입과 로그인 세션관리를 도와주는 모듈 express-session : 세션관리를 위한 모듈 2. app.js 기본 세팅 const express = require("express"); const app = express(); const passport = require("passport"); var Strategy = require("passport-local"); const session = require("express-session"); const mongoose = require("mongoose")..
→2022.03.07
elice/WIL
[week_08] React 기초 Ⅱ(2) Hooks
1. Hook Hook은 컴포넌트에서 데이터를 관리(State)하고, 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. 앞서 학습한 useState가 바로 State Hook이다. Hook은 클래스 컴포넌트(Class Component)를 보완하고, 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에서 추가되었다. ✨ Hook 유의사항 1) Hook은 React함수(컴포넌트, Hook) 내에서만 사용 가능하다. 2) Hook의 이름은 반드시 'use'로 시작해야 한다. 3) 최상위 Level에서만 Hook을 호출할 수 있다. 즉, 컴포넌트 내에서 Hook을 사용할 때 반드시 첫번째 중괄호({ }) 안에서만 사용해야 한다. (👉 if문, for문 안쪽 또는 ..
→2022.03.02
elice/WIL
[week_08] React 기초 Ⅱ (1) 이벤트
1. 이벤트(event) 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 유저의 행동에 의해 발생할 수도 있고, 개발자가 의도한 로직에 의해 발생할 수도 있다. 이렇게 발생된 이벤트를 자바스크립트를 이용해서 대응할 수 있다. 이벤트 핸들러 함수를 사용해서 다양한 로직을 처리하고, 그 결과를 사용자에게 추력해서 알릴 수 있다. 1-1. 이벤트 처리(핸들링) 방법 const App = () => { const handleChange = (event) => { console.log("입력값 : " + event.target.value); } return ( ); }; DOM Element의 경우, 핸들링 함수에 이벤트 object를 매개변수로 전달한다. 이벤트 object를 활용해서 이벤..
→2022.03.02
elice/study
[CS] AJAX
1. AJAX란? Asynchronous Javascript And XML 비동기적으로 JS를 사용해서 데이터를 받아와서, 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법 2. 어떻게 동작하는가? 사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트 하는 방식이다. 3. 어떻게 사용하는가? 3-1. XMLHttpRequest 일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 만들어 인스턴스의 open(), send() 등의 메소드를 ..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(4) React 프로젝트 생성
1. Create React App (CRA) React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 보일러플레이트(Boilerplate) Facebook에서 직접 만들어서 관리한다. 프로젝트 생성에 필요한 다양한 기능들을 Command로 제공한다. 1-1. Create React App (CRA)의 장점 1) 개발자가 온전히 React App 개발에 집중할 수 있도록 한다. 상대적으로 덜 중요한 코드는 노출되지 않는다. 강력한 Command를 지원한다. 2) (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원 Babel 기본 내장 배포 시 코드 번들링 Webpack 기본 내장 2. Node.js / NPM 소개 Create React App으로 React 프로젝트 시작 시 No..
→2022.02.28
elice/WIL
[week_08] React 기초 Ⅰ(3) Props와 State
1. Props 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다. /* 1. 컴포넌트 생성 */ const Welcome = (props) => { return Hello, {props.name} } /* 2. 컴포넌트 사용 */ const App = () => { return ; } Props는 읽기 전용이다. 따라서, Props 값을 변경해서 사용하고 싶다면 Props의 값을 임의로 변경해서 사용하는 것이 아니라, 새로운 변수를 생성해서 해당 값을 복제한 뒤 원하는 대로 변경해서 사용한다. 1-1. DOM Element의 Attributes ..
→2022.02.28

• 이전
• 1
• 2
• 3
• 4
• 5
• 다음