본문 바로가기

분류 전체보기100

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.
프로그래머스 Javascript - 나누어 떨어지는 숫자 배열, sort의 속성 문제 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3, 2, 6] 10 [-1] 문제풀이 for문을 이용해서 작성한 처음 풀이인데 자꾸 오류가 났다. 작성한 else if문 대로라면 divisor로 나.. 2024. 1. 15.
프로그래머스 javaScript - 서울에서 김서방 찾기 문제 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. seoul return ["Jane","Kim"] "김서방은 1에 있다" 문제풀이 처음에는 이렇게 풀었는데 자꾸 loc이 undefined가 나오는거다. 왜 그렇지 하고 고민했는데.. 이렇게 answer 위치를 아래로 옮겨주니 정상적으로 실행이 됐다. 어려운 코드의 세계.. 생각.. 2024. 1. 12.
프로그래머스 javascript - 두 정수 사이의 합 문제 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한조건 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. a b return 3 5 12 3 3 3 문제풀이 a와 b의 대소관계가 정해져있지 않다는게 어려웠다. 생각을 해보니 if안에 for문으로 풀면 될거같아서 했더니 통과했다. 다른풀이 그리고 이런 방법도 있었다.. 대단! 2024. 1. 11.

티스토리툴바