chez Manon

Portal Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 렌더링 하는 방법이다. 첫번째 인자는 렌더링 할 요소이고, 두 번째 인자는 DOM 엘리먼트 이다. ReactDOM.createPortal(child, DOMelement) 🔻 Portal을 활용하여 Modal 만들기 - html에 새로운 DOM 요소를 만든다. - ReactDOM을 import하고 의 첫번째 인자로 backdrop(요소외의 배경을 검정으로 해줄 요소) / modal로 띄워줄 컴포넌트를 넣어주고 두 번째 인자로 위에서 만든 overlays DOM을 지정해준다. import ReactDOM from 'react-dom'; const portalElement = document.getElementById('..

React Native app on an M1 Mac 기본 세팅 우선, 기본세팅은 React Native 공식 사이트나 다른블로그에 많이 나와있으니 생략하고 M1에서만 추가적으로 해야할 것들만 상세히 정리하겠습니다. Homebrew 설치 brew install node (17.x 이상버전 충돌 가능성 있음) brew install watchman Android Studio SDK 설치 custom 선택 계속 진행 JDK 11 이상 설치 SDK 설정 Xcode (Appstore) Cocoapods yarn 설치 sudo npm install -g yarn lerna 설치 gulp 설치 [공식문서 참고] https://reactnative.dev/docs/environment-setup Setting up ..

Git The world's most popular version control system. (VCS) - Version control 버전관리는 파일의 변화를 시간에 따라 추적하고 관리하는 것을 도와주는 소프트웨어이다. - 이전버전의 파일을 다시 볼 수 있게 해주고 버전들간의 혹은 파일들간의 변화를 비교하거나 변화를 되돌리고, 다른 작업자들과 그 변화를 공유할 수 있도록 해주는 등의 다양한 역할을 한다. - git 최초설정 (name과 email을 빼고 입력하면 설정된 상태 확인가능) git config -global user.name "name" git config -global user.email "email" - 기본브랜치명 (기본 브랜치명이 master로 설정되어있어서 main으로 변경) gi..

React Hook Form React Hook Form을 사용하는 이유 validation을 쉽게 구현할 수 있다. error를 쉽게 설정하고 초기화 할 수 있다. event를 하나하나 신경쓰지 않아도 된다. 코드의 양을 줄일 수 있다. (반복되는 코드를 줄일 수 있다.) Form 우선 비교를 위해서 React hook form 없이 기본 react만으로 코드를 짜본다. 기본적으로 username, pw, email을 입력하는 input을 만들고, 각각 onChange함수를 만들어주고 submit을 하게 한다. //기본 form으로 짠 코드 export default function Forms() { const [username, setUsername] = useState(''); const [emai..

TypeScript is "superset" to Javascript. 자바스크립트는 타입에 관대하다. 5 - '3' 이렇게 숫자와 문자를 연산해도 알아서 타입을 바꿔서 연산해주는데, 이는 자바스크립트가 Dynamic typing(동적타이핑)을 지원하는 언어이기 때문이다. 이런 Dynamic typing은 큰 프로젝트 시 type과 관련된 버그들이 많이 발생하면서 단점이 된다. 이런문제점을 해결해주는 언어로 타입스크립트가 사용된다. 타입스크립트는 자바스크립트의 superset이라고 불린다. 자바스크립트를 기반으로 하는 프로그래밍 언어, 혹은 자바스크립트의 확장이라고 할 수 있다. 핵심언어는 여전히 자바스크립트이다! TypeScript adds static typing to JavaScript. 타입스크립..

GraphQL & Apollo GraphQL GraphQL은 SQL와 같은 Query언어이다. GraphQL은 하나의 형식, 즉 명세이기 때문에 이를 구현할 방법이 필요한데 그 중 하나가 Apollo이다. Apollo Apollo는 GraphQL을 편하게 사용할 수 있도록 도와주는 라이브러리이다. Apollo는 client와 server에서 모두 사용가능하다. Apollo Server를 이용해 GraphQL이 적용된 백엔드 서버를 제작할 수 있고, Apollo Client를 활용하여 client상의 localstate를 이용할 수 있다. Setup npm install @apollo/client graphql @apollo/client: This single package contains virtuall..

https://planetscale.com/ PlanetScale The database for developers planetscale.com PlanetScale The MySQL-compatible serverless database platform. MySQL과 '호환되는' severless 데이터베이스 플랫폼. ( serverless : 우리가 서버를 관리하고, 유지보수할 필요가 없다. ) Vitess is proven as the most scalable open source database out there. 그냥 MySQL serverless이 아니라 MySQL-compatible인 이유는 Vitess가 있기 때문이다. Vitess로 인해 대량의 connections, tables과 다양한..

Tailwind CSS A utility-first CSS framework Tailwind CSS는 유틸리티 우선 CSS framework이다. - 많은 classname을 추가하고 조합하여 css를 쉽게 완성한다. - 반응형 사이트를 만들기가 쉽다. setting - 설치 npm install tailwindcss // postcss.confing.js, tailwind.config.js 파일 자동생성 - CSS에 추가 // globals.css @tailwind base; @tailwind components; @tailwind utilities; // tailwind.config.js module.exports = { content: [ //pages와 components 폴더의 모든 파일에 적용..

NextJS ➡️ 이전에는 백엔드는 GraphQL이나 Rest 사용하여 Node.JS로, 프론트는 React, Vue 등으로 만들었다. But, NextJS는 API를 만들기 위해 별도의 서버를 구축할 필요가 없이, Next만으로 풀스택 구현이 가능한 framework이다. ➡️ create-react-app에서는 모든게 CSR이다. CSR은 react코드가 불러오기전에는 화면이 그려지지 않아서 흰 화면만 보여질 수 있다는 단점이 있다. ➡️ NextJS에서는 페이지들이 미리 만들어진다. Next는 backend상에서는 ReactJS를 돌리고있고, 그동안 pre-generate(사전생성)하며 그것은 HTML페이지가 된다. js가 모두 다운로드 되어지면 모든게 일반적인 ReactJS처럼 동작하게된다. 이렇..

Kanban Board Drag & Drop kanban card 추가, 수정, 삭제 kanban 기본틀 kanban의 기본구성은 'To do' 'In progress' 'Done' 'Notes & Reference' 4개의 list로 구성한다. Add task 버튼으로 card를 생성하고, card는 수정과 삭제가 가능하며 list간 drag,drop으로 이동이 가능하게 구현한다. Recoil 기본setting https://recoiljs.org/ko/docs/basic-tutorial/atoms Atoms | Recoil Atoms는 애플리케이션 상태의 source of truth를 갖는다. todo 리스트에서 source of truth는 todo 아이템을 나타내는 객체로 이루어진 배열이 될 것이..