전체 글153 윈도우와 Mac 리액트 타입스크립트 설치하기 윈도우1. Node.js 설치먼저 Node.js가 설치되어 있어야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 최신 버전을 다운로드하여 설치합니다.2. Vite와 React 프로젝트 생성Step 1: 터미널 또는 명령 프롬프트 열기Windows 키를 누르고 "cmd" 또는 "PowerShell"을 입력하여 명령 프롬프트 또는 PowerShell을 엽니다. 혹은, Visual Studio Code와 같은 통합 개발 환경(IDE)에서 터미널을 열 수도 있습니다.Step 2: 프로젝트 생성 명령 실행아래 명령을 실행하여 Vite와 React를 사용한 새로운 프로젝트를 생성합니다:# Vite 프로젝트 생성 명령 실행npm create vite@latest my-react-app --templa.. 2024. 5. 18. [TIL] 호이스팅(hoisting)이란? 변수와 함수 선언이 해당 범위의 최상위로 끌어올려지는 동작을 말한다. 자바스크립트는 실행 전 한번 훑어보기 때문에 변수와 함수 선언이 먼저 처리되는 것이다.이처럼 끌어올려진 것처럼 동작하여 호이스팅이라고 한다. 변수 호이스팅변수 호이스팅은 변수를 선언하는 var 키워드를 사용할 때 발생한다. var로 선언된 변수는 코드의 최상위로 호이스팅되지만, 초기화는 호이스팅되지 않는다. 따라서 변수 선언은 최상위로 올라가지만, 변수 값은 실제 할당 지점에서 초기화된다. console.log(x); // undefinedvar x = 5;console.log(x); // 5 위 코드에서는 var x 선언이 호이스팅되어 최상위로 이동하지만, 초기값 할당(x = 5)은 원래 위치에 남아 있다. 따라서 첫 번째 conso.. 2024. 5. 17. [DIL] useState(2) setSomething(nextState)과 같은 set 함수state를 다른 값으로 업데이트하고 리렌더링 하려면 useState가 반환하는 set함수를 사용하면 된다.여기에는 다음 state를 직접 전달하거나, 이전 state로부터 계산하여 다음 state를 도출하는 함수를 전달할 수도 있다. const [name, setName] = useState('Edward');function handleClick() { setName('Taylor'); setAge(a => a + 1); // ... 매개변수( Parameters )state가 될 값으로 모든 데이터 타입이 허용되지만, 함수에 대해서는 특별한 동작이 있다.함수를 nextState로 전달하면 업데이터 함수로 취급된다. 이 함수는 순수해야 .. 2024. 5. 17. [DIL] useState(1) useState(initialState)란useState는 컴포넌트에 를 추가할 수 있게 해주는 React 훅이다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ... useState를 호출하여 state 변수를 선언하는데배열 구조 분해를 사용하여 [something, setSomething]과 같이 state 변수의 이름을 지정해야 한다.그리고 맨위에는 useState를 꼭 import 해주어.. 2024. 5. 16. [TIL] 리액트 input 값 제출 후 input 태그 초기화하기 To do list 페이지를 만드는 중에 할일과 내용을 채우고 추가를 한 후에도 썼던 텍스트가 그대로 남는 부분과빈칸일 때도 추가가 되는 오류가 있었다. const [title, setTitle] = useState("");const [text, setText] = useState(""); const addTextHandler = () => { const newContent = { id : new Date().getTime(), title: title, text: text, isDone: false, }; setContents([...contents, newContent]); } 첫번째로,addTextHandler는 추가 버튼을 누를 시 동작하는 함.. 2024. 5. 14. [TIL] 자바스크립트 버튼 클릭 시 이벤트 주기 버튼 클릭 시 텍스트를 바꾸는 코드다.//생략 안녕하세요! 클릭 html문서에는 위에처럼 작성하고 document.querySelector('.btn').addEventListener("click", () => { document.querySelector('.title').textContent = "Hello!";}) js 파일에는 위에처럼 작성한다. 여기서 document.querySelector()는 html문서에 있는 class="btn"를 스크립트로 가져올 수 있다.그래서 addEventListener("click", () => {})로 클릭 이벤트를 넣어주고 document.querySelector()로 다시 html 문서에 class="title"를 불러와서textContent를 붙여.. 2024. 5. 13. [TIL] 내배캠_영화소개페이지(3)_리뷰 수정 기능 구현하기 localStorage.getItem()으로 리뷰 작성했던 key를 가져온다.각 영화마다 리뷰를 달 수 있도록 구별하기 위해 key에 영화 api의 id를 넣어둔 상태이므로해당하는 영화의 id값과 같다면 filter()로 반환한다.그리고 수정하고자 하는 리뷰의 작성시간이 같다면 findIndex()로 반환하고(한 영화에 댓글이 많을 때 비밀번호가 같을 수도 있으므로 수정하고자 하는 댓글의 time값을 비교했다.)조건문으로 비밀번호 일치 여부에 따라 수정 처리 해준다.그후 setItem()으로 저장한 후 다시 loadComments()하여 출력한다. function editComment(index) { const comments = JSON.parse(localStorage.getItem("comment.. 2024. 5. 10. [TIL] 내배캠_영화소개페이지(2)_리뷰 삭제 기능 구현하기 영화 api 데이터에 있던 id 값을 통해 각 영화마다 리뷰를 작성할 수 있도록 구현했다.그후 리뷰를 삭제할 수 있게 아래와 같이 코드를 작성했다. function deleteComment(index) { const comments = JSON.parse(localStorage.getItem("comments") || "[]"); const commentFilter = comments.filter( (comment) => comment.movieId === searchParam("id") ); const commentToDelete = commentFilter[index]; const inputPassword = prompt("비밀번호를 입력하세요."); if (inputPassword.. 2024. 5. 9. [TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기 localStorage란?데이터를 브라우저에 저장할 수 있는 저장소이다. 저장된 key와 값은 항상 문자당 2바이트를 사용하는 UTF-16 문자열 형식이다. 객체와 마찬가지로 정수 key도 자동으로 문자열로 변환한다.그래서 localStorage에 저장하려면 객체를 문자열화 시키기 위해 JSON.stringify()를 써야하고저장한 값을 사용하기 위해서는 JSON.parse()를 사용하여 객체화시켜서 가져와야 한다.localStorage를 사용하는 이유는 db와 같이 다른 서버 저장소에 이미 저장할 데이터가 많기 때문에비교적 중요도가 낮은 데이터들을 localStorage에 저장하면 기존 데이터 저장소의 공간을 더 확보 할 수 있기 때문이다.[참고 https://developer.mozilla.org/e.. 2024. 5. 8. [TIL] git 기본 명령어 git init git 설치 touch 파일명.파일형식 파일 생성 (=디렉터리 생성)git status 현 상태 확인 *습관적으로 확인하기git add . 현 상태를 stage 상태로 만들기 (완전히 추가한 것이 아닌 대기 상태)git commit -m "메세지" 버전화 하기 git lg(log) 생성한 버전 내역 확인 *습관적으로 확인하기 git checkout (log를 통해 나온 commit 주소) 일종의 타임머신, 지정한 상태로 돌아가기 git remote add origin 원격저장소의 주소(ex. github) 원격저장소 추가 git push -u origin main(브랜치명) 해당 위치에 계속 저장 -u를 하면 위치가 고정돼서 이후에 git push만 해도 됨git pull.. 2024. 5. 7. [TIL] div 사이즈 조정 시 padding 값 제외 하기 div태그에 width :1000px로 고정값을 줬는데padding 값을 따로 주니 div 크기가 더 늘어났다. 이럴때에는 해당 div태그의 css에box-sizing: border-box; 태그를 넣어주면 되는데padding이나 margin값을 줘도 크기가 더 늘어나지 않게 해준다. 2024. 5. 2. [TIL] github 배포 시 css와 javascript가 적용이 안될 때 개인과제를 끝내고 개인 github에 등록한 뒤 배포를 해보았다.그러나 css와 javascript 적용이 안되고 html 뼈대만 덩그러니 나타나는 현상이 일어났다. 아무래도 css 파일과 script 파일을 연결할때에 이상이 생긴 것 같다. 원래는 css파일과 script파일을 연결할때 '/'를 입력하여 자동으로 아래에 뜨는 파일들을 택해 넣었었다.그런데 하나의 폴더에 파일들을 다 넣었음으로 '/'는 없어도 연결이 가능하다.그래서 링크태그에 있는 '/'를 다 지웠다.원래는 이미지도 이미지폴더를 따로 만들어 넣었으나배포 시 똑같이 적용이 안되어 다시 꺼내왔다.폴더가 하나인데 폴더가 하나 더 있는 걸로 인식해서 배포할때 경로를 못 찾았던 것 같다. 문제해결!도움이 되셨길 바라며! 2024. 5. 1. 이전 1 ··· 9 10 11 12 13 다음
