부트캠프기간중 블로깅

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 백틱문자를 사용한다. (tap키위에있는것)템플릿 리터럴을 쓰면문자열 표현시 +를 사용해onst first = 'Ung-mo';const last = 'Lee';con

정보데이터를 받아올때에를 하게 되면 언디파인드가 나오게된다.아직 callApi기능이 데이터를 가져오지못한채 result값에 들어가 콜솔로 표현되기 때문!!이때 사용하는것이 anync와 await이다(정보를기다렸다가 받으면 담는다)둘이서 셋트!!사용해서 표현하면 다음과

예외처리{try {}catch( ){}}try와 catch가 함께사용되며, try문을 실헹하고, 실행예외사항이 생겼을때 cacth문이 실행된다정보를 주고받는데 사용되는함수에 적용해서 에러문을 콘솔에 받을수 있다예를들어로 사용가능하다

Routing/페이지 이동Apollo-Client/Query/게시물 가져오기try-catch/aPI요청에러라우팅const roeuter = useRouter()\-> router.push("이동할 페이지")Queryconst {data} = useQuery(FETCH_

부정연산자!true\->false!"사과"\->false!!"사과"(이중으로 부정되서 긍정이됨!)\->false!false\->true\*\*옵셔널 체이닝조건부렌더링을data && data 참이면 뒤에거가 보여짐data|| data 거짓이면 뒤에사 보여짐data &&

a에는 5 b에는 7이 기본값이다가 1이 a로들어가서 a는 1 b는 7 이 나온다서로 위치를 바꿔서 표현해주면 됨함수에 넣어서도 사용이 가능var a, ...b = 1, 2, 3;console.log(a); // 1console.log(b); // 2, 3...으로 시

수업내용 SQL === RDBMS (관계형 데이터베이스 관리 시스템) 테이블형식 표 사이에 관계성을 부여할 수 있음 Oracle/MySQL/Postgres NoSQL===테이블 형식으로 구성되지 않고 테이블 형식이없는 비 관계형 형식의 데이터관리법 document(

console.log(child)var child = "철수"라고 콘솔창에 입력했을때 언디파인드가 나옴console.log(child2)const child2 = "철수"라고 콘솔창에 입력했을때Uncaught ReferenceError: child2 is not def

얕은복사와 깊은복사중첩객체(객체안의객체)를 복사할때 얕은 복사가 발생된다.얕은복사를 해올때는 객체안에있는 값이아닌 메모리 주소를 참조해 오는것!깊은복사는 원본객체에 할당된 값 자체를 복사해 사본객체에 할당해준다let child2=child1했을때 내용만 복사가 아닌 그

클래스형 컴포넌트와 함수형 컴포넌트!!클래스형을 이전까지 많이사용했지만 리액트에서 훅을 지원해주면서부터함수형을 더 쓰게되었음그런데 이미 클래스형으로 작성되어있는 곳들이 많고 그걸 바꾸는 작업들을 많이 하고있다보니, 현재상황에서는 둘다 알아야하는 ㅜㅜ특히 클래스형 컴포넌

컴포넌트 라이프사이클(생명주기)클래스형 컴포넌트의 경우엔 위와같이 사용됨! componentDidMount/componentDidUpdate/componentWillUnmount 를 함수형에서는 useEffect 하나로 작성하게되는게 표현방식이 각각 다르다! 어떻게 다

useRef!!리액트 훅중 하나로A버튼을 누르면 q버튼을 누르게되는 기능으로 활용할 수 있다.특히나 파일업로드 input의 못생김을 ㅎㅎ 감추는데에 사용했다.

router.push('/?counter=10', undefined, { shallow: true }) shallow: true로 지정하면 얕은 라우팅을 사용 할 수 있다. 페이지는 교체되지 않고 경로의 상태만 변경 좀더 알아봐야 할듯 하다 ㅠㅠ

Object.keys는 객체의 키값만 빼와서 배열로 보여주는 매소드!!!Object.values는 객체의 벨류값만 빼와서 배열로 만들어줌!!!

브라우저 자체에도 저장할 수있음!관리자화면의 어플리테이션, 로컬스토리지, 세션스토리지key 는 aaa www세션(껏다가 키면 사라짐)과 로컬(껏다켜도 안사라짐)은 그냥 브라우저 저장쿠키에 저장된것은 백엔드로 보낼수 있음 만료 정해두면 만료됬을때 사라짐비회원으로 장바구니

(aaa())() ==>aaa() 감싸고있는 괄호는 생략가능!aaa() 가 bbb함수를 리턴하게됨그 bbb 함수를 실행하려면() 를 해줘야함!!aaa()() 에 bbb라는 말은 아예없는데 bbb가 실행됨!결국 bbb의 이름은 어떤거든 상관없음\~~스코프체인에의해서 내부

하이어오더컴포넌트로그인검증을 모든 페이지에서 계속 해야한다면?? hoc 사용하깅hoc 는 보통 이름을 with 를 붙혀 쓴다.우리는 whithAuth 라고 해보게똬(인증여부검사)앞에with라고 붙었다 ? 그럼 hoc 인지 확인해봐야함f는 펑션jsx를 리턴하면 컴포넌트

핸드폰 010-1234-56783,4,4,-를 검증해야할때 for 문과, if문을 사용해서 하다보면 너무 까다로워진다.그때 사용하게 되는것이 정규표현식!!정규표현식을 사용하게되면 쉽고 깔끔하게 표현하게 된당!!회원가입시에 많이 사용하게된다!!!(이메일검증, 비밀번호검증

로그인한경우에만 들어갈수있도록 해놓는 페이지!!상품판매/등록의 경우에는 판매자 정보가 확실해야하니 당얀히 로그인을 해야할듯!거기서 더 쪼개서 들어가면 예) 배민우리가 사용하는 배민 주문자용페이지(그중 로그인/비회원)배민 음식점 사장님페이지배민 라이더 페이지배민 회사의

재귀함수란 자기자신을 리턴하는 함수이다.예)요런식으로!!리액트 훅 같은경우 자바스크립트식 안에서 사용할 수없는데 그럴때for문 map, while 대신 사용하시 용이할 듯 하다.

배열안의 배열 이 있는 구조를 unflatten 이라함그리고, 쭉 평탄하게 되어있는 구조를 flatten 이라한다.unflatten한 배열을 flatten 하게 만들때 flat 매서드를 사용할 수 있다.기본값은 1이다.falt(평탄화할 깊이)flat 매서드를 사용해서

오 생긴걸 보아하니 map,filter, setTimeout 이랑 비슷한듯 ㅋaaa((){}) aaa는 자기꺼 실행해서 리절트를 자기한테 들어온 함수를 qqq라는 이름으로 받아서 qqq에 result넣움원래 어웨이트가 없을때는 비동기적인 로직을 위와같이 동기화처리를 진

우리가 알고있던 setTimeout,setInterval 은 올바르지 않다??왜인감...??먼가 로직이 순서대로 실행되질않는다.0초뒤에 실행되도록 했는데도???알려면 자바스크립스의 원리를 알아야한다.스택구조(리포구조) 큐우구조(피포구조) 생각해보자.스택 = 콜스택 큐

오 생긴걸 보아하니 map,filter, setTimeout 이랑 비슷한듯 ㅋaaa((){}) aaa는 자기꺼 실행해서 리절트를 자기한테 들어온 함수를 qqq라는 이름으로 받아서 qqq에 result넣움원래 어웨이트가 없을때는 비동기적인 로직을 위와같이 동기화처리를 진

RxJS는 ReactiveX의 Javascript를 위한 라이브러리RxJS 중 observable!! 결론만 말하면 프로미스랑 비슷한데, 여러개의 답변을 받을 수 있다는 점, 구독할때 실행된다는 점, 중간에 멈출수 있다는 점이 다른점이다.!Observable은 생성,

브라우저에서 사진 선택하면 업로드 파일통해서 스토리지에 등록하고 url을 받아옴 url을 img src에 넣어서 미리보기 함.등록하기 누르면 imgUrl,title,contents 가 백으로 넘어가서 DB가서 저장됨문제점 1) 사진선택후 미리보기 시간이 좀 걸린돱..문

LazyLoad 무한스크롤처럼 밑으로 내릴수록(페이지에따라) 조금씩 더 로딩해오는거\-->라이브러리사용!yarn add react-lazy-loadPreLoad 미리 사전에 받아놓았다가 그려줌\--> 코드 몇줄!얽 랜딩페이지에서는 기능을못함! 딱 켰을때 있는 이미지말고

클릭하면 받아서 bd에 올리고 기다렸다가 받아오기...?그것보다는 글로벌스테이트에 라이크를 2로 바꾸고 보여주고그다음에 api요청하고 그다음 db받아온다음에 글로벌이랑 확인하고 같으면 끝Optimitstic-UI 는 실패해도 크게 상관없는 정보! 별거없는 정보(99%

Memoization 메모Media 반응형 모바일리랜더링할때는훅만 빼고 다시 만들어진다.(자식컴포넌트까지도 다시 만들어짐)React Developer Tools 를 깐 상태에서 페이지에서 랜더링을 하면 랜더링 상황을 볼 수 있다!부모 컴포넌트가 랜더링 되어도 자식 컴포

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환함누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)요렇게 네개의 인자를 받을 수 있음.사실 이건 쓰면서 이용하는게 좋다!!참고로

width: calc(100% - 300px);