React

💡 리액트는 SPA(Single Page App) 구조입니다.

1. 리액트(React.js)란? : 페이스북에서 제공해주는 프론트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI를 만들어 사용자에게 보여진다. 웹 페이지를 만들기에는 html, css로도 충분하지만 htm

실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다. > 실제 (무거운)돔의 가벼운 사본 같은 개념 > 리액트가 가상돔을 반영하는 절차 특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는

보일러 플레이트 우리는 이렇게 초기 셋팅이 완료된 폴더를 보일러플레이트라고 합니다. 보일러플레이트는 회사마다 다를 수 있습니다. 각 폴더의 한 줄 요약입니다. 프론트엔드의 각 페이지 화면들(pages) pages 폴더는 프론트엔드의 페이지 화면들을 모아놓은 폴더

다른 폴더의 파일 불러오기(import / export) React에서 다른 폴더에 있는 파일을 불러올 수 있습니다. 예를들어, 한글 문서를 작성할 때도, 하나의 파일에 모두 작성하지 않고, 여러개의 파일에 종류별로 나누어서 작성하면 효율적으로 관리할 수 있습니다.

JSX는 React에서 사용하는 React 전용 HTML입니다. React에서는 HTML 대신 JSX(React 전용 HTML)를 사용합니다. 속성값의 대소문자 정도 차이 등을 제외하곤 거의 비슷합니다. 💡 웹브라우저는 HTML, CSS, JAVASCRIPT 만

CSS-IN-JS 는 CSS를 JS상수에 저장해서 사용하는 방법입니다.

함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단합니다. 하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없습니다. 그래서 React 에서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었

데이터를 주고 받기 위해서 브라우저에서 데이터를 요청하면 요청을 받은 백엔드 컴퓨터는 데이터베이스에서 데이터를 처리하여 브라우저에 응답을 돌려줍니다. 이 때, 게시글을 등록 후 게시글을 불러왔을 때 게시글이 불러와지지 않는 경우가 있습니다. 이러한 문제는 게시글 등

💡 템플릿 리터럴(Template Literal) 템플릿 리터럴이란 문자와 변수를 함께 쓸 수 있는 도구입니다. `${변수명}`으로 string과 변수를 연산자로 더해주지 않아도 가독성 좋게 코드를 작성할 수 있습니다.

mutation이 항상 성공하는 것은 아닙니다. Backend 컴퓨터에 문제가 발생할 수도 있고, 내가 수정하려는 게시물이 갑자기 삭제가 되는 바람에 수정에 문제가 발생하는 등 여러가지 실패 가능성이 있습니다. 따라서, 우리는 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 합니다.

💡 shorthand property 적용 전 💡 shorthand property 적용 후 shorthand property는 객체를 정의할 때 객체의 key값과 value 값이 같으면, 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다

ECMA Script의 약자

리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있습니다.

실무용 폴더구조(container / presenter) 프로젝트를 만들때 폴더 구조는 굉장히 중요합니다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부릅니다. 리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있습니다. 1. container ...

실무에 나가시면 for문 보다는 map과 filter 를 더 많이 사용하게 됩니다.

refetchQuery는 기존에 받아왔던 데이터가 변경 되었을 경우 최신 데이터로 다시 fetch 해주기 위해 사용됩니다.

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것입니다.

readOnly, disabled

React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그입니다.

코드를 작성하다보면 코드의 가독성이 떨어지는 경우가 종종 생깁니다.이렇게 작업된 코드들의 가독성을 올리고 조금 더 효율적으로 다시 바꿔주는 작업을 리팩토링이라고 합니다.

레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.

프로젝트를 진행하다보면 특정 페이지에서는 특정 레이아웃이 보이지 않았으면 할 때가 있다.

글로벌스타일이란 우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미합니다. 프로젝트 셋팅을 하는 느낌이 오지 않나요? 맞습니다! 따라서 우리는 글로벌스타일을 _app.tsx 에 적용해 주어야 합니다. Emotion에서 Global을 import

페이지 처리를 하는 방법에는 크게 일반적인 방식과 무한스크롤 방식, 2가지 방법이 있는데 이번 시간에는 일반적 방식의 페이지 처리부터 알아보겠습니다. 일반적인 방식의 페이지처리 : 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다. 무한스크롤 무한스크

