TIL

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

다사다난했던 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..

처음하는 팀 프로젝트!! 설레이는 마음을 다잡고 프로젝트를 해쳐나가 봅시다. 내가 맡은 부분은 상세페이지 안에 리뷰를 작성할 수 있도록 리뷰란을 만드는 것 이었다. 내가 구현하고자 하는 리뷰창이다. 상세페이지 안에 들어가야하는 것이다 보니 많은 부분을 차지하는 것이 좋아보이지 않았다. 그래서 리뷰를 작성할 수 있는 부분은 modal, 받은 값은 상세페이지 하단 리뷰리스트에 보여지게 만드는 것이 목표였다. 비교적 가장 쉬운 HTML을 작성하고 그리고 기본적 이어야 하나 어려웠던 css와 모달창을 구현한 리뷰남기기 창이다. HTML / 별점 구현하기 HTML / 포인트 구현하기 감상포인트 연출 연기 스토리 영상미 OST 감정포인트 공포 흥미진진 슬픔 감동 HTML / 리뷰 작성 창 구현하기 HTML / 이름..

2024년 01월 08일에 이어 문제가 더 커저버린 나는.. 참 많은 프롬프트 명령어를 알게 되었다.. 나는 cmder과 powerShell을 동시에 사용하고 있었다. 그리고 초기에 yarn과 node를 여기저기 파일을 옮겨다니며 설치를 했었다. 초기에 에러가 많이나서 삭제는 할줄 모르겠고 열심히 다시깔고를 반복했던 나 반성해 ^^ 우선 아직까지도 해결되지 않았지만 해결 하는 중에 많은 프롬프트 명령어를 알게되는 것 같아 중간 중간 작성을 해두고자 TIL을 열었다 먼저 현재 상황을 설명해 보자. node, yarn을 삭제하는 중이다. 삭제하고 전부 다시 처음부터 깔아 볼 예정이다. 애초에 나는 삭제하는게 복잡하다. 맨 처음 설치할 때 에러가 나서 삭제하는 법은 모르고 무작정 깔기만 했다^^.. 그것도 파..