record4me

두번째 팀프로젝트를 시작하며, 프로젝트를 기획하며 제일 먼저 코드와 깃 컨벤션을 정했어. 모두가 쓰는 개인 코드와 깃 커밋을 쓰는 방법이 달라서 각자 어떻게 쓰는 지 알아보고 공통으로 쓰이는 위주로 선정해서 정했어. 파일 이름과 변수 이름을 카멜 케이스로 하고 클래스 이름은 대쉬(-)를 이용했어. git 세션에서 git의 심화된 부분을 배우는 중 새로 알게 된 게 있어. -git switch -c : 브랜치를 만들며 이동. 사용법 $ git switch 이동할 브랜치 이름 $ git switch -c 내 브랜치 이름 첫번째, git switch는 브랜치를 이동할 때 쓰고, 두번째, git switch -c는 내 브랜치를 생성(create)하는 동시에 그 브랜치로 이동할 수 있어. 주로브랜치 이동할 땐 g..

추가 기능 구현 location.replace() - Location 인터페이스의 replace() 메서드를 이용해 헤더의 제목을 클릭 시, 홈페이지의 메인 화면으로 이동할 수 있게 끔했어. replace()를 사용하면 뒤로가기 방지가 돼. 누군가 이미 사용한 홈페이지에서 뒤로가기를 하면 다른 사람의 정보를 보는 걸 못 하게 해줘. const goToPage =() => { location.replace("이동할 홈페이지 주소"); } scroll Element인터페이스의 scroll 이벤트는 document나 element가 스크롤될 때, 발생해. script의 위치 느낀 점

피드백 반영 검색 기능을 구현하는 개인 프로젝트의 피드백 해설 영상과 참고 및 추가 사항들을 보며 피드백 반영 중이야. 휴먼 트러블 슈팅 live-server로 웹을 봐도 script type을 module로 설정해 줬는데 import, export가 안 되서 충격이었어.. 뜰리가 없는 cors에러는 뜨고, 분명 환경은 갖춰지고 문법도 잘 쓰고 있는데 왜 안 될까 고민했어. 그래서 결국 팀원분들과 코드리뷰를 하면서 같이 코드를 살펴보는데 import할 때나 import해온 값을 코드로 치면 경로까지 자동 완성이 되거든. 그래서 거기까지하고 이게 맞는데? 하다가 결국 팀원분이 js를 안 붙이셨네요 하고 보니 그 js 안 붙인 걸로 저 오류들이 다 난 거였어. 어휴ㅎㅎ 그래서 신나게 파일을 분리하고 기능들과..

순수 자바스크립트로 만든 검색 기능 구현을 마치며, 필수요구사항부터 차례대로 구현하고 선택요구 사항까지 구현 했지만 유지보수하기가 어려운 코드같아서 고민을 좀 해봐야할 것 같아. 난제봉착 css를 구성하면서 card-content클래스를 가진 div 아래로 여러 하위 div요소를 추가하게 됐어. 새로 추가된 요소들이 있으니 값을 가져오는 경로도 달라져서 이전 alert.js 문을 수정해야했어. 그 과정에서 값을 가져올 때 난황을 겪었어. 1. createElement로 만든 div만 클릭했을 때만 alert가 나오고 카드 내부를 클릭하면 alert가 안 떴어. - createElement로 만든 상위 div를 제외하고 내용물을 한 번에 감싸는 div가 없어서 분리가 된 상태였거든. (아래 코드참고) id..

js문법 3주차 강의보고 궁금했던 점 해결 배운 것 📌실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체야. => 그리고 이런 객체들은 '스택'의 한 종류인 '콜스택'에 쌓여. *콜스택 : 가장 위에(마지막에) 쌓인 컨텍스트와 관련된 코드를 실행하는 방법인데, 한 코드의 객체가 실행이 다 되면 없어지는 방식이야. 📌 호이스팅 : 자바스크립트의 특징 하나인데, 변수 선언부(var a = 1;이면 그 중 var a;가 변수 선언부)만을 최상단으로 올려버리는 거야. var, let, const 다 일어나지만 그에 따라 나오는 답이 달라. var 같은 경우 최상단으로 선언부가 올라가면 값이 undefined나오고, let과 const는 호이스팅이 일어나긴 해 하지만 ES6의 규칙으로 TDZ라는 ..