객체나 배열을 복사할 때, 두 가지 개념이 존재합니다. 얕은 복사(Shallow Copy) / 깊은 복사(Deep Copy) 입니다. 얕은 복사는 주소값을 복사합니다. 즉, 원본의 값이나 복사된 값이 변경될 경우 두 값 모두 변경 됩니다. 위와 같이 profile

💡 댓글을 만드는 3가지 방법 BoardDetail 컴포넌트 내에 직접 만들기(코드량이 많이 늘어나게 됩니다.) 댓글 컴포넌트를 분리해서 만든 후 BoardDetail 에 import해오기 댓글 컴포넌트를 페이지 단위에서 조립하기 어떤 기능을 만드는 데는 정답이 없습니다. 정상적으로 작동만 되면 그게 바로 정답입니다. 다만, 우리는 협업이 목표이므로 남...

class는 객체이자 물건 만드는 설명서입니다. class안에는 함수와 변수를 넣을 수 있습니다. 이 변수와 함수를 조합해 붕어빵과 몬스터를 만드는 방법을 적어둘 수 있습니다. 그리고 붕어빵과 몬스터를 만들고 싶다면 new 붕어빵() 으로 만들어 줍니다. 만들어진 붕어빵과 몬스터는 객체 또는 인스턴스라고 부릅니다. 클래스에서의 함수와 변수 사용법 ...

이미지 프로세스를 이해하기 위해서는 storage 사용을 알아야 합니다.

우리가 평소에 사용하는 웹서비스의 검색은 어떻게 이루어지는 것일까요? Browser에서 검색을 요청하면 Back-end에서 DB 내부의 수 많은 Data 들 속에서 요청받은 keyword를 가지고 full-scan 하게 됩니다. Data가 많을 수록 속도가 느리겠죠? 이러한 방식을 변경할 수 있습니다. Data를 특정 키워드들로 구분지어 해당하는 글들을...

📖 MDN 공식문서를 참고해보세요! https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 정규 표현식은 주로 문자열 데이터가 있을 때 이 데이터가 현재 페이지에 적합한 용도로 사용이 되는 지를 체크하는 데에 매우 유용한 자바스크립트 기능입니다. 회원가입 페이지에...

코딩을 하다가 이러한 상황이 생기신 적이 있으신가요? 부모가 가지고 있는 State 데이터를 최하위에 있는 자식 컴포넌트에 props로 넘겨주려고 하려면 중간 중간에 있는 모든 자식 컴포넌트에게 넘겨줘야 합니다. 최하위에 있는 컴포넌트로 State를 넘겨줄 뿐인데 그 중간 과정이 너무 귀찮고 번거로운 과정입니다. Context는, 이러한 과정 없이...

위와 같은 이미지, 많이 익숙하신가요? 우리가 사용하고 있는 웹 페이지들에서 흔히들 볼 수 있는 로그인 페이지입니다. 로그인은, 웹 사이트에 회원가입 등으로 저장되어 있는 사용자 정보로 접속하려고 하는 요청을 검증하고 ( 아이디 또는 이메일, 비밀번호 체크 ) 검증이 완료되면 해당 사용자의 정보 데이터를 가지고 오는 과정입니다. 프론트엔드에서...

useQuery useLazyQuery

비구조화할당과 구조분해할당 이라는 개념은 같은 개념입니다.

현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다.하지만 이는 좋은 방법은 아닙니다.불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠.

만약 child 라는 객체에서 특정 값을 제거하고 싶다면,delete라는 기능이 있습니다. 하지만 이건 javaScript에서 좋은 방법은 아닙니다. 왜냐하면 원본을 건드리는 행위기 때문입니다. 그렇기에 이렇게 사용하기 보다는 구조분해할당과 rest 파라미터를 사용합니다. 기존 child 객체에서 money

브라우저에는 변수와 같이 저장할 수 있는 공간이 따로 존재합니다.

callback 함수라는 얘기를 많이 들어보셨을 겁니다. callback은 프로그래밍에서 뺴놓을 수 없는 아주 중요한 개념입니다.

