Category: 수업내용

팀 프로젝트 오전4시간 내용 현재 생긴 문제점 : 초기에 로딩 시 세션 스토리지에서 값이 가져오기 전에 export 안의 값들이 실행되어서 세션 스토리지의 group 값이 비어 있어서 map이 과 같은 배열 함수들이 막히게 된다 강제로 딜레이를 줘서 세션스토리지에 값이 들어오면 실행하게 했다. 대신 다른 문제점이 생겼는데 달력의 일 수 만큼 반복을 한다는 점이다. 그 과정에서 받아온… Read more

팀 프로젝트 작업 캘린더 약속 있는 칸 : 약속 상세내용 불러오기-모달창 띄우고 날짜값도 해당 날의 값을 받아오기까지 했다. 이제 문제는 해당 날짜에 약속이 있는 모임을 골라야 하는 점인데 이 파트가 난해하다 날짜값까지 찾아가는 방식이 groups(컬렉션)-해당모임id(문서)-gAppoint(배열)-N(인덱스번호)-time(날짜)인데 어떻게 인덱스마다 일치하는 값을 찾아서 들고올 지가 문제이다. 즉, 2번의 반복문이 필요하다. 1번째 반복은 자신이 속해있는 모임별로 반복이 되야 하고… Read more

개인과제 관련 내용 간단하게 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