React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..
어떻게 Model과 api(데이터)를 효과적으로 연결할까? (MVVM 패턴) 기술 과제(React + TypeScript)에서 MVVM 패턴을 적용해야했습니다. MVVM 패턴을 처음 적용하다 보니 크게 감이 잡히지 않아 여러 문서를 보고 따라하는 식으로 처음 진행을 했는데 MVVM패턴을 적용해 나갔습니다. 그러나 Directory구조 잡기, 데이터 분리, Model과 데이터를 연결등 많은 문제들 중 Model과 데이터를 어떻게 효과적으로 연결하지? 라는 부분을 나누려고 합니다. 우선 내용에 들어가기 앞서 MVVM패턴에 대해 간략하게 알아보도록 합시다. 👣 설명 MVVM(Model - View - ViewModel) 패턴 View: 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관 ViewMo..
토론 커뮤니티 Web 만들기 정말 오랜만에 회고를 작성하는 데 어떻게 작성을 해야 할 지 감이 잘 잡히지 않아 그냥 생각의 순서에 따라 작성을 해보겠습니다. 3주 정도의 시간으로 4명의 프론트 엔드 개발자님들(저 포함 ^^)과 함께 토론 커뮤니티 Web을 제작하였습니다. 시작에 앞서 프로젝트에 대해 간단하게 소개를 하자면 엄마가 좋아? vs 아빠가 좋아? SNS, 방송을 중심으로 깻잎, 새우 논쟁 등 다양한 의견이 있는 간단한 논쟁들을 쉽게 투표하고 의견을 나누는 토론 커뮤니티 서비스 입니다. Github: https://github.com/prgrms-fe-devcourse/FEDC2_ToronTo_Nayoung 배포: https://melodic-fenglisu-afc3b8.netlify.app 정말..
Storybook 시작하기!!! React에서 UI를 관리하기 위해 StoryBook을 사용하게 되었습니다. 간단하게 예시를 통해서 제작을 해보도록 하겠습니다. :) 해당 사이트를 보고 잘 파악을 하면 됩니다. Web: https://storybook.js.org/ GitHub: https://github.com/storybookjs/storybook/ 🐣 기본 환경 Mac VSCode React(create-react-app) 🐣 1. Storybook 설치 create-react-app을 설치한 곳에서 > npx storybook init 🐣 2. Component 제작 사각형을 만드는 Component제작 const Squares = ({width = 100, height = 100, backgro..
😸 Vue TIL 😽 Done it 😼 코드리뷰 회고 1 ~ 7: https://gwpaeng.tistory.com/418 Vue: https://gwpaeng.tistory.com/419 😼 React JSX 보통 {}를 이용하여 실행합니다. 😼 값 default 함수.defaultProps 함수.defaultProps = { size: 200, }; 인자에 지정 function 함수({ size = 200 }) {} 😼 값 type check import PropTypes from 'prop-types'; 함수.propTypes = { size: PropTypes.number, }; 😼 useState useState: 지역상태 관리하기 위한 것(Hook) 값이 변경되면 다시 렌더링 한..
react-router-dom https://reactrouter.com/web/api/Link/to-object react-router : react의 화면 전환을 도와주는 역할 일반적인 웹에서는 을 이용해서 이동했다면 react에서는 (링크 형식으로 나옵니다)을 이용해서 이동한다. 설명 index.html의 id=root부분을 채워 넣기 위해 index.js로 App.js를 연결 해줍니다. App.js 에서 react-router-dom을 사용해서 홈페이지 이동이 잘 되게 해줍니다. Navigation.js는 react-router의 Link태그가 있는 부분입니다. index.js index.html 의 id=root부분에 App.js가 실행 되게 해줍니다. Navigation.js => \ 으로 이..
> React HTML의 class -> className react는 자동적으로 나의 class component의 render method를 실행 한다. react는 state를 refresh하고 render function을 호출한다 > State https://smilejh.tistory.com/90 [React] 3. Component의 Props 와 State 1. Component의 props 와 state 리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉜다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값이다 (-> 부모 컴포넌트에서 자식 컴포넌트로 전달하 smilejh.tistory.com 동적 데이터와 함께 작업할 때 만들어져 변하는 데이터, 존재하지 않는 데..