본문 바로가기

전체 글94

TIL #14) 개인프로젝트를 하며 새로 배운것(nvm, git bash, 트러블 슈팅) #1 - NVM을 이용해 원하는 버전의 node.js 다운받기 우분투를 통해 프로젝트를 git clone 하여 최종적으로는 pe2를 통해 서버를 여는 법을 배웠다. package-lock.json 파일로 node_modules를 설치해야하는데 자꾸 node 버전이 낮아 yarn 을 사용할수 없다는 오류가 발생했다. 이런저런 명령어를 입력했으나 되지 않았고.. 결국은 nvm이라는 node 버전 매니저를 이용해 해결할 수 있었다. 참고로 우분투 22.04 버전은 Node.js 18.x 버전까지 지원한다. 실제로 최신버전(20.x)를 설치하려하니 오류가 났다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash sour.. 2024. 1. 23.
TIL #13) 개인프로젝트 진행 중 발생 오류 오늘의 오류 catch (error) { console.error(error); if (error.name === "ValidationError") { //조이에서 에러가 발생한다면 return res.status(400).json({ errorMessage: error.Message }); } return res .status(500) .json({ errorMessage: "서버에서 에러가 발생했습니다..!" }); } try catch 문을 이용해 조이에서 에러가 발생한다면 원인 에러를 400 state 메시지로 띄우는 코드를 작성했다. 그러나 insomnia 창에서 확인해보니 400 상태로 서버를 띄워주기는 하나 json 안에는 아무것도 없었다. 확인해보니 json({ errorMessage: e.. 2024. 1. 22.
프로그래머스 JavaScript - 제일 작은 수 제거하기 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. arr return [4,3,2,1] [4,3,2] [10] [-1] 문제풀이 function solution(arr) { var answer = []; //배열에서 가장 작은수 찾기 let arrr = [...arr].sort((a,b) => { return a-b }) let min = arrr.. 2024. 1. 19.
TIL #12) REST API 배우며 잘 모르겠는것들 임시 저장 Today I Learned default router 가 무슨 말인지 잘 모르겠다.. https://ko.javascript.info/import-export#ref-4122 +로 쓴 문법을 잘 모르겠다 +는 단항 연산자로, 피연산자를 숫자로 변환합니다. 값과 데이터 타입이 모두 일치하는지 확인하기 위해 일치연산를 사용하므로 데이터의 일관성을 유지하고 예상치 못한 형변환에 의한 오류를 방지하기 위해 저렇게 사용함 req.params.goodsID라는 개념도 좀 헷갈림....설명이 필요함. status 200으로 갖고오겠다는것도 모르겠음. 저게 바뀌면 뭐가 달라짐? params로 갖고온거랑 body로 갖고온거는 뭔 차이? 저기서 req(request)는 goods 배열을 말하는게 맞나? (아마 맞겠지만... 2024. 1. 18.
TIL #11) Node.js 란 무엇인가.. Today I Learned Node.js란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 이벤트기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적인게 특징이다. Node.js 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 하다. 간단하게 말해 Node.js는 JavaScript를 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경이다. 이는 핵심적인 라이브러리와 V8엔진, 그리고 libuv라는 라이브러리를 통해 가능해진다. 1. 논 블로킹 I/O(Non-Blocking Input/Output) 블로킹 I/O 한번에 하나의 작업만을 처리 가능하다. 호출된 함수가 완료되기까지는 호출한 함수에게 제어권을 넘겨주지 않음. 그만.. 2024. 1. 17.
팀 프로젝트 발표 & 피드백 발표자료 https://www.youtube.com/watch?v=wIXB0enbxIQ 제출용으로 만든 시연영상 팀 소개 ➡ 프로젝트 소개 ➡ 시연영상 ➡ 과제 진행하며 어려웠던 점➡ 소감 순으로 발표가 진행되었다. 피드백 현우튜터님 잘한점은 PPT 깔끔한것, 기본 필수기능들 잘 만들었음, 카테고리나 정렬에 대한 네비게이션 좋음. 상세페이지 UI 잘했음. PPT에 어려웠던 부분 상세히 얘기해줘서 좋았음. 특히 배열변환에 대한 고찰이나.. 아쉬웠던건 핵심기능사항만 있는것 같다. 영화 API도 다른걸 가져왔으면 좋았을거같음. 창민튜터님 프론트가 깔끔하다. 기능구현 잘했음. 트러블슈팅 기록이 꼼꼼해서 좋았다. 단순히 뭐가 어려웠다가 아닌 해결방법까지 제시해서 좋았다. 다만 발표가 길었습니다. (ㅋㅋㅋ) 후기 .. 2024. 1. 16.
CSS 만들기 기능구현 페이지 영역 나누기 grid-template-areas: ". sort search" "category main main" ". main main"; 영역이 여러개로 나눠져있는 페이지를 구현하기 위해 Grid-template-areas를 사용했다. 1분코딩님의 게시글을 많이 도움이 됐다. https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 영화티켓 위에 사진 올리기 .movieTicket { position: relative; } ... 2024. 1. 15.
상세페이지 구현 기능구현 헤더 클릭시 상세페이지 -> 메인으로 이동 document.querySelector("header").addEventListener("click", () => { this.location.href = "../main/main.html"; }); querySelector를 이용해 header를 선택하고 click 이벤트시 main.html(메인홈)으로 넘어가도록 구현했다. 메인에서 카드이미지 선택시 상세페이지 이동 let temp_html = ` 태그를 이용해서 카드 이미지에 하이퍼링크 걸기 function findCardIdFromUrl() { const searchParams = new URLSearch- Params(window.location.search); const cardID = se.. 2024. 1. 15.
첫 팀프로젝트 주제, 역할 정하기 과제 개요 개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시키는 팀 프로젝트 팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전 팀플 전에 [내배캠 인기영화 콜렉션]이라는 개인프로젝트를 진행했다. TMDB api를 이용해 영화사이트를 만드는 것으로 영화 검색기능, 간단한 css, api를 불러와 fetch로 html에 정렬시키는 기능을 만들어보았다. 이렇게 진행한 개인프로젝트 중에 1개를 대표로 골라 팀 프로젝트로 발전시키는게 이번 팀 과제이다. 필수요구사항 영화정보 상세페이지 구현 상세페이지 영화리뷰작성 기능 구현 github PR 사용한 협업 UX를 고려한 validation check 제시된 javascript 문법 요소를 이용해 구현 선택요구사항 CSS - flex, grid.. 2024. 1. 15.