개발 공부 일지

모듈이란프로그램을 작은 기능 단위로 쪼개고 파일 형태로 저장해 놓은 것 모듈을 사용해서 코딩을 하게 되면 코드가 중복되지 않는다. A와 B에서 모두 사용하는 기능을 모듈로 만들어놓으면,두번 코딩하지 않아도 되고, 하나의 파일에서 가져다 쓰기만 하면 된다.애플리케이션 전체 코드 안에서 어떤 기능을 수정해야 한다면, 그 기능에 해당하는 모듈만 수정하면 되니까 편하다. 개발자가 직접 자신이 필요로 하는 모듈을 만들어서 사용할 수도 있고,node.js 안에 포함된 모듈을 가져다 사용할 수도 있음 node.js 안에 포함된 모듈들은 서버 만들 때 꼭 필요한 기능들이 들어있다.모듈을 사용하는 두가지 방법 : CommonJS 모듈 시스템 vs ES 모듈 시스템node.js가 등장할 당시에는 자바스크립트에는 모듈 개념..

1. 템플릿 리터럴let num1 = 10;let num2 = 20;// 연결 연산자 사용console.log(num1 + "과 " + num2 + "를 더하면 " + (num1 + num2) + "입니다.");// 템플릿 리터럴 사용console.log(`${num1}과 ${num2}를 더하면 ${num1 + num2}입니다.`); 기존 : 문자열과 변수값을 연결할 때, + 기호(연결 연산자)를 사용해서 연결했다.템플릿 리터럴 : 문자열과 변수를 연결하기 위해 나온 문법, 문자열 앞과 끝에 백틱(`) 사용, ${} 안에 변수명 혹은 연산 작성 2. 여러가지 함수 작성법//1. 함수 선언하고 호출하기// 함수 선언function greeting(name){ console.log(`${name} 님 ..

이전 포스트https://dev-traveler.tistory.com/53 [Node.js] node.js 시작하기, npm 정의와 기본 개념, npm 모듈 설치, 삭제 해보기먼저 공식 사이트에서 node.js를 다운받는다. (LTS 붙은걸로 최신버전 다운받기)  다음으로 node.js 실습할 폴더를 만든다.VSCode 열어서  nodeJsPractice 라는 이름의 폴더를 만들었다.최상위 폴더 REACTSTUdev-traveler.tistory.com   express란, node.js기반의 웹 프레임워크이다. (자바의 Spring, 파이썬의 장고 같은 웹 프레임워크)  * 웹 프레임워크란웹 애플리케이션을 쉽게 개발할 수 있게 필요한 기능을 미리 제공하는 코드 구조(틀)이다.서버, 라우팅, 데이터베이스..

먼저 공식 사이트에서 node.js를 다운받는다. (LTS 붙은걸로 최신버전 다운받기)  다음으로 node.js 실습할 폴더를 만든다.VSCode 열어서  nodeJsPractice 라는 이름의 폴더를 만들었다.최상위 폴더 REACTSTUDY를 클릭하면, 해당 폴더 하위의 첫번째 폴더가 자동으로 잡히는데,그때 esc를 누르면 파란색 테두리가 프로젝트 전체를 감싼 모양으로 변한다.그 상태에서 New Folder 해서 만들면 REACTSTUDY 하위에 폴더가 생성된다. 폴더 우클릭 후 New File 하여 index.js 파일을 만들었다. nodeJsPractice 경로까지 와주고 나서  node index.js 라고 작성하여 index.js를 실행한다.터미널에 콘솔로그 결과가 찍힌 걸 확인할 수 있다. *..

