React

React란? 페이스북의 개발자들이 만든 자바스크립트 기반의 프론트엔드 프레임워크라고 보면 쉽다. 프론트엔드에서도 서버를 띄워서, 관리하는 것이다. 나는 플러터를 프론트엔드로 많이 배웠었는데, 앞으로 공부하다보면 디자인패턴(MVC, MVVM, MVP), 상태관리(플

비동기 간단한 계산기 프로그램을 생각해보자. 이를 구현하려면 로직이 어떻게 흘러가는가? 사용자가 첫 번째 숫자를 입력한다. 연산자를 입력한다. 두 번째 숫자를 입력한다. 엔터를 입력받는다. 결과를 화면에 노출시킨다. 우리는 이렇게 하나의 흐름을 생각할 것이다.

자바스크립트에서는 함수를 변수처럼 취급할 수 있다. 아래의 예제를 보면 이해하기 쉬울 것이다.위는 함수를 log라는 변수에 저장하여 이 변수의 이름명에 괄호를 넣어 호출을 할 수 있다.이해하기 어려울 수도 있다. 설명을 하자면, insideFn은 함수이다.어떠한 함수나

필요한 라이브러리 React 뷰를 만들기 위해 존재하는 라이브러리이다. 말 그대로 사용자에게 보여지는 화면을 구성할 때 사용되는 것이다. ReactDOM 컴포넌트들을 웹 브라우저에 그리는 역할을 한다. HTML은 기반으로 동작을 하는데, 이 태그들을 트리로 구성

자바스크립트의 JS와 XML의 X를 합친 말이다.JSX는 자바스크립트 코드 안에서 태그 기반의 구문을 써서리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트의 확장이다.JSX는 단지 복잡한 createElement 호출에서 빠뜨린 콤마를 찾느라고고생하지 않고도 편하게

우리는 이전까지 화면에 표시하는 방법으로는 ReactDOM.render()함수를 사용했었다.위와 같이 리액트 엘리먼트를 생성한다.그리고 위와 같이 ReactDOM 라이브러리에서 render 함수를 통해 화면에 그릴 수 있었다.이 JSX에 대한 해석은 babel이라는 친

상태라는 말이다. 프론트엔드 개발에 있어 가장 많이 듣는 단어이다.OOO님 상태관리 라이브러리는 어떤거 쓰시나요?사실 프론트엔드 개발뿐만 아니라, 앱 개발에 있어서도 쓰이는 단어이다.심지어 게임 개발 분야에서도 이 상태관리는 매우 중요하다.이해를 쉽게 하기 위해 예를

이전에서 함수형 컴포넌트와 클래스형 컴포넌트에 대한 차이를 공부하였다.함수형 컴포넌트에서 상태관리와 라이프사이클에 도움을 주는 것이 Hooks이다.이 Hooks의 종류는 다양하다.useStateuseEffectuseMemouseCallbackuseRef커스텀 훅이외에도

항상 무슨 프레임워크를 쓰든 폴더구조를 잘 정리해놓으면 눈이 기쁘다.또한, 그 폴더구조가 곧 디자인 패턴으로 이어질 수도 있다.React에서는 어떤 폴더구조가 쓰이는지 알아보자.React 프로젝트를 제일 처음 생성하면 나오는 기본 폴더구조는 이렇다.src 폴더에서 우리

리액트에서 CSS를 보다 편리하게 컴포넌트에 적용할 수 있도록 도와주는 패키지이다.npm install styled-components를 입력하여 설치한다.package.json 파일의 dependency에 잘 추가가 되었는지 확인한다.만약 추가가 되어있지 않다면 np

웹 페이지를 보면 많은 url 링크들이 있다.https://velog.io 라는 링크가 있으면, 지금 작성자가 글쓰고 있는 페이지는 https://velog.io/write이다.그리고 작성자의 포스트 목록은 https://velog.io/@m

코드의 규칙성 우리는 코드를 짤 때 규칙을 정하곤 한다. if 문이 1줄이면 괄호를 넣지 않거나, 무조건 괄호를 넣거나 할 수도 있다. 이런식으로 else를 를 쓰거나 아니면 개행을 해서 사용하는 규칙이 있을 수도 있다. 아니면, js에선 세미콜론이 필수가 아니기

CI/CD CI/CD는 자동으로 통합(테스트 및 빌드)하고 자동으로 배포를 한다는 의미이다. 자동은 아니고 Continuous로 쭈욱 지속적으로 한다는 말이지만, 자동으로 빠르게 라는 뉘앙스가 크다. 백엔드에서는 CI 과정에서 코드 포매팅 및 테스트를 진행하고 이를

이전까지 props나 기본적인 JSX에 대한 사용법을 다루었다.이번에는 이를 응용해서 네비게이션바를 만들어보려고한다.디자인은 피그마로 하였다.왼쪽에 네비게이션바가 위치하며, 상단부터 로고 / 프로필 / 메뉴바 / 푸터 로 나눌 수 있다.푸터에는 라이트모드와 다크모드를

세상에는 다양한 모니터들이 있다.보편적으로는 16:9 FHD인 1920x1080, QHD, 4K들도 있다.16:9뿐만 아니라 컴덕들은 21:9 32:9까지사용하기도 한다.그리고 모니터가 아니라 태블릿, 스마트폰으로도 웹을 보기도 한다.각 화면마다 사이즈가 다른데, 픽셀

사진을 넣으려면 <img> 태그에 src 속성을 통해 사진을 넣을 수 있다.ES-Lint나 Prettier에도 오류로 잡히지도 않는데 위처럼 엑박이 뜨는 경우가 있을 것이다.이를 해결하는 방법은 크게 2가지가 있다.위는 일반적인 html에서는 동작하지만 react

우리 프로그래머들은 내 서비스가 전세계로 뻗어나가는 걸 마음속 낭만으로 가지고 있다.다국어로 언어를 보여주고 싶으면 어떻게 해야할까?대부분은 위처럼 한글을 하드코딩하여 JSX에 표현할 것이다.리액트에서는 위 하드코딩을 아이폰에서 텍스트 대치하듯이 사용할 수 있다.rea

요새 시대에 로그인을 직접구현하는 사이트는 거의 없다.왠만하면, OAuth로 구글, 카카오, 네이버 등을 사용한다.본 프로젝트에서는 Github OAuth로 연동하여 사용하기 때문에, 링크 자체는 Github로 설명하겠다.또한, 프론트엔드만의 입장이기 때문에 백엔드 구

날짜를 선택하는 UI가 필요할 때가 있다.여행사에서 비행기나 숙소 일정을 잡을 때도 있을 것이며, 수강신청 날짜를 검색하기 위해 특정 날짜를 선택해야할 수도 있다.이럴 때 사용하는 UI를 Date Picker라고 많이 말한다.React에서는 대표적으로 react-dat

목업 데이터는 무언가 제품을 만들기 전에 시연할 때 임의로 채우는 데이터라고 보면 된다.홍길동, Lorem Ipsum같은 문구같은 것이다.실제로 API가 개발되기 전에 프론트의 구현이 먼저되는 경우가 많다.데이터를 불러와야하는데 아직 백엔드가 구현되지 않아서 이를 테스

리액트에선 Styled Component 말고도 Emotion이라는 CSS 스타일링 툴이 있다.토스에서는 Emotion을 사용하고 상태관리는 Recoil을 사용하고 있다.이외에도 카카오뱅크, 카카오 자체에서도 Emotion 을 사용하는 경우도 있다.이 Emotion에

S3나 CloudFront에 리액트 프로젝트를 배포했는데 메인페이지는 잘 나오지만, 하위 라우트로 이동이 안되는 경우가 있다.원인은 리액트가 SPA(Single Page Application)임에 있다.CloudFront나 S3는 파일의 경로를 라우트로 인식한다.그래서

Typescript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 확장된 버전이다.JavaScript와 호환되며, 정적 타입을 지원하여 코드의 가독성과 유지 보수성을 높이는 데 도움을 준다.JavaScript의 모든 기능을 포함하면서

다음의 커스텀 훅을 만들고 사이트를 테스트를 했다.그런데 /lectures/categories부분에서 2번 호출되는 경우가 있었다.먼저 lectures/categories를 호출하는 컴포넌트가 어디인지부터 확인해야했다.selectedCategory를 통해 카테고리를 선

리액트가 빠르다는 말을 들은 적이 있을 것이다.Virtual DOM을 통해 기존의 DOM보다 빠르게 렌더링된다는 말이 있다.과연 이 렌더링이 어떻게 되길래 빠르다고 하는 것일까?먼저 Javascript에서 어떻게 렌더링을 하는지를 알아볼 필요가 있다.우리는 html을

리액트 프로젝트 npx create-react-app 을 통해 리액트 프로젝트를 많이 구축해봤을 것이다. 오늘은 CRA 의 도움 없이, 직접 리액트 프로젝트를 구축해보며 Javascript, Typescript의 배경지식도 함께 늘려보자. 요구사항 CRA 는 다양한

리액트에선 다양한 아키텍처 패턴이 존재한다.Custom Hooks, Container Component 등등 다양한 용어들을 들어본 적이 있을 것이다.오늘은 이런 패턴들을 정리해보려고 한다.아키텍처와 디자인 패턴을 많이 혼동해서 사용한다.다트 플러터의 GetX의 MVV

React 개발중 컴포넌트마다 빨간줄이 적힌 경우가 있다.JSX를 사용하려면 React 스코프 내에서 사용되어야 한다.즉, React 를 당겨오면 된다.import React from 'react';를 추가한다.하지만 이 방법을 쓴다면, 매 컴포넌트마다 상단에 impo

npx 없이 리액트 프로젝트 만들기를 하고 npm run start를 했는데 아래와 같은 오류 덩어리가 생기는 현상이다.실제 코드 레벨로 분석하면 React를 참조하지 못하는게 원인으로 예상할 수 있다.automatic 옵션을 주어 babel의 react 변환방식을 변

테스트 코드는 백엔드에서 많이 사용하는데, 프론트엔드에서 사용하는 것은 거의 처음 들어볼 것이다.이런것을 코드로 테스트하는걸까?테스트에는 수준을 나누어 볼 수 있다.프론트엔드 기준으로 크게 나누어 low level, high level라고 해보자.버튼 하나를 드래그해서

React에서 유명한 상태관리 라이브러리인 Recoil에 대해 알아보도록 하겠다.상태관리하는 이유는 props drilling 현상을 최대한 줄이기위해 탄생했다고 해도 과언이 아니다.부모 컴포넌트에서 자식 컴포넌트로 상태를 전달하기 위해서는 props로 전달을 해야한다

Popover란 팝업에서 유래한 컴포넌트이다. 팝업창을 PopoverContent라 부르고, 팝업창을 열기위한 버튼은 보통 PopoverTrigger라고 표현한다.Radix UI 라는 라이브러리에서 각종 컴포넌트를 제공하고 있는데, 이를 직접 구현해보고 싶어서 글을 쓰

React Query React Query는 Tasnstack에서 만든 패키지이다. 이를 사용해서 서버에 쉽게 요청할 수 있다. 하지만 fetch, axios 등 JS API에서 자체적으로 만든 API 요청 기능이 있는데 왜 굳이 써야하는지 알아보자. 설치 pnpm