-
[TIL] 0109카테고리 없음 2024. 1. 9. 20:59
코드카타
let sol = (num1,num2) => Math.floor(num1/num2*1000)
*숫자 비교하기
function solution(num1, num2) {
if (num1 === num2) {
return 1
} else {
return -1
}
}
// 좋은 풀이
let answer = num===num2 ? 1 : -1;
return answer;
// 생각 ) 삼항연산자..
*두 수의 나눗셈
function solution(num1, num2) {
let answer = Math.floor(num1/num2*1000);
return answer;
}
// 좋은 풀이
return Math.trunc(num1/num2*1000);
// 생각 ) Math.floor()는 소수점을 내린다. Math.floor(-23.3)의 경우 결과가 -24 가 출력된다.
Math.trunc 는 소수점을 버리는 함수로 trunc 의 사용이 더 적합하다.
파일 디렉터리 셋업 및 모듈 개념
- html 5
- title 설정
- html css js 분리해서 관리하고싶다.
- src 폴더안에 js : file/ main.js
- css 폴더 안에 css : file/ style.css
- assets 폴더 안에 이미지나 동영상 등의 리소스
./ 현재 경로를 의미
css 를 불러오기 위해서는 link ./는 현재폴더
<link rel="stylesheet" href="./style/style.css">
js 를 불러오기 위해서는 script
<script src = "./src/main.js"></script>
header / form / ul 태그를 이용하여 영화사이트 ui 구성
const ul = document.querySelector("ul");
: document 라는 전체 문서에서 ul 태그를 찾아서 ul 이라는 변수에 담아라
html 파서가 파일을 쭉 읽다가 script 태그를 만났을때, 파일 경로를 보고 파일을 다운받고, 제어권을 js엔진한테 넘겨준다. js 파일을 먼저 읽게된다. (순서를 이해하는 것이 중요하다)
이런 상황일 때는 type="module" 를 이용하여 제어권 넘기는 것을 지연시킨다. 지연실행
<script type="module" src = "./src/main.js"></script>
이렇게 코드를 작성해주면 html 파싱이 끝난 후 js 에 제어권이 넘어간다.
module이 뭔가?
- 특정 관심사에 해당하는 기능을 수행하는 변수와 함수의 모음
type = "module" 을 이용하면 파일마다 독립적인 scope 를 보장해준다. 같은 이름의 변수를 각 파일마다 다르게 선언할 수 있다.
다른 scope 의 함수를 사용하고자 할때에는
export import 를 이용한다. (type="module" 이 필수조건)
movie.js 에 있는 함수 getMovies 를 main.js 에서 이용하고자 하면
movie.js 에서
export let getMovies = () => [1,2,3];
형식으로 다른 모듈 파일에서 사용할 수 있게 만들어주고
main.js 에서
import { getMovies } from "./movie.js";
를 상단에 작성하여 getMovies 의 데이터를 가져온다.
main.js 에서 import 를 읽을 때, movie.js 파일을 다운로드받고 읽는다.
css 선택자
:root {
/* 문서의 최상위 요소를 의미, html 과 사용할 경우 <html> 을 의미 */
}
* {
/* 전체 선택자. 모든 요소 선택 */
}
li {
/* 유형 선택자. 기입한 tagName 에 해당하는 모든 요소 선택 */
}
.movie-card {
/* 클래스 선택자. class="movie-card" */
}
#movie-id {
/* ID 선택자. id="movie-id" */
}
.movie-card img {
/* 자손 결합자(" "). class="movie-card"인 태그의 자손 중 img 태그들 선택 */
}
.movie-card:hover {
/* 의사(pseudo) 클래스. class="movie-card"인 요소가 hover 상태일 때 */
}
/* 주로 테마 색상들은 변수로 관리 */
:root {
--bg-header-color: #ffe194;
--bg-card-color: bisque;
}
header {
background-color: var(--bg-header-color);
}
css 변수 선언 및 사용 - 이렇게 관리하는게 유지보수 차원에서 좋음
root 에 색을 정해놓고 끌어와서 사용
코드리뷰 및 JS 핵심 로직
const form = document.querySelector("#search-form");
- document 에서 #search-form 을 찾아서 form 이라는 변수에 담고
form .addEventListner ("submit", (event) => {
event.preventDefault();
handleSearch(searchInput.value);
});
-form 에서 submit 이벤트가 발생할때마다 아래 함수를 실행시켜라
cardlist.innerHTML = movies
-cardlist 의 안에다가 movies 의 내용을 담아라 / innerHTML 은 movies 의 정보를 문자열로 변환한 것이다.
배열의 method 중 join 이 있다.
array.join("") 면 배열의 내용이 그냥 이어붙여짐
() 안이 공백이면 배열의 형태로, () 안이 "-" 면 1-2-3 같은 형태로 출력
map : 같은 정보로 새로운 배열을 만들어내는 method
const movieTitles = movies.map(movie=>` <h1>${movie.title}</h1>`);
movies 원본 배열을 함수 속 형태로 만들어낸다.
카드 하나하나에 클릭이벤트핸들러를 넣는게 아니라 전체에 걸어서 메모리를 절약한다. ex) onclick (x)
이벤트 위임 : 하위 요소에서 발생한 이벤트를 상위 요소에서 처리하도록 해준다.= event bubbling
li 태그 클릭 시 가장 상위의 객체인 window 에서부터 아래로 이벤트 전파가 일어난다. (capturing phase)
li 이벤트 실행 (target phase) 후 다시 window 로 돌아간다. (bubbling phase)
모든 객체에 이벤트가 있으면 li ul body html 순으로 실행된다.
grandParent.addEventListener ("click", (event) => {console.log ("—");
} , true
);
"이벤트 타입", 이벤트 핸들러, 캡쳐링을 이용해서 이벤트핸들러를 실행시킬 것인가 (불린형 타입으로 설정)
grandParent 는 capturing 단계에서 이벤트핸들러를 실행시키겠다.
이벤트 위임을 활용한 함수
function handleLikckCard(event) {
// 카드 외 영역 클릭 시 무시, cardList는 카드 외 영역을 표현, return 문으로 함수를 끝내버림
if (event.target===cardList) return;
if(event.target.matches(".movie-card")) {
alert (`영화 id : ${event.target.id}`);
} else {
alert (`영화 id: ${event.target.parentNode.id}`);
}
}
튜터님 카드 검색
movieCards.forEach ( (card) => {
const title = card.querySelector(".movie-title").textContent.toLowerCase();
const searchedValue = searchKeyword.toLowerCase();
if (title .includes (searchedValue)) {
card.style.display = "block";
} else {
card.style.display = "none";
}
-display block 으로 그냥 보이거나 none 으로 안보이거나
과제 코드 리뷰
Index.html
- CSS 인라인으로 작성이 아닌 별도 CSS 파일로 분리하는 것이 좋다.
> 파일을 만들어 연결
<link rel="stylesheet" href="./style.css" />
movie_list.js
- 재할당이 필요없는 변수는 let 이 아닌 const 로 하는것이 좋다. √
- console.log 같은 코드는 배포 시에 제거하는 것이 좋다. √
- MovieCards 변수명은 카멜케이스 가 아니다. √
- MovieCards 의 가독성이 떨어진다. √
- 중요 정보코드는 직접 하드코딩 하기보다 환경변수 파일 등을 통해 관리하는 것이 좋다. ,,?
*깃허브에서 파일을 바꾸고 시크릿창에서만 바뀐 내용이 출력될 때는 크롬브라우저의 사이트 데이터를 삭제해주면 해결된다.
Git & Github 으로 협업하는 법 _ 예병수 튜터
1)브랜치 활용하기 복사본 과 비슷
수정은 하고 싶은데 원래 파일은 그대로 두고 싶어
git branch 이름 // branch 형성
git branch // 형성 여부 확인
브랜치 이동 명령어
git switch (최신) / git checkout (기능이 더 많음)
git switch -c 브랜치이름
git checkout -b 브랜치이름 //이렇게 하면 만들고 이동까지 한번에
git commit -m "ㅇㅇㅇ기능 개발 완료"
코드 짠 브랜치를 main 에 합치고 싶으면
git switch 최종브랜치 이름 (이동)
git merge 합칠 브랜치 (거의 잘 안씀) - 터미널 말고 github 에서 합치는 경우가 많다
2)Pull Request 활용하기 - 코드 리뷰를 하기 위해서
GitHub 에서 하는 merge (PR)
pull : 당겨서 합친다 (merge)
request : 요청하다
= 합쳐도 되나요?
git push origin 브랜치이름