프로그래밍 개발에는 여러가지 디자인 패턴이 존재한다. 특정 프레임워크를 사용하면 코드의 가독성 및 유지보수성, 개발용이성 등을 고려해 특정 디자인 패턴을 사용자에게 강제화 하기도 한다. 대표적으로 Java 진영의 Spring Framework가 있다. 이는 MVC 디자인 패턴을 어느정도 강요하여 개발을 유도한다. 프론트 엔드 개발이 복잡해지면서 백엔드 쪽에서만 논의되어 오던 디자인 패턴을 자연스럽게 프론트에서도 고민하게 되었다. 현시점 가장 인기있는 프론트엔드 개발도구인 React는 Flux 패턴이란 것을 지향하고 있다. Facebook: MVC Does Not Scale, Use Flux Instead [Updated] This article has been updated based on communi..

지난 포스팅을 통해 Typescript를 활용하여 NodeJS와 Express 백엔드 서버 개발환경을 세팅하는 방법을 알아봤다. Typescript로 Node+Express API 서버 개발환경 세팅 🙌🏾 Node JS와 Typescript의 등장이 가지는 의미 자바스크립트는 웹브라우저에서 HTML문서를 동적으로 컨트롤 하기 위해 만들어졌다. 근본부터가 프론트엔드인 이 언어는 브라우저들의 춘추전국 bgradecoding.tistory.com 이것을 베이스로 웹 프레임워크에서 많이 사용하는 MVC 패턴을 만드는 방법에 대해 알아보자. MVC 패턴은 디자인 패턴 중 하나이다. 사실 주니어 시절에는 이걸 왜 쓰는지 잘 알지 못했다. 주니어 시절은 자신이 맡은 기능만을 구현하면 되기 때문에 서비스 전체 코드에 ..

🙌🏾 Node JS와 Typescript의 등장이 가지는 의미 자바스크립트는 웹브라우저에서 HTML문서를 동적으로 컨트롤 하기 위해 만들어졌다. 근본부터가 프론트엔드인 이 언어는 브라우저들의 춘추전국시대를 거쳐면서 🤱 👩‍🍼 🧑‍🍼 👨‍🍼 -> 🤴 (IE.... MS.... ㅂㄷㅂㄷ) 여러 개성이 강한 자식들로 분화되었다가 자바스크립트족 대통합 운동으로 표준화되어 지금에 이르렀다. Node JS가 나오면서는 자신의 근본인 브라우저 태생 족보📗를 찢어버리고 백엔드의 영역까지 침범하기 이르렀다. 심지어 보통의 웹사이트에 필요한 데이터 CRUD 기능을 만들때는 다른 백엔드 태생 언어들의 장점을 뛰어넘기도 하는 청출어람을 보여준다. 물론 요즘 핫한 머신러닝광의 연계나 그래픽 요소가 많은 작업, 실시간성 대규모 ..

웹사이트를 제작하다보면 필수적으로 이미지 파일을 사용해 화면을 구성해야 하는 일이 생긴다. (안 생긴다면 그 사이트 제작은 지금 끝내라) Front-End 라이브러리로 React를 사용한다면 이미지를 사용하는 방식이 여러가지일 것이다. 어떤 상황에서 어떤 방식이 맞는지, 혹은 사용법이 정확한지 알기 힘들다. 그래서 이번 포스팅에서는 리엑트에서 이미지를 활용하는 법에 대해 정리하고자 한다. 1. Pubilc 폴더에 이미지 파일 위치시키고 활용 ❗️제일 간편하고 직관적인 방법이다. Create React App으로 프로젝트를 생성하면 Public 폴더에 index.html을 비롯한 정적 파일이 있다. 여기에 images 폴더를 만들고 이미지 파일을 넣어둔다. 그리고 실제 이미지를 활용할 소스 코드에서는 아래..

React로 서비스를 개발하다보면 사용자 입력을 받아 처리하는 서식, 즉 form 형태를 많이 만들어야 한다. 대표적인 form으로는 모든 서비스에 거의 다 있는 로그인 기능이다. 아래는 React에서 Typescript 기반으로 작성한 단순한 로그인 form 예시다. import React, { ReactElement } from 'react'; interface LoginForm { email: string; password: string; } export default function Login() { const [email, setEmail] = React.useState('') const [password, setPassword] = React.useState('') const handleSub..

개요 React는 기존의 Vanilla JS( 프레임워크를 쓰지 않은 순수 JavaScript )나 Jquery 사용시 불편했던 개발자의 욕구를 충분히 충족시켜주며 성장을 계속하고 있다. 하지만 인간은 편안함에 금방 익숙해지고 새로운 불편함을 또 찾고 그것을 고쳐내려 한다. 오늘은 React에서 개발한 프론트엔드 프로젝트 규모가 방대해져 import 해야 할 대상을 상대경로로 ../을 무한 반복하여 찾는 불편함을 해소할 craco에 대해 알아보고자 한다. 상대경로 지옥 - 페이지 컴포넌트 import 보통 App.js나 App.ts에 각 url에 따라 이동할 페이지 컴포넌트들을 정의 한다. 스타일에 따라 layout으로 분리하거나 몇개로 쪼개서 관리할 수 있겠지만 각 url에 맞는 페이지 컴포넌트들을 임..