전체 글32 [TO-DO-App] 투두앱을 만들어보자 by React - 03. 할일 추가 기능 구현 AddTodo 컴포넌트를 통해 할일을 추가하는 기능을 구현해보자. 지난시간에 TodoList 컴포넌트를 통해 할일목록을 저장하는 기능을 구현하였고, 이번에는 새로운 목록을 추가해보겠습니다 AddTodo 컴포넌트에 handleAdd라는 콜백함수로 등록한다. handleAdd 는 기존 할일목록을 업데이트하는 기능을 합니다 함수를 props로 child component로 넘기는 방법은 아래글에 자세히 설명되어있다. 참고: https://legacy.reactjs.org/docs/faq-functions.html ---- 그리고 이제 AddTodo로 넘어갑니다 form 태그를 사용해서 할일목록을 추가하는 방식으로 해보겠습니다. input type은 text로, placeholder 는 할일을 여기에 쓰라고 유.. 2023. 8. 10. [TO-DO-App] 투두앱을 만들어보자 by React - 02. 할일 목록 저장 TodoList 컴포넌트 구현 - 리액트는 컴포넌트를 결합하여 만들어진다. 이 앱의 메인 컴포넌트인 를 만들어보자 코드의 주요 특징은 다음과 같다 - 컴포넌트를 선언하는 export default function 을 통해 선언. - useState를 통하여 상태를 정의하고 그것을 설정하는 함수인 setTodos를 가지고 있는 map을 선언. - todos에 모든 할일 목록을 가지고 있음 - id는 UUID를 통해서 랜덤화 시키고, 실제 할일은 text라는 prop에 넣는다 - 활성 상태 여부를 status라는 prop으로 선언. - handleAdd라는 함수로 추가하는 로직을 만들고 그 과정에서 useState의 setTodos를 사용 - AddTodo 라는 컴포넌트를 선언하고 추가 기능을 구현한다. (.. 2023. 8. 6. [TO-DO-App] 투두앱을 만들어보자 by React - 01. 기능 요구사항 정의 간단하게 할일을 관리하는 투두앱을 리액트로 만들어보자. 1. 기능 요구사항 - 전체아이템 보여주기 - 아이템 추가 - 아이템 삭제 - 아이템 체크박스 - 아이템 필터링(활성, 완료등) - 다크모드 지원 전체 코드는 아래 깃헙에서 보실 수 있습니다! https://github.com/jhshim0131/todo-app 2023. 8. 6. React 관련 Tool FrontEnd 개발에서 자주 쓰게 되는 Tool을 알아보자. Babel : 바벨은 ES6로 쓰여진 코드를 ES5로 변환해준다. Webpack : 리소스(Assets)들을 번들링 해준다 https://webpack.js.org/ ESLint :코드의 잘못된 부분, 문법적으로 틀린 부분을 지적해준다 Jest : 자바스크립트 테스팅 프레임워크 PostCSS : css 라이브러리 2023. 8. 6. yarn 생성 프로젝트 구조 설명 더보기 기본적으로 yarn 을 사용해 만든 프로젝트들은 모두 같은 구조로 만들어진다. 프로젝트에서 yarn 으로 처음 생성된 파일들을 살펴보자. .yarn : yarn 을 실행할때 사용 .yarn_lock : 라이브러리 버전 정보가 들어있음 .pnp ~ : 플러그인 플레이 방식으로 필요한 패키지(라이브러리)를 설치해서 사용 .gitignore : git에서 버저닝 하지않을 파일 목록 src/ : 소스코드(동적인 리소스) 관련 파일들 public/ : 정적 리소스 관련 파일들 (스프링의 resources/ 폴더 역할) 주로 src 에 변하는 부분(동적 리소스) public에 변하지 않는 부분(정적 리소스)를 넣는다 2023. 8. 5. node 완벽히 제거 더보기 맥에서 node 프로젝트별로 다르게 쓰려다가 꼬이는 경우 관련 파일을 지우는 법. https://www.positronx.io/how-to-uninstall-node-js-and-npm-from-macos/ How To Uninstall Node JS and (NPM) from MacOS? Uninstall Node JS and NPM on MacOs- Step by step guideline on how to uninstall Node JS and Node Package Manager(NPM) from MacOS. www.positronx.io 2023. 8. 5. Creat React App - 프로젝트 생성 처음 시작할때 하는 기본 방법 yarn create react-app basic basic 폴더에 리액트 프로젝트 시작. 그 외 yarn 명령어 yarn start // 프로젝트 시작 yarn build // 프로젝트 빌드 yarn test // 테스트 실행 yarn eject // 포장지 까지, 추후 설명 react 프로젝트 시작 node 설치 (node 패키지 다운로드 ) yarn 활성화 ($corepack enable) create react-app ($yarn craete react-app ) 설치에 대한 참고: https://create-react-app.dev/docs/getting-started/ Getting Started | Create React App Create React App i.. 2023. 8. 5. 리액트 역사, 개념 설명 Why React? 리액트 역사 facebook : javascript library(2013) react native (2015) hooks v16.8 (2019) SSR+ v18 (2022) SPA : 한어플리케이션 내에서 렌더링 CSR : 클라이언트에서 리액트 코드를 다운받아서 실행 SSG: 스테틱 사이트 제너레이터 (ex.gatsby) 프레임워크 vs 라이브러리 앵귤러, 스프링 vs 리액트 자율성이 떨어짐, 강력한 워크 플로우 큰 문제를 품 Vue.js 는 프레임워크와 라이브러리 사이 :경량형 프레임워크, 제공안되는 프레임워크 툴도 있음. 라이브러리: 진입장벽 낮음 작은 문제 UI Routing 등등 리액트 철학 자바스크립트 라이브러리 React → “Renders UI and responds t.. 2023. 8. 5. 이전 1 2 3 4 다음
