rhanziy

타입스크립트를 리액트 프로젝트에 적용해보면서 연습중이다. api를 받아온 결과를(json객체) type지정하면서 구조가 복잡하거나 depth가 깊어질 때, key나 자료형을 하나하나 입력하기 번거로웠다. 해결방법은 2가지가있는데, 편리한 사이트를 이용하거나 개발자도구에서 수작업하기.^0^ http://json2ts.com/ json2ts - generate TypeScript interfaces from json © 2023 - Timmy Kokke based on JSON C# Class Generator json2ts.com https://app.quicktype.io/?l=ts Instantly parse JSON in any language | quicktype app.quicktype.io 개꿀..

firebase로 sso기능 만들고 firestore에 사진+트윗 올리는 기능 만드는 중. image file 업로드와 preview 구현 코드. 사진 저장은 firestore에다 할 것이니 조금만 기다리세요. file 업로드 처리, 미리보기 코드 const [ attachment , setAttachment ] = useState(); const onFileChange = (e) => { const { files } = e.target; const theFile = files[0]; const reader = new FileReader(); reader.onloadend = (e) => { const { result } = e.currentTarget; setAttachment(result); } re..

1. node.js 다운받기. 최신버전 확인 2. 프로젝트 폴더생성 3. 터미널에서 프로젝트 폴더로 이동 후 npm install -g @vue/cli 4. vs코드 에디터 부가기능 설치 Vetur, HTML CSS Support, Vue 3 Snippets *npm install 안되면 yarn 1.xx 설치해보세요. 구글에 Installation | Yarn 사이트 들어가서 설치하고.. 재시작. 맥은 설치 필요 없이 터미널에 npm install --global yarn yarn 있으면 yarn global add @vue/cli 5. 작업영역에 작업용 폴더 추가하고 vue create 프로젝트명 - vue3 선택 6. vue 프로젝트를 작업영역에 추가 7. src > App.vue에 코드를 짜면 됨..

함수의 파라미터로 rest형식, 디스트럭쳐링형식이 들어왔을 때 type지정하는 방법. 일단 rest parameter는 파라미터가 몇개 들어올지 미리 정의를 할 수 없을 때 ... 으로 만들어주는거 function 전부더하기(...a){ console.log(a) } 전부더하기(1,2,3,4,5) console을 찍어보면 a값은 [ ] 어레이 안에 담겨져 있다. function 전부더하기(...a : number[]){ console.log(a) } 전부더하기(1,2,3,4,5) 그래서 타입지정도 array처럼 해주면 됨. array나 object 괄호 벗길 때 사용하는 Spread operator와는 다르니 유의 rest parameter type지정 예시) 입력된 숫자들의 최대 값을 return하는 ..

원래는 intersection type이라고 & 연산자를 통해 두 타입을 만족하는 코드를 짤 수 있었다. // intersection type // 두 타입을 만족하는 타입을 뜻함 type Animal2 = { name : string } type Cat2 = { age : number } & Animal2 let munzi :Cat2 = { name : 'munzi', age : 10 } 그런데 interface로도 가능. extends 하면 되니까. interface Student{ name : string; } interface Student{ score : number; } interface Teacher extends Student { age : number } let 학생 :Student = ..

object 뽑는 기계 class에도 타입을 지정해줄 수 있다. ES6 신문법에서는 constructor함수를 쓰면 되는데, this.어쩌구를 쓰고 싶으면 미리 어쩌구를 필드값으로 지정해 줘야함. class CarInfo { model : string; price : number; constructor(a:string, b:number){ this.model = a, this.price = b } tax() :number{ return this.price * 0.1; } } let car = new CarInfo('소나타', 3000); console.log(car); // { model : '소나타', price : 3000 } console.log(car.tax()); // 300 필드값으로 mode..

서버에 해당 글 삭제 요청을 하기위한 delete기능. html에서는 불가능하다. form의 method는 GET 과 POST만 가능하기때문에 어떻게 구현하면 좋을까나 1. method-override 라이브러리 이용(node.js) 2. JavaScript AJAX 이용 jQuery라이브러리로 2번 방법을 써보자. AJAX란 ? 새로고침 없이 서버랑 통신할 수 있게 도와주는 JS문법. 제이쿼리 cdn먼저 복붙하고... ajax 기본문법. // list.ejs 원하는 기능은 게시물에 맞는 삭제버튼을 누를 때 해당 게시물을 삭제하는 기능이기 때문에, button태그에 data-id 속성으로 id값을 부여해준다. // list.ejs . 할일 제목 : 할일 마감 날짜 : 삭제 그리고 삭제버튼을 버튼을 누르면..

/write페이지에서 할일을 등록했을 때 만들어진 post 컬렉션의 id 값은 자동 어지러운? 값으로 부여가 됐었다. 글 관리를 쉽게하기 위해 등록 시 id 값을 게시물 갯수 + 1로 설정해주자. 일단! todoapp데이터베이스에서 총 게시물 갯수를 담을 새로운 컬렉션을 생성해야함. 게시물 갯수를 셀 totalPost와 접근할 이름~ 여기서 totalPost 값은 int형으로 자료형을 지정해줘야한다. 아래서 구현할 제한자 increase 는 셀 수 있는 값만 들어가기때문. 이제 server.js에서 천천히.. add.post에 추가해주자... 1. 누가 폼에서 /add로 POST 요청을하면 2. counter 콜렉션 안에서 이름이 '게시물 갯수' 인 데이터를 찾아와서 3. 총게시물 갯수라는 변수에 tot..