개발 블로그

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

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는 동일 출처..