본문 바로가기

분류 전체보기93

react 설치 및 기초 react 설치 처음 설치 할 때는 아래 명령어를 사용하여 설치한다. npx create-react-app 프로젝트명 설치 후 해당 경로에서 npm start를 하면 위 이미지와 같이 실행된다. app.js에서 수정 후 저장하면 바로 적용이 된다. react에서 css 사용하기 1. 인라인 스타일 css 인라인 스타일의 css를 사용하기 위해서는 객체 형태로 사용해야 한다. 안녕 또한 대시 - 대신 카멜 케이스로 작성해야 한다. 하지만, 인라인 스타일 css는 많이 사용되지 않는다고 한다. 2. 전역 css 전체에 적용되는 css로 사용하는 방법이 있는데, 이 방법은 클래스명이 같을 경우 스타일이 덮어 쓰인다. (기존에 사용하던 방식이라고 생각하면 된다.) css 스타일이 head 태그 안에 style .. 2024. 1. 21.
[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.
두 번째 팀 프로젝트 시작 오늘부터 두 번째 팀 프로젝트가 시작됐다. 강의만 듣는 것보다는 역시 만드는 게 재밌는 것 같다. 잘 만들기 위해서는 강의도 열심히 들어야겠지만..ㅎㅎ 오늘의 일 와이어프레임 제작하기 역할 분배하기 - 리뷰 작성하여 localStorage에 저장하는 부분을 맡았다. 리뷰 영역 ui 작업하기 어제 있었던 깃 특강 복습하기(바로가기) 배운 점 / 느낀 점 코드 리뷰 오늘 튜터님께서 작성해 주신 코드 리뷰를 확인했다. 깃에 올리면 안 되는 설정 내용들을 올리지 않는 방법을 찾아봐야 할 것 같다. 깃 페이지로 배포하다 보니 git ignore로는 해결이 안 될 것 같다. 리액트에서는. env로 해야 된다고 하셔서 이 부분도 검색해 봐야겠다. 그리고 배포 시 사용하지 않는 주석 삭제해야 하는 내용도 있었는데, 다.. 2024. 1. 10.
git 명령어 두 번째 오늘부터 다시 팀 프로젝트여서 어제 했던 깃 특강 내용을 다시 봤다. 브랜치 생성 git branch 브랜치명 브랜치 확인 git branch 브랜치 이동 git switch 브랜치이름 ----> 이게 최신 명령어 git checkout 브랜치이름 ----> checkout이 더 기능이 많음 더 큰 개념? git checkout 으로 브랜치 이동은 해봤는데 git switch로 이동하는건 처음 알게됐다. 브랜치 생성하고 바로 이동 git switch -c 브랜치이름 git checkout -b 브랜치이름 이 부분도 처음 알았다. 자주 유용하게 사용할 수 있을 것 같다 2024. 1. 10.
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.

티스토리툴바