TIL

오늘 한 일코드캠프 1일차 시작Next.js, yarn, npm 설치 완료froggy와 flex 13단계 및 emotion 연습페이지 하나 완성하기

배열심화 어레이에 문자 추가하기 : 어레이[Index] = '문자' + 어레이[Index] 문자 자르기 변수로 선언된 것들도 .slice()가 가능함 -객체의 키&값 추가하기 : 객체.key = '값' : 객체.다른객체 = 객체

데이터 전송 메커니즘프론트엔드->백엔드->데이터베이스프론트엔드->백엔드 전송경로파일 : FTP간단한 메일 : SMTP텍스트/하이퍼텍스트(HTML) : HTTPAPIREST API주소처럼 생김EX) https://naver.com/board1요청시 axios필요

반복숙달만이 살길이다.알고리즘 공부graphql 연습

container, presenter이모션 불러오는 방법화면에 그리는것a || b a가 거짓이면 b를 그림a && b a가 참이면 b를 그림숫자 0, 문자열 "", boolean false, null, undefined, NaNnull은 누구에게 알려줄 때 의도적으로

map이란??const classmates = '철수', '영희', '훈이'classmates.map((el) =>(el +'어린이'))el= elementsconst classmates = {name:"철수"}, {name:"영희"}, ←{ name: 영희어린이 }

event.target //태그전체event.target.value //인풋에 입력된 값event.target.id // id값new Date()현재날짜getFullYear()현재 연도getMonth() + 1현재 월 +1 안하면 전월 나옴 get Date()현재 일컴

5일차수업내용api로 받는 데이터 타입 graphql codegen유틸리티 타입 utility type협업하는데 규칙 Esling/Prettier/Huskyvoid 매개변수가 없음event changeEvent<뭐가변경됬는지>이중부정연산자!!early exit p

1) 어디든 클릭하면 동일한 로직이 실행되게 하는 것2) 자식에서 부모에게 전달, 역은 이벤트 캡쳐링1) 자식 div에 다 때려박기->비추2) event.currentTarget.id로 하면 됨1) 등록하기 버튼 클릭하면 빈 string 넣어주기(하드코딩)2) 제어컴포

modal 부분 우리가 커스텀 할 수 있다.주소 npmreact-daum-postcode모달창 리셋 하는 방법true false로 준다음켰다 껏다 하면되는데 상황에 따라 다름setState 작동방식은임시저장공간에 setCount(count +1)이 들어가고 함수가 끝나

App.tsx에 한번에 묶어서 페이지 표시하기input에 value를 줘서 데이터 값 받아오기리패치 쿼리 원리: 삭제요청->디비에서 삭제->UI는 남아있음->리패치로 디비 다시 조회 -> 데이터가 삭제되서 삭제된 데이터를 제외하고 불러와짐a태그는 좋지 않다부족한 점1\

타입스크립트 기반 라이브러리는yarn add \~\~~ --dev해줘야됨event.target.id하고 presenter에서id 밸류값을 주고 const로 배열안에 객체를 만들어서 쓰면됨버튼 누르면 다음 페이지 보여주는 법 혹은 무한스크롤const { data } =u

