chez Manon

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 대괄호 안의 문자중 어떤 것도 선택할 수 ..

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

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

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

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처럼 동작하게된다. 이렇..

React에서의 스타일링 - css - css.module - styled component - scss styled-component 🔻사용이유 컴포넌트가 많은 경우 스타일링에 불편함이 발생한다. 1. class 중복으로 생성한다. 2. 다른 컴포넌트에 원하지않는 스타일이 적용된다. 3. css파일이 너무 길어져서 수정이 어렵다. > 컴포넌트 제작 시 styled-components라는 라이브러리를 이용하여 js파일에서 스타일을 바로 입힌다. 컴포넌트마다 고유한 클래스를 가진다. 🔻 설치 yarn add styled-components npm install styled-components //1.import 한다. import styled from "styled-components"; //2.style..

.gitattributes를 들어가기 전 Why? 왜 .gitattributes? react native 작업 후 PR을 올리려는데 project.pbxproj라는 파일이 포함되어있었고, 많은 변경사항이 있었다. 찾아보니 project.pbxproj는 native 개발 시 자주 충돌이 일어나는 주요 파일 중 하나였고, .gitignore에 추가하려고 생각했지만 gitignore에서 관리할 수 없고, .gitattributes 파일을 따로 만들어서 관리를 해야했다. 근데 project.pbxproj 파일이 뭔데? Xcode에서는 프로젝트를 관리하거나 프로젝트를 빌드하는 용도의 파일 혹은 항목들이 있다. 그 중 실제 프로젝트의 설정을 담은 파일이 project.pbxproj이다. Xcode의 프로젝트 관리 ..

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