React (Front-end)
(React Router) 2. 기본 CSS, JS, JSX 세팅과 Root Route 설정
이전 글: https://moneytech.kr/69 (React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성 1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기 moneytech.kr 1. 기본 CSS, JS 파일 세팅 이 튜토리얼은 데이터 만들기(create), 읽기(reading), 검색하기(searching), 수정(update), 삭제(deleting)하기를 다룹니다. 전형적인 웹 앱의 경우 웹 서버의 API와 소통하겠지만, 이 튜토리얼의 경우 브라우저 저장소(Browser Storage)와 가짜 네트워크 지연(Ne..
(React Router) 1. 리액트 라우터 튜토리얼 진행 - Vite를 통한 프로젝트 생성
1. 개요 리액트로 개발을 진행하면서 다른 컴포넌트로의 이동, 주소를 입력했을 때 다른 컴포넌트를 호출 등 라우트(Route) 기능을 구현할 일이 생겼다. 라우트는 프론트엔드 개발의 기본 중에 기본이지만, 오랜만에 코드를 손에 잡는 나로서는 아예 기억이 안 난다. 그래서 이번 글은 React Router에 있는 튜토리얼을 직접 진행해보면서 react-router-dom 모듈을 익혀보려고 한다. 이 프로젝트를 클론했습니다: https://reactrouter.com/en/main/start/tutorial Tutorial v6.6.1 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you k..
(React 만들기) 09. 리액트 Hook 원리와 제약사항들
이전글: https://moneytech.kr/63 (React 만들기) 08. virtual DOM (가상 DOM - 문서 객체 모델) 1. 가상 돔 개발자들이 DOM을 직접 건드리지 않고 훨씬 더 쉬운 구조물로 UI를 개발할 수 있도록 중간에 DOM처리는 리액트에게 맡기고 개발자는 JSX만 개발하면 될 수 있도록 하는 것. 리액트는 실제 moneytech.kr 1. Hook Hook의 규칙: https://reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper Rules of Hooks – React A JavaScript library for building user interfaces reactjs.org 리액트 훅은 class를 사용하지 않아도 stat..
(React 만들기) 08. virtual DOM (가상 DOM - 문서 객체 모델)
1. 가상 돔 개발자들이 DOM을 직접 건드리지 않고 훨씬 더 쉬운 구조물로 UI를 개발할 수 있도록 중간에 DOM처리는 리액트에게 맡기고 개발자는 JSX만 개발하면 될 수 있도록 하는 것. 리액트는 실제 DOM과 메모리 상에 쌓아둔 가상 DOM을 비교해서 다른 것만 비교하여 특정 부분을 변경한다. export class Component { constructor(props) { this.props = props; } } export function createDOM(node) { if (typeof node === 'string') { return document.createTextNode(node); } const element = document.createElement(node.tag); Obje..
(React 만들기) 07. 클래스형 컴포넌트
1. 기존 함수형 컴포넌트를 클래스형 컴포넌트로 변경하기 이전에 만들어두었던 함수형 컴포넌트를 클래스형으로 수정한다. 기존 코드 : /* @jsx createElement */ import { createElement, render } from './react'; function Title(props) { return { props.children }; } function Item(props) { return {props.children} } const vdom = React 정말 잘 만들기 첫 번째 아이템 두 번째 아이템 세 번째 아이템 render(vdom, document.querySelector('#root')); vdom 변수를 App으로 변경하고, 아래 render 함수에서도 JSX 형태로 변..
React 환경에서 tailwindcss 사용하기
사이드 프로젝트 진행 2일차. 각각 다른 프로젝트를 진행하는 지인과 온라인으로 스터디 겸 진행 중에 있다. 오늘은 tailwindcss 적용해보자. 0. 들어가는 글 원래는 리액트 환경에서 컴포넌트마다 css를 직접 넣어주는 styled-components를 사용했었는데 이번에는 새로운 경험을 해보고자 Tailwind CSS를 시작했다. 이런 라이브러리 특성이 뭐냐면 클래스명을 전부 외워야 한다는 것이다. 이게 진짜 안 좋다. 예전 부트스트랩처럼 만든 것 같은데 스타일링에 대한 것은 워낙 유행이 빠르기 때문에 "쉽고 편하니까 지금 이거 열심히 공부해야지~"는 파멸의 지름길이다. CSS에 대해서 정확히 알거나 배우고 싶다면 styled-components에 익숙해지거나 차라리 SCSS(Sass) 같은 것에..
npx create-react-app 실행시 "We no longer support global installation of Create React App"이 발생
1. 들어가는 글 오랜만에 개발하려고 하니까 죽겠다. 거두절미하고 해당 오류는 create-react-app을 전역으로 설치해놓아서 발생하는 오류이다. 글로벌로 설치된 모듈을 삭제하자. npm uninstall -g create-react-app yarn global remove create-react-app 이후에 create-react-app을 다시 로컬로 설치한다. add create-react-app 이제 create-react-app으로 프로젝트를 설치할 수 있게 되었다. create-react-app의 리액트 프로젝트를 바로 할 수 있다는 장점이 있지만, 이렇게 설치하는 경우 node_modules가 이중으로 중첩되어 생긴다는 문제점이 있다. 최상위폴더 ㄴnode_modules (방금 우리가 ..
(React 만들기) 06. 함수형 컴포넌트 (사용자 컴포넌트 만들기)
이전 글 보기: https://moneytech.kr/55 (React 만들기) 05. JSX 도입을 통한 쉬운 마크업과 트랜스파일 결과물 바꾸기 이전 글: https://moneytech.kr/54 (React 만들기) 04. createElement와 app.js 코드량 줄이기 0. 들어가는 글 애플리케이션과 소프트웨어가 사용자의 선택을 받는 것 중 가장 큰 요소는 "편리함"이다. 앞서 작성 moneytech.kr 1. 사용자 컴포넌트란 무엇인가 앞서 React 프레임워크의 변천사를 흉내 내서 기본적인 형태를 구현해보았다. 이번에는 React에서 지원하는 '사용자 컴포넌트'라는 것을 구현해볼 것이다. 사용자 컴포넌트에는 크게 2가지가 있다. 함수형 컴포넌트, 클래스형 컴포넌트. 종류를 배우기 전에 먼..