선택요구사항으로 - CSS의 flex, grid사용하고, - 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 포커스 위치시키기, - 대소문자 관계없이 검색 가능하게 하고, - 키보드 enter키를 입력해도 검색버튼을 클릭한 것과 동일하게 검색 실행하는 영화 검색기능을 완성하면서 다시 점검하게 됐어. 그리고 그 과정에서 확인된 필수사항 문제까지. - grid는 일단 이렇게 저렇게 써보면서 grid에 함수를 쓸 수 있단 걸 알았고 정렬할 대상들을 담은 부모태그에 - grid속성을 걸어서 만들 수 있었어. grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px; // (또는 grid-gap을 써줘도 됨) - repeat함수의 매개변수..

재사용성 높이기 검색 기능 만들고 나서 검색 기능을 만들고서 잊고 있던 필수 기능으로 하나의 카드를 클릭하면 카드 데이터인 영화의 Id를 alert로 띄우기를 하려고 했어. 1. 전체 리스트로 처음에 보여줄 때 나타나는 카드를 클릭해도 alert를 띄우고 2. createElement문으로 동적으로 div를 만들어서 구성한 카드를 클릭해서 alert를 띄우려고 했는데 createElement문으로 만들 때 이전 전체 내용을 아예 지우고 새로 생성되기 때문에 alert기능도 따로 만들어줘야했어. 그렇게 alert기능 코드가 중복이 되서 나란히 보이길래 반복되는 코드를 쉽게 쓸 수 없을까 했지. 그래서 재사용할 수 있게 js파일을 따로 만들어서 script src속성으로 alert기능을 쓸 수 있게 불러와서..

검색 기능 아직 CSS 입히기 전인 검색 기능만 완성된 화면이야. 필수 사항은 다 있고 선택 사항으로 검색어 입력 시에 대,소문자 상관없이 검색 가능하도록 할거야. 추가로 검색어치고 엔터치면 검색기능이 작동해. 트러블슈팅 setAtrribute()와 classList.add() 문제- 동적으로 요소를 생성하고 거기에 동적으로 클래스 속성과 속성명을 붙여주려고 classList속성의 add()메서드를 사용했는데 값이 undefind가 떴어. 원인 - classList를 언급해 주지 않았고, 기존에 클래스 속성과 속성명이 없는 상태에서 사용하려고 했어. 먼저 원본 HTML -HTML 최고 평점 영화 콜렉션 영화 검색 : 검색 -javascript 1-js // 2-2. 화면에 보이기 movies.forEac..

JavaScript 문법 종합반 1주차를 들으며 검색 기능을 만들 때 필요한 함수들 을 배웠어. 배열 을 어루만지는 함수들이야. Array.forEach( () => {배열을 순회해 줌}) Array.map(() => { 원래 배열을 가공해서 새 배열로 만들어서 리턴해 줌. 그래서 반드시 return문 필요.}) Array.filter(() => { 필요한 조건을 리턴하면 그 조건에 맞는 값을 반환하는 모든 값으로 새 배열을 구성해서 리턴해 줌. 그러하니 return문 반드시 필요. }) Array.find(() => { 필요한 조건을 리턴하면서 해당 조건과 일치하는 요소를 찾으면 참인 값을 반환하고 그렇지 않으면 거짓값을 반환해줘}) find()함수와 filter() 함수는 검색기능 만들 때 키워드값 ..

코드 리뷰 후 배운 것 - 헤더 메뉴의 스크롤 기능 작업 function scrollPage(target) { let position = document.querySelector(target).offsetTop; window.scroll({ top: position-80, behavior: 'smooth' }); } => 해석하면 scrollPage란 함수가 실행되면 target이란 매개변수로 값이 들어와 querySelector로 해당 값의 요소찾아와 그 값의 좌표를 position이란 변수에 담아서 윈도우 브라우저에서 스크롤을 쓸 때, 내 문서를 특정 위치로 이동 시켜달라는 거야. 그리고 top의 상단 위치에서 -80 아래에 해당하는 위치에서 시작해서 behavior란 옵션으로 smooth , 즉 부..