프론트엔드_TIL

React 수업을 위한 도구 설치React 폴더구조다른 폴더의 파일 불러오기react의 html(jsx)reat의 css (css-in-js) - emotionNode.js란?React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든

리액트 (리액트로 자바스크립트)React componentReact-Hooksstate 종류리액트는 부품 조립방식으로 개발이 진행됩니다.(컴포넌트 기반) 리액트의 핵심은 컴포넌트!! 그렇다면 컴포넌트란?UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것기존에 페이지

HTTP 통신HTTP 요청과 응답APIAPI와 CRUDGRAPHQL, playGround 실습API 요청 연습HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길입니다.HTTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있

동기실행, 비동기실행호이스팅apollo-client apollo-client 로 graphql 뮤테이션 실행graphql 뮤테이션에 async / await 적용❗️응답 기다리기 ➡️ 동기❗️안기다리기 ➡️ 비동기동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후

라우터 객체와 라우팅정적 라우팅과 동적 라우팅비동기 통신과 조건부 렌더링graphql 뮤테이션에 try ~ catch 적용apollo 디버깅 툴라우터(router)객체란 페이지 이동과 관련된 기능을 가지고 있는 객체입니다.이 객체를 사용해서 A 페이지에서 B 페이지로

폴더구조propsexport vs export defaultatomic 패턴주소 설계할 때 아래의 이미지처럼 만들 수 있습니다.그렇다면 수정하기는 /boards/edit?수정하기는 몇번째 게시글을 수정할 것인지 설정할거라서 보통 폴더명이 위와같은 규칙을 따른다 => 레

리액트의 데이터 흐름emotion에 props 던지기state 리렌더컴포넌트 안에서 router 사용시 주의점주소 설계하는 방법리액트의 흐름은 단방향입니다. (부모 ➡️ 자식에게만 전달 가능)부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수/함수는 props 이었습니다.

👉🏻 모두 실습으로 진행1\. library폴더의 utils 파일 관리2\. 컴포넌트 재사용성3\. 수정한 값 바꿔주기폴더명 아래처럼 만들고 과제진행하기리뷰 폴더에 목록 만들 때 인덱스값으로 글 나타내주기\-> 근데 아이디로 보여주는게 좋다날짜 받아오는거 자바스크립

수정하기 창에서만프리젠터에서 값 수정하면 수정된 값만 전송상세 페이지에서 패치보드랑 유즈쿼리 오른쪽 수정으로 가져오기수정페이지에 data={data} 묶고 컨테이너 와서 data={props.data} 해가지고 컨테이너에 보내주기. 프롭스 드릴링2번이 조금 더 효율적이

수업 리뷰제목, 내용중 하나라도 입력이 되어있을 원래의 코드로직 (밑에 더 김...)이럴때는 반대케이스를 적는다.early-exit 패턴 (먼저 종료시켜서 조건문이랑 ? 나뉸다)이프리턴 구문if return 구문여기서 리턴은 333을 돌려주고 함수를 종료한다. qqq를