가. 객체와 배열을 복사나. 얕은 복사 깊은 복사다. 스크롤 형태의 페이지네이션 만들기(무한스크롤)String 철수number 2Boolean True객체 1번지배열 7번지중괄호 대괄호로 감싸는 순간 '주소'가 하나 생성됨예시let profile ={ name :

오늘의 목표클래스컴포넌트, this, 컴포넌트라이프사이클클래스란?컴포넌트를 만드는 방법즉 설명서const date = new Date()date.getFullYear()date.getMonth()date.getDate()date를 객체(객체지향프로그래밍-OOP)라고 부

오늘의 목표api데이터베이스 찍먹노드js 서버 만들기(자바스크립트 실행기)오픈api구글에 public api 검색 후 깃허브 사이트 입장auth는 뭔가 자격이 필요함(회원가입 등)https axios 요청시 https로 접속cors cross origin(원래요청) R

오늘의 목표cors그래프큐엘 api백엔드 없을 때 파이어베이스 baas포폴 리뷰mapnew Array(반복할 횟수).fill(아무숫자).map( (\_) => {반복하고 싶은 코드)setState( (prev) //이전값 => ...prev //스프레드 안쓰면 다음 데

규칙 탭에 들어가서 작성하면 됨file업로드<input type="file" onChange={onChangeFile} multiple(여러개)/>app.tsx에서 아폴로업로드클라이언트 설치 및 세팅기존 input을display none을 주고 useRef를 줘서

오늘의 목표1\. 검색 DB이해2\. 검색 결과를 페이지네이션과 연결하기3\. 검색하기 버튼 없이 검색디바운싱(디바운스)반대는 쓰로틀링(쓰로틀)디바운싱특정작업이 있을 때 특정시간 내에 다시 그 작업이 반복되지 않으면 마지막에 한 번 실행하는 것ex)특정시간(0.2초)특

검색결과 데이터처리 props.refetchBoardsCount({ search: data }); 검색한 결과의 총 갯수 1.rest와 graphql의 차이점 가. props의 실체 함수형 컴포넌트는 함수와 동일하다 즉 import Presenter from '

오늘의 목표로그인을 이해하려면 역사를 알아야됨 LoginJWT토큰?? JWT로그인 인증 토큰은 어디에 저장해? Recoil이런 방식으로 하면 session에 계속 쌓이고 api요청이 일어나면 트래픽 과부하가 생기고 메모리를 늘리는(스케일업)이 필요함계속해서 할 수 없기

오늘의 목표NextJs 렌더링 원리 diffing/hydrationclosureHOC/HOF브라우저 스토리지개발자도구 - 애플리케이션로컬스토리지 - 영구적으로 저장중요한데이터 저장하는 건 좋지 않음세션스토리지 - 임시적으로 저장로컬스토리지에 저장시켜두고 새로고침했을 때

오늘의 목표1\. useApolloClient useQuery를 axios처럼2\. Reack-Hook-Form3\. Validation 라이브러리 Yup4\. 재사용위한 공통컴포넌트useQuery/ useLazyQuery/ useApolloClientuseQuery

오늘의 목표const{}와 const\[]원리 : 구조분해할당객체에서 데이터를 삭제해보기 rest parameterHOC는 클래스용 Custom Hooksrefetch말고 Cache-Modify구조분해할당=== 비구조화할당const child = {name : "철수"

오늘의 목표Generic변수말고 브라우저에 저장cookie localstorage sessionStorage비회원 장바구니 BasketGenericany vs unknownany는 자바스크립트랑 동일함unknown은 인자가 들어올 수는 있으나 나올 결과값에 상황별로 코

오늘의 목표웹에디터cross-site-script하이드레이션에서css문제 발생웹에디터react-draft-wysiwygreact quillreact quill은 프리렌더링 하지말고 브라우저에서만 실행시켜야 한다임포트가 아예 되지 않아서 문제가 됨그래서 다이나믹 임포트를

오늘의 목표결제 API Iamport결제시간 Advanced-Date-IssueEventLoop / TaskQueue결제 API결제의 종류카드결제, 계좌이체, 무통장입금, 정기결제 등,,,PG사와 계약을 통해서 결제시스템 구축결제대행사(NHN, 나이스페이, KG이니시스

지도연동SPA-CSR, MPA-SSR3.콜백함수프로미스태스크 큐 종류카카오 지도카카오개발자 접속 상단 내 애플리케이션(폴더라고 생각하면 됨)눌러서 애플리케이션 만들기개발환경에서는 사용 가능하지만 실제로 배포할 때는 검수를 해야됨애플리케이션 만들고원하는 애플리케이션 문서

오늘의 목표1\. 리프레시 토큰2\. graphql이 사실은 rest api였다?리프레시 토큰브라우저에서 로그인 하면 JWT1, JWT2가 발급되고 다시 브라우저에 accesstoken, refreshToken을 발급한다refreshToken은 cookie에 넣는다 c

오늘의 목표1\. 기존이미지 비효율적 FileReader2\. Async-await에 for문을 안써야 한다? promise all3\. 이미지를 내가 원할 때 불러올수 있음 LazyLoad/preLoad기존이미지 비효율적promise alllazyload- prelo

오늘의 목표memoization@mediamemoizationindex.tsx가 아니면 생략이 불가능https://localhost:3000/32-01-memoization/containerstate를 올릴경우 훅을 제외한 모든 것이 리렌더가 됨어디까지?그 자

오늘목표옵티미스틱유아이미리보기 ssr검색엔진최적화옵티미스틱유아이실패할 가능성이 거의 없는 데이터에 사용미리보기 ssr스크래핑, 크롤링다른사이트 정보 가져오기가. get방식으로 https://www.naver.com 으로 해서 html을 받아 올 수 있음근데 이

오늘의 목표1\. 배포를 위한 전체적인 그림 그리기2\. 테스트코드배포배포란?세상에 공개하기옛날 배포방식백엔드, 프론트엔드, 디비 모두 배포요즘 배포방식접속량이 많아지면 메모리가 부족해짐빨리빨리 일처리 하냐 CPU그래서 컴퓨터를 새로 구매해서 트래픽을 분산시킴하지만 이

오늘의 목표1\. 스토리지에 정적파일을 배포하기 SSG/LB2\. 구입한 주소를 입력하면 접속되게 연결해주기 DNS스토리지에 정적파일 배포하기LB(load Balancer)SSG / SSR의 분기점어떤 컴포넌트는 SSG로 갈지 어떤 컴포넌트는 SSR로 갈지 결정해주는

오늘이 목표HTTPS/SSL/TLS3-WAY-HandshakeSSRHTTPS/SSL/TLS루트네임서버전세계 단 13개만 존재HTTPS를 사용하려면인증서가 필요함무료인증서유료인증서인증서를 적용하려면 매우 복잡함그런데 클라우드를 사용하게 되면 클라우드가 제공해주는 인증서가

리액트 네이티브는 껍데기에 불과하고webview라이브러리를 사용해서 안드로이드 IOS같이 개발함하지만 안드로이드 IOS 전부 변환되기 때문에 성능이 조금 느림하지만 고사양 게임이나 그래픽 작업이 아닌 이상 리액트네이티브로 커버가 가능함하지만 서비스 규모가 커지면 안드로