chez Manon

Junior Frontend Developer로 면접을 보면서 자주나왔던 질문들을 정리한 내용입니다. 빈도 상(빨강) / 중(노랑) / 하(초록)으로 구분하였습니다. 큰 틀을 정리하는 차원에서 기본적인 내용만 기록했습니다. 자세한 사항은 추가 검색으로 정리하시길 바랍니다. HTML html? HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어) 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. - 마크업 언어(markup 言語, markup language) 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. - 마크다운 언어는 마크업 언어의 일종으로 우리가 흔히 사용하는 .md 확장자의 파일입니다. (Re..

선택지역을 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..

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