TIL (95) 썸네일형 리스트형 TIL - 이벤트 리스너에서 querySelectorAll 를 사용하면서 생긴 문제와 해결방안: 동적으로 생성되는 요소에 대해서도 이벤트를 처리 이번 주 내일 배움 캠프 스파르타코딩클럽 react_5기 프로젝트는 개인과제로 API에서 받아온 데이터를 가지고 평점순으로 정렬해서 카드 형식으로 flex 또는 grid를 이용해서 검색 기능까지 구현하는 사이트였다. 과제 필수 요구사항 바닐라 JS 영화정보 카드 리스트 UI 구현( 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수) 영화 검색 UI 구현 API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 표시 입력 후 검색버튼 클릭 시 실행 카드 클릭 시에는 클릭한 영화 id를 나타내는 alert 창 표시 선택요구사항 CSS flex/grid 사.. TIL - 블로그 만들기 모달창 구현 및 블로그 글 목록 선입선출로 만들기 (2) 오늘 배운 것 모달창 기능 구현 블로그 홈 섹션에 표시되는 글 목록 만들기 날짜 표시 lastChild()에서 lastElementChild()의 차이점 오늘은 블로그 글 쓰기 폼을 제출하면 홈 섹션에 글 목록이 표시되고 글 목록이 5개가 넘어가면 오래된 항목의 표시를 삭제하고 새 항목을 추가하는 기능을 구현했고 오늘 코딩을 하는데 큰 문제점은 없었지만 firestore에서 받은 API 키를 github에 push 할 수 없어서. gitignore로 push 했지만 문제가 npx http-server로 서버를 활성화하니까 API키를 읽을 수 없었고 모듈 js파일을 script src 하면서 보안 정책인 CORS (Cross-Origin Resource Sharing) 에러와 API키의 문제점을 해결하려고.. TIL - JS와 Firestore 이용해서 블로그 만들기 - 탭 전환 (1) 오늘 배운 내용 오늘은 팀 프로젝트에서 만든 웹페이지를 발표하고 튜터님이 피드백을 하는 시간을 가졌고 다른 조의 웹사이트를 보면서 괜찮아 보이는 기능을 만들어 봐야겠다고 생각했고 그동안 firestore와 JS를 통해 방명록 만들기와 Todo List를 만들면서 블로그를 만들 수 있겠다고 생각해서 피드백과 다른 조에서 좋아 보였던 기능을 배워서 간단한 블로그를 만들기로 했다. 피드백에서 나온 내용 다크 모드 백그라운드 어태치먼트 기능 칭찬 모달 닫기 버튼 이외에도 밖에 버튼을 클릭할 때 모달방이 닫히게 하면 좋았을 것 트랜지션을 이용해 효과를 부드럽게 애니메이션 기능을 넣어주면 좋았을 것 와이어프레임 우선 블로그를 처음 들어갔을 때의 모습이고 다른 조에서 탭 전환하는 기능이 괜찮게 보여서 header의 .. TIL - Git의 필요성과 prepend()를 사용하면서 생긴 문제 발견과 해결 Git의 필요성 오늘은 내일까지인 팀 프로젝트 간단한 팀 소개 웹페이지에서 팀원들과 그동안 만들었던 기능들을 합치는 작업과 어제 todo list를 만들면서 팀 소개 웹페이지에 들어갈 방명록 중에 개선해야 할 점들을 개선했다. git을 아직 익숙하지 않아서 github에 직접 파일을 업로드하고 수정하면서 협업을 진행했었는데 오늘 기능들을 합치는 과정에서 그동안 개선했던 코드들과 기존에 있던 코드를 수정하지 못해서 부분으로 에러가 발생되었다. 처음에는 간단했지만 계속 수정 작업을 하다 보니 실수가 발생했고 이러한 문제점의 해결 방안이 Git이라는 것을 알고 있었지만 몸으로 직접 겪어보니 git을 이용해서 소프트웨어의 변경사항을 체계적으로 추적하고 통제했으면 이러한 오류들이 발생되지 않았을 것이다 그리고 이.. TIL - 간단한 Todo list 만들어서 CRUD기능 구현 간단한 Todo list 만들기 어제 스파르트코딩클럽 1주차 팀 프로젝트에서 방명록 만들기에서 CRUD를 구현 해봤고 방명록을 만들었던 기억을 통해 간단하게 Todo list를 간단한 CRUD를 만들 수 있을 것 같아서 복습겸 만들어 보기로 했다. 오늘 할일📚 추가 완료된 항목 삭제 html 구조는 방명록과 비슷한 구조로 만들었고 firestore를 이용해서 만들었다. // todo 폼 제출 이벤트 핸들러 document.getElementById("todo-form").addEventListener("submit", async (event) => { event.preventDefault(); // 폼 제출 방지 const todoInput = document.getElementById("todo-inp.. TIL - 방명록 만들기로 CRUD 구현 오늘은 어제에 이어서 방명록에 수정버튼을 추가했고 함부로 삭제 및 수정하지 못하게 간단하게 비밀번호도 만들었다. https://fe-jogha.tistory.com/10 { if (event.target.classList.contains("delete-btn")) { const promptPassword = window.prompt("삭제하시려면 비밀번호를 입력하세요.",); const docId = event.target.getAttribute("data-doc-id"); const userInfo = await getDoc(doc(db, "guestbook", docId)); const userPassword = userInfo.data().password; if (promptPassword == u.. TIL - firebase와 JS를 이용해서 방명록 구현 오늘 배운 것 firebase 기본 문법과 프라미스와 async, await (더 배울 필요가 있음) git과 github 기초 오늘은 내일배움캠프 스파르타코딩클럽 react_5기 첫 번째 날로 미니프로젝트로 간단한 "팀 소개 웹페이지" 과제를 만들게 되었고 간단한 프로젝트지만 개발 분야에서 처음으로 하는 팀 프로젝트라서 역할 분담을 하는 데 쉽지 않았는데 .각자의 역할 분담을 하기 위해 와이어 프레임 단계에서 기능들을 혼자 였다면 안 했을 것들을 더 만들기로 계획해서 이런 것 또한 팀 프로젝트의 장점이라고 생각했다. git과 github 기초 오전에 git과 github 기초에 대한 간단한 강의를 들었다. git이란 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는 것으로 코드 변경점을 기록하는 도구.. 이전 1 ··· 9 10 11 12 다음
