TIL

우선 오늘은 무엇을 해야할지 잘 몰랐다. 자바스크립트 알고리즘 문제를 받고 풀어보기를 했는데 왜인지 기초적인 것도 제대로 이해하지 못하고 있는 것 같았다. 아니 조금더 자세히 얘기해 보자면 무엇을 해야하는지는 아는데 식을 작성할 줄을 모르겠더라 그저 한숨뿐.. 꽤나 충격적이었다. 시간이 있었다면 풀수 있었을까? 그럴지도 어려운 문제순으로 풀었고 어려운 문제는 곧잘 해냈으니까 근데 가장 원초적인 문제들이 오히려 어렵더라 단순한 기초만 식을 작성할 일이 없어서인지 손에 익지 않아서인지 뭔지 물론 어려운 문제들 중에서 풀지 못한 문제도 있지만 기초적일수록 더 모르겠었던 하하 우선 어떤함수를 사용해야하는지 구글링을 하면 알수 있지만 함수가 어떻게 작동되는지 이해하지 못하고 있어서 식을 제대로 완성하지 못하는 것..

TIL을 너무 막 작성하는 것 같지만 오늘 하는 것중에 배운게 이런것들인걸.. 우째 스크롤 : 수직으로 창을 넘어가면 자동으로 스크롤 overflow-y: auto; 스크롤 만들때 같이 쓰면 좋은 스크롤 커스텀 css ::-webkit-scrollbar { width: ; /* 스크롤바의 너비 설정 */ } ::-webkit-scrollbar-track { background: ; /* 스크롤바의 트랙 부분의 배경 색상 설정 */ } ::-webkit-scrollbar-thumb { background-color: ; /* 스크롤바의 핸들(Thumb) 부분의 색상 설정 */ border-radius: ; /* 핸들의 모서리 둥글게 */ border: px solid # ; /* 핸들..

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. component가 uncontrlloed 상태라고 한다. 처음에 무슨말인지 몰라 여기저기 콘솔을 찍어봤다. const handleAdd = (todo) => { setTodos([...todos, todo]); }; setTodos를 console.log로 바꾸면 에러도 안나고 값을 너무 잘 가져왔다. 그렇다면 setTodos가 문제인가? 하고 생각을 해봐도 도저히 문제가..

다사다난했던 JavaScript를 끝내고 React에 입문했다!!!!!!!! React Facebook에서 사용자가 UI를 동적으로 만들 수 있도록 하기 위해 만들어냈다. React에 철학은 UI에 대한 업데이트는 상태 변경으로부터 발생해야한다! Single Page Application 이다.(하나의 페이지 즉 하나의 주소로) Livararies이다. Framwork와 Librarise의 차이 Framwork❓ 무언가를 만들때 필요한 모든것이 주어진것. Librarise❓ 작은 솔루션의 단위 Framwork 단점: 규정하고 있는 모든것을 공부해야한다. 자율성이 떨어진다 Librarise 단점: Framwork의 단점을 보완하고 있으나 UI만 만들 수 있다. 왜 React를 사용해야 할까? React의 ..

드디어 길고 길었던 팀프로젝트 코드 분석을 오늘에서야 끝낼 수 있을 것 같다. 다른 부분은 쉬우니까 제하고 분석할 코드 하나 남았기 때문엥 ㅎ-ㅎ import updateReviewList from "./statelist.js"; const urlParams = new URLSearchParams(window.location.search); const itemId = urlParams.get("id"); function getSelectedStars() { const checkedStar = document.querySelector(".getstar .star:checked"); if (!checkedStar) { return ""; } const score =..

코드를 뜯어서 보다보면 사용되지 않는 부분들이 많은 것 같다. 하나씩 채우고 수정하는 중이다. 오늘은 포인트 부분 코드를 알아보자 class AspectPoints { constructor() { this.aspects = document.querySelectorAll(".aspects .aspect-item"); this.selectedAspects = []; this.initialize(); } initialize() { this.aspects.forEach((item) => { item.addEventListener("click", () => { item.classList.toggle("active"); this.updateSelections(); }); }); } up..

오늘은 내가 작성했던 파일을 하나씩 뜯어보는 TIL을 작성해 보고자 한다. 당연히 스스로 만들어낸 기능이 아니므로 뜯어서 공부해 보아야 한다! 간단하게 기능을 설명해 보자면, 영화 상세페이지마다 리뷰를 작성할 수 있고 리뷰 목록은 클릭된 영화에 해당되는 리뷰 목록만 볼 수 있어야 한다. 리뷰를 작성하는 기능은 modal을 이용했으며, 작성된 리뷰는 localstorage에 저장되도록 했다. HTML과 CSS는 참고할 수 있도록 가장 하단에 작성되어 있으며 html은 새로 알게된 부분만 작성하고, css는 함수가 필요했던 부분만 각 js파일 설명 시 포함해 작성 - HTML id 값을 모두 class component로 만들기 - 우선 html에서 id 값을 모두 class component로 만들었다. ..

거진 4일 밤을 꼬박 세고 완성한 나의 review 부분. 먼저 느낀점으로는 절대 욕심부리지 말자 첫 팀프로젝트를 하게되어 많이 들떠있었던 것 같다. 실력이 되지 않는데 욕심만 부려서 내가 고민해서 작성한 코드들 보다 chat gpt에 의존을 너무 많이 했던 것 같다. 사실 chat gpt를 사용하고 코드들을 하나하나 뜯어서 공부하면 되지! 라는 안일한 생각도 했다. 첫번째로는 오류가 났을때 해결할 수 없다. 내가 알고 있는 코드들이 아니다 보니 디버깅을 할때 타고 들어가는 것 조차 너무 버겁고 어려웠다. 두번째로는 에러나 중복코드들이 너무 많다. 에러를 해결하면서 중복 코드들을 찾은 부분도 너무 많고 또 작동하지 않는 코드들도 너무 많다. 세번째로는 에러를 해결할 때 적합한 코드를 찾아주지 않는다. 다..

내가 작성한 코드와 팀원이 작성한 코드 합치기 const urlParams = new URLSearchParams(window.location.search); const itemId = urlParams.get("id"); console.log("Item ID:", itemId); const API_KEY = "api_key=2f7ff395e001967bcd029e4d663de74c"; const BASE_URL = "https://api.themoviedb.org/3/movie/"; const FULL_URL = `${BASE_URL + itemId}?language=en-US&${API_KEY}`; const fetchMovieDetails = () => { f..

에러가 너무 많아서 지친다.. 오늘 밤새 css까지 마치고 내일은 기필코 코드를 뜯어내 공부하리라. 괜히 처음 프로젝트 이쁘게 만들고 싶은 마음에 욕심냈더니 내가 만드는게 아니라 chat gpt가 다 만들어줬다. 공부량이 만만치 않아.. 다음엔 욕심안내고 심플하게 필요한 기능만을 내스스로 만들어 보는 것으로 하자. 일단 이번엔 시간이 없으니.. 2틀밤 꼴딱 세우기 쉽네 ? ^^ closeModal.js class CloseButton { constructor(modal) { this.closeButton = document.getElementById("close"); this.modal = modal; this.addEventListeners(); } addEventListeners() { this.cl..