devyu0001 님의 블로그

이번에 TypeScript를 새로 배워서 실습을 해볼려고 새로운 파일을 만들었는데 App.tsx 파일을 열어보니 이런식으로 오류가 떴다yarn 이 안 깔려있어서 그런줄 알고 터미널에서 yarn을 입력해도 바뀌지않았다. 머가 문제일까.... 아직도 프로젝트 파일 만드는 것도 못하는 건가....🤦‍♂️ 답답하다pakage.json에서도 typescript가 잘 깔려있고 멀해야할지 몰라 튜터님을 찾아가 확인해보니 vsCode에서도 버전을 바꿔줘야 한다고 하셨다 command + shift + p 를 눌러서 버전을 선택해서 다시 하니 완벽하게 사라졌다yarn create vitereacttypescript 여기서 작업영역 버전 사용 5.8.2를 클릭했더니 되었다그래도 잘못만든건 아니고 vsCode상에서 문제여..

1️⃣ || (논리 OR 연산자)post?.[0]?.location || "위치 정보 없음"post?.[0]?.location이 Falsy 값(null, undefined, "", 0, NaN, false)이면 "위치 정보 없음"을 반환즉, 빈 문자열("")도 "위치 정보 없음"으로 처리됨✅ 예제console.log("" || "위치 정보 없음"); // "위치 정보 없음"console.log(null || "위치 정보 없음"); // "위치 정보 없음" console.log(undefined || "위치 정보 없음"); // "위치 정보 없음" console.log(0 || "위치 정보 없음"); // "위치 정보 없음"2️⃣ ?? (Null 병합 연산자)post?.[0]?.location ?? "위치..

npm과 yarn은 JavaScript 패키지 관리 도구로, 프로젝트에서 라이브러리를 설치하고 관리하는 역할을 합니다. 하지만 둘 사이에는 몇 가지 차이점이 있습니다.1️⃣ 속도 및 성능✅ yarn이 npm보다 패키지를 설치할 때 더 빠릅니다.yarn은 병렬 다운로드를 사용하여 여러 패키지를 동시에 설치합니다.반면 npm은 예전에는 순차적으로 설치했지만, 최근 버전에서는 캐시를 활용하여 속도가 많이 개선되었습니다.2️⃣ Lock 파일 차이 (package-lock.json vs yarn.lock)npm은 package-lock.json,yarn은 yarn.lock을 사용하여 패키지 버전을 고정합니다.✅ yarn.lock이 package-lock.json보다 더 일관된 의존성 관리를 제공합니다.3️⃣ 명령..

1. 비동기 프로그래밍JavaScript의 비동기 처리 개념: Callback, Promise, async/awaitfetch API 및 axios를 활용한 데이터 요청2. json-server가짜 REST API 서버를 생성하여 개발 환경에서 API 요청 테스트 가능설치 방법:npm install -g json-serveryarn add json-serveryarn add json-server -D # 개발 환경인 경우, -D 옵션을 함께 입력합니다.사용법:yarn json-server db.json --port 4000db.json 파일 예시:{ "posts": [ { "id": 1, "title": "Hello World", "author": "John" } ]}3. axios설치 방법:n..

1️⃣ 일반 객체 ({}) 사용 예시function getFrequency(arr) { let freq = {}; // 일반 객체 사용 arr.forEach((a) => { if (!freq[a]) { freq[a] = 1; } else { freq[a] += 1; } }); return freq;}const arr = ["apple", "banana", "apple", "orange", "banana", "apple"];console.log(getFrequency(arr));✅ 출력 결과:{ apple: 3, banana: 2, orange: 1 }📌 일반 객체는 더 직관적이고, 코드가 간결하며 Obje..

git !== git hubgit은 형상관리 툴이다 git remote는 원격 저장소git 컨벤션과 코드 스타일 통일하기 🤔 왜 코드로 소통 해야하는가??Git을 잘 활용한다면 코드 변경 이력이나 왜 이 코드를 작성하게 되었는지, 어떻게 개선하면 좋을지를 기록·공유하여 팀원 간의 효율적인 협업이 가능합니다. 🛠️ Git에서 알아야 할 핵심 명령어git init현재 폴더를 Git 저장소로 초기화git initgit add변경된 파일을 스테이징 영역에 추가git add . (전체 파일 추가)git commit스테이징 영역에 있는 변경사항을 커밋(버전)으로 확정git commit -m "feat: 로그인 로직 추가"git push로컬 저장소의 커밋을 원격 저장소로 업로드git push origin feat..

React Hook은 16.8 버전부터 새로 추가된 기능이다.Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수라고 한다.Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다앞에 use 가 들어가면 대부분 Hook이다. React의 주요 Hook 중에서 useState, useEffect, useContext, useRef에 대해 알아보자 1. useStateuseState는 컴포넌트에서 상태(state)를 관리할 수 있도록 해주는 Hook입니다import { useState } from "react";function Counter() { const [count, se..

yarn 으로 리액트 실행하기터미널에서 yarn create react app 폴더명 Vite로 만드는 방법yarn create vite 폴더명 --template react -> cd 폴더명 -> yarn -> vs코드에서 yarn dev 컴포넌트 사용법리턴 전 영역은 자바스크립트 리턴 아래부분은 html 코드같은 것을 입력컴포넌트 만들때 첫글자 대문자, 폴더는 소문자시작 props는반드시 위에서 아래로 [부모] -> [자식] 방향으로만 흐른다부모에서 자식은 function Child(props){} props는 아무 이름이나 상관없다 children stateuse state 라는 hook을 사용const [name, setName] = useState("내용");   import { useState..

오늘 부터 React 입문 주차가 되서 조도 새로 바뀌고 강의도 새로운 강의가 올라왔다먼저 필수 프로그램을 세팅을 했는데npm install -g yarn이걸 터미널에서 입력을 했는데 오류메시지가 엄청 떴다;;처음부터 쉽지가 않다;;;찾아보니 npm 명령어를 실행할 때 권한이 부족하여 발생하는 문제라고 한다.sudo npm install --global yarn그래서 이런식으로 다시 치고 비밀번호를 입력하라는 메시지가 떠서 비밀번호를 입력하니 설치가 되었다!! 프로그램을 설치하고 리엑트를 실행시켜보자프로젝트를 생성하는 3가지 방법이 있다 ( CRA,Vite, A-Z혼자하기)CRA(Create React App)한 줄의 명령어 입력으로 개발에 필슈요소를 자동으로 구성하는 방법이다 Vite도 CRA와 같이 ..

모듈이란??관련된 데이터와 함수를 하나로 묶은 단위구성요소 관련된 요소들을 하나로 묶는다 모듈화를 시킬땐 import, export를 사용해서 가져오고 보낼수있다import {test} from "./js파일" ;import {test as data} from "./js파일" ;   as 를 사용해서 가져온걸 이름 바꿀수있다export {test}; 디바운싱 -> 유틸리티파일로 구분할 수 있다상수는 대문자로 선언 을 한다 예) PROVIDE_LANGUAGE 오늘 강의를 들으면서 얼추 모듈화를 완성했다.https://github.com/ick-web/movie-search GitHub - ick-web/movie-searchContribute to ick-web/movie-search development..