본문 바로가기

til45

두 번째 팀 프로젝트 시작 오늘부터 두 번째 팀 프로젝트가 시작됐다. 강의만 듣는 것보다는 역시 만드는 게 재밌는 것 같다. 잘 만들기 위해서는 강의도 열심히 들어야겠지만..ㅎㅎ 오늘의 일 와이어프레임 제작하기 역할 분배하기 - 리뷰 작성하여 localStorage에 저장하는 부분을 맡았다. 리뷰 영역 ui 작업하기 어제 있었던 깃 특강 복습하기(바로가기) 배운 점 / 느낀 점 코드 리뷰 오늘 튜터님께서 작성해 주신 코드 리뷰를 확인했다. 깃에 올리면 안 되는 설정 내용들을 올리지 않는 방법을 찾아봐야 할 것 같다. 깃 페이지로 배포하다 보니 git ignore로는 해결이 안 될 것 같다. 리액트에서는. env로 해야 된다고 하셔서 이 부분도 검색해 봐야겠다. 그리고 배포 시 사용하지 않는 주석 삭제해야 하는 내용도 있었는데, 다.. 2024. 1. 10.
git 명령어 두 번째 오늘부터 다시 팀 프로젝트여서 어제 했던 깃 특강 내용을 다시 봤다. 브랜치 생성 git branch 브랜치명 브랜치 확인 git branch 브랜치 이동 git switch 브랜치이름 ----> 이게 최신 명령어 git checkout 브랜치이름 ----> checkout이 더 기능이 많음 더 큰 개념? git checkout 으로 브랜치 이동은 해봤는데 git switch로 이동하는건 처음 알게됐다. 브랜치 생성하고 바로 이동 git switch -c 브랜치이름 git checkout -b 브랜치이름 이 부분도 처음 알았다. 자주 유용하게 사용할 수 있을 것 같다 2024. 1. 10.
검색 영역 코드 개선 [BEFORE] input addEventListener keyup에서 검색할 키워드를 담고, event.keycode === 13으로 엔터키 감지하여 검색기능 활성화 button addEventListenerclick에서 input 공백 검증 및 검색 기능 활성화 const $movieList = document.querySelector("#movieList"); const $keyword = document.querySelector("#keyword"); const $searchBtn = document.querySelector("#searchBtn"); let searchKeyword = ""; $keyword.focus(); //검색 - keyup $keyword.addEventListener(".. 2024. 1. 9.
모듈 module 모듈이란? 코드를 재사용 가능한 단위로 만드는 방법이다. 규모가 큰 프로젝트에서 효과적으로 관리할 수 있다. 특징 html 파싱 중 만나게 되면 html 파싱이 끝난 후 script를 다운로드 한다.(defer 와 같은 점이다) 모듈은 엄격모드로 실행된다. 모듈의 최상위 this 는 undefined 이다. 모듈은 type에 module 을 추가하여 사용한다. 모듈 스코프 모듈은 선언하게 되면 자바스크립트 파일을 각각의 모듈로 보며, 각각의 스코프를 가진다. 예를들어 type module 인 파일 2개가 있다고 가정할 때 아래와 같이 module1 에 있는 배열을 module2 에서 출력하려고 하면 에러가 나는 것을 볼 수 있다. [module1.js] let arr = [1,2,3,4,5] [modul.. 2024. 1. 8.
Set 자료구조 Set 란? 배열과 다르게 순서 없이 저장하며, 고유한 값들의 집합을 다루는 자료구조 이므로 중복을 허용하지 않는다. 순서가 없기 때문에 index로 값에 접근할 수 없다. new Set() 생성 Set는 클래스이기 때문에 new 키워드를 사용하여 생성한다. 4를 두 개 넣었는데 한 개만 추가된 걸 볼 수 있다. const set1 = new Set([1,2,3,4,4]); //Set(4) {1, 2, 3, 4} add() 추가 add() 메서드를 사용하여 추가한다. set1.add(9); //Set(5) {1, 2, 3, 4, 9} set1.add('가나다'); //Set(6) {1, 2, 3, 4, 9, '가나다'} delete() 삭제 삭제를 성공하면 true, 실패하면 false를 반환한다. se.. 2024. 1. 4.
배열 메소드 - slice(), includes(), find(), indexOf() arr.slice(n,m) : n 부터 m 까지 반환 m 은 포함하지 않는다. slice에 n,m 을 넣지 않을 경우 그대로 복사된다. let arr = [1,2,3,4,5]; console.log(arr.slice(1,4)); //[2,3,4] let arr2 = arr.slice(); console.log(arr2); //[1,2,3,4,5] 그대로 복사됨. arr.includes() : 포함하는지 확인 인덱스가 필요없고 포함하는지만 확인하려면 includes() 를 사용한다. let arr = [1,2,3]; console.log(arr.includes(2)); //true console.log(arr.includes(5)); //false arr.find(fn) : 조건에 만족하는 첫 번째 요소를.. 2024. 1. 3.
호이스팅 호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전에 모든 선언에 대해서 수집하는데, 이때 변수, 함수 등의 선언을 선언된 위치에서 제일 최상단의 위치로 올려서 실행하는 것처럼 하는 것을 말한다. 예를 들어 아래와 같은 코드가 있다고 할 때, showText3('안녕'); function showText3(text){ console.log(text); } console.log(num33); var num33 = 332; 위 코드는 이렇게 실행된다. //호이스팅 적용된 코드 function showText3(text){ console.log(text); } var num33; showText3('안녕'); console.log(num33); //undefined num33 = 332; 선언이 호출보다 위에.. 2024. 1. 2.
spread operator 전개 구문 spread operator 는 es6 문법 중 하나이다. '...변수명' 의 형태로 사용한다. 나머지 매개변수 (rest parameter) 와 생김새는 비슷하지만 사용할 수 있는 위치에 대한 제약이 다르다. 나머지 매개변수는 꼭 맨 뒤에 위치해야 하지만 전개 구문은 어느곳에 있어도 상관이 없다. {...user, 3, ...color} 이런식도 가능하다. 객체 활용 객체에 사용하면 객체를 쉽게 복사할 수 있다. let user = { name : 'jin', age : 33 } let user2 = {...user}; console.log(user2); let newUser = { name : 'jin', age : 33, favorite : { color : 'red', animal : 'dog' .. 2023. 12. 29.