개발 블로그

https://manon-kim.tistory.com/entry/Regex-%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9D-quantifier [Regex] 정규 표현식(1) - Quantifier 수량자 What is a Regular Expressions? Not matching exact strings Instead, matching patterns of strings 정규표현식, 또는 정규식은 특정 문자 조합을 찾기위한 패턴이다. Regular Expressions = regex (Regg-ex or Redge-ex로 발음한다.) 🌟 manon-kim.tistory.com [ ] 대괄호 [ ] square bracket 대괄호 안의 문자중 어떤 것도 선택할 수 ..

Supabase는 오픈 소스 서비스로, Firebase의 대안으로 사용할 수 있는 serverless DB 솔루션 입니다.PostgreSQL을 DB engine으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있습니다.   주요 기능실시간 데이터베이스 (Real-time Database)PostgreSQL의 데이터 변경 사항(삽입, 수정, 삭제 등)을 실시간으로 감지하여 클라이언트에 전달합니다.실시간 기능은 웹소켓(WebSocket)을 통해 동작합니다.인증(Authentication)사용자 등록, 로그인, 소셜 로그인(Google, Facebook 등) 같은 인증 기능을 지원합니다.Role-Based Access Control(RBAC) 및 JWT 토큰 기반 인증 제공.스토리지(Storage)파..

Next.js Caching 참고) unstable_cache는 archive 되었고 이를 대신하는 실험중인 기능입니다. This API is currently experimental and subject to change. use cache는 캐시할 컴포넌트, 함수 또는 파일을 지정합니다. 파일 상단에 사용하여 파일의 모든 함수를 캐시할 수 있음을 나타내거나 함수 상단에 인라인으로 사용하여 함수를 캐시할 수 있는 것으로 표시할 수 있습니다. 이것은 실험적인 Next.js 기능이며, use client나 use server와 같은 native React 기능이 아닙니다.   Next.config.ts 파일에서 dynamicIO 플래그를 사용하여 use cache 지시어에 대한 지원을 활성화할 수 있습니다..

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

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

useOptimistic (state, updateFn): 사용자가 폼을 제출할 때(네트워크 요청과 같은 백그라운드 작업이 완료되기 전),  서버의 응답을 기다리는 대신 UI를 기대하는 결과로 즉시 업데이트하여 유저에게 보여주고 싶을 때 사용한다.   const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);  useOptimistic은 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해주는 React hook입니다.현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 상태를 반환합니다. 이 상태는 “낙관적” 상태라고 불리는데, 실제로 작업을 완료하는 데 시간이 걸리더라도사용자에게 즉시 작업의 결..

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

1. 패키지를 공유할 때, 그 안의 node_modules 디렉토리는 공유하지 않는다. 하나의 패키지는 여러 명의 개발자가 협력해서 만드는 게 일반적입니다. 그럼 이때 협력하는 개발자들끼리는 패키지를 어떻게 공유할까요? 패키지는 package.json 파일이 있는 디렉토리니까 이 디렉토리를 서로 주고받으면 되는데요. 이때 중요한 점이 하나 있습니다. 패키지를 공유할 때, 패키지 안에 있는 node_modules 디렉토리는 보통 공유하지 않는다는 점입니다. node_modules 디렉토리가 뭐였죠? 현재 작업 중인 패키지에서 이런저런 패키지들을 설치하면 그것들이 설치되는 곳이었습니다. 그런데 이렇게 중요한 node_modules 디렉토리를 왜 공유하지 않는 걸까요? 왜냐하면 보통 패키지를 몇 개 정도만 설..

Virtual DOM  가상돔  React의 대표적인 특징 중의 하나는 virtual DOM이 있다는 것입니다.가상 DOM을 이해하기에 앞서 DOM과 browser의 rendering과정부터 알아야 합니다. DOM (Document Object Model) : HTML 문서 구조를 계층구조의 객체로 표현HTML로 구성된 웹 페이지와 프로그래밍 언어(ex. JavaScript)를 연결시켜 주는 역할  브라우저의 렌더링과정은 아래와 같습니다.브라우저가 사용자가 요청한 주소를 방문해 HTML파일을 다운로드한다.서버로부터 html 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱 하며 태그와 속성들을 DOM tree형태로 메모리에 저장한다.2번 과정에서 css 링크나 스타일 태그를 만나면 CSS..