npx create-react-app .여기서 .은 현재 디렉토리에 설치를 뜻합니다.파일 만들어서 설치 원하시면 . 대신에 파일명 적어주시면 되세요. npm으로 설치하는거는 저는 3분 정도 걸리는거 같아요.yarn이 확실히 빠르긴 한데, 그냥 npm으로 합니다.그동안 잠쉬 폰하거나 유튜브 봐요.설치 완료되면 npm create vite@latestvite패키지를 설치합니다.어떤 모드로 선택해주시면 끝입니다.

타입스크립트에서 타입을 지정하는 방법을 알려드리겠습니다.const a = { name: "Kim", age: 24,};console.log(a);//결과 : { name: 'Kim', age: '24' }변수 a를 const로 선언하고 객체를 할당했을 때,console.log로 변수 a를 출력하게 되면 다음과 같은 결과를 출력받게 됩니다. 이떄 타입스크립트에서는 Type을 지정할 수가 있습니다.const a: { name: string; age: number } = { name: "Kim", age: 24,};console.log(a);위의 코드와 같이 상수 a에 name은 문자열 age는 숫자형으로 명시해줌으로써 타입을 지정해줄 수가 있습니다.타입을 지정할때에는 해당 상수, 변수에 :를 붙이고 ..

리액트(React)를 이용해서 웹 개발을 개발하다 보면, 상태 관리가 굉장히 중요하다는 걸 느끼게 됩니다.오늘은 상태 관리 라이브러리인 Redux를 소개하고, 왜 리액트에서 필수적인지 설명해 드리겠습니다. 1. Redux란 무엇인가요? Redux는 상태 관리 라이브러리입니다. 상태 관리는 애플리케이션의 데이터나 상태를 일관되게 관리하는 방법을 제공해 주죠. 리액트 컴포넌트가 많아질수록 상태 관리가 어려워지는데, Redux가 이 문제를 해결해 줍니다.여기서 중요한 포인트는, Redux는 처음에는 문법이 어렵고 복잡하게 느껴질 수 있습니다. 하지만 걱정하지 마세요!저도 처음엔 어렵게 느껴졌어요. 그래서 무엇부터 시작해야 할지, 왜 Redux를 사용해야 하는지 먼저 알아보겠습니다.  2. 리액트에서 상태 관리..

리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.리액트는 UI를 컴포넌트 단위로 나눕니다. 각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.컴포넌트 트리는 DOM과 같은 형태로 구성됩니다. 리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.리액트에서는 JSX(Java Script XML) 을 사용합니다.(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.컴포넌트를 정의하고, render 함수..

리액트에서 상태 관리는 필수적인 부분이죠. 다양한 상태 관리 라이브러리 중에서 Redux, Recoil, 그리고 Zustand가 가장 많이 사용되고 있어요. 이 글에서는 이 세 가지 라이브러리를 차례로 소개하고, 최신 트렌드인 Zustand가 왜 주목받고 있는지 알아보겠습니다.recoil vs redux vs zustand | npm trends recoil vs redux vs zustand | npm trendsComparing trends for .npmtrends.comRedux: 전통적인 강자 🏆Redux는 리액트 애플리케이션에서 상태 관리를 위한 가장 오래된 라이브러리 중 하나예요. Redux는 전역 상태를 관리하기 위해 설계되었으며, 다음과 같은 특징이 있어요:단일 스토어: 모든 상태가 하..

웹 개발을 하다 보면 한 번쯤 들어봤을 리액트(React)와 넥스트.js(Next.js)!이 둘의 차이점 중 하나는 바로 렌더링 방식이야. 그럼 이 두 강력한 툴의 렌더링에 대해 알아볼까? 🔥리액트: 클라이언트 사이드 렌더링(CSR)의 대표주자! 🌐리액트는 클라이언트 사이드 렌더링(CSR)을 사용해. 여기서 "렌더링의 주체가 클라이언트"라는 말이 무슨 뜻이냐고? 쉽게 말해, 웹 브라우저에서 모든 걸 처리한다는 뜻이지.리액트 렌더링 방식웹 브라우저에서 렌더링이 이루어짐페이지 소스를 보면 자바스크립트로 가득 찬 파일들만 보임검색엔진 최적화(SEO)에 불리할 수 있음 🤔리액트 공식 홈페이지에 가서 페이지 소스를 보면, 실제 화면에 보이는 텍스트나 버튼 등이 HTML 소스에는 없고, 자바스크립트 파일로만 ..

면접을 준비하는 글을 쓰며. 면접은 누구에게나 긴장되고, 부담되고, 떨리는 순간일 것이다.Why? => 합격 여부가 걸려있다는 생각에 마음이 무거워지기도 하기 때문.BUT. 나는 면접을 회사가 나의 자질과 역량, 적합성을 판단하는 테스트일 뿐만 아니라,,,/ 나 역시 회사에 대해 "과연, 이 회사가 나와 잘 맞을까?" 라고 생각해보는 가벼운 커피챗으로 여기고 있다. (물론, 이 마인드를 위해서는 뒷받침할만한 역량과 수준을 갖춘 상태여야 한다.)더보기☕커피챗이란?커피챗(Coffee Chat)은 가벼운 이야기를 나누는 인터뷰나 면접을 의미해요. 정식 면접보다는 비공식적이고 편안한 분위기에서 대화를 나누는 것을 말해요. 서로를 알아가는 시간을 통해, 회사와 지원자 간의 적합성을 확인할 수 있죠.  면접에 대한..

리액트에서 콜백 함수 사용하기안녕하세요, 친구들! 오늘은 리액트에서 콜백 함수를 사용하는 방법에 대해 배워볼 거예요. 콜백 함수는 리액트에서 중요한 개념 중 하나예요. 함께 알아보도록 할까요 콜백 함수란?콜백 함수는 다른 함수에 인수로 전달되어 나중에 호출되는 함수를 말해요. 콜백 함수는 주로 비동기 작업이나 이벤트 처리에서 사용돼요. 콜백 함수의 기본 개념먼저, 콜백 함수가 무엇인지 간단한 예시를 통해 이해해봐요.function sayHello() { console.log("안녕하세요!");}function executeCallback(callback) { console.log("콜백을 실행하기 전!"); callback(); // 전달된 콜백 함수 실행 console.log("콜백을 실행한 후..