코드캠프 4기 (31) 썸네일형 리스트형 코드캠프 4기 - 11월 16일 에러는 잘못써서 실행이 안되거나 실행중에 문제 발생 버그 실행은 잘 되지만, 원하는대로 실행이 되지 않음 prev setCount((prev) => prev + 1); 임시저장소에 있는것도 꺼내오는 것 예상치 못한 예외를 방지하기 위해 실무에서 prev를 많이 사용한다. 코드캠프 4기 - 10일차 early-exit 패턴 : 유지보수가 좋다 함수 return 반환수 함수는 실행을 종료한다. return = 종료 for문에서 반복문을 중단시킬때는 break를 쓴다. yarn add Aaa yarn add @types/Aaa 아래와 같이 타입스가 적용되어 설치 해당하는 서비스에 따라 제공하지 하지 않을 수도 있음 (any를 써야함) API로 받아오는 데이터 (object, array) REST_API의 경우 일일이 만들어야함 API 응답 데이터는? GRAPHQL-CODEGEN playground schema =>타입들 codegen.yml 해당주소의 스키마를 다운로드(동기화) argument 입력데이터 result 받아오는 데이터 코드캠프 4기 - 8일차 - 날짜 보여주기 테이블 태그는 스크롤 달려서 많은 정보를 보여줄때 주로 쓴다. 날짜 예쁘게 나오게 하기 날짜 바꿔주는 기능 new Date() console.log(aaa.getFullYear()) getMonth() 월 getDate() 날짜 getDay() 요일 괄호 안에 특정 날짜 넣기 괄호가 비어있느면 오늘날짜를 조작 자바스크립트 month는 0부터 시작 코드캠프 4기 - 6일차 5일차 리뷰 폴더정리 가이드 /boards 목록보기 /boards/new 등록하기 /boards/[boardId] 상세보기 /board/edit 수정하기로 했을때, 어떤 게시글을 수정할건지 안나온다. edit 원래 있을것을 꼭 찝어 수정하는 것. /board/[boardId]/edit 수정하기 Optional Chaning vs Nullish-Coalescing data && data.fetchProfile data?.fetchProfile 조건에 따라 화면에 그린다 data가 없으면 data.fetchProfile을 보여준다. default value 형식으로 많이 사용된다 있으면 true / 없으면 fall 거짓의 영역 0 '' false null (프로그래머가 강제로 비워준것) undefined (.. 코드캠프 4기 5일차 - 오류 해결기 오류 1 routed된 page에서 주소가 깨지면서 페이지가 불러오질 못하는 현상 발생, %02% 등 알수 없는 기호와 숫자가 같이 붙어서 나옴 코드 작성시, 템플릿 리터럴 앞에 공백 등 다른 문자포함 잘못입력하여 나오는 문제였다 인코딩/디코딩 개념 https://200301.tistory.com/9 [인코딩 & 디코딩] 개념 [인코딩 & 디코딩] 오늘은 어제 문제를 풀면서 헷갈렸던 내용에 대해서 정리하고자 한다. 내용을 알고 있지만 두루뭉실하게 개념이 잡혀있어서, 문제를 풀때마다 매번 혼란이 오게 된다. 그래서 200301.tistory.com 코드캠프 4기 - 5일차 라우팅? 라우팅은 페이지를 이동하는 것이다 기본은 정적 라우팅 페이지 이동시 사용하는 도구 const router = useRouter() 👇 router.push("이동할 페이지") *라우터 다른기능들 노션 참고* 라우팅 종류 정적라우팅 동적라우팅 1 2 3들을 [aaa] 변수로 받기 ***중요 : [] 꼭 대괄호 안에 넣기 [aaa] 변수로 인식하는 것 /boards/13 index.js 13이란 값은 aaa라는 변수에 담기고, 페이지로 이동한다 접속되는 페이지는 똑같지만 aaa = 13 aaa = 12 변수가 달라진다 페이지는 하나만 만들고, 변수를 동적으로 받을 수 있게 한다 aaa는 어디에 들어있을까? const router = useRouter() router.query = { } query .. 코드캠프 4기 - 4일차 - 프로젝트 오류 해결기 오류 1 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? JSX는 자바스크립트이기 때문에 for는 반복을 의미한다. for가 아닌 htmlFor을 써준다. 유튜브 사진 오류 2 Unhandled Runtime Error Error: Failed to fetch 서버 충돌 문제였다. 그래서 코드를 아무리 수정해도 (프로젝트 파일 코드에는 문제가 없었음) 오류를 잡을수 없었던 것이다. next.js는 기본적으로 포트 3000를 쓰는데, 3000은 어디선가 사용중이었고, 그러다 3001를 만들어 쓰다보니 서버가 꼬였던것. 그래서 이런경우 강제로 포트를 종료시켰다. 명령어 : npx kill-port 3000 3001이 아닌 기본포트 3000을 계속 .. 코드캠프 4기 - 4일차 React 4강 비동기/동기 통신 서버와 데이터를 주고 받는 방식 동기? 비동기? 동기(응답이 모두 끝난 후 요청) 자바스크립트 자체는 동기 대부분 외부 요청 라이브러리 디폴트는 비동기 (기다리지 않고 불러오기) 비동기는 오래걸릴때 사용한다 (예 : 이메일 전송하기) 비동기를 동기로 바꿔주는 연습 비동기를 동기로 바꿔주는 명령어 async / await apolllo 가 axios보다 좋은점 : 임시저장이 가능하다 const [실행함수] = useMutation() apollo에서 가져오기 import {useMutation} from '@apollo/client' graphql를 요청할수 있는 기능을 만들어 준다 오늘의 공부 팁 apollo사이트 들어가서 docs 보는 연습하기 오타는 더블클릭해서 확인.. 코드캠프 4기 - 3일차 두 컴퓨터간 데이터 전송 API 요청을 받아주는 담당자 게시물 데이터 -> 요청 -> 게시물 저장 API (함수) 응답 데이터 코드캠프 4기 - 2일차 Javascript 배열 데이터 조회 indexOf 데이터의 index 값 반환 includes 데이터의 존재 여부 반환 true/false includes는 데이터가 있는지 없는지 확인할 때 쓴다. 객체 데이터 추가 const Obj = { } Obj.name = “철수” 이미 key값이 있으면 value만 변경 객체 데이터 변경 delete Obj.name React에서 Const, 다르게 쓰인다 import {useState} from 'react' // react에서 useState 기능을 사용할수 있도록 불러오기 const [fruit, Setfruit] = useState() fruit는 변수이름 Setfruit는 변수를 바꾸는 기능 useState() 괄호안 값은 초기값 작성법은 기존 JS방.. 이전 1 2 3 4 다음