milliwonkim의 블로그

DOM(Document Object Model = 문서객체모델) - 자바스크립트가 p, a 태그 등을 조작할 수 있게 만든 트리구조 객체모델 - HTML/CSS DOM JavaScript 가상돔이 필요한 이유 - 매번 document 객체를 이용해서 DOM 내의 태그 등을 가져올 경우 => 렌더링 비용이 큼 렌더링 = '스타일 => 레이아웃 => 페인트 => 합성'의 과정 중 스타일 이후의 과정(레이아웃, 페인트, 합성) 리렌더링 반복 시 => 돔 추가 삭제 등 계산이 계속 발생 => 안좋음 가상돔을 이용한 리액트의 렌더링 - '변화 전 가상돔 변화 후 가상돔' 끼리 비교 => 바뀐 부분만 실제 돔에 적용 레이아웃 계산은 한 번 뿐(일괄 돔 업데이트 방식) 작은 규모의 레이아웃이 여러번 발생(리플로우)보..

git init 후에 code .git/config // .git/config [user] email = you@example.com name = my name * 가장 처음 커밋은 되돌릴 수 없는 것으로 알고 있음 => 이럴 경우 rm -rf .git 후 다시 code .git/config를 해서 프로젝트 내부의 .git 파일에 유저 정보를 적은 후 커밋하기 rm -rf .git git init code .git/config // .git/config [user] email = you@example.com name = something

// package.json { "name": "esbuild-react", "version": "1.0.0", "main": "index.js", "author": "김기원", "license": "MIT", "scripts": { "build": "rm -rf build && node build.js", "start": "node start.js -w && open http://localhost:3000" }, "devDependencies": { "esbuild": "^0.15.8", "esbuild-plugin-inline-image": "^0.0.8" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } // build.js c..

젠킨스 설치 후 젠킨스 시작 brew services start jenkins-lts // 이미 실행됐을 경우 => Service `jenkins-lts` already started, use `brew services restart jenkins-lts` to restart. 젠킨스 MacOS 설치 및 실행 커맨드: https://www.jenkins.io/download/lts/macos/ macOS Installers for Jenkins LTS macOS Installers for Jenkins LTS Homebrew Installer Jenkins can be installed using the Homebrew package manager. Homebrew formula: jenkins-lts ..

Docker로 빌드하기 // Dockerfile // root에 만들기 FROM node WORKDIR /app # 도커에 미리 package.json과 전체 디렉토리 파일을 카피한다 # 그리고 이것들을 캐싱해서 # 바뀐게 있는지 감지한다. # 바뀐게 있을 때만 npm install을 한다 COPY package.json . RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"] // 특정 이미지로 빌드 실행하기 docker build -t react-test-1 . // 현재 도커 이미지가 뭐가 있는지 확인하기 docker image ls // 결과값 // REPOSITORY TAG IMAGE ID CREATED SIZE // 7aea5541fc87 Ab..

Client: React Backend: Express Token Management: JWT 주요 기능만 블로그에 적고 구체적인 코드는 소스코드에 적어두겠습니다 Client // client/src/services/api.js import axios from "axios"; export const api = axios.create({ // express 서버가 띄워져있는 주소 baseURL: "http://localhost:4000", // withCredentials를 true로 해야 refreshToken cookie를 주고 받을 수 있다 withCredentials: true }); // client/src/services/authHeader.js export default function aut..

Yarn Berry란? yarn berry는 yarn classic 버전과는 다르게 node_modules 대신 .yarn/cache 폴더에 zip파일을 두고, 해당 모듈을 .pnp.cjs, .pnp.loader.mjs를 통해서 가져옵니다. // npm 기반 의존성 관련 파일 및 폴더 삭제 rm -rf node_modules package-lock.json // yarn berry 버전으로 변경 yarn set version berry yarn --version // 3.2.3 => 메이저 버전이 1이면 classic version, 3 이상이면 yarn berry version // 이후 .yarn/releases 폴더 안의 yarn-3.2.3.cjs를 볼 수 있습니다 // yarn berry를 이용해..

// react-monorepo라는 폴더를 만들고 yarn init mkdir react-monorepo && yarn init // react-monorepo안에서 packages 폴더를 만든다 cd react-monorepo && mkdir packages // packages 폴더 안에서 이용할 패키지들을 구성한다 // 예시로 CRA로 web, common 패키지를 구성한다 cd packages && npx create-react-app web && npx create-react-app common packages /web: 페이지를 렌더링 할 프로젝트(이걸 deploy 해야함) /common: web에 사용할 컴포넌트 제공 // react-monorepo 맨 상위 루트로 돌아온다 cd react-..

import { defineStore } from 'pinia'; export const useDiariesStore = defineStore('useDiariesStore', { // TypeScript에서 타입 체킹을 위해 초기화 값을 넣어줌 state: () => ({ diaries: [{ id: 0, title: '', contents: '', date: new Date() }], }), getters: { getDiaries: (state) => state.diaries, }, }); 이 다이어리 pinia store에서 diaries를 Vue 컴포넌트에서 접근해보자 {{ diary.title }} {{ getDate(diary.date) }} {{ diary.contents }} 일기쓰기

SQL은 백엔드 업무 시, 데이터베이스로 유용하게 쓰이는 데이터베이스 형식입니다. 그리고 요즘은 데이터 분석가 등 데이터를 이용한 업무에도 필수로 사용하는 것이 SQL입니다. 그 중에서도 MySQL은 주로 사용하는 툴 중 하나입니다. 따라서 SQL 연습을 해야하는 부분도 있는데, MySQL은 Workbench를 설치하거나 혹은 Terminal로 하는 등, 일반적으로 연습용으로는 쉬운 접근 방식은 아닌 것 같습니다. 해당 링크 서비스는 웹에서 무료로 SQL을 연습할 수 있게 해주는 유용한 툴로 보입니다. MySQL, PostgreSQL 등으로 연습이 가능합니다. https://www.db-fiddle.com/ DB Fiddle - SQL Database Playground www.db-fiddle.com