nodejs23 [220619] jsonwebtoken 라이브러리 사용방법 설치 & 세팅 $ npm install jsonwebtoken const jwt = require('jsonwebtoken'); jwt.sign = 토큰 생성 jwt.sign(payload, secretOrPrivateKey, [options, callback]) payload : 페이로드 값 secretOrPrivateKey : 시크릿키 또는 프라이빗키 = salt [options, callback] : 필요한 나머지 정보들을 모아서 만든 객체 (예 : 알고리즘, 유효시간, 발급자 정보...) 토큰 생성 : 실사용 예 const jwt = require('jsonwebtoken'); const secreatkey = 'saltRole'; const option = { algorithm: 'HS256',.. 2022. 6. 19. [220414] 리스트의 단점을 극복하는 상태 끌어올리기 리스트의 단점 리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만, 동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다. 해결책 : 상태 끌어올리기 부모컨텐츠에 App component에 state를 만들어서 전달해준다. 리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up App에 state값을 저장하기 코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다. class Form extends React.Component{ state ={ value:'', } handleChange = e => { const .. 2022. 4. 17. [220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15. [220326] 연극 예매사이트 팀플 기록) 8. 깨지는 css 수정, git commit message 수정,삭제, git 원상복구하기 현재 하고있는 것 1) margin, padding까지 계산해서 vh 만드는거 고침 아아ㅏㅏㅏ https://velog.io/@edie_ko/Tip-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-100vh-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-iosandroid 2) 깃 왜이래ㅐㅐ 충돌일어났는데 오도가도못하고 오류만 뿜어냄 깃 리베이스 https://gamsungcoding.tistory.com/entry/Git-Git-Advanced-Rebase-i-%ED%99%9C%EC%9A%A9%EB%B2%95 https://blog.appkr.dev.. 2022. 3. 27. [220325] 연극 예매사이트 팀플 기록) 7. 통일성 있는 디자인을 위해 수정하기 현재 하고있는것 1) 통일성 있는 디자인을 위해 컬러칩, 전체적인 nav툴 작성 완료. 후보로 만들었던 nav 디자인들. 2) list/grid/calendar 형태를 url 이동 없이 ajax를 사용해서 그려야함. 일단... 저 3개를 통일성 있는 형태로 꾸겨 넣어보자. 버튼식으로 클릭할때마다 리스트형, 앨범형, 캘린더형으로 바뀌도록. 3) 공용폰트 지정함 사용자/개발자/브라우저렌더링-들을 다 체크하고 폰트를 정하는게 맞구나... 이거 안 정하고 진행했다가 폰트이슈 처절.. 이슈 발생 배경 웹폰트가 사용자 컴퓨터에서 구동되지 않을때 폰트가 깨지는 것을 방지하고자, 서버에 폰트를 업로드함. 이슈 발생 다운로드 받은 폰트명이 프로그램상에서 보이는 폰트명이랑 안 맞음. 이슈 해결과정 공통적으로 웹폰트를 받은.. 2022. 3. 25. [220324] 연극 예매사이트 팀플 기록) 6. 스키마 수정, 캘린더 구현, 파일 업로드기능 추가 현재 하고있는것 팀원 의견을 받아 디자인 세부 수정 및 확정된 디자인 사이트에 구현화 개인적으로 보충학습해야할 것 캘린더에 일정 입력하기 파일 업로드 기능 팀플 현재 진도 좋아요, 찜목록 플래그를 테이블을 나눠서 구현하는것을 스키마 수정 2022. 3. 24. [220323] 연극 예매사이트 팀플 기록) 5. 스키마 수정, 캘린더 프론트 디자인 80% 완성 현재 하고있는 것 캘린더 프론트 디자인 80% 완성. 팀원들의 의견을 들어보고 세부적인 곳들 수정예정. 개인적으로 보충학습해야할 것 달력 만드는법. 팀플 현재 진도 전체 페이지 구조 사이트에서 사용할 스키마 팀원회의 및 수정 2022. 3. 24. [220322] 연극 예매사이트 팀플 기록) 4. 스키마 짜기, DB 공부 현재 하고있는 것 프론트 디자인 진행중. 개인적으로 보충학습해야할 것 데이터베이스에서 데이터 생성/삭제/수정/검색 기능 다시 공부 현재 사용하는 서버와 데이터베이스 연결해서 sql문 사용하는법 다시 공부 2022. 3. 24. [220321] 연극 예매사이트 팀플 기록) 3. 작업물 할당받음 220321 작업물을 할당받음 내가 할당받은 작업량 교수님 지정해주신 프론트 디자인 board 백엔드 총괄, 파일 업로드 수업 복습 미흡한 점 개인공부 파일 업로드, 덧글 기능, 페이징 기능, Oath 오늘 작업한 내용 유툽으로 figma를 배워서 디자인함 기존 adobe 디자인 툴이랑 많이 다르지 않아서 배우기 쉬웠다. user calendar랑 show calendar front 디자인 끝냄 의도한 내용 사용자가 보기엔 한 화면에서 모든 것을 조작하고 있다고 느낄 수 있도록. 하지만 구역별 내용은 확실하게 나누기 https://www.youtube.com/watch?v=LmLchZ4tCXc 이 영상을 보고서 피그마를 사용했다. 영상을 보고서 디자이너랑 개발자의 소통이 힘들다는건 대충 알았는데 피그마를.. 2022. 3. 23. [220314] Error: listen EADDRINUSE: address already in use :::4001 문제해결 / mac, 맥북 해당 :4001라는 포트로 이미 사용중이라고하는데, 프로그램은 이거 하나 돌리고 있는 중인데요. 검색해보니 강제로 종료되거나 알 수 없는 이유로 종료되면 지 혼자 이렇게 오류가 떠돌아다닌다고 한다. 강제로 꺼주자. sudo lsof -i :오류포트 // 오류 포트 찾기 sudo kill -9 [오류코드] //오류 포트 삭제 이 과정을 거치면 문제없이 다시 돌아간다. 2022. 3. 14. 이전 1 2 3 다음
