초보 개발자

any는 어떤타입이든 모두 OK! 체크 안할거야 let someValue: any = 5; someValue = "any"; someValue = true; 편해 보이지만 최대한 안쓰는 것이 좋다. 동적으로 어떤 타입이 들어올 지 모를 때 주로 쓴다! union 어떤타입이 올지는 모르겠는데 number or string인건 확실해 ! 제한된 타입들을 동시에 지정하고 싶을 때 사용한다. let someValue: Number | String = 5; someValue = "free"; someValue = true; 여기서는 true라는 boolean값을 지정해주었을 때 에러가 발생한다 ! 'boolean' 형식은 'String | Number' 형식에 할당할 수 없습니다. let orderID: numb..

객체의 구조를 정의하는 방법이다. function getStudentDetails(studentID: number): { studentID: number; studentName: string; age: number; gender: string; subject: string; cousrseCompleted: boolean; } { return null; } 객체의 return타입을 object로 하고싶다면 이렇게 해주면 된다. 하지만 이렇게 하면 지저분해보일뿐더러 다시 사용할 때 똑같이 적어주어야 하는 번거로움이 생긴다. object를 만든다고해서 타입을 object라고 적으면안된다. interface를사용해야한다! 그래서 우리는 interface를 사용하여 좀 더 편리하게 코드를 작성할 수 있다. TS에..

let car = "benz"; car = 3; let age: number = 30; let isAdult: boolean = true; let a: number[] = [1, 2, 3]; let a2: Array = [1, 2, 3]; let week1: string[] = ["mon", "tue", "wed"]; let week2: Array = ["mon", "tue", "wed"]; 맨 위에 let car = "benz" 이부분에서 딱히 car:string으로 타입을 지정해 주지 않았지만 밑에 car = 3(number)로 바꾸어주면 'number' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322)라는 오류가 뜬다 참 똑똑한 것 같다. 배열을 나타내고 싶으면 :타입[] 이렇게 해..

VSCode를 설치하고 몇가지 Extension을 설치해준다. 1. prettier 내가 쓰는 코드를 보기 좋게 읽기 쉽게 정돈 해준다. 2. ESLint 코드를 검사하고 잠재적인 문제에 대해서 경고해준다. 3. Path in localfile을 빠르게 참조할 수 있도록 자동완성을 해주는 기능이다. 4. bracket parint colori 괄호끼리 색을 맞춰주어 보기 쉽게 만들어준다. 5. material icon theme 아이콘을 좀 더 이쁘게 만들어주어 코딩의욕을 샘솟게 만든다. TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) JavaScript With Syntax For Types. TypeScript extends Ja..

타입스크립트를 쓰는 이유는 무엇일까 처음 자바스크립트와 전혀 다른 언어라고 생각을 했었지만 알고보니 자바스크립트를 좀 더 편리하게 사용할 수 있도록 해주는 언어임을 알 수 있었다. 타입스크립트는 자바스크립트의 기능은 모두 포함하고 있으면서도 포함되지 않은 새로운 기능들 또한 가지고 있다. 타입스크립트 자체만으로는 브라우저가 실행할 수가 없어서 꼭!! 자바스크립트로 변환하는 컴파일 작업이 필요하다 !! 1. 변수 값에 데이터 타입지정이 가능하여 다른 타입이 올 경우 사전에 오류를 방지할 수 있다. //JavaScript function add1(a, b) { return a + b; } console.log(add1("3", "5")); //TypeScript function add2(a: number, ..

delete는 간단하다 . delete를 누르면 "delete"라는 정보가 함수로 가고 if 문을 통해 접속한다 앞서와 마찬가지로 배열을 복제하고 selected_id와 일치하는 정보를찾아서 slice로 지운 뒤 state에 있는 content에 바꿔치기 하면 끝난다.

내가 선택한 글에서 Update버튼을 누르면 그 글의 정보를 props에 보내고(data) Update form이 나온다. 거기 input title과 textarea의 value값에 this.props.data.title, this.props.data.desc를 적으면 콘솔창에 오류가 뜨면서 값이 변경이 되지 않는다. 확인 해보면 onChange 이벤트를 사용하라는 메시지가 나온다. onChange이벤트를 사용하면 어떠한 단어를 적더라도 바로 이벤트가 발동이 되어버려 아무것도 할 수가 없게된다. UpdateContent에 state를 만들고 그 state안에 title과 desc의 값이 바뀔 때마다 저장하는 형식으로 만들면 이 문제를 해결 할 수있다. 여기서 가독성을 높이기 위해 함수로 만들었다. th..

props는 read-only이고 내부에서 값을 바꾸려고 하면 에러가 난다. 상위 컴포넌트에서 하위 컴포넌트로 값을 보낼때는 props를 이용하여 값을 전달 할 수 있다. 반대로 하위 컴포넌트에서 상위 컴포넌트로 값을 보낼때는 어떻게 할까? event를 활용해야한다. 상위 컴포넌트에서 하위 컴포넌트로 함수를 만들고 ex (this.setStatus({mode : id(매개변수)}) 하위 컴포넌트에서는 그 함수의 매개변수(id)에 값을 넣어 다시 그 값을 전달받아 상위에서 값을 변경한다 CRUD에서 Create를 만들어보았다. CreateContent.js 에서 form을 전송했을 때(submit 버튼을 눌렀을 때) 실행되는 이벤트를 설정하고 e.target.title(name의 값).value를 하면 f..