기술 습관
-
리덕스 Hooks 생성하기
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 12-2리덕스 Hooks 생성하기
2024.05.17 -
수정중새로운 게시물 추가import React, { useState } from "react";import { Form, Button } from 'react-bootstrap';// interface 대신 type을 사용하는 이유 : 인터페이스는 객체의 구조를 정의할 때 사용. 지금은 새로운 타입만 정의되면 되기 때문type Todo = { id: number; text: string; isChecked: boolean;};const TodoList: React.FC = () => { //Function Component의 약자. props의 타입을 명시하는 역할 // state 사용 관리를 위해 타입 지정. state를 사용하면 상태관리가 가능. const title: string = "오..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 12-1수정중새로운 게시물 추가import React, { useState } from "react";import { Form, Button } from 'react-bootstrap';// interface 대신 type을 사용하는 이유 : 인터페이스는 객체의 구조를 정의할 때 사용. 지금은 새로운 타입만 정의되면 되기 때문type Todo = { id: number; text: string; isChecked: boolean;};const TodoList: React.FC = () => { //Function Component의 약자. props의 타입을 명시하는 역할 // state 사용 관리를 위해 타입 지정. state를 사용하면 상태관리가 가능. const title: string = "오..
2024.05.14 -
클래스형 컴포넌트와 함수형 컴포넌트컴포넌트 작성 방법에는 클래스형/함수형 두가지 방법이 있다.클래스형 : 리액트 초기함수형 : 최근 권장방식왜? 이전에는 state나 life cycle 방식을 클래스형에서만 사용할 수 있었기 때문// 클래스형import { Component } from "react";// 클래스형 컴포넌트 생성 시 무조건 Component 상속 필요class ClassCom extends Component{ render(){ // 필수 return( 클래스형 컴포넌트 ) }}export default ClassCom;// 함수형let FuncCom = () => { return( 함수형 컴포넌트 )};export default FuncC..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-5클래스형 컴포넌트와 함수형 컴포넌트컴포넌트 작성 방법에는 클래스형/함수형 두가지 방법이 있다.클래스형 : 리액트 초기함수형 : 최근 권장방식왜? 이전에는 state나 life cycle 방식을 클래스형에서만 사용할 수 있었기 때문// 클래스형import { Component } from "react";// 클래스형 컴포넌트 생성 시 무조건 Component 상속 필요class ClassCom extends Component{ render(){ // 필수 return( 클래스형 컴포넌트 ) }}export default ClassCom;// 함수형let FuncCom = () => { return( 함수형 컴포넌트 )};export default FuncC..
2024.05.12 -
React 프로젝트 생성 및 코드 분석npx create-react-app [프로젝트이름] --template typescript-> 타입스크립트 방식의 리액트 앱 생성jsx 문법주석문 작성법{/* 작성자 : eom 작성일 : 2024-05-10 remark : 기능에 대한 내용*/}아는 내용이 많아 11-04 내용은 간략히
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-4React 프로젝트 생성 및 코드 분석npx create-react-app [프로젝트이름] --template typescript-> 타입스크립트 방식의 리액트 앱 생성jsx 문법주석문 작성법{/* 작성자 : eom 작성일 : 2024-05-10 remark : 기능에 대한 내용*/}아는 내용이 많아 11-04 내용은 간략히
2024.05.10 -
객체 리터럴enum보다 심플 interface Student { stdId : number; stdName? : string; age?: number; // 선택적 프로퍼티 // gender?: string; // Female Male 두가지밖에 없음. gender? : /*enum*/ 'Male' | 'Female'; course?: string; completed?: boolean; // setName(name: string) : void; 아래와 동일 setName? : (name: string) => void; getName? : () => string; } class MyStudent i..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-3객체 리터럴enum보다 심플 interface Student { stdId : number; stdName? : string; age?: number; // 선택적 프로퍼티 // gender?: string; // Female Male 두가지밖에 없음. gender? : /*enum*/ 'Male' | 'Female'; course?: string; completed?: boolean; // setName(name: string) : void; 아래와 동일 setName? : (name: string) => void; getName? : () => string; } class MyStudent i..
2024.05.09 -
타입스크립트타입스크립트는 왜 필요한가자바스크립트 코드가 너무 지저분코드의 스케일이 커지면서 코드관리가 되지 않는다.타입스크립트 장점JS 기반보다 버그를 줄일 수 있다유지보수가 쉽다강력한 높은 퀄리티의 코드 생산 가능타입 스크립트란자바스크립트 + 타입 체크타입스크립트 환경에 자바스크립트를 코딩하면 동작// JSfunction plus(a,b) { return a+b;}console.log(plus(3,5));// TSfunction plus(a : number,b : number) { return a+b;}console.log(plus(3,5));데이터 타입을 표기시 좋은 점컴파일 타임시 오류 체크타입 스크립트를 자바스크립트로 컴파일하는 과정 필요환경 설정VSCode 설치 후 타입스크립트 설치T..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-2타입스크립트타입스크립트는 왜 필요한가자바스크립트 코드가 너무 지저분코드의 스케일이 커지면서 코드관리가 되지 않는다.타입스크립트 장점JS 기반보다 버그를 줄일 수 있다유지보수가 쉽다강력한 높은 퀄리티의 코드 생산 가능타입 스크립트란자바스크립트 + 타입 체크타입스크립트 환경에 자바스크립트를 코딩하면 동작// JSfunction plus(a,b) { return a+b;}console.log(plus(3,5));// TSfunction plus(a : number,b : number) { return a+b;}console.log(plus(3,5));데이터 타입을 표기시 좋은 점컴파일 타임시 오류 체크타입 스크립트를 자바스크립트로 컴파일하는 과정 필요환경 설정VSCode 설치 후 타입스크립트 설치T..
2024.05.08