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 아이템을 나타내는 객체로 이루어진 배열이 될 것이..

선택지역을 polygon으로 표시하는 map 기본 Kakao Map 설정 https://developers.kakao.com 카카오 개발자 사이트에서 카카오 로그인 내 에플리케이션 - 애플리케이션 추가하기 - 앱이름 등록 생성한 앱클릭 - 플랫폼 - 사용할 플랫홈 선택 후 도메인 설정 html파일에 추가 지도 생성하기 javaScript로만 할 경우 import React, { useEffect } from 'react'; const { kakao } = window; export const KakaoMap = () => { useEffect(() => { const container = document.getElementById('map'); const options = { center: new kak..

Cross-Origin Resource Sharing CORS는 추가 http header를 사용하여, 한 출처에서 실행중인 web application이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제이다. web application은 resource가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 Cross Origin 교차 출처 http요청을 실행한다. ex) https;//domain-a.com의 프론트엔드가 XMLHttpRequest를 사용하여 https;//domain-b.com/data.json을 요청하는경우 보안상의 이유로, 브라우저는 스크립트에서 시작한 교차출처 http요청을 제한한다. XMLHttpRequest과 Fetch API는 동일 출처..

https://github.com/manonkim/A_team_test GitHub - manonkim/A_team_test Contribute to manonkim/A_team_test development by creating an account on GitHub. github.com Filtering 기능이 있는 Dashboard 필터링 기능 1. dropdown menu 클릭 시 checkbox 생성 (toggle + menu 바깥영역 클릭 시 close) 2. checkbox 클릭 : 견적 요청 카드 필터링 + dropdown menu에 클릭한 checkbox 카운팅 + Reset button 노출 3. '필터링 리셋' 클릭 시 filtering 초기화 4. '상담 중인 요청만 보기' Toggl..

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..