분류 전체보기53 React 에 TypeScript 적용하기 준비 단계 1. React에 TypeScript를 적용하는 이유? 컴포넌트별로 분리되어있는 리액트의 장점이 단접이 된다고 느꼇다. 상위 컴포넌트에서 하위 컴포넌트로 정보를 내려줄떄 정확하게 확인할 방법이 없기 떄문에 처음부터 어떤 값이 들어갈지 정해주는게 좋다고 느껴 타입스크립트를 적용해보자라고 생각하게 되었다. 2. TypeScript적용하는 방법 리액트 타입스크립트 패키지 설치하기 npm i react react-dom typescript 리액트와 타입스크립트를 설치해준다. 이후 tsconfig.json파일을 만들어 프로젝트를 컴파일러 옵션을 지정해준다. tsconfig.json { "compilerOptions": { "strict": true, "lib": ["es2020", "dom"], "target":.. 2021. 12. 10. Typescript Cannot find name 'target' 이벤트 객체 오류 해결 자바스크립트를 하다보면 항상 이벤트를 줄떄가 많다. 이벤트를 사용하면 event 객체를 이용해 조작을 많이하는데 typescript 에서는 이벤트에 타입을 지정해줘야 오류 없이 이용할수 있다. 이벤트에 타입을 지정하는 방법과 내가 사용하면서 헤결한 오류를 확인해보려합니다. 1. 이벤트 객체 document.querySelector(selecter).addEventListener('click', (event) => {}); 위에 코드처럼 이벤트를 주는데 ts에서는 event에 타입을 지정해주면된다. document.querySelector(selecter).addEventListener('click', (event: Event) => {}); 여러가지 이벤트들이있지만 우선 Event로 타입을 지정해주면된다.. 2021. 11. 29. Typescript 에러 Object is possibly 'null' 타입 스크립트를 배우고나서 적용해보면서 나는 문제들을 하나씩 해결하고 기억하기 위해 블로그를 작성해보려한다. 1. querySelector()에러 document.querySelector(selecter).option 을 사용하는 경우가 많이있다. 그럴떄마다 Object is possibly 'null'. 는 경고가 뜨게 된다. 이 경고가 뜨는 이유는 개발자의 입장에서는 DOM이 당연이 있다고 생각하지만 ts는 있는지 없는지 확실하지가 않다. 그렇게 떄문에 개발자가 확실하게 알려줄 필요가 있다. if문으로 null 걸러냄 const DOM = document.querySelector(selecter) if (!DOM) { return; } DOM.option; if문으로 null을 판별해주는 방법입니다.. 2021. 11. 29. 배열 메소드 map 사용시 쉼표가 반복되어 나오는 현상?? map 메소드를 사용할떄 , (쉼표)가 반복되어 나오는 상황이 생겼다, 리엑트만 이용할떄는 항상 쉼표없이 출력이 되었는데 순수 자바스크림만 활용해서 사용하는데 쉼표가 출력되는 현상이 있어 글로 남기고자한다. 의도치 않은 현상 const template = [축구, 농구 ,족구 ,배구] ($('#root') as HTMLUListElement).innerHTML = data .map(v) => { return `${v.name}`; }) 출력되는 화면 쉼표가 생기는 윈인 map 함수가 문자열 형태로 값을 리턴할 때는 (template literals로 결합한 내용도 문자열 형태로 리턴된다고 한다) 기본적으로 쉼표(,) 로 묶어서 리턴이 된다고 한다. 해결 해결 방법은 정말 간단하다 map함수 끝나는 뒷부분.. 2021. 11. 28. sequelize에서 CRUD 사용하기 Sequelize의 CRUD 시퀄라이즈에서 CRUD(Create, Read, Update, Delete) 작업은 sql문을 자바스크립트를 통해 만든다. SQL 쿼리와 비교하면서 시퀄라이즈 쿼리를 알아보자. Create 프론트로 부턴 받은 데이터 저장한는 방법은 create 메서드를 사용하면 된다. /* SQL */ INSERT INTO users (name, age, married) VALUES('honey', 26, 0); /* 시퀄라이즈 */ User.create({ name: 'honey', age: 26, married: false }); 조회시 없으면 생성해주는 메서드 : findOrCreate /* 시퀄라이즈 */ User.findOrCreate({ where: { name : 'honey'}.. 2021. 11. 27. sequelize sequelize란? sequelize란 nodeJS에서 mysql을 사용할 때 raw Query문을 사용하지 않고 더욱 쉽게 다룰 수 있도록 도와주는 라이브러리이다. sequelize는 ORM(Object-Relational Mapping)로 분류가 됩니다. ORM이란 객체와 관계형 데이터베이스의 관계를 매핑 해주는 도구이다. sequelize를 사용하면 raw Query문을 사용하지 않고 자바스크립트를 이용해서 mysql을 사용할 수 있다. sequelize 설치 npm i sequelize // 시퀄라이즈 설치 npm i mysql2 // mysql2 설치 npm i sequelize-cli // sequelize-cli 설치 설치후 sequelize init 시퀄라이즈 기본 세팅이 완료된다. se.. 2021. 11. 26. 이전 1 2 3 4 5 6 ··· 9 다음
