shine의 개발 노트

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 웹 클릭 > 사이..

1. 파일 업로드 ** /public/write.html 파일 업로드 제목 : 내용 파일 : ** 2_multer.js const express = require('express'); const bodyParser = require('body-parser'); const static = require('serve-static'); // npm i serve-static const path = require('path'); const logger = require('morgan'); // npm i morgan const multer = require('multer'); // npm i multer const port = 3000; const app = express(); const router = exp..

1. 일정 2021.03.02(화) Welcome Day(18:30 PM, 게더 - 코로나로 인한 비대면 전환) 2021.03.16(화) 1차 Free MakeUs(18:30 PM, 게더 - 코로나로 인한 비대면 전환) 2021.03.30(화) 2차 Free MakeUs(18:30 PM, 게더 - 코로나로 인한 비대면 전환) 2021.04.03(토) MakeUs Demoday(11:00AM ~ 17:00PM, 싹 영등포 캠퍼스) 2. 팀원 구성 디자이너 : 워니 클라이언트 : 챈(PM), 래디 서버 : 비비, 샤인 3. ERD AQueryTool 읽기 전용으로 이동 [Password] sok0jh 4. 구글스토어에서 다운 가능 [구글스토어] 다운받으러 가기 5. 프로젝트 깃허브 주소 ( github.co..

1. document sort(정렬) db.컬렉션명.find().sort(); 2. 객체 : {key:value} 형태의 데이터로, key는 데이터 field 이름이고, value의 값은 1 또는 -1이다. 1로 설정하면 오름차순이며, -1로 설정하면 내림차순이다. 또한 여러 key를 입력할 수 있고, 먼저 입력한 key가 우선권을 갖는다. ** 회원 가입한 순으로 내림차순(최근 가입순)으로 정렬한다. db.member.find().sort({"_id":-1}).pretty(); 1) document 개수의 제한 ** limit() - 출력할 데이터 개수를 제한할 때 사용한다. └ db.컬렉션명.find().limit(출력할_개수).pretty(); ** 회원가입한 순으로 내림차순으로 정렬한 뒤 3명의 ..