개발 일지

2. 프론트 세팅 폴더세팅 - src/public 폴더 생성 ㄴ js 폴더 생성 ㄴ app.js 파일 생성 - src/views 폴더 생성 ㄴ home.pug 파일 생성 home.pug에서 일반적인 html을 우선 작업한다. doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title RTC body h1 It works! pug 세팅을 위해 server.js에서 import express from "express"; const app..

1. 백엔드 세팅 npm init -y 명령어를 실행하면 package.json이 생성된다. scripts, main은 삭제해주고, 기타 필요한 부분만 작성해준다. { "name": "zoom", "version": "1.0.0", "description": "Zoom Clone using WebRTC and WebSockets", "license": "MIT" } nodemon 설치 npm i nodemon -D * babel.config.json 파일 생성 * nodemon.json 파일 생성 * src 폴더 생성 ㄴ server.js 생성 바벨설치 npm i @babel/core @babel/cli @babel/node @babel/preset-env -D .gitignore에 /node_modul..

1. npx create-react-app $ npm init react-app 파일명 or $ yarn create react-app 파일명 2. prettier & eslint-plugin install npm install prettier eslint-config-prettier eslint-plugin-prettier or yarn add prettier eslint-config-prettier eslint-plugin-prettier 3. router@v6, styled-components 설치 npm i react-router-dom --save npm i styled-components --save 4. .eslintrc.json 설정 { "extends": ["react-app", "plu..

[개요] 반시계 방향으로 도넛차트가 줄어드는 함수 구현하기 [방법] conic-gradient라는 css 속성을 활용 setInterval( ) 함수로 일정시간 동안 타이머처럼 원의 영역이 줄어들도록 구현함 1. conic-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient conic-gradient() - CSS: Cascading Style Sheets | MDN The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather t..

리액트의 또다른 코어 컨셉 중 하나인 State에 대해 알아보자. 리액트를 한 번이라도 접해본 사람이라면 "상태값"이라는 단어를 아마도 많이 들어봤을 것이다. 이 상태값인 "state"는 말 그대로 상태가 변경되는 값으로 컴포넌트 내부에서 변경될 수 있다. 웹 브라우저에서는 다양한 상호작용으로 인해 화면 자체에 빈번한 변화가 생긴다. 예를 들면, 폼 안에 입력 필드를 수정하면 업데이트되고, 슬라이드 되는 화면에서 "다음"버튼을 누르면 다음 슬라이드가 보이며, "장바구니에 담기"를 클릭하면 장바구니에 담기는 것들이 모두 interaction이다. 컴포넌트들은 현재 input의 입력 값, 현재의 슬라이드 페이지, 장바구니 등을 "기억"해야 한다. 리액트에서는 이러한 종류의 컴포넌트 별 메모리(기억 저장소 쯤..

연습문제를 작성해보기에 앞서 프로젝트 세팅을 해보려고 한다. 번들러는 Vite를 사용하였고, Vite + Typescript + SWC 를 사용하여 프로젝트를 생성하였다. 아래 명령어를 입력하여 간단하게 Vite 프로젝트를 시작할 수 있다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io SWC는 Speedy Web Compiler의 약자로, Rust로 만든 자바스크립트 컴파일러 & 번들링 툴이다. 찾아보니 주로 Next.js와 호환하여 많이 사용하는 듯하다. (참고 글 : https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/ ) 아무튼..

리액트란? - UI를 랜더링하기 위한 자바스크립트 라이브러리이다. - 공식문서 리액트를 설명하기에 앞서 대부분의 자바스크립트 기반의 프레임워크는 MVC(model-view-controller), MVVM(model-view-view-modal) 아키텍쳐를 사용한다. 여기서 모델은 데이터를 직접관리하는 영역 / 뷰는 사용자에게 보이는 영역 / 컨트롤러는 모델 데이터 조회, 수정, 변경된 사항을 뷰에 반영하는 영역이다. 일반적으로는 사용자의 어떤 행위가 발생하면 컨트롤러를 통해 뷰를 수정한다. 어떤 데이터가 변할 때마다 어디가 변했는지를 확인하는 것보다 그냥 아예 뷰를 갈아끼우는 방법을 고안한 것이 바로 리액트이다. 리액트는 정해진 규칙에 따라 뷰를 새로 렌더링하기로 한 오직 뷰(View) 만 신경쓰는 라이..

1. brew 설치여부 확인 brew -v 🧐 설치가 안되어 있다면 👇 https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 2. rbenv 설치 brew install rbenv react native에서 ruby가 필요하다. rbenv는 ruby를 버전별로 지원한다. 3. ruby 2.7.6 설치 (2023년 3월 기준) rbenv install 2.7.6 rbenv global 2.7.6 rbenv rehash gem install bundler 4. node, npm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/ins..

WARN Issues with peer dependencies found . └─┬ sb 6.5.16 └─┬ @storybook/cli 6.5.16 └─┬ @storybook/core-common 6.5.16 ├── ✕ missing peer typescript@"*" ├── ✕ missing peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" └─┬ fork-ts-checker-webpack-plugin 6.5.2 └── ✕ missing peer typescript@">= 2.7" Peer dependencies that should be installed: react..

npm 사용시 캐시를 삭제하기 위한 명령어는 다음과 같다. npm cache clean --force 그런데, pnpm 을 사용해서 캐시를 삭제하니 해당 명령어가 작동하지 않았다. pnpm으로 캐시를 삭제하고 싶으면 다음 명령어를 사용한다. pnpm store prune 1. package-lock.json 대신 pnpm-lock.yml 파일 삭제 2. node modules 디렉토리 삭제 3. pnpm install