픽 은 데이터, 아이크ㅓ리패치버드아규먼트는 보드아이디 isActive 확인(emotion에 props.isActive상세페이지 index 안 파일에 나는 상세보기 안에 넣어주었다.(상세페이지 프리젠터 밑)차이점: 상세보기, 댓글작성, 댓글 목록을 따로따로 해놓으면 나중

라이브러리(UI 프라임워크)스코프Modal라이브러리(UI 프라임워크)를 사용하면 시간절약, 버그 최소화라이브러리는, 적용하는 능력을 키워야한다. 공식문서를 통한 라이브러리 습득력을 키워야한다. 계속 최신 라이브러리가 나오기 때문ㅇㅔ!!10,000,000만이 넘는 라이브

레이아웃 구조잡기레이아웃 HIDDEN 영역 설정하기슬로벌 스타일 적용하기폰트레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미합니다.app.tsx 작동원

캐러셀 넣을 때 요거 넣어야 잘 나온다. 참고!navigation 컨테이너, 프레젠터 리팩토링 하기 전 코드여기에 결제페이지로 가려면 프레젠트에 온클릭하나 추가, 컨테이너에 함수 하나 추가, 타입(지금은 any) 추가 프롭스로 넘겨줄거 하나 추가 .... 엄청 많다!➡

수업 리뷰 댓글 무한스크롤 컨테이너랑 프레젠터, ui와 함께 확인 밑에 덩어리들을 컴포넌트로 분리시킨다면, 댓글마다 독립저인 컴포넌트가 될 거다. 만드는 방법은 isEdit, isEdit를 주고 분리가 되었고 아이템이라는 컴포넌트로 관리했다. > > ![](http

리뷰open api 할 때 cors가 no, yes 있었는데, 이게 뭔지 자세히 알아봅시당 (일단 yes있는걸로 하기!)SOP : same origin policy 예를들어 네이버 브라우저에서만 네이버 백엔드에 , 다음 브라우저는 다음 백엔드로만 데이터 보낼 수 있음.

🏷️ 수업 목표 객체 / 배열 복사 댓글 수정하기 무한스크롤 refactoring - 스프레드 연산자

🏷️ 수업 목표 이미지 프로세스 이해 이미지 업로드 해보기 HTML 기본 파일태그 숨기기 이미지 검증 1. 이미지 프로세스 이해(이미지서버, 스토리지) 이미지 프로세스를 이해하기 위해서는 storage사용을 알아야한다. 스토리지 또한 컴퓨터이고, 여러 컴퓨터를 연결

이미지등록 리뷰검색 프로세스 이해검색버튼 없이 검색 비다운싱 & 쓰로틀링Lodash 디바운싱 구현예시 이미지와 같이 사진 첨부 버튼을 총 3개 만들어봅시다!3개의 이미지 첨부 버튼이 화면에 노출되도록 하려면, map을 실행하는 배열의 길이가 일정하게 3이어야 합니다.

우리가 사용했던 props는 언어를 맞춰주었던 것 뿐. 사실은 아무거나 써도 상관이 없던것이다!..!>!!>!> 여기서도 왼쪽이 인자, 오른쪽이 매개변수라서 아래이미지처럼 이름 막 바꿔줄 수 있다. ![](https://velog.velcdn.com/images/

로그인의 역사단방향 암호화(해싱) 양방향 암호화토큰을 같이 보내주는 방법JWT 토큰과 조작 불가능성 이해브라우더에서 특정 email, password를 가지고 로그인을 하게되면 백엔드로 loginAPI 요청이 가게되고, 백엔드에서는 해당 유저가 있는지 디비에서 확인후,

카카오 맵 API카카오 맵 구현refetch 문제점과 개선방안카카오 개발자 페이지에 접속!카카오 맵 뿐만 아니라 다양한 API가 적용된다. 로그인 후 애플리케이션 추가(프로젝트 폴더 생성과 비슷)애플리케이션 생성된거 클릭해보면 해당 애플리케이션의 앱 키 목록을 볼 수

웹 에디터(React-quill)react-hook-form과 함께 사용하기크로스 사이트 스크립트(XSS)하이드레이션 이슈게시물을 등록할 수 있는 페이지를 만든다고 가정했을 때,input과 textarea 태그를 이용해서 다음과 같이 입력란을 만들어 줄 수 있습니다.그

1\. 카드사각각의 카드사에게 승인을 받아 결제 시스템을 구축하는 방법입니다. 신한카드, 하나카드, 농협카드 등등 현존하는 다양한 카드 회사들은 지원하는 결제 방법이 전부 다릅니다.그렇기 때문에 모든 경우를 고려하여 결제 시스템을 개발하려면 인건비와 시간이 많이 소요됩

RefreshToken새로고침시 토큰 유지하는 방법Promise, ObservableRefreshToken이란, 사용자의 로그인 정보를 담고 있는 JWT토큰 데이터입니다.이전에 학습했던 로그인 인증/인가 과정을 다시 한 번 봅시다.AccessToken 데이터는 일정 시

성능최적화메모이제이션(Memoization)map, memo의 관계CRP(Critical Rendering Path)이렇게 만들어 놓은 후 let과 state의 버튼을 눌러보도록 하겠습니다.콘솔을 보면 let은 버튼을 누르면 콘솔값은 올라가지만 리렌더가 일어나지 않아서

테스트 코드일반적인 단위테스트 실습TDD테스트라고하면 마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 것 입니다.어떤 사이트를 런칭하기 위해 개발자들이 몇달간 열심히 개발을 해서 1차개발이 완료되었다고 가정해보겠습니다.그럼 이후에 2주정도 버그가 있는