본문 바로가기

전체 글143

2023-10-25 본 캠프 15일차 / 34일차 TIL 2023-10-25 본 캠프 15일차 / 34일차 TIL 주요진행사항 - 팀과제 진행 data- 속성 사용법 이번 프로젝트에서 동적 생성 요소에 localStorage의 키값을 data- 속성을 통해 전달하였다. 동적으로 DOM 요소를 구성할 때 data- 속성은 유용하게 쓰인다. 기본적인 사용법은 다음과 같다. data- 이후에 원하는 이름을 지정할 수 있으며, 해당 data 속성에는 문자열 타입의 값을 대입할 수 있다. 불러오는 과정은 다음과 같다. const id = document.querySelector('.test').dataset['id']; const name = document.querySelector('.test').dataset['name']; console.log(id); // 12.. 2023. 10. 25.
2023-10-24 본 캠프 14일차 / 33일차 TIL 2023-10-24 본 캠프 14일차 / 33일차 TIL 주요진행사항 - 팀과제 발제, review 부분 개발 시작 - github 특강 - 인스타그램 클론코딩 - 팀과제 발제, review 부분 개발 시작 오늘부터 팀과제가 시작되었다. 주제는 기존에 만들었던 개인과제(영화정보사이트)를 개선하는 것이다. 우리조는 2개의 개발파트를 나누었다. 1. 영화 정보 디테일 부분 2. 리뷰 부분 localstorage를 이용하는 리뷰 부분을 해보고 싶었기에 리뷰부분에 지원해서 진행하였다. 금일 진행 정도 1. ui 2. 기능 구현 - 리뷰 모달창 토글 - 비속어 예외처리 금일 구현한 기능 중 비속어 예외처리는 다음과 같이 진행하였다. 1. module 화 2. 주요 로직 // slangFilter.js const .. 2023. 10. 24.
2023-10-23 본 캠프 13일차 / 32일차 TIL 2023-10-23 본 캠프 13일차 / 32일차 TIL 주요진행사항 - 개인과제 제출 마감 및 해설영상 - 자바스크립트 종합반 3주차 강의 복습 - 개인과제 해설 1. reset.css 파일 나누기 reset.css 파일은 검색하면 많이 나온다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning .. 2023. 10. 23.
2023-10-21 주말 TIL 2023-10-21 주말 TIL 주요진행사항 - 토이프로젝트 1. clock 프로젝트 완성 2. instagram 프로젝트 시작 - Clock 프로젝트 github Repository : https://github.com/kms99/ToyProject-clock GitHub - kms99/ToyProject-clock Contribute to kms99/ToyProject-clock development by creating an account on GitHub. github.com DEMO : https://kms99.github.io/ToyProject-clock/ Clock kms99.github.io 간단히 시계를 보여주는 프로젝트를 시작하였다. 이 프로젝트의 핵심은 CSS의 transform :.. 2023. 10. 21.
2023-10-20 본 캠프 12일차 / 31일차 TIL (과제 예외처리 및 미니 튜터활동) 2023-10-20 본 캠프 12일차 / 31일차 TIL 주요진행사항 - 내일배움캠프 개인과제 디테일 수정 (영화정보사이트) - 미니 튜터 활동(?) - 내일배움캠프 개인과제 디테일 수정 과제를 완성하였지만 세세한 예외처리에 대해서 작업이 더 필요하였다. 오늘 진행한 예외처리는 많았지만 그중에서 포스터데이터 예외처리에 대해서 알아보겠다. api상에서 가져온 데이터 중 포스터 주소 정보가 오지 않는 경우를 찾았다. 포스터 주소가 없을 때와 있을 때를 구분해서 예외처리를 했으며, 포스터 주소를 2가지 페이지에서 모두 사용하기 때문에 shared.js 파일을 만들어서 모듈화 하였다. 해당 함수에는 poster_path라는 매개변수를 받으며, api에서 호출한 데이터 상에 poster_path 정보를 인수로 부.. 2023. 10. 20.
2023-10-19 본 캠프 11일차 / 30일차 TIL (module의 활용) 2023-10-19 본 캠프 11일차 / 30일차 TIL 주요 진행사항 - 내일배움캠프 개인과제 완성 (영화정보사이트) repository GitHub - kms99/movieInfoPage: 내일배움캠프 개인과제-영화정보사이트 내일배움캠프 개인과제-영화정보사이트. Contribute to kms99/movieInfoPage development by creating an account on GitHub. github.com DEMO Mov_Ie Trailer Reviews movie-info-page.vercel.app 자바스크립트 모듈 활용 프로젝트를 진행하면서 공통된 기능을 서로 다른페이지나 반복적으로 사용하는 경우가 있었다. 예를들어 TMDB API 데이터를 가져올 때 URL 만 변경하였으면 동일.. 2023. 10. 20.