프론트엔드 개발하면서 npm run dev를 실행하면 브라우저에서 개발 서버가 뜨는 걸 볼 수 있다.그런데 이게 Node.js를 실행한 거랑 같은 걸까? 🤔많은 초보 개발자들이 헷갈려하는 부분이라 제대로 정리해보겠다. 🎯 1. npm run dev가 Node.js 실행이 아닐 수도 있다?우리는 보통 npm run dev 하면 Node.js가 실행될 거라고 착각하지만, 사실 그건 어떤 스크립트가 설정되어 있느냐에 따라 달라진다.예를 들어, package.json 파일이 이렇게 되어 있다고 해보자."scripts": { "dev": "parcel index.html", "build": "parcel build index.html"} 이 상태에서 npm run dev를 실행하면?➡ Node.js가 아니..
Frontend
✨ 리액트 페이지 라우팅이란? ✨페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링하는 과정이다.예를 들어 /new 경로로 이동하면 New 페이지가 렌더링되는 방식이다. 🏡➡️📄🔍 페이지 라우팅의 원리웹 서버는 사용자에게 제공해야 하는 HTML 파일을 가지고 있다. 브라우저에서 /blog 같은 특정 페이지를 요청하면 서버는 해당 페이지를 그대로 반환하여 렌더링하게 된다.이 방식은 MPA (Multi-Page Application) 라고 하며, 전통적인 방식으로 많은 서비스에서 사용되어 왔다. 🏛️📜🏗️ 멀티 사이드 렌더링(MPA)와 서버 사이드 렌더링(SSR)멀티 사이드 렌더링 (MPA, Multi-Page Application)서버가 여러 개의 개별적인 페이지를 보유하고 있음각 페이지 이동..
Cursor AI는 인공지능을 활용한 최첨단 코드 편집기임.기존의 코드 편집기와는 달리, AI 기술을 통해 개발자의 의도를 이해하고 코드 작성을 지원함. 설치 및 다운로드📩 https://www.cursor.com/ CursorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com 1. 시작AI와 대화하기 - Ctrl + L: 오른쪽에 AI 채팅 인터페이스가 나타나게 됨.코드 선택 후 Cmd + L 누르는 경우채팅 화면에서 요청 사항 입력하는 경우ctrl + k 자연어 코드로 설명하는 경우 Cursor AI 고급 기능1. 멀티 파일 분석Cursor AI는 프로젝트 내의 여러 파일을..
LocalStorage, SessionStorage, Cookie의 차이 LocalStorageLocalStorage는 도메인에 대하여 같은 정보를 저장하며, 창을 닫거나 탭을 닫는 등 세션이 만료되어도 정보가 지워지지 않는다. 범위 : 동일 도메인 내에서 모든 창과 탭에 걸쳐 데이터를 공유한다. 즉, 동일한 웹사이트라면 여러 개의 탭에서 접근한 경우에도 동일한 데이터를 읽고 쓸 수 있다. 지속성 : 브라우저를 닫거나 시스템을 재부팅하더라도 데이터가 사라지지 않는다. 명시적으로 삭제하기 전까지는 무기한으로 유지된다. 데이터 용량: 일반적으로 5MB정도 용량을 지원하며, 이 제한은 브라우저마다 다를 수 있다. 보안성 : LocalStorage에 저장된 데이터는 클라이언트 측에서 쉽게 접근 가능하므로..
Cookie & Session Cookie 웹 쿠키, 브라우저 쿠키란, 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 이 데이터 조각들을 저장해놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에 들어왔는지 아닌지를 판단할 때 주로 사용한다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있다.즉, 쿠키는 상태가 없는 HTTP프로토콜에서 브라우저의 상태 정보를 기억할 수 있게 하는 방법이라 할 수 있다. 쿠키의 세 가지 목적은 다음과 같다. 1. 세션 관리 (Session Management)- 서버에 저장해야 할 로그인, 장바구니, 게임 스코어, 접속 시간 등의 개인 정보 관리 2. 개인화 (Personalization)..
API(Application Programming Interface) API는 응용 프로그램에서 사용할 수 있도록, 운영체제나프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스임. 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야하는지, 어떠한 데이터를 제공 받을 수 있을지에 대한규격을 정해놓은 인터페이스임. API 예시 날씨 API : 개발자가 날씨 정보를 제공하는 웹사이트로부터 데이터를 가져오고 싶을 때,해당 웹사이트의 API를 호출해 특정 지역의 현재 날씨나 예보를 받을 수 있음. 구글 지도 API : 사용자가 애플리케이션에서 구글 지도를 통해 특정 위치를 검색하거나 길 안내 기능을 구현할 수 있음.
useEffect를 사용해 마운트/ 언마운트/ 업데이트 시 할 작업 설정하기useEffect라는 Hook을 사용해 컴포넌트가 마운트 됐을 때(처음 나타났을 때), 언마운트 됐을 때(사라질 때), 그리고 업데이트 될 때(특정 props 가 바뀔 때) 특정 작업을 처리하는 방법에 대해 알아보려 한다. 마운트 / 언마운트우선. 마운트 / 언마운트 관리를 하려 한다. UserList.jsfunction User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); 이렇게 해주면 콘솔에서 삭제나 ..
배열에 항목 수정하기 User 컴포넌트에 계정명을 클릭했을 때 색상이 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현하기 users 배열 안의 객체 안에 active라는 속성을 추가해준다. App.js const [users, setUsers] = useState([ { id : 1, username : 'silver', email: 'public.les0498@gmail.com' , active: true }, { id : 2, username : 'tester', email: 'tester@example.com', active: false }, { ..
화살표함수const add = (a, b) => { return a + b;};console.log(add(1, 2)); function 키워드 대신 => 문자를 사용해서 함수를 구현한다. 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어온다. 객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.const dog = { name: '멍멍이', age: 2};console.log(dog.name);console.log(dog.age); 객체를 선언 할 때에는 이렇게 { } 문자 안에 원하는 값들을 넣어주면 된다. 값을 집어 넣을 때에는키: 원하는 값 형태로 넣고, 키에 해당하는 부분은 공백이 없어야한다. 만약에 공백이 있어야..
변수 변수는, 바뀔 수 있는 값을 말한다.한번 값을 선언하고 나서 바꿀 수 있다. let value = 1;console.log(value); 상수상수는, 한번 선언하고 값이 바뀌지 않는 값을 말한다. 즉 , 값이 고정적이다. const a = 1; 데이터 타입 숫자 (number)그냥 값을 대입해주면된다. let value = 1; 문자열 (string) 텍스트 형태의 값은 작은 따옴표 혹은 큰 따옴표로 감싸 선언한다. let text = 'hello';let name = '자바스크립트'; 참/ 거짓 (Boolean)let good = true;let loading = false; null 과 undefined null은 이 값이 없다! 라고 선언할 때 사용한다. undefined는 아직 ..
