프론트엔드 가보자GO 프론트엔드 가보자GO

📆개인 프로젝트 기간 5 / 29 ~ 6 / 2 ✍회고 그동안 그날 그날의 회고록을 TIL에 작성했는데 이제부터 개인적인 회고는 WIL로 옮겨서 작성해야지.. 이번 개인프로젝트를 진행했던 한주간을 돌아보면 참 많은 감정이 교차했던 것 같다. 우선 처음부터 오픈 API를 가져와 내가 만든 html 영화카드에 붙여넣는 과정도 순탄하지 않았다.. 하루가 꼬박걸려도 방법을 찾지 못해서 우선 기본 html뼈대와 스타일링을 먼저 작업해놓은 후 다음날 다시 구글링과 팀원분들께 쉴 새 없이 질문하여 겨우 검색기능 구현에 성공했다.. vscode에도 각 코드마다 꼼꼼하게 주석처리해서 내가 제대로 이 코드를 이해하고 사용하고 있는지 계속해서 읽어보고 기억하려고 노력했다. 다음에 또 이러한 과제들이나 내가 수행해야할 일들이..

💻코드 리뷰하기 🔻JS - 각 댓글마다 요소를 생성하고, 그 안에 요소를 추가하여 댓글 내용을 표시하는 부분 // 댓글을 HTML에 추가 comments.forEach(function (comment, index) { let commentElement = document.createElement("div"); // 각 댓글 요소를 생성 commentElement.classList.add("comment"); // "comment" 클래스 추가(css 추가용) let commentText = document.createElement("span"); // 요소에 댓글내용 요소를 자식으로 추가) commentText.innerHTML = "" + comment.name + " : " + comment.comm..

👉과제의 방향성 지난 개인과제(영화 검색 사이트)를 이어서 디벨롭하는게 이번 팀협업 프로젝트이다. JS 문법의 핵심을 적용해서 기존에 개인 과제에서 TMDB를 이용하여 수행했던 과제의 심화 버전인듯. 사이트에서 원하는 영화를 클릭하면 상세페이지로 넘어가 영화에 대한 자세한 정보와 해당 영화에 대한 리뷰를 남길 수 있도록 하는것이 목표다. 똑같이 순수자바스크립트만 이용해서 데이터를 저장해야하기 때문에 별도의 서버 또는 DB, flask 사용없이 서버의 LocalStorage를 이용해서 데이터를 저장하는 방법으로 진행할 것이다. 내가 맡은 부분이 바로 로컬스토리지를 이용한 CRUD구현을 하는것이기 때문에 이번 프로젝트를 통해 한번 도전해보기로 했다. 🧐CRUD란 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 ..

🤓오늘 공부한 내용 📌콜백함수 (1) 자바스크립트의 함수도 하나의 자료형이기 때문에 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 '콜백함수'라 한다. (2) 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. (3) 콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 된다. (4) 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요 하다. - 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름 - 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 (동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있다) 기본 예시) 1. a라는 매개변수를 가진 te..

🤓오늘 공부한 내용 자바스크립트 예제 문제를 공부하면서 for문을 자주 쓰게 되는데 추가로 for in문, for of문의 차이점에 대해 명확하게 이해하고 있지 않은 것 같아서 다시 개념을 공부 중이다. 📌1.for 반복문 - 가장 범용적으로 쓰이는 'for 반복문'은 특정횟수 만큼 반복하고 싶을때 사용한다. - 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문이다. - for문은 다른 반복문과 다르게 반복 변수를 let 키워드로 선언해야한다. - for문은 배열과 조합해서 많이 사용하는데 보통 배열의 length 속성만큼 반복을 돌리는 형태로 사용한다. for (let i = 0; i < 반복 횟수; i++) { 문장 } 가장 기본적인 예제를 하나 가져오면 let output = 0 fo..

튜터님께 이번 프로젝트를 진행하면서 내가 만든 코드에 이상은 없는지, 또 수정할 사항이 있는지 여쭤봤는데 역시나! 오류가 있었다 헤헿..😅 검색기능을 할 떄 filter 메서드를 이용했는데 거의 뭐 이름만 필터고 기능을 forEach로 쓰고 있었지 뭐야,,? ❗튜터님께 받은 피드백 1. ⭐filter 메서드 수정하기 2. 페이지 크기 줄일 때도 카드 사이 여백 유지하기 3. 검색창 여백 주고 검색버튼 css 신경쓰기 4. html에 있는 인라인 스타일 css로 옮기기 5. html에 있는 필요없는 영화카드 div 삭제하기 6. css에서 class로 통일해주기 💻코드 수정하기 1. ⭐filter 메서드 오류 수정하기 👇잘못된 코드 더보기 //검색 (movie title) 기능 if (value) { //..

어제 불러온 API들을 이용해서 영화정보 카드 리스트 UI 구현을 했으면 받아온 전체 영화들 중 검색 input창에 영화 제목을 입력한 문자값이 포함되는 영화카드만 나올 수 있도록 해야한다. 오늘 만든 코드들을 꼼꼼하게 작성해서 나의 일지가 좋은 공부노트가 될 수 있도록 해야겠다. 👇"btn" 요소에 클릭 이벤트 리스너를 추가하여 버튼이 클릭되었을 때 실행되도록 설정 (버튼에 id값("btn") 지정해주고, 검색시 정보를 받아올 수 있도록 input에도 id값("input-name") 지정 document.getElementById("btn").addEventListener("click", () => { //input값 받아오기 const inputText = document.getElementById(..

💡 프로젝트 개요 [영화 검색 웹사이트] S.A. 더보기 🔻프로젝트 소개 1. 프로젝트 명 : FilmHunt ("영화 사냥" : "Film"은 영화를 의미하고, "Hunt"는 사냥하다, 찾다라는 뜻을 갖고 있습니다. 따라서 "FilmHunt"는 영화리스트를 찾아내는 데 초점을 맞춘 영화 검색 사이트를 의미합니다.) 2. 메인페이지 기능 : 검색창에 영화 제목을 검색하면 리스트에 있는 인기 영화를 찾을 수 있습니다. 3. 와이어프레임 🔻필수 요구 사항 1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기 2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 3. 영화정보 카드 리스트 UI 구현 4. 영화 검색 UI 구헌 5. 하기 기재된 Javascript 문법 요소를 이용하여..