포시코딩

Auth Authentication (인증) 인증은 login 함수처럼 사용자 id와 pw 같은 데이터를 요구하여 사용자의 신원을 파악하는 프로세스. 인증 절차를 통과한 유저만이 해당 유저임을 증빙할 수 있는 JWT 토큰을 받는다. Authorization (승인) 승인은 해당 사용자가 특정 함수 혹은 리소스에 접근할 수 있는지를 파악하는 프로세스. 발급받은 JWT 토큰을 토대로 서버는 특정 사용자임을 알아내고 특정 사용자에 관련된 액션을 허가한다.

개요 React에서 Nest.js 서버로 axios를 통해 글쓰기 요청을 보내는 과정에서 이미지 파일도 같이 보낼걸 생각해 원래 axios .post('http://localhost:8080/boards', { title, content, }) 이렇게 보냈다면 formData를 써서 const formData = new FormData(); formData.append('title', title); formData.append('content', content); formData.append('file', file); axios .post('http://localhost:8080/boards', formData) 이렇게 보내게끔 수정했는데 이상하게 Nest.js 서버의 controller에서 받는 bod..

Linked List - Class 활용해 구현 class Node: def __init__(self, data, next=None): self.data = data self.next = next class NodeMGMT: def __init__(self, data): self.head = Node(data) def add(self, data): node = self.head while node.next: node = node.next node.next = Node(data) def desc(self): node = self.head while node: print(node.data) node = node.next def search(self, data): node = self.head if node ..

Queue FIFO queue = [] def enqueue(data): queue.append(data) def dequeue(): data = queue[0] del queue[0] return data for i in range(1, 10): enqueue(i) print(queue) print('dequeue: ', dequeue()) print('dequeue: ', dequeue()) print(queue) Stack LIFO stack = [] def push(data): stack.append(data) def pop(): data = stack[-1] del stack[-1] return data for i in range(1, 10): push(i) print(stack) print('..

개요 프로젝트에서 지도 API를 사용해봐야 하는데 카카오 맵 API는 옛날에 한 번 써봐서 이번에는 네이버 맵 API를 써보고 싶어 공부해봤다. 당장 ejs 상에서 할지 react 상에서 할지 정해진게 아니라 일단 react에서 연습해봤음 사용방법 https://console.ncloud.com/naver-service/application 일단 Client ID를 발급 받아야한다. 네이버 클라우드 가입/로그인 후에 Application 탭에 가서 등록하면 위와 같이 앱 목록에 나오게 되는데 인증 정보에서 Client ID를 확인할 수 있다. public/index.html react 프로젝트의 public 폴더에 있는 index.html에 사진과 같이 script를 세팅해준다. 이로써 사용 준비가 끝났..

onload vs addEventListener jQuery를 극혐하다보니 VanillaJS 상에서 window.onload = () => { //실행될 코드 } 이렇게 자주 써왔는데 window.addEventListener('DOMContentLoaded', () => { //실행될 코드 }) 이거랑 뭐가 다른지 궁금해서 비교해보았다. onload window.onload = () => { //실행될 코드 } 문서의 모든 컨텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트로 load 이벤트라고 불린다. 그냥 아무 생각 없이 써왔는데 여러 단점들이 존재했다. 문서에 포함된 모든 컨텐츠가 로드된 후에 실행되기 때문에 불필요한 로딩시간이 추가될 수 있다. 동일한 문서에 오직 ..

개요 express에서 cors를 사용하려면 cors 라이브러리를 설치해 직접 설정까지 해줬어야 했는데 Nest.js에는 기본으로 있지 않을까 싶어 찾아봤더니 역시나 그냥 갖다 쓰면 되게끔 구현되어 있었다. https://docs.nestjs.com/security/cors Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Orient..

코드 const target = { id: 123, title: "Tenet", year: 2020, genres: ["action", "mind blown"], }; const updateData = { title: "WOW", genres: ["none"], }; console.log({ ...target, ...updateData }); // { id: 123, title: 'WOW', year: 2020, genres: [ 'none' ] } JavaScript에서 두 오브젝트에 대해 {} 안에서 전개 구문을 사용하면 같은 key 값에 대해 뒤의 값으로 덮어씌워진다. TypeScript 처럼 key 값들을 통제한다는 전제 하에 부분 update 로직(PATCH)에서 사용한다면 유용할듯 싶다.

개요 내가 그동안 구현한 로직에 대해 남에게 설명할 상황이 됐을 때 요약해서 설명하기가 매우 힘들다는 사실을 알았다. 앞으로 면접을 보게 된다면 분명히 물어볼 사항들에 대해 대비할 겸 정리를 해보았다. 질문 & 답변 로그인 로직 login = async (account, password) => { try { const admin = await this.findOneByAccount(account); if (!admin) { return { code: 401, message: '잘못된 관리자 정보' }; } if (!(await comparePasswordForLogin(password, admin.password))) { return { code: 401, message: '잘못된 관리자 정보' }; }..

개요 카메라에 찍히는 화면을 JavaScript를 통해 가져와보자 노마드코더 zoom 클론코딩 강의를 듣다가 화상 통화 관련해서 처음 써보는 JavaScript 기능이 있어 복습 겸 정리해본다. 사용 방법 HTML JavaScript const myFace = document.getElementById('myFace'); async function getMedia(){ try { myStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }); // console.log(myStream); myFace.srcObject = myStream; } catch(e) { console.log(e); } } async / awai..