2022.02.15 - [REACT] - [Next.JS] Dynamic Routes [Next.JS] Dynamic Routes Next.js Next.js = React framework - Production을 위한 framework - A fullstack framework for ReactJS - NextJS solves common problems and makes building React apps easier. - React 성능을 향상시켜서 대.. manon-kim.tistory.com https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The wo..

SDK (Software Development Kit) 하드웨어 플랫폼, 운영 체제(Operatting System, OS) 또는 프로그래밍 언어 제작사가 제공하는 일련의 툴이다. 소프트웨어 개발자는 SDK를 활용하여 특정 플랫폼, 시스템 또는 프로그래밍 언어에 따라 애플리케이션을 개발할 수 있다. 일반적으로 기본 SDK에는 compiler, debugger, API(Application Programming Interface)가 포함된다. 다음 중 한 가지도 포함될 수 있다. 설명서 라이브러리 편집기 런타임/개발 환경 테스트/분석 툴 드라이버 네트워크 프로토콜 ex) Android SDK, JDK, iOS SDK, .NET Framework SDK, Facebook SDK API (Applicatio..

계정 생성 후 Network / Database Access 완료 후 Connect 작업환경에서 mongodb 설치 npm i mongodb MongoClient.connet('주소') username과 password 변경 import { MongoClient } from "mongodb"; async export default function handler(req, res) { if (req.method === "POST") { const data = req.body; const { title, image, address, description } = data; await MongoClient.connect( 'mongodb+srv://abd:@cluster0.6baoc.mongodb.net/myFi..

Next.js의 동적라우팅 React의 코드기반의 라우팅 (react-router)와 다르게 NextJS는 파일기반으로 routing을 한다. 이는 Next의 큰 장점이라 볼 수 있는데, react에서처럼 routing을 위한 추가적인 코드가 필요없이, pages폴더에 원하는 경로대로 폴더 구조를 만들고 하위에 파일을 만들면 쉽게 routing을 할 수 있다. File-based Routing npx create-next-app //Waht is your project name? 기본 폴더 구성 : pages / public / styles 파일기반 routing : pages폴더의 파일명이 path 이름으로 사용된다. ( news.js > our-domain.com/news ) pages폴더에서 new..

What is "Redux" ? 🔻 A state management system for cross-component or app-wide state. ✔️ state를 3종류로 크게 나눌 수 있다. 1. Local state : 하나의 컴포넌트에 종속되는 state 2. Cross-Component state : 하나 이상의 컴포넌트에 영향을 미치는 state(prop drilling) 3. App-Wide state : app전체의 기본적인 모든 컴포넌트에 영향을 미치는 state 🤷🏻‍♀️ React Context도 있는데 왜 Redux? context API의 단점 > 대규모의 app작업 시 state관리를 위해 : 수많은 context provider 컴포넌트가 중첩되어 복잡해진다. : prov..

const ImageUpload = ({ title }) => { const [selectedFile, setSelectedFile] = useState([]); const fileInput = useRef(); const fileSelectedHandler = (e) => { const fileName = e.target.files[0].name; window.localStorage.setItem(fileName, fileName); const addImg = () => { let imageArr = [...selectedFile]; imageArr.unshift(fileName); setSelectedFile(imageArr); }; addImg(); }; const addImgBtn = (e) =>..

localStorage 웹페이지를 새로고침하면 모든 state는 리셋된다. state 데이터를 DB로 저장하면 되는데, 좀 더 간단한 방법으로 localStorage가 있다. 사이트마다 5MB정도의 텍스트, 숫자 데이터를 저장할 수 있다. local Storage / Session Storage 개발자 도구에서 Application - Storage local Storage : 유저가 브라우저 청소를 하지않는 이상 영구적으로 남아있다. Session Storage : 브라우저를 끄면 날라간다. localStorage 조작 localStorage.setItem('key', 'value'); //추가 localStorage.getItem('key'); //읽기 localStorage.removeItem('k..

How does react work? React : A JavsScript library for building user interfaces. React는 component로 UI를 효율적으로 구축하고 업데이트한다. React는 component와 state를 관리하는 라이브러리일뿐이다! 컴포넌트들을 관리하고, 컴포넌트의 props, state, context가 변할 때 마다 그것을 쓰는 component를 update하고 컴포넌트가 화면에 새로운 내용을 띄우려는지 확인한다. 새로운 내용이 있으면 react가 reactDOM으로 전달해서 DOM이 새로운 화면, 즉 새로운 component를 화면에 띄운다. ( DOM : html을 계층구조화하여 트리구조로 만든 객체 모델이다. DOM을 활용하여 Java..

🔻 Prettier 옵션 커스텀 1. .prettierrc 파일 생성 - 옵션 커스텀 설정가능한 전체 옵션 { "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식 "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정 "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 "printWidth": 80, // 줄 바꿈 할 폭 길이 "..

JSON & 통신 JSON ( JavaScript Object Notation) : 데이터를 주고 받을 수 있는 데이터 형식이다. JSON에서 사용 가능한 타입 : String / Number / Boolean / null / Object / Array 일반적으로 객체와 배열이 JSON 데이터에서 최상위 레벨에 있다. - String을 감쌀 때 "쌍따옴표"만 유효하다. { "name": "Kim" } - Parse & Stringify 파싱과 직렬화 : JSON데이터를 파싱하면 자바스크립트 객체가 되어서 자바스크립트에서 데이터를 사용할 수 있다. parse() : JSON을 파싱하여 자바스크립트 값으로 바꾼다. stringfy() : 자바스크립트 객체를 JSON 문자열로 직렬화 한다.