위에서 비동기적 callback을 배웠습니다. 하지만, 이렇게 비동기적 callback을 연속적으로 계속하여 사용하게 되는 경우에는 callback 지옥에 빠지게 됩니다.이러한 것을 해결하기 위해 나온 것이 바로 Promise입니다.

AccessToken은 사용자의 로그인 정보를 담아주는 데이터입니다.이 데이터는 일정 시간 동안만 사용할 수 있는 만료기간이 정해져 있습니다.

📖 메모이제이션에 관한 개념 설명을 참고해보세요. 메모이제이션_위키백과 setState 함수를 사용하게 되면, 화면 전체가 다시 렌더가 되면서 State 와 여러개의 함수들을 다시 그려내게 됩니다. 그런데, 단순하게 이메일 주소를 받아오는 과정이라고 했을 때 Input 태그에 onChange 이벤트로 setState 함수를 실행하게 되면 문자 하...

기존의 UI 인터랙션 우리가 자유게시판 상세보기에서 '좋아요👍' 버튼을 누를 때의 동작을 생각해봅시다. > 사용자가 👍 버튼을 누릅니다. onClick 함수가 실행되고 서버에 mutation 요청을 보내게 됩니다. 서버에 보낸 요청이 완료될 때까지 await으로 기다립니다. 완료됐다는 응답이 오면 이제 refetch를 해서 좋아요 갯수 데이터를 다시 ...

아까까지 잘 동작하던 기존의 기능이 망가졌던 적은 없었나요?

구글 스토리지에 정적파일 배포를 시작합니다.

우리가 어떤 버튼을 눌렀을 때 카운트를 증가하게 만들고 싶습니다. > 위 코드만 봐서는 4씩 증가할 거 같습니다. 하지만 실제로 실행되는거 보면 1씩만 증가하고 있습니다… State의 특성때문에 이렇게 작동합니다. state는 함수가 끝나면 값이 적용되는 특성이 있습

폰트, 이미지 다운로드 과정과 폰트 확장자 별 압축률, 경량화 폰트 소개 보통 브라우저에 접속하게 되면 모든 html, css, src를 다운 받아 화면에 보여주게 됩니다. 이 과정에서 src, 즉, 폰트와 이미지 같은 것들은 한 번에 보여주는 것은 아닙니다. 이 소스들은 용량이 커서 나중에 보여지게 되는데요. 만약에 이 큰 용량들의 소스들까지 한꺼번에...

API 요청할 때 보내는 데이터 === API 함수로 들어갈 인자응답으로 받게 되는 데이터 === API 함수의 return데이터API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능입니다.Front-end 에서 HTTP라는 길을 통

Webpack = 모듈 번들링이라고 한다.

useEffect() 함수 > 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hookex) componentDidMount, componentDidUpdate, componentDidUnmount 시 특정 작업을 처리할 수 있다. > useEffe

타입스크립트(TypeScript)는 마이크로소프트(MS)에서 개발한 오픈소스 프로그래밍 언어이며, 자바스크립트(JavaScript)의 단점을 보완하기 위해 만들어졌다.

Redux는 Flux개념을 바탕으로 한 React에서 현재 가장 많이 사용되는 State관리 라이브러리

리액트는 SPA (Single Page Application) 방식

고차 컴포넌트 = Higher Order Components(HOC) 한마디로 말하면 HOC는 다른 컴포넌트를 감싸는 리액트 컴포넌트다.

useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. React 공식 문서에서는 useCallback을 다음과 같이 말하고 있습니다. 메모제이션된 함수를 반한하는 하는 함수입니다. > 인라인 콜백과 그것의 의존성 값의 배열을 전달하세

모든 것들은 하나의 주기를 따라갑니다. 우리는 태어나고, 성장하고 죽습니다. 거의 대부분은 일생의 이 주기를 따라가며, React Component도 마찬가지 입니다. Component는 만들어지고(Mounted on DOM), 업데이트를 통해 성장하며, 그리고 죽습니

Access Token(JWT)를 통한 인증 방식의 문제는 만일 제 3자에게 탈취당할 경우 보안에 취약하다는 점입니다.