TIL

처음하는 팀 프로젝트!! 설레이는 마음을 다잡고 프로젝트를 해쳐나가 봅시다. 내가 맡은 부분은 상세페이지 안에 리뷰를 작성할 수 있도록 리뷰란을 만드는 것 이었다. 내가 구현하고자 하는 리뷰창이다. 상세페이지 안에 들어가야하는 것이다 보니 많은 부분을 차지하는 것이 좋아보이지 않았다. 그래서 리뷰를 작성할 수 있는 부분은 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..

JavaScript 5주차 객체지향언어의 가장 큰 장점이라고 생각하는 class !! 더 많은 사용법이 있겠지만 나는 아직 초보자🥲 오늘 배운 class에 대해 정리해 보고자 한다. class는 설계도라고 생각하면 된다고 재차 들어왔다. 역시나 다를까 강의에서도 설계도라고 생각하면 쉽다고 하셨다. 사용성이 자유롭고 재사용성이 좋은 class...??? 다양한 매서드와 검증 방법인 getter,setter를 차곡 차곡 쌓아 유용하게 이용하는 날이 오면 좋겠다. 우선 class의 형태부터 알아보자. class Car { constructor(modelName, modelYear, type, price) { this._modelName = modelName; this._modelYear = modelYear;..

JavaScript 3주차 THIS this의 값은 함수를 호출한 방법에 의해 결정된다고 이해하면 되는 것 같다. 아래 문제를 풀면서 알게 되었지만 정말 호출한 방법에 의해 결정이된다. 물론 bind 메서드를 사용하면 호출 방법에 상관하지 않고 this의 값을 설정할 수 있지만 this 먼저.. 아래 문제 풀이를 보며 this가 바인딩 되는 시점을 이해할 수 있기를! 3주차에서 숙제 중 this가 사용된 코드에서 this가 바인딩 되는 값을 찾는 문제가 나왔다. -문제- var fullname = 'Ciryl Gane' var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function (..

JavaScript 1주차 Reduce, For JavaScript 1주차 강의를 다보고 문제를 푸는데 어려워 답안지를 보았다. 문제는 아래와 같다. absolutes signs result [4,7,12] [true,false,true] 9 [1,2,3] [false,false,true] 0 여기서 답안지를 보았을 때 사람들이 2가지 의견으로 나뉘었다. Reduce를 쓰는게 나은지 For문을 사용하는게 나은지 첫번째 답안지(reduce) function solution(absolutes, signs) { return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0); } 두번째 답안지(for) function solution..