목차 1. 학습 내용 2. 내용 정리 3. 예제 1. 학습 내용 1.2 Node.js란 무엇일까? 1.5 Express.js 프레임워크 2. 내용 정리 HTTP의 구성요소 서버 : 클라이언트에 정보나 서비스를 제공하는 주체 클라이언트 : 요청 주체(브라우저, 프로그램, 앱, 다른 서버) 요청(Request)과 응답(Response) -> 1. 브라우저가 서버에 원하는 정보 요구(Reqeuest) 2. 서버가 페이지 확인 후 데이터 반환(Resoponse) method : - GET : 어떤 리소스를 얻을때 사용. 모든 요청은 GET메서드를 사용해 서버에 요청(예외도 있음) - POST : 데이터를 게시할때 사용. (회원가입, 게시글 작성, 댓글 작성) 더보기 1️⃣ 사용자가 웹 브라우저의 주소창에 URL..

목차 1. 진행 2. 결과 3. 회고 4. 배운점 1. 진행 - 개발 일정 24.01.10 ~ 24.01.16 총 개발 기간 : 7일 24.01.11 와이어 프레임 구축 / 어떤식으로 사이트를 꾸밀건지 정하는 회의 24.01.10 ~ 24.01.13 상세페이지 리뷰 댓글 / 수정 / 삭제 구현 담당팀원(김동원,송지훈) 24.01.10 ~ 24.01.14 영화정보 상세페이지 구현 담당팀원(김라임,송인호) 24.01.15 프로젝트 시연 영상 촬영 담당팀원(송인호) 24.01.15 팀 프로젝트 PPT작성 담당팀원(송지훈) 상시진행 : UX validation check 구현, 트러블 슈팅 담당팀원(김진성) - 개발 목표 1. TMDB API/영화진흥원 API를 활용하기 2. 기존의 메인페이지의 카드(영화 요소..

목차 1. 학습 내용 2. 내용 정리 3. 예제 4. 생각 정리 1. 학습 내용 상황별로 달라지는 this를 구분하기 어려워서 질문했고, 해당 질문이 QnA세션에서 답변을 받아 잊기 전에 정리하려 합니다. 2. 내용 정리 (1) 전역 컨텍스트에서의 this this = 전역 객체. (브라우저에서는 windows) (2) 함수에서의 this (함수로서의 호출) 일반 함수에서의 this는 전역객체. (3) 메서드에서의 this (메서드로서의 호출) 메서드로서 함수가 호출될 때, this는 그 함수를 호출한 객체를 가리킴 (4) 이벤트 핸들러에서의 this DOM 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 가리킴. (5) 생성자 함수/클래스 에서의 this -1. 생성자 함수에서의 this는 새로 생..

목차 1. 문제 2. 시도 3. 결과 4. 배운점 1. 문제 기존 코드를 모듈화 함수들의 실행 순서를 보장하기 위해 async await 사용 2. 시도 (1) script.js 를 src폴더 속의 main.js, search.js, movie.js 세 파일로 나누었습니다. - 개인과제 해설 참조. (2) async await함수를 사용한 실행 순서 보장 - async함수는 항상 promise를 반환하며, await 뒤는 항상 promise입니다. - await promise는 promise result를 반환하며, promise가 이행될 때 까지 다른 함수들이 대기함으로서 함수의 실행 순서를 보장합니다. 3. 결과 리팩토링 결과, 해당 js에서 선언되지 않은 함수를 import하여, 비동기 함수로서 실..

목차 1. 학습 내용 2. 내용 정리 3. 예제 4. 생각 정리 1. 학습 내용 localstorage - key-value쌍을 웹브라우저에서 로컬 데이터로 저장하고, 불러와 사용할 수 있다. (1) 저장(C and U) (2) 불러오기(R) (3) 삭제(D) 가능 새로고침을 하더라도, 값이 그대로 남아있다. 심지어 창을 끄더라도 그대로 남아 있다... 2. 내용 정리 (1) 저장 setItem('key','value') : key-value쌍을 추가 (2) 불러오기 getItem('key') : key-value쌍의 key를 기준으로 value값을 불러온다. (3) 삭제 3. 시도 마치기 직전에 review를 추가하는것 까지 수정했지만, const userName = document.getElement..

목차 1. 문제 2. 시도 3. 결과 4. 배운점 1. 문제 3_ 카드 클릭시 클릭한 영화 id 출력 alert창 구현 4. 영화 검색 UI구현 (현재 input 공간과 butoon만 구현한 상황)의 구현, 그리고 피드백 받은 부분에 대한 수정 2. 시도 (1) 카드 클릭시, 클릭한 영화 id 출력(alert) (2) 영화 검색 UI 기능 구현 (3) 수정사항 3. 결과 4. 배운점 1. css.reset https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like d..