[WIL 2023.05.28] 내배캠 2주차

📝 Situation(상황): 이번주 목표

---

자바스크립트 5주차까지 완강

개인과제 와이어 프레임 구성 및 Starting Assignments 작성

 

👀 Task(임무): situation 중 문제들

---

자바스크립트 이론 강의를 들으며 개인적으로 궁금했던 사항 중에 강의 안에서 해결되지 않았던 내용들이다.

• 프레임워크 vs 라이브러리 차이점
• nodemon의 사용
• 자바 스크립트에서 ‘=’ ‘==’ ‘===’ 의 차이점
• 부족한 사고력? 컴퓨팅 사고와 개발실력을 늘리는 공부법
• 함수 표현식에서의 호이스팅 과정

문제사항이 생길 때 먼저 구글링을 해보고 그래도 이해가 잘 되지 않으면 튜터님에게 질문을 하는 방식으로 풀어갔다.

---

이번 주에 가장 충격 받은 순간은 개인 과제 발제 때가 아닐까

개인 과제라고 해서 그냥 알고리즘 문제 몇 개와 간단한 기능 구현해보기로 생각한 내가 너무 안일했던 거야..

그렇게 호락호락 하지 않았다.

상당히 fine한 영화 검색 사이트를 하나 만들어 내는 것

필수 조건은 6가지

• jQuery 라이브러리 사용 없이 순수 바닐라 자바스크립트 사용
• TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
• 영화정보 카드 리스트 UI 구현
• 영화 검색 UI 구현
• 지정된 Javascript 문법 요소 중 2가지 이상을 이용하여 구현
• github 에 작업한 코드 업로드

만들기로 한 거라면 팀과제 때 자제했었던 욕망의 항아리를 마음껏 열어보자.

하고싶은거 다 넣어보는거야…ㅋㅋ 시간이 빠듯하긴 하지만 늘 그랬듯 대충은 못 넘어간다. 최선을 다 해보자.

 

🔍 Action(접근방법): 해결시도

---

가장 먼저 시작한 것은 Starting Assignments 작성과 와이어 프레임 구성.

과제에서 꼭 지켜야 하는 필수조건이 무엇인지, 구현 해야 하는 기능들이 무엇인지 정리한 다음

페이지를 어떻게 구성하고 기능들을 어디에 넣을지 고민해보았다.

 

처음에는 지난번부터 하고싶다고 욕망만 그득했던 원사이즈 페이지에 앵커를 추가해서 트랜지션을 좀 넣어볼까 했지만.. 그리고 반응형도!

 

그것은… 일단 필수 요소부터 다 만든 다음 여유가 있다면 해보기로 했다.

 

영화 검색 페이지가 주제라 나에게 “영화” 하면 떠오르는 이미지는 약간..

레드카펫과 시네마 전구가 잔뜩 달린 화려한 건물의 극장! 이라는 이미지가 강해서

그런 레트로 갬성을 가득 담아 만들어 보려고 한다.

 

 

필수로 구현해야하는 기능은 영화 카드 리스트와 검색 UI, 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 필수로 한다.

그리고 카드 안에 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보를 꼭 넣을 것!

 

원사이즈로 구성할까 하다가 지저분해 보여서 홈페이지가 있고 버튼을 클릭하면 카데고리별로 영화들 나열,

그리고 카드 클릭 시 상세페이지가 뜨도록 구성했다.

 

📃 Result(결과): action 후 성과

---

이번주 내내 이론 강의를 들으며 자바스크립트 이론을 공부했고

주중 막바지에 과제를 받아 아직 이렇다 할 실질적인 성과물은 없다.

성과물이라 한다면… 조금 더 풍요로워진 내 머릿속 데이터 저장소..? ㅋㅋ

그리고 프로젝트 기획 정도가 되겠다.

 

GOE’s CINEMA S.A.(Starting Assignments)

 

📓 Point(정리): 이번주 요약

---

배운 내용들을 전체적인 개요만 본다면 이렇다.

JavaScript

기본문법

• 변수와 상수
• 데이터 타입과 형 변환
• 연산자
• 함수

문

• 조건문
• 반복문

배열, 객체 기초

• 객체와 배열 메소드
• 배열과 배열 메소드

각종 ES6 문법

• let, const
• 화살표 함수
• 삼항 연산자
• 구조 분해 할당
• 단축 속성명
• 전개 구문
• 나머지 매개변수
• 템플릿 리터럴

일급 객체로서의 함수

• 변수에 함수를 할당
• 함수를 인자로 다른 함수에 전달
• 함수를 반환
• 객체의 프로퍼티로 함수를 할당
• 배열의 요소로 함수를 할당

Map과 Set

 

데이터 타입 심화

• 데이터 타입의 종류 (기본형과 참조형)
• 메모리와 데이터에 관한 배경지식
• 변수선언과 데이터 할당
• 기본형 데이터와 참조형 데이터
• 불변 객체
• undefined와 null

실행 컨텍스트 (스코프, 변수, 객체, 호이스팅)

• 실행 컨텍스트란?
• VariableEnvironment, LexicalEnvironment의 개요
• LexicalEnvironment(1) - environmentRocord(=record)와 호이스팅
• LexicalEnvironment(2) - 스코프, 스코프 체인, outerEnvironmentReference(=outer)

this(정의, 활용방법, 바인딩, call, apply, bind)

• 상황에 따라 달라지는 this
• 명시적 this 바인딩

콜백함수

• 콜백함수란
• 제어권
• 콜백 함수는 함수다
• 콜백 함수 내부의 this에 다른 값 바인딩하기
• 콜백 지옥과 비동기 제어

DOM

• DOM의 기본 개념
• DOM에 접근 및 제어해보기

Class

• 클래스와 인스턴스의 일반적 개념
• Class란?
• Constructor란?
• Getter와 Setter
• 상속(Inheritance)

Closure

• 클로저의 개념(정의)
• 클로저의 활용

일주일 내내 쉬지 않고 달렸는데 막상 개요만 써보니 별거 없었다..

생각보다 공부량이 적었구낭..