전체 글 607

NodeJS+MongoDB Part3 - 게시판, API 관리

게시판 우선 정정할 것이 있다. 지난번 로그인 시 세션을 저장할 때 로그인 유저의 정보를 같이 담아주는 코드가 잘못되어 있었다. // 지난번 코드 // 이때 id로 가져오는 값에 object로 로그인 유저의 정보가 들어가 있기에 // 찾을 수 없었고 그렇기에 data에는 undefined가 들어가게 되었었다 ㅠㅠ // (한참을 찾았네...) passport.deserializeUser((id, done) => { db.collection("login").findOne({ id: id }, (err, data) => { done(null, data); }); }); // 변경 후 passport.deserializeUser((userData, done) => { db.collection("login").f..

NodeJS+MongoDB 2023.06.27

NodeJS+MongoDB Part3 - 암호화

회원가입 페이지 + 비밀번호 암호화 우선 회원가입 페이지부터 만들기 로그인 페이지와 입력하는 레이아웃을 유사하니 login.ejs 파일 그대로 가져와서 form 태그의 action 만 /register로 변경하고 submit 을 회원가입으로 변경하기 회원가입 페이지 Id PW 회원가입 그리고 server.js 에서도 signup 페이지를 GET, POST 요청시에 대한 코드도 작성하기 여기서 주의할 점은 회원 기능이 필요하다면 passport 셋팅하는 부분이 위에 있어야한다고 한다. // GET app.get("/signup", (req, res) => { res.render("signup.ejs"); }); // POST app.post("/register", (req, res) => { db.coll..

NodeJS+MongoDB 2023.06.27

NodeJS+MongoDB Part3 - Search

Search 기능 구현 전에 env 파일로 환경변수 관리하기 환경변수 설치 npm i dotenv server.js 파일에 설치한 dotenv 불러오기 require('dotenv').config() 이후 server.js 와 같은 경로에 .env 파일 생성 후 아래와 같이 PORT와 DB_URL 작성하기 물론 변수 작명은 자유롭게 가능. // .env 파일 PORT = '8080' DB_URL = 'mongodb+srv........' 그리고 server.js에서 기존에 작성했던 PORT 번호와 DB_URL을 작성시엔 process.env.변수명으로 변경 process.env.PORT process.env.DB_URL Search 검색 기능 하나 찾을 때는 findOne() 여러개 찾을 때는 find(..

NodeJS+MongoDB 2023.06.26

[프로그래머스] 튜플

# 코드 1 # 정규식을 사용해서 {} 사이의 문자를 찾은 다음 # 해당 길이가 짧은 것을 기준으로 정렬을 오름차순 정렬 # 이후 배열의 요소들을 정수화 시킨 다음 차집합을 이용하기 위해 set화 시킨 다음 # 차집합으로 이전 요소와 비교 후 달라진 값만 배열에 추가 후 리턴 시킴. import re def solution(s): answer = [] li = re.findall(r'\{.*?\}', s[1:-1]) li.sort(key=len) li = [set(map(int,i.strip('{}').split(','))) for i in li] if len(li) == 1: answer = list(li[0]) else: for i in range(len(li)-1): if i == 0: answer..

알고리즘 2023.06.26

React Part 1 - Step 4

상세페이지에 상품명 넣기 뭐가 좀 이상해졌는데 … 무튼 현재 Detail 컴포넌트는 따로 만들지 않고 해당 코드를 Route안의 element에 넣었는데 갑자기 강사님은 따로 파일을 빼서 정리를 해뒀다. 우선 App에서 Detail로 item 데이터를 전송하기 위해서 props를 이용 function Detail(props) { return ( {props.item.map((item) => { return item})} ) } export default Detail 근데 여기서 Q. Detail.js 안에 item이라는 state를 하나 더 만들어주고 props를 하지 않으면 더 편하지 않음?? 이렇게 되면 앞서 프젝했을 때처럼 당황스러운 결과가 나오게 되는데 데이터의 수정사항이 생겼을 때 예를 들어 데..

React 2023.06.25

React Part 1 - Step 3

React - Router 리엑트에서 페이지 나누는 법 컴포넌트를 만들어서 상세페이지 내용 채우기 누가 /detail에 접속하면 해당 커포넌트를 보여줌 설치 순서 terminal → npm i react-router-dom@6 index.js → BrowserRouter 를 작성하기 import 또한 함께 해주고 BrowserRouter 태그로 App을 감싸주기 그리고 팁으로 react에서는 태그로 감싼뒤 요소들을 넣어야 하기 때문에 이때 div태그를 적기 그렇다면 그냥 만 넣어줘도 된다. 무튼 해당 element 속성 안에 원하는 데이터를 태그 혹은 다른 태그로 감싼 상태로 넣어주게 되면 { return item})} }/> 페이지 이동 버튼 Link 태그 사용하기 to 속성을 이용해서 기존에 작성했던..

React 2023.06.25

React Part 1 - Step 2

만약 input태그에 뭔가 입력시 코드를 실행하고 싶다면 onChange/ onInput 을 작성하면 된다. 그래서 이벤트핸들러(onClick, onChange, onInput …) 종류는 굉장히 많다. 여기서 input태그 내부의 입력값을 가져오고 싶을 경우 함수의 파라미터값을 가져와서 사용 // onchange가 감지할 때마다 생성되는 e { console.log(e) }}/> // onchange가 감지할 때마다 생성되는 이벤트가 발생한 html태그 { console.log(e.tartget) }}/> // onchange가 감지할 때마다 생성되는 이벤트가 발생한 html태그에 입력한 값 { console.log(e.target.value) }}/> 그리고 현재 강의대로 작성했다면 아래의 코드가 작..

React 2023.06.25