본문 바로가기
반응형

분류 전체보기155

vscode 자동 들여쓰기 적용하기 1. vscode를 실행한다2. 좌측 하단에 톱니바퀴 아이콘 = 설정에 들어간다.3. 설정검색칸에 'formatter'를 검색한다.4. Editor: Default Formatter를 확인하고 아래 옵션에 Prettier - Code formatter를 선택한다.5. 작성하던 파일로 들어가서 Ctl+A로 코드 전체 선택하고 Shift+Alt+F를 누르면 자동 들여쓰기 완료! 2024. 5. 23.
[DIL] useState 사용법 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(42); const [name, setName] = useState('Taylor'); // ...배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관례이다. useState는 state 변수는 처음에 제공한 초기 state이다.그리고 상호작용에 반응하여 다른 값으로 변경할 수 있는 set함수이다.화면의 내용을 업데이트하려면 다음 state로 set 함.. 2024. 5. 20.
윈도우와 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.
반응형

티스토리툴바