메모장

보호되어 있는 글입니다.

task 앱 만들기 파트 1 - 태스크 정리앱 만들기 시작2 - board list, list container 생성하기3 - 수정, 삭제 그리고 로그 기능 추가하기4 - 드래그 앤드 드롭 기능 생성하기5 - 로그인 페이지 생성하기 설치 npm init vite 각각 옵션 선책 후 npm i 까지 해주기  실행"scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, 스크립트에 dev라고 되어 있으므로  명령어 dev 사용npm run dev   - scr 경로 안에 components, types, hooks, store 폴더 생성  필요한 패..

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..

다형성: 다른 그림 찾기 같이 멀리서 보면 같지만 자세히 보면 다름: 함수 이름이 같더라도 전달 인자의 타입이나 개수에 따라 구분: 객체 지향에서는 대표적으로 오버로딩과 오버라이딩 기법이 있음--> 면접 단골 질문~~  오버로딩: 과적하다, 적재하다: 겉모습은 똑같지만 내용이 다른 경우: 이름이 같은 함수일지라도 전달인자 타입이나 개수가 다른 경우예) 컨테이너 겉모습은 다 같지만, 내용은 다 다름예) 스타크래프드의 오버로드 유닛의 예 int Plus (int a, int b){ return a + b;}char Plus (char a, char b){ return a + b;}함수 사용 시 매개변수의 타입과 개수에 따라 알아서 대응하는 함수를 사용해줌 오버라이딩: 위로 올라탄다, 엎어친다: 기본의 것을 ..

객체 지향에 대한 이해 객체 지향? 이 세상에 모든 사물들을 프로그래밍화 시키겠다! - 객체 : Object , '사물'을 나타내는 추상적인 개념 - 지향 : Oriented, ~을 향한다 예) 레고  구조적 프로그래밍 vs 객체 지향 프로그래밍 - 구조적 프로그래밍 : 순차적, 구조적, 폭포수 방식   - 기능적인 기본 단위 : 함수   - 건축같은 순차적 작업에 적합   - 하지만, 요구사항들이 계속해서 바뀌는 현대에 맞지 않음!  - 객체 지향 프로그래밍 : 유연   - 기능 단위 : 객체   - 결합과 분리가 쉬움 (조립식 건물과 비슷)   추상화추상 : 대상에서 특징만 뽑아낸 것예) 개 (추상) : 진돗개, 삽살개, 치와와 ...- 플라톤의 이데아와 일맥 상통   - 개를 본게 중요 / 어떤 개..