til (12) 썸네일형 리스트형 [팀 프로젝트] 영화 검색 사이트 팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/ 요구 사항 📌필수 구현 사항✅ TMDB 오픈 API 이용✅ 영화 정보 상세 페이지 구현✅ 상세 페이지 영화 리뷰 작성 기능 구현 ✅ 비밀번호 암호화✅ github PR 사용한 협업✅ UX를 고려한 validation check 도전 과제✅ CSS flex, grid, 반응형 UI 구성✅ 상세 페이지 리뷰 수정 및 삭제 기능✅ 메인 페이지 정렬 기능 (이름, 별점, 개봉일 등) 추가 기능 ✅ 홈 화면.. [팀 프로젝트] 영화 검색 사이트 회고 Keep (현재 만족하는 부분) 😁적극적인 피드백모르는 부분이나 로직이 생겼을 때 팀원들과 공유해 문제를 해결해 나아가는 모습이 좋았습니다. 역할 분담역할 분담이 잘 된 것 같아 기능 개발을 순탄하게 진행했던 것 같아서 좋았습니다! 네이밍 컨벤션 및 주석네이밍 컨벤션을 정하고 시작해서 변수명이나 함수명에서 충돌이 발생하지 않아서 좋았습니다! 그리고 주석을 적재적소에 잘 사용해 코드를 이해하는데 도움이 많이 됐습니다! 마감 시간 준수제시간에 제출하는 게 다하지 못 하더라고 중요한 것이었는데 프로젝트 구현사항에 버그가 없이 완벽하게 구현사항을 해결하고 제출했다는 점에서 좋았습니다! Problem (불편하게 느꼈던 부분) 😥초기 세팅각자 다른 prettier를 사용하여 공백이나 여백이 달라 머지 시 문제.. 24.07.19 Git 팀 프로젝트 진행 초기 세팅을 해야 되는 이유 📖1. 초기 파일 생성초기 세팅을 해야 하는 이유는 프로젝트의 일관성을 유지하고 모든 팀원이 동일한 환경에서 작업할 수 있도록 하기 위해서 진행합니다!index.html : 웹 애플리케이션의 메인 HTML 파일style.css : 스타일링을 위한 CSS 파일common.js : javascript 파일 Welcome to our Team Project 2. 프로젝트 환경 설정개발 환경을 일정하게 유지하기 위해 다양한 설정 파일들을 추가!ex) .prettierrc, .gitignore, firebase, package.json 등등 .prettierrc// .prettierrc{ "semi": true, "singleQuote": true, "t.. [TIL] 24.07.18 Swiper 슬라이드 Swiper ✨ 1. Swiper 란?Swiper는 하드웨어 가속 전환과 놀라운 네이티드 동작을 갖춘 무료 오픈 소스 슬라이더입니다. 사용 이유 ✨ 1. 간단한 사용법HTML, CSS, JS 코드로 반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있어서 사용하게 되었습니다! 2. 다양한 슬라이드 유형Swiper는 일반적인 이미지 슬라이드뿐만 아니라 텍스트, 비디오, 오디오 등 다양한 유형의 슬라이드를 지원합니다! 3. 반응형 디자인반응형을 지원하기 때문에 데스크탑, 태블릿, 모바일 기기에서 사용자 경험을 제공할 수 있습니다! 사용 방법 📖1. NPM에서 설치NPM에서 Swiper를 설치할 수 있습니다.$ npm install swiper 기본적으로 Swiper는 추가 모듈 없이 핵심 버전만 내보.. [TIL] 24.07.17 쓰로틀링(성능 측정) Throttling 이란? 📖짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법입니다. 1. 쓰로틀링 (throttling)일정 주 동안 이벤트 핸들러를 한 번만 실행하도록 제어하는 것 일정한 간격으로 한 번만 실행하는 기법이기 때문에 이벤트 처리를 제어하고, 성능 향상을 할 수 있습니다.예를 들면 스크롤 이벤트가 발생할 때 이벤트가 너무 많이 발생하면 성능 저하 문제가 생길 수 있기 때문에 이때 쓰로틀링을 적용하면 일정 주기 동안 이벤트를 제어하기 때문에 성능을 개선할 수 있습니다. 그래서 팀 소개 프로젝트에 쓰로틀링을 적용해보려고 합니다. 사용 방법실제로 작성한 코드 입니다.const throttleCallback = () => { const scro.. [TIL] 24.07.16 코딩 컨벤션이란? 오늘 공부한 것 📖 1. 코딩 컨벤션코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(하나의 작성 표준)입니다. 대표적인 네이밍 컨벤션 소개 스네이크 케이스 (snake_case)더보기- 모든 철자를 소문자로 쓰고 단어 사이에 언더스코어(_)를 표기하는 방식입니다.ex) user_id, create_at 등등 카멜 케이스 (camelCase)더보기- 맨 앞 단어의 첫 철자를 소문자로 시작하되, 그 다음 이어지는 단어의 첫 철자를 대문자로 표기하기 방식입니다.- 자바, 자바스크립트, 타입스크립트 등에서 많이 쓰이며, 변수 메서드 함수 이름 등에 많이 사용 됩니다!ex) userId, createAt 등등 케밥 케이스 (kebab-case)더보기- 모든 철자를 소문자.. [TIL] 24.07.15 오늘 배운 것 📖1. 팀 소개 페이지 디자인1. 팀 소개 페이지 제작 과제 (7/19일까지) - 주제 선택 (심플한 게 최고!!) - 추가하고 싶은 기능 선택 (이미지 슬라이드, 댓글, 이모지 등등) - 역할 분담 - 와이어프레임 작성2. 맡은 역할 - 이미지 슬라이드 - 와이어프레임 제작 (Figma) 어려웠던 점 ❓1. 역할 분담지금까진 혼자서만 개발을 하다보니까 팀 단위로 프로젝트를 진행할 때 역할을 나누는 데 있어서 고민이 정말 많았다.한 페이지를 만드는 데 있어서 어디서부터 어디까지 나눠야 할 지도 고민이 정말 많이 됐다.그래서 서로 가장 잘 할 수 있는 부분들을 먼저 확인 후 역할을 조금씩 나누고 있는 중이다.아직 정확히 다 나누진 못했다,,,ㅜㅜㅜㅜ2. 와이어프레임 디자인피그마를 이용해 와.. [TIL] 24.07.08 내가 푼 문제 📖내가 작성한 코드 💻let [buy, ...input] = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" : __dirname+"/input.txt") .toString() .trim() .split('\n')const N = +buyconst cardPacks = input[0].split(' ').map(Number)const memo = Array.from({length: N + 1}, () => 0)for(let i=1; i 어려웠던 점 ❓1. 최댓값 비교하기for(let i=1; i 최댓값 비교하는 부분이 생각해 내기가 정말로 어려웠다. 1시간을 넘게 고민해 봤지만 해결방법이 떠오르질 않.. 이전 1 2 다음
