shine의 개발 노트

1. 색상 변경 "workbench.colorCustomizations": { // "editor.lineHighlightBackground": "#2d9b33", //선택된 라인 전체의 백그라운드 색상 "editor.selectionBackground": "#f0102e", //선택된 영역만의 배경 색상 "editor.wordHighlightBackground": "#ffffff", //선택된 영역만의 글자 색상 "editorCursor.foreground": "#f10808", //선택된 영역에서의 커서 색상 }, 2. JWT(JSON Web Token) : 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의된 기술이다. 3. ..

1. 다른 주소로 이동시키기 : import {Route, Link} from 'react-router-dom'; content [파라미터] /profile/apple [쿼리] /profile?name=apple * 쿼리를 문자열로 받아 처리 가능하지만 객체 형태로 변환하려면 qs 라이브러리를 사용 └ yarn add qs * 서브라우트 : 라우트 내부의 라우트를 만드는 것을 의미한다. ** app.jsx import React from 'react' import {Route, Link} from 'react-router-dom'; import Home from './home'; import About from './about'; import Profiles from './profiles'; const ..

1. useReducer : 상태를 업데이트 로직을 분리할 때 사용 └ state : 컴포넌트에서 앞으로 사용할 수 있는 상태 └ dispatch : 액션을 발생시키는 함수 2. 저번시간에 만든 할일 메모장 만들기에서 Context API를 활용한 상태관리 추가 ** /components/todoContext.js import React, {useReducer, createContext, useContext, useRef} from 'react'; const initialTodos = [ { id: 1, text: '프론트엔드 프로젝트 만들기', done: false }, { id: 2, text: '밥 잘 챙겨먹기', done: true }, { id: 3, text: '운동하기', done: true..

1. classnames 모듈 사용 ** /component/button.jsx import classNames from 'classnames'; import React from 'react'; import './button.scss'; /* HTML에서 CSS class 적용 2가지 class 적용 */ function Button({children, size, color, outline}) { // return {children}; // classnames 사용시 return {children}; } Button.defaultProps = { size: 'medium', color: 'blue' } export default Button; ** /component/button.scss $blue: #..

1. useRef의 기능 ① DOM에 직접 접근하는 방법 ② 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 2. useRef로 컴포넌트 안의 변수 만들기 └ 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리 └ setTimeout, setInterval을 통해서 만들어진 id └ 외부 라이브러리를 사용하여 생성된 인스턴스 └ scoll 위치 1) 배열의 항목 추가 ** /component/userlist2.jsx import React from 'react'; function User({user}) { return ( {user.username} ({user.email}) ) } function UserList({users}) { return ( {users.map(user => ( ))} )..

1. JSX 1) 태그에 style과 CSS class를 설정하는 방법 ① css 파일을 만들지 않는 경우 : background-color → backgroundColor ② css 파일을 별도로 만드는 경우 : import 후 className 속성으로 등록 2) 주석을 작성하는 방법 : { /* */ } 3) props ** props를 통해 컴포넌트에게 값 전달하는 방법 ① function 컴포넌트명(props) { "props.속성명" 으로 사용 } ② function 컴포넌트명({속성명1, 속성명2}) { "속성명1" 으로 사용 } ** 기본값을 설정하는 방법 컴포넌트명.defaultProps = { 설정할 내용 } [예] 기본값을 설정하지 않는다면 [예] 기본값 설정 후 ** 컴포넌트 태그 ..

1. React란? : 리액트는 페이스북 사에서 만든 자바스크립트 라이브러리이다. 페이스북에서 자체적으로 이용하고 있을 뿐만 아니라 많은 웹 어플리케이션이 리액트로 만들어졌다. "리액트는 유저 인터페이스를 만들 수 있는 라이브러리이다!" → 사용자에게 보여지는 UI 만들고 사용자가 클릭을 하거나 이벤트가 발생하게 되면 그 이벤트에 맞게 반응하도록 만들어진 라이브러리이다. 복잡한 웹 어플리케이션을 만들때 MVC 패턴을 사용한다. * 리액트는 사용자에게 UI를 보여주고 이벤트를 처리하는 일들을 할 수 있다. React : 웹 어플리케이션 UI 개발 React Native : 모바일 어플리케이션 React + Electron : 데스크탑 어플리케이션 "리엑트는 컴포넌트로 이루어져 있는 UI 라이브러리이다." ..

1. Extensions 추가 1) Material Theme 2) Bracket Pair Colorizer 3) CSS Peek 4) HTML CSS Support 5) HTML to CSS autocompletion 6) 주석 색상 변경 : 단축키 Ctrl + ,(콤마) 세팅으로 이동 > .json 검색 후 Edit in settings.json 클릭 > 아래의 문구 추가 "editor.tokenColorCustomizations": { "comments": "#FFC2C2" } 2. Emmet 사이트로 바로가기 3. 저번시간에 구현한 채팅 기능에 로그인 기능 추가 ** /public/client3.html 클라이언트 3 접속 ip : 접속 port : 아이디 : 비밀번호 : 보내는 사람 아이디 : ..

1. serializeUser : 사용자 정보 객체를 세션에 아이디(객체)로 저장 passport.serializeUser((user, done) => { //done(null, user); // id만 세션에 저장 done(null, user; // user 객체 세션에 저장 }); 2. deserializeUser : 세션에 저장한 아이디(객체)를 통해서 사용자 정보 객체를 불러옴 passport.deserializeUser((user, done) => { console.log('deserializeUser() 호출!', user); done(null, user); }); 3. passport.session() 미들웨어가 메소드를 호출 조회한 정보를 req.user 저장 4. [저번 수업시간에 마무리..

1. passport 모듈 : 노드에서 사용할 수 있는 사용자 인증 모듈이다. 사용 방법이 간단할 뿐만 아니라, 사용자 인증 기능을 독립된 모듈 안에서 진행할 수 있도록 도와준다. 특히 익스프레스를 사용할 경우 미들웨어로 사용할 수 있어서 간단한 설정만으로 로그인 기능을 만들 수 있다. 2. 페이스북 개발자 센터 https://developers.facebook.com 3. 페이스북 개발자 센터에 앱 만들기 : 로그인 후 내 앱 클릭 > 앱 만들기 클릭 > 연결된 환경 구축 선택 후 계속 클릭(페이스북 로그인 사용만 해볼 예정) > 표시할 앱 이름 설정 후 앱 만들기 클릭 > 앱 만들기 완...! 4. 페이스북 로그인을 사용하기 위한 설정 : Facebook 로그인 설정 클릭 > www 웹 클릭 > 사이..