TIL

오늘은 내가 작성했던 파일을 하나씩 뜯어보는 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을 삭제하는 중이다. 삭제하고 전부 다시 처음부터 깔아 볼 예정이다. 애초에 나는 삭제하는게 복잡하다. 맨 처음 설치할 때 에러가 나서 삭제하는 법은 모르고 무작정 깔기만 했다^^.. 그것도 파..

Cmder에서 yarn create react-app blog --template typescript 로 파일을 만들었다. 왠걸? 빨간줄이 너무 많았다. Typescript 너란녀석 .. 에러도 아니고 문제점만 잔뜩 심지어 yarn start를 하면 문제점이 한가득 그리고 문제점을 닫으면 그냥 ui 화면이 보였다. 응 난 못참지 라는 생각으로 하루종일 매달려 있었다. 그리고 새벽 2시 짜증을 잔뜩 머금은채로 yarn과 죄없는 node 까지 전부 삭제하고 재설치를 하기로 했다. 사실 시도해 본 것들은 많았지만 성공한 것들이 단 하나도 없다. 얻은 것도 없다. package.json 파일 부터 터미널, ts 버전 변경 등등 수많은 것들을 시도했지만 결과는 나는 빨간줄.. 일단 3시간이라도 자야 내일 뭔가 하..

오늘은 자바스크립트책을 읽고 싶었지만 책을 읽다 보니 설명되는 단어들마다 어떤 뜻을 가지고 있는지 몰라서 꼬리물기가 되었다. 그래서 나중에 다시 도전하기로 했다^^ TMDB API 연동한 프로젝트 코드 설명해보기! 니가 짠 코드를 가지고 코드 설명해보는게 왜 필요하냐고 묻는다면 아직 나혼자 작성한 코드가 거의 없다. 거의가 아니라 그냥 없다고 봐도 무방🙄 검색 검색 검색의 연속... 적어도 사용된 함수의 작동 방법과 사용 방법을 이해하기 위해서 필요하다고 생각했다. const API_KEY = "api_key="; const BASE_URL = "https://api.themoviedb.org/3"; const API_URL = BASE_URL + "/discover/movie?sort_by=popula..

자바스크립트는 동기적 언어이다. ✅동기적 언어란 무엇이냐, hoisting이 된 이후부터 우리가 작성한 순서에 맞춰 하나하나씩 처리해준다라고 생각하면 된다. ✅ 그렇다면 hoisthing은 무엇이냐, var, function 선언들을 평가단계에서 주르륵 값을 읽어내려 갈때 var, function 이 선언되어있네 하고 따로 저장하는 것이다. 헷갈릴 수 있는 부분이 끌어올린다고 설명을 해주시는데 의문이 있었다. 그렇다면 끌어올라가면 함수만 먼저 읽는게 아닌가? 왜 순서가 안맞지? 라고 생각했는데 조금은 이해가 된 것 같다. ✅ 비동기적이 왜 필요할까 ? 예를 들어 뉴스는 일기예보를 받는데120분이 필요하기 때문에 120분 동안 실행되지 않을것이다. 하지만 비동기적으로 진행한다면 뉴스는 진행되며, 각종 이슈..

TMDB API 연결하면서 도대체가 에러도 응답도 없어 멀쩡한 우물을 열심히 팠다. 정말 단순한 문제일 것이라고 생각은 했지만 에러도 응답도 아무것도 없어서 정말이지 돌기 직전이었다. 오늘은 어떤 바보같은 행동을 했는지 알아보자 TMDB API를 연결하기 위해 아래 코드를 작성했다. const API_KEY = "";//찝찝해서 삭제.. const BASE_URL = "https://api.themoviedb.org/3"; const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY; const IMG_URL = "https://image.tmdb.org/t/p/w500"; function getMovies(url) { f..