리액트 프로젝트 세팅하기 프로젝트 생성 yarn create react-app my-app --template typescript 프로젝트 실행 yarn start 자식 컴포넌트로 props 내려주기 내려받는 props의 타입을 지정해줘야 함 타입을 지정해주지 않을 경우 타입스크립트의 IntrinsicAttributes 에러 발생 가능 props를 인자로 받는 부분에 인라인으로 하나씩 작성할 경우 props가 한 개일 때 const TodoList = ({ todos}: { todos: Todo[]; }) => { props가 여러개일 때 const TodoList = ({ todos, isDone, setTodos }: { todos: Todo[]; isDone: boolean; setTodos: an..
enum과 객체 리터럴 enum 상수 값을 그룹화해서 관리할 때 사용 컴파일 시에 자동으로 숫자 값으로 매핑되기 때문에 값을 할당할 필요 없 객체 리터럴은 복잡한 구조와 데이터 타입을 사용해야 할 때 사용 어떤 타입의 값도 대입 가능 유틸리티 타입 Partial 기존 타입의 일부 속성만 제공하는 객체 생성시 사용 기존 속성이 name, age일 경우 >> name / age / name, age 세 가지 경우 가능 Required T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 객체 생성시 사용 Readonly 타입 T의 모든 속성을 읽기 전용으로 만듦 : 완전한 불변 객체 취급 Pick 타입 T에서 K 속성들만 선택하여 새로운 타입을 만듦 Omit 타입 T에서 K 속성들만 제외하여 새로운 타입..
JavaScript의 약점 JavaScript는 동적언어! 짐작하기 어려운 undefined 에러가 발생되기 쉽다 변수 타입이 실행 시간에 결정됨 타입 체크 문제 불확실한 객체 TypeScript의 장점 변수 타입을 컴파일 시간에 결정 VS Code에 입력하는 순간 타입 체크 VS Code에 입력하는 순간 객체 체크 객체 지향 프로그래밍에서의 장점 (class의 객체를 마음대로 조작하지 못하도록 private 설정) 외부 모듈의 타입 정보 제공 tsc = typeScript 컴파일러 컴파일러의 역할 소스코드의 정적 타입 검사 >> 개발자가 코드에서 타입 관련 오류 미리 발견하고 수정 가능 TypeScript >> JavaScript로 코드 변환 컴파일러의 장점 에러 메시지 해석에 도움을 받을 수 있다. ..
Redux로 상태관리 '글 작성하기'라는 같은 모달창을 두 가지 버튼으로 띄울 수 있게 하는 경우 한 곳에서만 글 작성 모달창을 띄울 때는 const [isOpen, setIsOpen] = useState(false) const openModal = () => { setIsOpen(true) } const closeModal = () => { setIsOpen(false) } 이런 식으로 컴포넌트 내에서 모달창을 열 수 있는 state값을 만들어서 사용하면 된다. 하지만 글 작성 모달창을 띄우는 버튼이 각각 다른 컴포넌트에 속해 있다면, useState로 만들어낸 state로는 모달창 관리가 어렵다. 그렇기 때문에 Redux에서 공통으로 사용할 isOpen state를 만들어서 사용하면 된다. isOpe..
input type='file' 파일업로드 버튼 꾸미기 파일찾기 label 태그와 input 태그를 먼저 연결 시킨다. input 태그에 id값을 지정하고, label 태그에서 for로 지정한 id값으로 설정하면 된다! 기존에 설정되어있는 첨부하기 버튼을 없애기 위해서 css를 적용한다. position은 필요할 경우에 지정하면 된다! position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; 그리고 label에 css를 적용한다. font-size: medium; font-weight: 400; display: inline-block; padding: 10px 20px; color: #000; background-c..
📌리액트 체크박스 만들기 원하는 결과물 새로운 게시물 등록할 경우에는 영업일을 체크박스로 선택하고 값을 넘겨주도록 만들고자 했다! 등록된 게시물을 수정할 경우에는 게시물 등록 때 체크한 값은 이미 체크되어 있는 상태로 보여주고자 했다! 📌label 태그와 checkbox onChangeHandler(e)} /> {day} label 태그로 감싸진 checkbox는 label을 눌러도 체크가 된다! 체크박스를 보이지 않게 할 것이기 때문에 ( appearance: none ) 마치 label 자체를 체크박스 처럼 사용할 수 있다. 그래서 체크가 되었을 때와 안되었을 때 label의 background-color를 다르게 지정해주고자 했다. 문제점 background-color: ${(checked) => ..
문제를 보고 일단 풀이 방법을 이 순서로 정해보았다. 주어진 배열에서 중복되는 숫자를 없앤 배열을 만든다. 새로만든 배열을 반복문을 수행하면서, 원래 배열과 같은 숫자일 때 count를 ++한다. (각각의 숫자가 배열에 총 몇 개씩 들어있는지 세는 것!) 제일 큰 count를 구하기 단, 제일 큰 count가 2개 이상일 경우 answer에 -1 넣어주기 제일 큰 count를 가진 수가 어떤 숫자였는지 찾아내기 처음 풀이 function solution(array) { var answer = 0; const newArr = [...new Set(array)]; const count = []; for (let i = 0; i < newArr.length; i++) { count[i] = 0; for (co..
Material UI - TextField는 input 태그 api이다. TextField api안에는 error props가 있다. error인 경우에 input 창을 테두리를 빨간색으로 표시해 주는 기능이다. 이렇게 error 조건이 false가 되면 빨간 색상이 사라진다. input창 아래에 있는 것도 props로 사용할 수 있는 것인데, helperText로 사용하면 된다. kcal 분 위의 방식처럼 error ={ 조건식 } 으로 작성해서 사용할 수 있다. true나 false 값으로 return 되는 것이면 된다! helperText에는 문자열을 직접 넣어도 되고, return값이 문자열인 함수를 넣어도 된다. 그래서 회원가입의 경우 유효성 체크 조건이 조금 더 복잡하기 때문에 error와 h..
