전체 글 168

webpack으로 리액트 프로젝트 배포하기

create-react-app 을 사용하지 않고 하나하나 설치해서 배포까지 해보겠습니다. 화이팅! 경로는 이런 식입니다. 1. npm init $ npm init -y 2. 웹팩과 웹팩 cli 설치 $ npm i -D webpack webpack-cli 3. 바벨 설치 (JSX 읽어야 하니까) $ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react 4. 최상위 경로에 webpack.config.js 파일 만들기 5. webpack.config.js 설정 const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.reso..

부트캠프/TIL 2023.03.22

객체 지향 프로그래밍 - Drag & Drop 프로젝트 02.

본 게시글은 udemy 강좌(Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS)를 수강한 내용을 바탕으로 합니다. 프로젝트 관리 앱. 이 앱에서는 사용자가 프로젝트를 생성할 수 있고, 상태(active / finished) 별 프로젝트를 볼 수 있다. - Project는 프로젝트 개체를 나타내며 id, 제목, 설명, 인원 수 및 상태(active / finished)를 가진다. - ProjectItem은 프로젝트 목록의 단일 항목을 나타내며 프로젝트 제목, 인원 수 및 설명을 표시한다. - State 클래스는 리스너가 상태 업데이트를 구독할 수 있도록 한다. - ProjectState는 State의 하위 클래스로서 프로젝트를 위한 애플리케이션 상태를 관리한다. 이는 싱..

객체 지향 프로그래밍 - Drag & Drop 프로젝트 01.

Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS 정확하게 뭘 하는지 설명도 안 해주고 다짜고짜 클래스 만들면서 출발해가지고 너무나도 어려웠다,,, 오버뷰라도 살짝 한 다음에 코드 작성으로 들어갔으면 이해하기가 훨씬 쉽지 않았을까 싶다. 솔직히 강의의 절반도 이해 못한 것 같다. 모르는 건 다 제쳐두고 이해한 것 위주로 작성할 예정이다. Title Description People ADD PROJECT 번호 제목 내용 let temp = document.querySelector('template'); let tbody = document.querySelector('tbody'); //데이터 SET let db = [ {'id':'1','title':'title1','c..

사이드 프로젝트 with React 30. AWS Amplify

