목차 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..

목차 1. 문제 2. 시도 3. 결과 4. 배운점 1. 문제 TMDB와 연동해서 화면에 카드 출력하기 resopns.results(json으로 받아온 데이터)를 다루면 되겠구나! 2. 시도 그럼 이제 html에 붙여넣어보자. 사전캠프 4주차 강의 프로젝트에서 썼던 temp_html을 위치에 붙여넣는 코드를 스윽... 배열이 아래로 쭉 이어져서 옆으로 출력할 방법을 찾아야 했다. 혼자서 css를 건들자 다음과 같은 상황에 빠졌다. 아주 큰 문제?는 아니지만, 보기가 아주 불편한 상황. .card{}에서 margin을 빼면 그나마 나아지지만... card 생성시 for문을 돌려서 3개씩 끊어야 하나 하는 이 상황을 팀 회의 시간에 공유하였다. 선택 요구사항에 들어있던 grid를 css에 적용한 결과 페이지가..

목차 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 클래스..

목차 1. 학습 내용 2. 내용 정리 3. 예제 4. 생각 정리 1. 학습 내용 문제에 대한 해결방법 프로그래머 : 최선의 방법을 찾아내는 능력이 필요하다. 학습 목표 : 기본 코딩 능력 탄탄하게 만들기 -> 문제에 대해 생각하는 능력 키우기 1. 콜백 함수의 개념과 예시 2. 콜백 함수의 제어권 3. JS비동기제어 코딩 이해, 활용 2. 내용 정리 (2) 제어권 1) 호출 시점에 대한 제어권 함수 호출시 -> 호출 주체, 제어권 : 사용 setInterval(Func,300) -> 호출주체, 제어권 : setInterval 2) 인자에 대한 제어 콜백 함수를 넘겨받은 함수에게 인자의 순서에 대한 제어권이 주어진다. 3) this 제어권을 넘겨받을 코드에서 this를 지정한 경우, 콜백 함수도 그 대상을..

목차 1. 학습 내용 2. 내용 정리 3. 예제 4. 생각 정리 1. 학습 내용 (1) 데이터 타입 심화 : (2) 실행컨텍스트 : (3) this : 2. 내용 정리 (1) 불변성과 가변성 -> 원시타입으로 저장한 정보는 가변성을 가져 원본도 영향을 받아 변한다. 불변성의 필요. undefined 1. 변수에 값이 지정되지 않은 경우 2. 해당 데이터가 존재하지 않는 경우 3. return 없거나 호출되지 않는 함수의 실행결과 null 1. '없다'를 명시적으로 표현 2. typeof null이 object인건 js자체 버그. 조심하기. 동등 연산자(==) -> console.log(n == undefined); // true 일치 연산자(===) -> console.log(n === undefined..