리덕스(Redux)란?리덕스(Redux)는 상태 관리 라이브러리로, 주로 React 애플리케이션에서 전역 상태를 효율적으로 관리하기 위해 사용된다. 컴포넌트 간의 상태를 중앙에서 관리하고, 상태 변경 로직을 예측 가능하게 만들어준다. 리덕스를 사용하는 이유전역 상태 관리리액트에서 상태를 관리할 때 props로 전달하면 컴포넌트 간 관계가 복잡해질 수 있음 (Props Drilling 문제)리덕스를 사용하면 **중앙 저장소(Store)**에서 모든 상태를 관리하여, 필요할 때 어디서든 접근 가능일관된 상태 관리상태 변경이 한 곳(리듀서)에서만 이루어지므로, 예측 가능하고 디버깅이 쉬움시간 여행 디버깅 지원액션(Action)과 상태(State)의 변화를 추적할 수 있어 버그를 찾기 쉬움 (Redux DevT..

📌 비동기(Asynchronous) vs 멀티스레딩(Multi-threading)👉 비슷해 보이지만 다름!👉 핵심 차이: 비동기는 "작업 처리 방식", 멀티스레딩은 "CPU의 스레드 개수"🚀 개념 정리✅ 비동기(Asynchronous)란?하나의 스레드에서 실행되지만, 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행"기다리지 않고 요청을 보내고 나중에 결과를 처리하는 방식"예제: 자바스크립트의 fetch(), setTimeout(), Promise 등📌 비동기 예제 (JavaScript)console.log("1. 시작");setTimeout(() => { console.log("2. 3초 후 실행"); // 3초 후 실행 (비동기)}, 3000);console.log("3. 끝"); // ..

📌 HTTP 프로토콜이란?HTTP(HyperText Transfer Protocol)는 **웹에서 데이터를 주고받기 위한 규칙(프로토콜)**이야.브라우저(클라이언트)와 서버가 서로 통신할 때 사용하는 기본적인 프로토콜이고, 우리가 웹사이트를 방문할 때 항상 사용돼.예를 들어,네이버에 접속할 때 → https://www.naver.com구글 검색할 때 → https://www.google.com/search?q=chatgpt이처럼 **웹사이트 주소(URL)**는 http:// 또는 https://로 시작하는데, 이게 바로 HTTP 프로토콜을 사용한다는 의미야.🌍 HTTP 통신의 동작 방식HTTP는 클라이언트-서버 모델을 기반으로 동작해.✅ 1. 클라이언트(Client)👉 사용자가 브라우저(Chrome..

👉 동기(Synchronous): 요청을 하면 응답을 받을 때까지 기다리는 방식👉 비동기(Asynchronous): 요청을 하면 응답을 기다리지 않고 다음 작업을 수행하는 방식  ✅ 동기(Synchronous) 예제음식점에서 주문하고 → 요리가 끝날 때까지 기다렸다가 → 음식을 받는 방식요청한 일이 끝날 때까지 다른 일을 못함✅ 비동기(Asynchronous) 예제패스트푸드점에서 주문하고 → 번호표 받고 → 다른 일을 하다가 → 번호가 불리면 음식을 받는 방식요청한 일이 끝나지 않아도 다른 일을 할 수 있음 💻 프로그래밍에서 동기 vs 비동기1️⃣ 동기 방식 (Synchronous)요청을 보내면 완료될 때까지 기다린 후 다음 작업을 수행실행 순서가 정해져 있고, 코드가 순차적으로 실행됨단점: 하나의..

리액트에서는 useState를 사용하여 state(상태)를 선언할 때,구조 분해 할당(Destructuring Assignment)를 활용할 수 있다.  1. 기본적인 useState 선언 (Destructuring 사용)리액트의 useState는 배열을 반환하는데, **첫번째 값은 state**이고, 두번째 값은 **상태를 변경하는 setter 함수**이다.우리가 일반적으로 알고 있는 state 선언 방식 그 자체가 Destructuring을 사용한 거라 보면 된다.const [count, setCount] = useState(0);count → 현재 상태 값 (초기값 0)setCount → 상태를 변경하는 함수  2. 객체 형태의 상태 선언하기 (Destructuring 활용)function Exam..

배열로 들어오는 멀티 데이터를 화면에 출력하려면 map() 을 사용하면 된다. import React, { useState } from 'react'import './App.css'function App() {   //users는 배열이고, 배열 안은 객체 형태로 들어있다.  const users = [    {email: 'fruit1@gmail.com', name: "apple"},    {email: 'fruit2@gmail.com', name: "melon"},    {email: 'fruit3@gmail.com', name: "peach"},    {email: 'fruit4@gmail.com', name: "berry"},  ]  return (      table>        thead> ..