메모장

props : 함수의 매개변수와 같은 개념- 특정 데이터 사용시 컴포넌트끼리 공유 공부 방향 - 클론 코딩 위주의 학습보단, 프로그래밍 기초 개념 및 원리 이해 중심으로 학습- 개발은 기술 하나하나 습득보단, 패턴을 이해하는 것이 중요- html, css 와 같은 ui 디자인도 중요하지만, 그보다는 로직과 기능 구현에 집중- 객체지향 철학에 관심 갖기, 모든 분야의 개발 기반은 대부분 객체지향 기반- 우리의 목표는 프론트엔드 개발자나 웹 개발자보다 그냥 개발자가 되는 것

오늘부터는 구현 위주의 수업이었기 때문에 따로 정리할 부분은 없었다.그래서 코드의 주석에 설명을 넣었다 클래스형 컴포넌트함수형 컴포넌트 : 최근 권장 및 선호 - 클래스형 컴포넌트//클래스 컴포넌트 만들기//반드시 아래의 Component 클래스를 상속해야함import { Component } from "react";//상속class ClassCom extends Component { //render = 화면에 그림을 그려준다 render() { return 클래스형 컴포넌트; }}//내보내기export default ClassCom; - 함수형 컴포넌트//그냥 return만해도 알아서 랜더링함function FuncCom() { return 함수형 컴포넌트;}export default Fu..

: 자바스크립트의 확장 문법: 기존의 자바스크립트 문법을 사용자에게 더 명시적이고 명확하게 표현  - 전체 코드를 감싸주는 최상위 태그가 있어야함예- 맞는 코드function App() { return ( hello react 반갑습니다. );} - 틀린 코드function App() { return ( hello react 반갑습니다. 오류 --> div가 병렬로 존재 > );}  인라인 스타일: 컴포넌트 안에서 스타일 지정function App() { let name = "리액트"; const style = { backgroundColor: "black", color: "white", f..

리액트란?: 웹프레임워크: 싱글 페이지 어플리케이션 및 모바일 어플리케이션 가능 랜더링 : 컴포넌트 안에서 사용자에게 보여줌랜더링 -> html 마크업 ->(주입) DOM -> 브라우저 DOM : 보여지는 html 구조- 변화된 부분만 업데이트 리액트 동작 원리1. 초기 랜더링 : 처음에 보여지는 화면2. 가상 DOM 변경 (변화된 부분만)3. 재조정4. 실제 DOM 업데이트 (가상돔만 변경하다가 마지막에 실제 돔 업데이트)   초기설정폴더를 새로 만들어 그 안에 터미널을 열고 아래 명령어 실행설치 명령어 (ts 버전은 아래 명령어 참고)npx create-react-app my-app 만들어진 폴더로 이동cd my-app 리액트 시작npm start  ts를 사용하기 위한 설치 명령어npx create..

oop(=객체 지향 프로그래밍)클래스 : 연관된 변수와 함수들을 한 덩어리로 묶음 클래스와 객체- 클래스는 객체의 뼈대 / 설계도, 생산틀 / 붕어빵틀- 객체는 클래스의 실체 / 불어빨 실습으로 만들어보기//멤버변수 = 속성 = 프로퍼티//멤버함수 = 메소드//클래스class Employee { //멤버 변수 empName: string; age: number; empjob: string; printEmp = (): void => { console.log( `${this.empName}의 나이는 ${this.age}이고, 직업은 ${this.empjob}입니다.` ); };}//객체let employee1 = new Employee();employee1.empName = "..

리터럴 타입: 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 함 / 다양한 종류가 있음 interface Student { stdId: number; stdName?: string; age?: number; gender?: "male" | "female"; course?: string; completed?: boolean; setName: (name: string) => void; getName?: () => string;}class MyStudent implements Student { stdId = 777; stdName = "lee"; age = 30; gender: "male" | "female" = "male"; course = "node.js"; comple..

express.Router()를 사용해 특정 경로에 대한 라우팅과 핸들러를 정의- routes 폴더를 만들어 각 경로에 대한 api 만들기  res.send의 오류: 원래 모든 응답을 res.send를 보내게 코딩을 했다. 하지만 post와 같은 요청을 하는 경우 postman에선 오류를 반환했다.gpt 답변 res.send()유연한 응답 형식: 문자열, 객체, 배열 등 다양한 데이터를 클라이언트에 보낼 수 있습니다.자동으로 JSON 변환: 객체나 배열을 전달할 때는 자동으로 JSON 형식으로 변환해주지만, 명확하게 JSON 형식을 보장하는 것은 아닙니다.응답의 Content-Type: 객체를 보낼 때 Content-Type이 application/json으로 설정되지만, 문자열을 보낼 때는 text/h..

server.js 와 app.js 를 함께 사용하여 프로젝트를 구성하면 Express 설정과 서버 실행 코드를 분리할 수 있음-> 유지 보수가 쉬움server.js: 백엔드 서버(예. node.js)의 메인 서버 파일: express 기반의 서버에서 가장 기본적인 엔트리 파일로 사용, 서버 시작 역할  - node server.js 로 서버를 구동함 app.js에서 설저한 express 앱을 가져와 서버를 실행const app = require("./app"); // app.js에서 설정한 Express 앱을 가져옴//아래 두 줄을 넣으면 env에서 설정한 포트 가져옴//지금은 로컬이니까 주석처리하고 9999으로 사용// const dotenv = require("dotenv");// dotenv.con..

package.json 생성npm init -y express 설치node js 를 사용해 쉽제 서버를 구성할 수 있는 클래스와 라이브러리를 가짐npm install express .env 파일에 환경 변수 보관npm install dotenv//서버 파일 상단에 추가require('dotenv').config()const dotenv = require("dotenv");dotenv.config();const PORT = process.env.PORT || 5000;1,2 번째 줄 코드를 추가하면 env에 넣어둔 port 번호를 가져옴process.env.PORT : Node.js에서 환경 변수를 사용해 포트 번호를 가져옴배포 환경에서는 포트 번호가 서버 또는 호스팅 제공자에 의해 동적으로 할당될 수 있..

데이터 타입과 추론타입 추론(type inference) 기능- ts는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단 가능함- ts는 컴파일러가 토기에 할당된 값을 바탕으로 변수의 타입 추로- 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만, 타입을 명시적으로 지정하는 것이 더 명확함- 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋음 데이터 타입의 종류- 크게 기본 데이터 타입, 객체 타입, 특수 타입- 기본 데이터 타입 : number, string, boolean, null(의도적 지정), undefined(할당되지 않은 변수)- 객체 타입 : object, array, tuple(각 요소가 다른 타입을 가질 수 있는 배열)- 특수 타입 : any, unknown..