공부(112)
-
[Node.js_4기] Today_I_Learn : This 복습 (24/01/12)
목차 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는 새로 생..
2024.01.12 -
[Node.js_4기] Today_I_Learn : 팀 프로젝트 - 기존 코드 리팩토링 (24/01/11)
목차 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하여, 비동기 함수로서 실..
2024.01.11 -
[Node.js_4기] Today_I_Learn : loacalstorage (24/01/10)
목차 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..
2024.01.10 -
[Node.js_4기] Today_I_Learn : 개인과제2 + (24/01/09)
목차 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..
2024.01.09 -
[Node.js_4기] Today_I_Learn : 개인과제_1 (24/01/05)
목차 1. 문제 2. 시도 3. 결과 4. 배운점 1. 문제 TMDB와 연동해서 화면에 카드 출력하기 resopns.results(json으로 받아온 데이터)를 다루면 되겠구나! 2. 시도 그럼 이제 html에 붙여넣어보자. 사전캠프 4주차 강의 프로젝트에서 썼던 temp_html을 위치에 붙여넣는 코드를 스윽... 배열이 아래로 쭉 이어져서 옆으로 출력할 방법을 찾아야 했다. 혼자서 css를 건들자 다음과 같은 상황에 빠졌다. 아주 큰 문제?는 아니지만, 보기가 아주 불편한 상황. .card{}에서 margin을 빼면 그나마 나아지지만... card 생성시 for문을 돌려서 3개씩 끊어야 하나 하는 이 상황을 팀 회의 시간에 공유하였다. 선택 요구사항에 들어있던 grid를 css에 적용한 결과 페이지가..
2024.01.05 -
[Node.js_4기] Today_I_Learn : JS (24/01/04)
목차 1. 학습 내용 2. 내용 정리 3. 예제 4. 생각 정리 1. 학습 내용 1. DOM의 기본 개념과 접근, 제어법 2. Class문법의 주요 개념(클래스, 인스턴스, getter, setter, 상속 등) 3. 클로저의 주 개념과 활용 2. 내용 정리 1. DOM (3) DOM(Document Object Modeling) 브라우저 내장 API(다른 시스템에 제공하는 기능의 사용을 도와주는 중간자) - HTML을 Js로 접근, 제어가 가능하다. DOM의 모든 node는 속성과 메서드를 가지고 있다.(Node : html태그와 텍스트, 속성등을 하나의 블록처럼 취급) 속성 : 해당 객체의 특성을 나타내는 값을 가져오거나 설정 메서드 : 해당 객체가 수행하는 작업을 나타내는 함 2. Class 클래스..
2024.01.04