[TIL] Day 13 영화 검색 사이트 완성! "Rotten Orange"

2023.10.23 월

 

오늘부터는 TIL의 구성을 바꿔보았다.

기존에는 시간순으로 진행했지만,

이제는 핵심 내용을 중심으로 정리해보려고 한다.

조금 더 눈에 잘 들어오고, 정리도 잘 되는 방법이라고 생각한다.

 

Today

• 개인 과제 최종 수정 및 제출
• 팀원 최종 코드 리뷰
• 개인 과제 해설 영상

 

 

---

개인 과제 최종 수정 및 제출

주말 동안 계속해서 코드를 손봤지만,

아직 구현하진 못한 추가 기능들이 너무 많았다.

그리고 그려놓은 와이어프레임에 할당될 요소들도 아직 많이 남아있었다.

 

=====수정 필요=====

 

추가 구현한 기능

언어변경 구현 실패

 

CSS]

보이는 순서 설정 : 포지션을 먹이도 z축 변경 가능.

position: absolute;

z-index

(top: 250px;) 위에서부터 위치 고장

 

element.classList.contains('className').

 

상단 백그라운드 그라디언트

글자수 제한해서 나타내기

랜덤 이미지 노출

아이콘 추가

 

[최종 완성본]

[사이트 주소]

 

 

팀원 최종 코드 리뷰

최종 진행 상황

어디서 막혔는지 체크

더 추가하고 싶었던 기능이나 아이디어

내가 하면서 어려월던 부분, 꿀팁 배웠던 부분 공유

 

API를 처음 다뤄봐서 해당 값을 불러오고 활용하는 부분에서 어려웠습니다.

검색 기능에서도 forEach, map, filter 등의 함수를 다루는데 익숙하지 않아서 어려움을 겪었습니다.

그래도 JS 측면의 기능 구현은 빠르게 했지만, CSS를 다루는 것이 굉장히 힘들었습니다.

생각해낸 와이어프레임을 100% 구현하고 싶었지만 만들지 못한 디자인이 많았습니다.

추가하고 싶은 아이디어들이 많았고, 계속 고민했지만 최소한의 기능들만 조금 더 추가하는 것에 그쳤습니다. 더 공부해서 추후 개인적으로 더 디벨롭하고 싶습니다.

추가하고 싶은 기능 : 언어 변경 버튼, 상단 배경에 동영상 삽입, 슬라이드 박스 추가, 여러 API 활용, 다크모드 전환 버튼 등

 

개인 과제 해설 영상

 

property 랑 method 차이

javascript 에서 method 는 함수로 된 property이다.

그런데 우리가 일반적으로 프로퍼티를 지칭할 때 method 를 제외한 데이터 프로퍼티를 말하므로...(물론 getter setter 와 관련있는 accessor property 도 있습니다.)

구분하는 기본적으로 두가지 방법이 있습니다. 의미로 구분하는 것과 사용방법으로 구분하는 것이지요.

의미로 구분하기

property 는 속성이라면 method 는 행동 입니다.

예를 들어 listA 라는 array 가 있을 때, listA.length 는 property 죠? 그렇지만 listA.push(1) 은 method 입니다.

사용법으로 구분하기

위에서 javascript method 는 함수로 된 property 라고 언급했습니다. 함수의 가장 큰 특징! callable(호출할수있는) 하다는 것입니다.

따라서 javascript 에서는 괄호로 함수를 호출하므로 대부분 괄호로 끝나면 method, 없으면 property 라 보아도 무방합니다.

 

 

Semantic하게 변수 이름 선언, HTML 태그 사용

Semantic : 의미론적인

 

reset.css / 파일 다운로드 받기

.prettierrc / Code formatter(코드 포맷터) / 확장프로그램에 검색 : Prettier - Code formatter

 

Elements 창에서 클릭한 요소는 console 창에서 $0을 통해서 호출 가능

 

camelCase(apiHandler) vs snake_case(api_handler) vs PascalCase(ApiHandler)

변수 선언할 때 camelCase 방식이 더 적절하다

 

구조 분해 할당

 

삼항 연산자

1 ? 2 : 3

 

 

 

++추가내용++