React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구입니다.React를 사용하기 위해 OS에 Node.js 와 Yarn을 추가적으로 설치 했습니다.터미널을 이용해 폴더에 수업에 필요한 프로젝트를 설치했습니다.codecamp
readonly = 읽기 전용 수정 불가disabled = 비활성화컴포넌트: 다른 곳에서 import해 재사용 (margin 보다 padding사용)리액트 쓰는 이유1\. 쓰는 사용자가 많다2\. 리액트 React.js, React-Native 앱(크로스플랫폼), Re
HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길 입니다.HTTP 라는 길로 요청과 응답 2가지를 서로 주고 받을 수 있습니다.서로 통신할때 두 곳 인터넷이 연결 되있어야 합니다.프론트에서 데이터를 HTTP를 통해서 백엔드 컴퓨터로 보내고 데이터를 DB에 저장 해
비동기 실행: 서버 컴푸터의 작업이 끝날 때까지 기다리지 않는 통신으로 여러 가지 요청을 동시에 처리해 줄 때 사용합니다.동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신입니다.자바스크립트는 default로 동기적 방식입니다. ( 위에
브라우저는 모두 다르지만 하나의 백앤드와 DB는 하나로 공유 하고 있다.등록해줘 요청$가 두개가 있는 이유 다른 API를 묶음 배송을 할 수 있기 때문에한 줄 씩 코드 실행뒤에 writer = state writer키와 value 가 같으면 생략가능 (shorthand
비밀번호는 보안상 불러오지 않고 보내기만 하면 알아서 틀렸을 시 백엔드에서 에러 처리 해줌return = 함수의 종료early exit 틀린거 먼저 종료하기리팩토링 패턴alert("asdfconfirm("입력")prompt("비밀번호 입력해주세요")const mypas
이번주 핵심: 라이브러리3주차 커리큘럼오늘 목표:리뷰는 정답이 아니다.( 다양한 방법이 있다. )외워서 할 수는 없다. ( 안보고 할려면 5년 정도 걸림. )댓글 목록을 불러올 때는 댓글 게시글의 ID가 필요하다. 떄문에 variables로 아이디를 가져옴.BoardL
유튜브좋아요/싫어요댓글(별)유튜브 스타일 주기!! 이중 부정연산자있으면 true, 없으면 false{props.data?.fetchBOard.writer}const writer = "철수" 를 boolean 타입으로 변경하고 싶으면{!!writer} 을 쓰면 true가
인풋 창에는 벨류값이 존재한다.value 는 창에 나타나는 글내가 안된것: 우편번호 검색을 한후 수정할 때 zipcocde,address 디폴트값 가져오기해결 방법:defaultValue 는 value가 없을 때 작동한다. 그래서 value가 빈문자열로 있으니 디폴트가
14일 차 수업스프레드 연산자 주석치리 한 것을 흩뿌려준다는 의미import Slider from "react-slick"; 타입 오류가 난다.타입 스크립트 쓸 때 추가해서 오류 없애기id를 이용해 onClick 을 똑같이 준다.refetch 를 onClick에 넣어주
오늘 목표 다음 페이지 클릭했을 때 2교시 댓글 수정 ![](https://velog.velcdn.com/images/songinho96/post/f2b54
깃 다시props drilling: props를 부모가 자식에게 물려주고 자식이 그 자식에게 물려주는 방식 많다고 좋은것은 아니다파일을 나누면서 container : 자바스크립트 영역 presenter : HTML ( JSX ) 영역기능을 연결시켜 주기 위해
백엔드를 만들어 본다.fireBase를 이용하면 백엔드 개발자 없이 프로젝트 만들 수 있다.hasMore가 true일 때 마우스 스크롤이 내려갈 때 loadMore이 실행된다.마우스를 내리면 (1~20) (21~30) 까지의 데이터를 불러와 10개씩 계속 추가 된다.데
구글 public api 검색open api를 이용해 백앤드 개발자 없이 만들어 볼 수 있다.HTTP / HTTPS 배포할 때 배우지만 HTPP는 주의요함이라 뜸AUTH 무료이지만 회원가입이나, 절차를 진행해야지 쓸 수 있음CORS NO: 브라우져에서 사용 불가능 (모
BAAS : Backend as a service 1교시 포트폴리오 리뷰 맵을 이용하면 onClick이벤트도 하나만 주면 되고 새로 추가 할때도 한줄만 추가 하면 페이지 이동까지 할 수 있다. useState 타입 주는 방법 ![](https://velog.
파이어베이스 페이지uuidv4 는 키값이 없을 때 사용하는 값uuid를 import 해줘야한다.타입스크립트도 설치이미지, 동영상 저장을 시키기 위해다른 회사에서 제공해주는 컴퓨터( 구글을 사용 )<input type = "file /> 을 사용하면 선택 버튼이 나
업로드를 컴포넌트로 나눠준다.fileUrls 배열 안에 3개의 빈 문자열을 만들어준다.인풋타입 file은 display: none으로 숨김처리하고,fireRef로 uploadButton이 클릭됐을 때 ref로 클릭 시켜줘onChangeFile: checkValidati
1교시 포트폴리오 리뷰 검색부분도 컴포넌트로 나눠준다. 페이지도 리페치 해줘서 없는 페이지는 안보이게 한다. 2교시 props ![](https://v
백엔드에 로그인 기능이 있고 브라우저에서 email/pw 를 넘긴다.백엔드에서 DB에서 일치하는 이메일과 비밀번호가 있는지 확인하고있으면 그 유저가 로그인 했다 기록을 한다.( 백엔드 메모리 세션에 저장 )메모리: 램에 저장( 컴터 껐다 키면 사라짐 )디스크: 영구저장
git stash 수정했을때 다시 풀포트폴리오 리뷰 / 컴포넌트 재사용 / 등록하기,수정하기인덱스 활용key는 중복되는 키가 들어가면 안된다.index는 들어가기 적절하지 않다.삭제하면 아래있는 인덱스가 올라오게 된다.버튼 클릭했을 때 페이지 이동id={el.\_id}
디폴트값 보여주기수정하값 보여주기defaultValue 초기값수정할 때 입력을 안하면 빈칸으로 받을 때 방법.1\. mutation에서 제외하기2\. state 디폴트값에 props 넣기1번을 쓰는 방법이 좋음2번을 쓰게 되면 수정할 때 바꾸지 않아도 모두 들어가서 네
Token 은 변수에 담아줬기 때문에 새로고침을 하면 사라지는 것이다refreshToken을 배우면 그걸 이용하지만 배우기 전까지 임시로 localStorage를 이용해 Token을 담아주겠다.localStorage 는 보안상의 문제가 있어 권장하지 않는 방법이다.새로
지금 까지는 온클릭하여 페이지를 이동할 때 그 id값으로 이동하도록 router를 걸어 주었다.하지만 좋은 방법은 아니다. 중복이 될 수도 있기 떄문에.그래서 이제 id를 빼주고 옮기는 법을 알아보겠다.눈에는 보이지 않지만 onClick 함수는 onClickMove(
3개의 변수를 만들려면 3줄이 필요하다.이렇게 하면 한줄로 해결할 수 있다.중괄호로 감싸준 이유는 단지 객체이기 때문에지금 까지 써왔던 useQuery라는 함수를 실행 시킬 때 사용해왔다.즉 return 값이 data, loading을 가지고 있는 객체이다.useSta
any: 어떤 타입이든 다 넣어도 된다.any를 사용하면 js랑 다를것이 없다.unknown: any보다 좀 더 안전성을 중요시한다.unknown도 어떤 타입이든 넣을 수 있는데, 함수 안에 사용할 때 각각 타입을 써줘야한다.any를 사용하는 것 보다 unknown을
웹에디터: wysiwyg 라고 불린다.많이 쓰이는 wysiwygtoast-ui-editor 가 좋은듯.React-Quill 을 사용하겠다.React-Quill onChange는 html onChange가 아닌 만든 사람의 onChange여서 event가 들어가지 않는다
PG사 = patment Gateway( NHN, Nicepay, KG이니시스 )PG사 랑 계약을 해야한다.만약 NHN이랑 계약을 한뒤 바꿀려 하면 굉장히 복잡한 과정을 다시 따라야한다.그래서 결제솔루션 회사가 나왔다.결제솔루션은 각 결제회사에 대한 api를 만들어놔서
카카오 지도를 이용해 보겠다카카오 뿐 아니라 나머지도 다 있다.키값 받고 map 그리기router.push 로 버튼을 클릭했을 때 페이지 이동을 하면 애러가 발생한다.하지만 a 태그로 페이지 이동을 하면 이상없이 동작한다.이것은 single-page applicatio
만료가 될 때마다 다시 로그인 해줘야하는 귀찮음이 생긴다.이때 referesh Tokken을 사용한다.로그인 할 때 accessToken 과 refreshToken을 두개 만든다.대신 만료시간이 다르다accessToken ( 30 ~ 120분 )refreshToken
container 나 presenter로 페이지를 이동하고 싶으면이런식으로 쓰면 페이지 이동이 가능하다.render 시, 변수가 새로 만들어지는 상황함수가 새로 만들어지는 상황부모 리렌더시, 자식도 리렌더되는 상황을 막기위해 어떻게 해야하는지 알아보겠다.state는
기존 이미지 등록을 할 때 이미지를 담아뒀다가 뒤로가기를 하면,storage에는 이미지가 남아있지만, 게시글은 생기지 않는다.데이터가 낭비된다.해결스토리지에 저장하기 전에 파일을 볼수있는 Url을 만든다.그리고 등록하기 버튼을 클릭 할 때 연달아서 스토리지가서 Url가
가비아, 고대디 도메인 가입하기수업때는 가비아AWSoptimistic-UI 는 낙관적 UI라고 불린다.예를 들어 좋아요 버튼을 누를때원래 요청을 보내면 백엔드에서 DB로 가서 데이터를 받아와야하지만요청보내고 성공 하겠다 가정하고 바로 cashState를 바꿔서 업데이트
터미널에 npx create-next-app class_build 쳐서 class_build 폴더 생성 react 17버전으로 다운그레이드 배포를 할 때는 y
http 는 와이어샤크를 이용해 패킷을 보게되면 정보가 그대로 나오게 된다.hhtps 를 사용하면 데이터가 암호화되어 정보를 볼수가 없다.SYN => SYN + ACK => ACKip 흐름: 브라우저 => 백엔드서버 SYN백엔드서버 => 브라우저 SYN, ACK브라우저
큰서비스웹, 안드로이드, ios 따로 개발을 한다.웹: 앱이 있어도 반응형 웹을 만든다. (모바일, 태블릿)오프라인기능, 주소클릭하면 바탕화면에 아이콘 설치프로그레시브 웹앱을 사용하면, 핸드폰으로 쓰는 기능을 작동시킬 수 있다.웹중심의 회사다!웹 버전, 태블릿 버전,