AWS Amplify 소개 모바일/웹 어플리케이션 프로젝트 진행 시, 구성+빌드+배포+운영까지 모든 라이프사이클을 한 곳에서 편리하게 관리할 수 있도록 통합해둔 AWS의 풀스택 개발 통합 솔루션 서비스 둘러보기 - Admin UI 제공 - AWS 서비스와의 연동이 간편하다. - 인증(Cognito) - 로그인, 회원가입, 추가 인증 등 - 서비스 모니터링/로깅(CloudWatch) - 데이터베이스(DynamoDB, Aurora, GraphQL 지원) - 앱 푸시 알림(PinPoint) - CLI(Command Line Interface)으로 할 수 있는 것들이 매우 많다. (CLI 예시. create-react-app, git push, git add ...) - 프론트엔드 초기 프로젝트 셋업 (Reac..

webpack 빌드 시 이미지 경로(assets, 템플릿 로더)

만들어뒀던 js, css, html 기반 프로젝트를 webpack으로 번들링하고 있었다. 다른 건 잘 되는데, asset 폴더 경로를 지정해서 png나 jpg 파일을 불러오려고 하는 것에서 문제가 발생했다. alt="" id="jerry" /> 저렇게 상대 경로로 설정해두고 빌드하면 경로가 바뀌지 않아서 파일은 정상적으로 따라와도 html이 png 파일을 읽을 수가 없다. 아래는 webpack.config.js 파일 내용이다. const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.reso..

사이드 프로젝트 with React 29. 기술셋 선정하기 (2)

기술셋 선정하기 - DevOps 시작하기에 앞서, DevOps 란? Development + Operation의 합성어 소프트웨어 개발에서 배포까지. 전달(delivery) 과정을 자동화하고 빠르게 하여 결국에는 비지니스의 가치를 높일 수 있도록 하기 위한 개발 환경이나 문화 1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅 배포 단계를 수립하는 것이 쉬운가? 배포가 쉬운가? 서버를 직접 관리해야 하는가? 웹 사이트 호스팅(도메인)를 쉽게 할 수 있는가? Github과 연동되어 git push시 배포 프로세스를 시작할 수 있는가? 추후 백엔드 API를 개발할 경우 통합하고 배포하는데에 용이한가? 배포 모니터링 지원 개발 커뮤니티 활성화 무료인가? 기술의 안정성 - v.0.0.1같이 너무 새..

사이드 프로젝트 with React 28. 기술셋 선정하기 -프론트엔드

3/19 (SUN) 들은 강의: Part 3. 프로젝트 설계하기 02. 기술셋 선정하기 (1) - 프론트엔드 기술셋 선정하기 - 프론트엔드 1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅 페이지 라우팅 UI 코드 재활용 가능 상태관리가 가능한가? 테스트 코드 작성 용이 개발 커뮤니티 활성화 기술의 안정성 - 나온지 얼마 안 된 너무 새로운 기술은 X. 안정된 버전이 있고, 유지보수 하는 단체가 안정적인가? 팀 내 기술 친숙도 💡 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없다. 하지만 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다. 2. 후보군 조사 React.js Angular Vanilla JS 3. 비교 테이블 생성 React Angular Vanilla 페이..

사이드 프로젝트 with React 27. 기술셋 선정 기준

올바른 기술셋 선정하기 새로운 기술들이 하루가 멀다하고 나오고 있다. 기술의 호수 속에서 우리는 어떤 기술을 사용해야 할까? 올바른 기술셋은 무엇일까? 내가 사용하고 싶은 최신 기술 ❌ 무조건 최신 기술이라고, 무조건 많은 라이브러리를 쓴다고 올바른 것이 아니다! 시스템의 요구사항을 잘 충족 시킬 수 있도록 서포트 하는 기술 ✅ 왜 중요한가? 어떤 기술을 선택하느냐에 따라 소프트웨어 운영/유지 비용에 영향 🔺 AWS S3가 좋다고 들어서 사용했다가는 요금 폭탄을 맞을 수도 소프트웨어의 한계점을 만들어 낼 수도 💡 특정 기술이 기능 면에서 한정적이거나 개발자가 다룰 수 있는 범위가 한정적이라면 프로젝트에서 많은 문제를 발생시킬 수 있음! 반대로 코드 구현을 수월하게 해준다 하더라도 배포나 다른 기술과의 통..

사이드 프로젝트 with React 26. 클래스 다이어그램 실습

들은 강의: Part 3. 프로젝트 설계하기 07. [실전] 시스템 설계 (3) - Class diagram for 프론트 엔드 Plant UML 사용 리액트 컴포넌트/클래스의 구조도 작성 1. 자바 설치 https://www.java.com/en/download Download Java for Linux Linux RPM filesize: 76.84 MB Instructions After installing Java, you will need to enable Java in your browser. www.java.com 2. GraphViz 설치 https://plantuml.com/ko/graphviz-dot Test your GraphViz installation This page gives in..

사이드 프로젝트 with React 25. 프론트엔드 설계란?

프론트엔드 설계란? 프론트엔드의 아키텍처를 설계할 수도 있고, 컴포넌트 간 의존 관계를 나타낸 다이어그램을 그려볼 수도 있다. 더치페이의 프론트엔드 아키텍처 자체는 심플하기에, 리액트 컴포넌트 간의 의존성을 나타내기 위한 클래스 다이어그램을 그려볼 예정! 잘 설계하기 위한 팁 페이지 별로 컴포넌트를 정의 UI 디자인을 살펴보면서 공통된 요소들이 있는지 파악 공통된 요소들에 대해 컴포넌트화(DRY;Don't Repeat Yourself 원칙) 페이지 별로 컴포넌트를 계층화해서 트리 구조를 만들 수 있겠다. 사용할 만한 컴포넌트 디자인 패턴에는 어떤 것이 있는가? Container 패턴: UI를 렌더링하는 데에 집중하는 컴포넌트, 데이터 불러오기 등의 비즈니스 로직을 담아 둘 Container 컴포넌트로 나..

카테고리 없음 2023.03.16