행복을 담는 블로그
[TIL] 240108(월) 첫 번째 개인 과제 코드리뷰 및 해설강의🤯 본문
오늘의 공부 📖
- 개인과제 코드리뷰 및 해설
오늘 공부한 내용 정리💁🏻♀️
🧐 개인 과제 코드리뷰 및 해설
1) 전 수강생 코드리뷰
- prettierrc : code formator 기능.
- reset.css : 모든 브라우저에서 일관된 코드로 읽을 수 있게끔 초기화를 시켜준다.
브라우저마다 각각 html 태그에 들어가 있는 CSS 속성에 대해 기본적으로 들어가 있는 스타일링 코드를 일반화
- ui.css : css 파일 따로 만들기
2) semantic 한 태그를 사용하자!
📌 semantic : 의미론적인 태그
→ 자식 태그로 누가 존재할지 미리 예측 가능하다!
<header> : 검색 엔진이 보고 어떤 태그인지 바로 알 수 있다.
▶️ 검색엔진 최적화 : SEO 에도 유리
<form> 태그 내에서 onsubmit : Enter 키를 눌렀을 때, 작동하도록 -> onsubmit="search_movie(event)" : search_movie 함수 실행
=> eventhandler : submit event!!
<ul></ul> 안에 <li>영화 카드</li> 들이 list로 있겠구나. 예측 가능하다!
3)코드리뷰 하는 방법
: headline 위주로 먼저 쭉 한 번 살펴본다.
headline으로 전반적인 코드가 어떻게 흘러가는지 확인 -> 세부 내용 확인!
💡 새롭게 배운 내용
1. api -> JSON Parser로 확인하기
: 이번 과제에서 주어진 api의 경우, 웹개발 들었을 때 확인 했었던 api와 형태가 조금은 다르게 생겨서 어떻게 확인을 해야 하나 잘 몰랐다...
2. fetch 불러오기 (async / await 문법 사용)
→ 총 4개의 프로퍼티 중에서 results 하나만 불러온다.
3. event handler attribute 방식
4. camelCase v.s. snake_case
- camelCase : _(underbar)없이 구분을 짓고 싶을 때는 대문자 사용하는 방법
- snake_case : 중간_중간_언더바를 사용하여 구분하는 방법
→ javascript에서는camelCase로 작성
5. 작업 할 때, 폴더를 구분해서 사용하자!
- assets : imgae 나 Video 사용할 때, 넣어두는 파일
- src : js 코드 분류
- style : css 코드 분류
- index.html만 따로 빼놓자!
6. 브라우저 : html을 읽는 HTML 파서 + JS 엔진 따로 존재
: html 파서가 위에서부터 내려오다가 <header> 태그 내부의 <link> 나 <script> 태그를 만나면 제어권이 js 엔진으로 넘어가 해당 파일을 읽어드린 후에, 아래 쪽 <body>로 내려가서 순서대로 읽어 나간다.
▶️ 문제점❓❗️ js 코드로 작성한 <ul> 태그를 바로 내용을 불러오지 못한다.
HOW ?? 그럼 어떻게 해결?
: <script> 태그 안에 defer(지연하다) 속성을 넣어주면 !!
<script defer src"./src/main.js"></script>▶️ html 파서가 쭉 내려오다가 script 태그를 만나면, 제어권이 js 엔진으로 넘어가지 않고 background에 저장되었다가, html을 끝까지 파싱한 이후 js엔진에게 제어권을 넘겨주어 js 코드를 실행한다.
또는 defer 대신에 type="module" 사용!
<script type="module" src"./src/main.js"></script>7. 만약 js 코드를 기준을 나누어 여러개로 작성한다면?
=> main.js / movie.js /search.js
<script type="module" src="./src/main.js"></script>
<script type="module" src="./src/movie.js"></script>
<script type="module" src="./src/search.js"></script>▶️ type="module"을 반드시 작성을 해줘야 같은 변수를 써도 error 뜨지 않는다.
✅ 방법) export - import
//movies.js에서 export :
export let getMovies = () => [1, 2, 3];
---------------------------------------
// main.js 에서 import :
// 1. 영화 데이터 가져와서 화면에 나타내기
import { getMovies } from "./movie.js";
let movies = getMovies();
console.log("movies : ", movies);
// 2. 영화 검색▶️ 서로 다른 js 코드 파일로부터 변수 및 함수 불러오기
하루를 마치며...🤔
첫 번째 과제 1차 제출날이었다. 사실상 내가 제출한 과제는 코드리뷰라고 할 것도 없는 초라한 코드였다. 그저 해설 강의를 들으면 어떻게하면 구현 해낼 수 있을까에 대해 고민하고 모르는 무언가를 또다시 배우고 익혔을 뿐.. 개강 이후로 약 7일 정도 [웹개발 종합반] 강의를 들으면 HTML과 CSS에 대한 기본 지식을 알게 되었고, 그 다음 일주일 가량 JS 문법 강의를 수강하였다. 2주가 조금 넘는 시간동안 처음 배워보는 방대한 양의 지식들이 머릿 속에 들어 오다보니 과부하가 걸린 기분이었다😭
수업을 듣거나 막상 코드를 보고 해석을 보면 이제야 조금 로직들과 코드의 구상이 눈에 들어오기 시작하고 있었는데, 오픈 API를 연동하여 데이터를 가져오고 또 여러가지 메소드를 이용하여 기능을 구현해내기가 참 쉽지 않았다...ㅠㅠ
그래도 매일매일이 매시간마다 새로운 기능들을 배우고 익히며, 어떻게 구현을 해 나갈지에 대해 고민해보는 시간들이 아직은 많이 부족할지라도 언젠가는 나도 스스로 꼭 해내리라 다짐하는 순간들이 많은 것 같다.
열심히 코딩하고 복습하고 반복해서 연습하는 수 밖에...!!
'TIL' 카테고리의 다른 글
| [TIL] 240110(수) 팀과제 시작💪🏻 / 자바스크립트의 기초 (1) | 2024.01.10 |
|---|---|
| [TIL] 240109 (화) JS 개인과제 리뷰 / 이벤트(event) 객체 (0) | 2024.01.09 |
| [TIL] 알고리즘 문제는 매일매일 꾸준히💪🏻 / CSS도 계속 공부하기 (0) | 2024.01.05 |
| [TIL] 240104(목) 알고리즘 문제 풀기 / 문자열 내 마음대로 정렬하기 (2) | 2024.01.04 |
| [TIL] 240103(수) 알고리즘 코드카타 시작! (1) | 2024.01.03 |
