분류 전체보기

youtube API project 🎞 프로젝트 정보 프로젝트 목적 API 설계를 보다 쉽게 접근할 수 있게 실전 예제를 통해 제작 프로젝트 구현 API 설계 API를 만들고 상태코드와 데이터를 프론트엔드로 넘길 수 있는가? 예외처리를 잘 했는가? 프로젝트 기간 2023. 12. 13 ~ 프로젝트 구조 root ├─ app.js └─ routes ├─ channels.js └─ users.js 사용스킬 발생이슈 (23.12.17) 기존 DB 구조 변경에 따른 API 수정

간단한 미니 프로젝트 겸해서 유튜브에서 사용할만한 API를 만들어보려고 합니다. 유튜브 페이지에서는 어떤 페이지가 있을지 정리해 봅니다. API 종류 페이지 필요데이터 response Data request Data 회원 로그인 아이디 비밀번호 로그인버튼 x o 회원 정보 조회 : 로그인 버튼 클릭 -> 입력받은 아이디와 비밀번호 값을 받아 로그인API에 전달 회원가입 아이디 비밀번호 비밀번호확인 이름 가입버튼 x o : 가입버튼 클릭 -> 입력받은 값들을 회원가입API에 전달 마이페이지 아이디 이름데이터 채널관리버튼 회원탈퇴버튼 o : API에서 회원번호에 맞는 회원 정보 전달(아이디, 이름) o : URI에 회원번호를 받아 회원조회 API에 전달 회원탈퇴 - 마이페이지 하단의 버튼으로 처리 :URI에..

프론트엔드와 협업 시, 백엔드에서 예외처리를 해주면 좋은 코드를 알려드리려고 합니다. 이전에 작성했던 예외처리는 백엔드 프론트엔드 둘 다 사용이 가능한데요. https://code-dung.tistory.com/56 안정성을 위한 예외 처리(기본) 코드를 작성하다 보면 에러들을 많이 만나게 되는데요. 메모리부족이나 스택오버플로우 심각한 에러가 있는 반면에 수습 할 수 있는 심각도가 낮은 에러도 존재합니다. 이때 우리는 심각도가 code-dung.tistory.com 지금부터 알려드릴 코드는 프론트엔드를 위한 백엔드의 예외 처리 코드입니다. res.json(result); 여기까지만 작성을 했다면 성공을 했던 실패를 했던 전부 status code가 200으로 넘어가게 됩니다. if(!결과){ // 조건 ..

이 에러는 window에서 발생한 에러 해결법입니다. node에서 작업하다 보면 가끔 만나는 오류인데요. 이 오류는 특정 포트에서 실행되던 프로그램이 정상적으로 종료가 안 됐기 때문에 발생하는 오류입니다. 때문에 해당 포트를 종료시켜주면 해결됩니다. 방법 1. CLI를 이용하여 포트 종료 netstat -ano | findstr PORT번호 순서대로 프로토콜 / 로컬주소 / 외부주소 / 상태 / PID입니다. cmd에서 작업 중이라면 taskkill /pid PID번호 /f git bash에서 작업 중이라면 taskkill //pid PID번호 //f 방법 2. npm kill-port를 이용하여 포트 종료 npm install --global kill-port npm에서 kill-port를 설치하면 간..

ES6에서 도입된 find는 배열의 요소에 순회하면서 콜백함수를 호출하여 반환값이 true인 것을 찾는 것을 말합니다. 이때 true 값이면 첫 번째 요소를 반환하고, true 값이 없을 경우에는 undefined를 반환합니다. find가 없었을 때 코드 let result = ''; arr.forEach((v) => { if (v.id == id) { result = v; } }); forEach를 이용하여 조건절을 삽입해 값이 일치할 경우에 result에 값을 담아서 사용했었는데요 이때 find를 사용하면 조금 더 간편하게 코드를 짤 수 있습니다. find 활용 코드 let result = arr.find((f) => f.id == 0); find를 이용했을때 코드가 단순화된 걸 확인할 수 있는데요...

오늘 수업 내용 📚 API 실습 - DELETE와 PUT forEach와 Map 예외처리 리팩토링 http status code 오늘 수업을 통해서 깨달을 바가 있다 하면 바로 예외 처리였습니다. 혼자 작업하던 코드들을 살펴보면 전부 예외처리가 거의 없었기 때문입니다. 그래서 기존에 작성한 코드들을 전부 예외처리를 추가해 보았습니다. 특히 개별조회, 삭제, 수정일 때 발생하는 에러가 줄어든 걸 확인을 했습니다. 이를 통해서 기존에 작업한 코드들 도 마찬가지로 차근차근 바꿔보려 합니다. 또한 앞으로 작업할 코드들도 최대한 예외적으로 발생할 일을 생각하여 예외처리를 해보도록 하려고 합니다. 그리고 예외처리를 하면서 어디까지 코드를 줄여야 하는 것일까 생각을 해보았습니다. app.put("/youtubers/..

리팩토링이란? 리팩토링은 소프트웨어의 코드 구조를 변경하는것을 말합니다. 즉, 기존의 나쁜코드들을 청소하여 깨끗한 코드(클린코드)를 만드는게 목적입니다. 그렇다면 왜 리팩토링을 하는것일까요? 코드를 이해하기 쉽게 만들기위해서 성능을 높이기 위해서 안정성을 높이기 위해서 리팩토링은 언제 하나요? 1.에러(문제)가 여러번 발견됐을 때 ( 리팩토링을 하면서도 에러가 발견될 수도있습니다.) 2. 기능을 추가 하기 전(코드가 작동을하는지 기능을 추가하면서 기존코드와 통일감을 주기위해서) ex) API URI 설계중에도 URI를 변경하는것도 리팩토링이 될 수있습니다. 3. 코드 리뷰할 때 예외 ) ⭐배포, 운영직전⭐에는 리팩토리를 해서는 안됩니다.

코드를 작성하다 보면 에러들을 많이 만나게 되는데요. 메모리부족이나 스택오버플로우 심각한 에러가 있는 반면에 수습 할 수 있는 심각도가 낮은 에러도 존재합니다. 이때 우리는 심각도가 낮은 에러를 예외 처리를 통해서 동작하지 않는 상황을 막을 수 있는데요. 지금부터 예외 처리를 어떻게 하는지 알아볼까 합니다. 기본적으로 예외처리를 어떻게 하는건지 얘기를 해봅시다. app.delete("/youtubers/:id", (req, res) => { let id = req.params.id; id = parseInt(id); const name = db.get(id).chennelTitle; db.delete(id); res.json({ message: `${name}님, 그동안 이용해 주셔서 감사했습니다.` }..

forEach와 map 함수는 기본적으로 형태와 동작원리가 같습니다. 그렇다면 무슨 차이가 있는 걸까요? forEach와 map함수에 대해서 알아봅시다. forEach와 map의 형태 const arr = [1,2,3,4] //arr.forEach(콜백함수(매개변수 value, index, array)) arr.forEach((value, index, array)=>{}) //arr.map(콜백함수) arr.map((value, index, array)=>{}) forEach와 map의 동작원리 foreach는 for문처럼 반복을 하는데 배열에서 요소 하나를 꺼낸 다음에 콜백함수 안의 코드들을 동작을 하게 됩니다. 즉 배열 각각의 인덱스에서 콜백함수 안의 코드를 반복을 한다는 뜻입니다. 그리고 콜백함수는..