Author: dudghks9303

개인과제 관련 내용 간단하게 ts를 확인하고자 한다면 npm i typescript (여기는 powershell에서 해도 무방) 설치 확인 : tsc -v (여기서부터는 powershell이 아닌 cmd에서 해야 한다) ts 자체를 돌릴수는 없기 때문에 js로 변환해야 한다 : tsc -w ts파일이름 (cmd) 그러면 ts 파일 위치에 똑같은 이름의 js 파일이 생성되어 있다 js를 실행해야 하기 때문에 node js파일이름 (cmd)… Read more

팀 프로젝트 관련 내용 내용 추가부분 모임캘린더에서 모임에서 약속이 추가된 것과 친구들의 값을 불러와서 색칠하는 부분을 구별 친구들의 값을 불러온 약속잡힌 날짜 배열 / 모임페이지에서 추가되는 약속날짜 배열 / 그 외(약속이 없는 날) 3개를 구별해야한다. 메인페이지 또는 마이페이지-친구-친구 달력 보기-빈 날짜 클릭 하면 바로 약속 만들기 모달창 띄움 캘린더별 기능이 많이 헷갈려서 일단 구분 메인페이지… Read more

팀 프로젝트 관련 내용 친구캘린더의 경우 따로 path를 만들어 모달창에 띄워놓기로 함 현재 할 내용 : A/B 달력값 구분해서 띄우기 생긴 문제점 : export로 보낼려고 하니 전역으로 설정해야 하기 때문에 useState가 먹히지 않는다. 생각해본 해결점 : slice로 값을 만들어서 보낸다. 이 경우 또 다른 문제점으로는 초기값이 바뀐 채로 모두 다 간다는 점이다. 결국 달력을 완전히… Read more

Fetch를 통해서 외부  API를 사용하여 그 값을 state에 저장 할 수 있다 – jsx때랑 사용방법은 동일함 대신 tsx이므로 어제 배웠던 useState에 interface를 넣어서 쓰는 방법을 써야 한다 const []=useState<인터페이스이름>(); 배열 안에 객체형태로 넣을 경우 const []=useState<[인터페이스이름]>(); 복습하는 차원에서 적는 fetch로 받아올 때 쓰는 비동기형식 const getData=async()=>{ const promise=await fetch(API주소)); const response=await promise.json(); 여기까지가 기본 형태로… Read more

팀프로젝트 관련 내용 달력을 여러개 만들어 각각의 용도에 맞게 쓰기로 했다 메인캘린더/마이캘린더 이 부분은 자신의 값만 가져오면 된다. 현재는 더미데이터로 했다. 약속이 잡힌 날을 클릭시에는 해당 약속의 상세내용이나 약속관련 모달창이 나오도록 예정을 잡고 있고 약속이 없는 날을 클릭시에는 아무런 이벤트가 없다 모임캘린더 이 부분은 모임에 해당하는 인원들의 약속이 잡힌 날을 모두 모아서 표시하는 부분이다. 현재는… Read more

TS 함수 사용 방법 : 이전에 했던 props나 state 방법과 동일하다 const 함수이름=(props:만든인터페이스이름)=>{} export default 함수이름; 또는 const 함수이름:React.FC<만든인터페이스이름>=(props)=>{} export default 함수이름; 2번째 내용을 쓸려면 import React from ‘react’를 추가해야한다. FC는 Function Components의 약자이다. 구글에서 찾아본 결과 요즘에는 잘 쓰지 않는 문법이라고 한다. 클래스형에서 이벤트를 쓸 경우 예시 onClick={()=>{this.setState({number:this.state.number+1});}} 이벤트 안에서 함수를 짜는 경우는 일반적인 경우와… Read more

팀 프로젝트 관련 부모 jsx에서 자식 jsx로 값을 줄 때는 props를 사용 가능하지만 js로는 못준다. 그래서 전역으로 값을 옮겨서 export를 붙이고 자식이나 자손js에서는 그 값을 import로 가져 올 수 있다. 이 때 내용의 값을 복제해서 쓴다고 생각해야한다고 했다. 즉, 복제해서 쓴 값을 수정한다고 기존값이 변하지는 않는다. 더미데이터를 들고 온 뒤 map을 이용해 date 값만 걸러내는… Read more

TYPESCRIPT 를 REACT에 적용 설치방법 : npx create-react-app react-typescript2 –template typescript npm을 쓰는 방법도 있는데, 그 방법을 쓸 경우 app과 index의 확장자가 일반적인 설치되었을 때 처럼 js로 되어 있다 props,state,hooks가 없으면 일반적으로 짜던 방식 대로 짤 수 있다 props를 들고오는 방법(class형 기준) 만든 컴포넌트 tsx의 전역에 인터페이스를 만든다 만든 인터페이스를 extends Component옆에 <>에 넣어둔다 상위로… Read more

여러가지 문제점이 생기고 있다 비동기함수이다 보니 실행 후 가져오는 대기시간이 걸려서 정작 useState나 콘솔에 값을 띄울때는 값이 안들어온 경우가 있다 더 나아가 친구 id 값이 생성되었다 없어질때마다 문서id값도 생성되고 없어져야 하는데 그 부분에도 문제가 생겼다 작은 오류들도 발견함 : concat을 쓸 경우 useState에 빈 배열을 넣어줘야 한다.(안넣어주면 에러가 발생함) 친구id를 배열id로 변환 때 배열을 초기화… Read more

간단한 과제-typescript 관련 내용 정리 팀프로젝트 어제 주석으로 따로 메모장에 남긴 부분 – firebase의 friends-자신의 id-friendList에서 친구의 id와 문서들 중 fid 값이 같은 문서의 id값을 배열에 저장하는 함수 오늘 만든 부분 – checkbox의 value가 true가 될 때 배열에 추가, value가 false가 될 때 배열에서 삭제되는 부분 다시 적어보는 친구 부분 삭제의 순서 친구 목록 중… Read more