본문 바로가기

프로젝트27

팀 프로젝트 - 커뮤니티 프로젝트 📢 프로젝트 소개 프로젝트 명 : [deve11og] 질문 및 자유로운 주제로 소통하는 커뮤니티 사이트입니다. 프로젝트 일정 : 2/7 ~ 2/15 깃 허브 링크 : 바로가기 배포 링크 : 바로가기 개발 환경 : react, npm, firebase(Storage, Authentication, Cloud Firestore) 배포 환경 : vercel 협업툴 : git, notion, slack 주요 의존성 라이브러리 : Redux, React Router, styled-components 💻 프로젝트 구현 기능 로그인 회원가입 게시물 작성 및 수정 댓글 작성(수정, 삭제) 마이페이지 😀 담당 구현 기능 마이페이지 닉네임 변경 프로필 이미지 변경 및 삭제 내 게시물 보기 댓글 댓글 작성 및 수정 댓글 삭제.. 2024. 2. 15.
crypto.randomUUID 적용 고유한 값인 id 는 절대 같은 값이 들어가서는 안된다. 고유한 값을 가지고 리액트가 어떤 요소가 변경됐는지 확인하기 때문이다. 이번에 todo list 개발 후 코드리뷰를 받았던 내용 중 id 값에 crypto.randomUUID 를 적용하였다. 기존에는 id 값으로 처음엔 0 을 주고 그 이후에는 데이터의 마지막 배열의 id 값을 가져와서 +1 하는 식으로 하였다. [수정 전] export default function AddTodo() { const [title, setTitle] = useState(''); const [contents, setContents] = useState(''); const [id, setId] = useState(0); //수정 전 const [data, setData].. 2024. 1. 23.
react를 활용한 todo list - 개인 과제 프로젝트 📢 프로젝트 소개 프로젝트 명 : react를 활용한 나만의 todo list 만들기 프로젝트 일정 : 2024.01.22 - 2024.01.23 (2일) 깃 허브 링크 : https://github.com/jigico/todo-list 배포 링크 : https://todo-list-six-chi-85.vercel.app/ ✏️ 프로젝트 설명 react props와 useState를 활용하여 나만의 todo list 구현 💻 프로젝트 구현 기능 todo list 항목 추가/삭제 기능 추가의 경우 빈칸으로 입력하는지 유효성 검사 todo list 항목 완료/취소 기능 todo의 상태가 true 일 경우 취소버튼, false 일 경우 완료 버튼으로 조건부 렌더링 todo 항목에 맞는 리스트에 분리하여 노출 .. 2024. 1. 23.
[javascript] 리뷰 삭제 (localStorage) 리뷰 등록에 이어 리뷰 삭제 기능을 구현하였다. 기능명은 리뷰 삭제지만, localStorage의 데이터를 업데이트하는 방식이다. 작성된 리뷰에서 삭제 버튼을 누르면 아래와 같은 비밀번호 확인 모달창이 나온다. [리뷰 삭제 시 비밀번호 확인 모달 html 소스] 리뷰 삭제 비밀번호 확인 취소 확인 [비밀번호 확인 모달 띄우기] //비밀번호 확인 모달 노출 const confirmPasswordModal = () => { $modal.style.display = "flex"; $checkPassword.focus(); }; //리뷰 삭제 버튼 이벤트 $commentList.addEventListener("click", (event) => { if (event.target.className === "btn-.. 2024. 1. 15.
textarea 에서 enter/backspace 에 따라서 높이 늘리기 오늘은 엔터를 눌렀을 때 textarea 의 높이가 늘어나는 작업을 했다. 처음에는 주석처리 된 부분처럼 textarea 의 높이값을 구해서 그 높이에 임의의 값을 추가해서 늘리려고 했는데, 너무 부자연스럽게 늘어나고 줄어들었다. 그래서 검색해보던 중 split 에 정규표현식으로 자르는 방법을 알게됐다. $reviewTextarea.addEventListener('keyup', (event) => { const HEIGHT = 20; const textareaHeight = $reviewTextarea.clientHeight; const row = parseInt($reviewTextarea.getAttribute('rows')); let text = $reviewTextarea.value; let ro.. 2024. 1. 12.
영화 리뷰 작성하기 (localStorage) 어제까지 영화 리뷰 작성 폼 ui 작업을 하고, 오늘은 데이터 저장하는 작업을 했다. 리뷰 데이터는 localStorage에 저장하는 요구사항이 있었는데, 정말.. 너무 힘들었다. 오늘이 제일 힘들었던 것 같다.. 데이터 구조 일단 데이터를 어떻게 쌓을지부터도 굉장히 고민스러웠다. 처음에 생각했던 구조는 아래 코드처럼 배열에 객체를 담아서 movieId로 해당 리뷰를 가져오는 식으로 하려고 했었다. let data = [ {name:'홍길동', password:'123', contents:'재밌어요', id:1, movieId:253}, {name:'아무개', password:'123', contents:'재밌어요!!!', id:2, movieId:253}, {name:'루피', password:'123.. 2024. 1. 11.
TMDB API를 활용한 인기 영화 조회 - 개인 과제 프로젝트 📢 프로젝트 소개 프로젝트 명 : TMDB API를 활용한 인기 영화 조회 프로젝트 프로젝트 일정 : 2024.01.03 - 2024.01.08 깃 허브 링크 : 바로가기! 배포 링크 : 바로가기! ✏️ 프로젝트 설명 순수 바닐라 자바스크립트 + TMDB 오픈 API 를 활용하여 인기 영화 조회 및 검색 구현 💻 프로젝트 구현 기능 이번 과제는 필수 요구사항과 선택 요구사항이 있었다. 필수 요구사항 순수 바닐라 자바스크립트 사용하기 TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 영화정보 리스트 UI 구현(필수 정보 : 제목, 내용 요약, 포스터 이미지 경로, 평점, 영화 id) 영화 검색 UI 구현 선택 요구사항 css - flex, grid 사용하기 웹사이트 랜딩 또는 새로고침 후 검색 입력.. 2024. 1. 9.
검색 영역 코드 개선 [BEFORE] input addEventListener keyup에서 검색할 키워드를 담고, event.keycode === 13으로 엔터키 감지하여 검색기능 활성화 button addEventListenerclick에서 input 공백 검증 및 검색 기능 활성화 const $movieList = document.querySelector("#movieList"); const $keyword = document.querySelector("#keyword"); const $searchBtn = document.querySelector("#searchBtn"); let searchKeyword = ""; $keyword.focus(); //검색 - keyup $keyword.addEventListener(".. 2024. 1. 9.

티스토리툴바