Today Hailie Learned

node version 바꾸기 node -v // 내가 사용하고 있는 node 버전 확인하기 nvm list available // 사용 가능한 버전 조회하기 nvm install 20.12.2 // 20.12.2 버전 다운로드하기 (저는 lts 버전으로 사용함) nvm list // 설치되어 있는 버전 확인하기 nvm use 20.12.2 // 20.12.2 버전 사용하기 node -v

.zshrc(닷 지셀알씨) 이 이야기는 루비(ruby 3.2.2) 버전을 설치하다가 .zshrc을 통으로 날려버린 슬픈 이야기를 담았습니다. 먼저 .zshrc 에 대해 알아봅시다. .zshrc은 Zsh 쉘의 설정 파일로, 사용자 정의 환경을 설정하고 쉘 동작을 조정하는 데 사용됩니다. 이 파일은 주로 사용자의 홈 디렉토리에 위치하며, Zsh 쉘이 시작될 때 자동으로 실행됩니다. 사용자는 이 파일을 수정하여 다양한 환경 변수, 별칭, 함수 및 기타 설정을 추가하거나 변경할 수 있습니다. 개발자라면 새 맥북을 받으면 설정하는 것이 iTerm2, Oh My ZSH 등등 일 것입니다. 이들을 설정하면 zshrc 파일이 채워집니다. 새로운 프로젝트를 진행하면서 해당 프로젝트를 로컬 환경에 다운 받고, 서버를 키는..

개인 프로젝트를 만드는데 백엔드 분께서 로컬에서 DB 세팅 후 백엔드 서버를 설치하고 서버를 켜는 방법을 알려주셔서 기록을 남기기 위해 글을 남깁니다. 프론트엔드가 로컬에서 DB 설치 후 서버켜는 방법을 알면 좋은 점은?! 1. 간혹 가다가 프론트엔드 테스트를 하다가 서버가 다운되는 경우, 쉬고 있는 백엔드 개발자에게 부탁을 하지 않아도 된다. 2. 데이터가 실제로 어떻게 저장되는지 확인할 수 있어서 신기하다. 3. 데이터가 들어가는지 안들어가는지 직접적으로 확인이 가능해서 디버깅이 용이하다. 1. Homebrew로 PostgreSQL 설치 brew install postgresql 1-1. 만약 Homebrew가 설치되지 않았다면?! /bin/bash -c "$(curl -fsSL https://ra..

이번 MacOS 업그레이드를 하면서 문제가 발생했습니다. 1. 기존에 작업하던 vscode 의 git 연동이 풀려있음. 2. Git을 재설치하라고 안내창이 나. 3. 터미널에 ```git --version``` 명령어를 치면 아래처럼 무서운 에러가 나옴 4. 할 수 없이 brew로 git을 설치하려는데 뭔가 느낌이 쎄해서 찾아보았더니 간단하게 해결할 수 있었습니다. 해결 방법 xcode-select --install 몰랐는데 MacOS 업데이트 높은 확률로 나오는 개발 관련 툴을 실행시 나오는 에러라고 합니다. 각 도구들의 문제가 아닌 Command line tool을 식별해서 발생한 문제라고 합니다. 설치는 대략 2~3분 정도 걸렸고, 문제가 있던 git이 정상적으로 돌아왔습니다.

nvm 설치 방법 1. brew 설치 2. brew를 활용하여 nvm 설치 brew install nvm 3. 환경 변수 설정 - ~/.nvm 디렉토리 생성 mkdir ~/.nvm touch ~/.zshrc vi ~/.zshrc 파일 내에 코드 입력 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm esc + :wq(저장 후 종료) source 명령어로 스크립트 실행 source ~/.zshrc mac에서 프로젝트마다 node 버전 다르게 설정하는 방법 1. vscode 익스텐션 설치하기 vscode nvm integration 2. 프로젝트에 .nvmrc 생성하기 3. nvm list ..

기업 과제를 하거나 프로젝트 후 리드미를 꾸미는 건 개발자의 필수 역량이라는 말을 듣고 리드미 작성하는데 관심이 생겼습니다. 그래서 다른 분들의 프로젝트 리드미를 구경하다가 프로젝트 파일 구조를 보기 쉽게 작성하신 분들이 많다는 걸 알았고, 저도 그 방법에 대해서 궁금했습니다. 저는 최근에 비지니스 로직과 뷰 로직을 분리하는 것에 관심이 생기기도 했고, react-query를 사용한 프로젝트에서 데이터를 관리하는 로직을 hook으로 만들어서 사용한 간단한 프로젝트가 있었는데 내가 관심사 분리를 했다고 다른 사람들에게 자랑하고 싶은 마음이 컸습니다. 그래서 발견한 vscode의 익스텐션! file-tree-generator ⚡️file-tree-generator ⚡️사용방법 트리 구조로 시각화하고 싶은 파..

그동안 CRA(create-react-app)만을 사용하다가, 현직에서는 CRA보다 Vite를 더 많이 사용한다는 말에 Vite가 궁금해졌습니다. Vite는 esbuild를 사용해서 빌드 속도가 빠른 빌드 도구 입니다. 빠르다는 이야기에 바로 테스트를 해보았는데 CRA보다 체감상 정말 빨랐고, 바로 vite를 사용하게 되었습니다. //package.json "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, package.json에는 "dev"라는 명령어로 브라우저를 킬 수 있습니다. 그래서 npm run dev를 하면 아래와 같은 주소에 실행됩니다. 그런데 CRA환경과 다르게 자동으로 브라우저가 열리지 않고, c..

메인 프로젝트에서는 CRA보다 빠른 환경에서 개발을 할 수 있다는 멘토님의 말에 vite 환경에서 개발을 하게 되었습니다. 프론트단에서 cors 에러를 해결하기 위해 proxy 설정을 하게 되었고, cra 환경과는 다른 설정 방법이기에 정리합니다. import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import svgr from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [svgr(), react()], esbuild: { define: { this: "window", }, }, server: { pr..

1. init-y 하기 init -y 2. 리액트 파일 만들던가 복사하기 리액트 설치하고 import하기 npm i react react-dom 3. 웹팩, 웹팩-cli 설치하기 npm install -D webpack webpack-cli 4. 바벨 설치하기 npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react babel-loader 역할: ES6 => ES3, JSX => JS 나머지 역할 : 바벨 설정값 5. webpack.config.base.js 파일 만들기 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')..

매번 파일을 실행하지 않고, npm start 명령어를 이용하는 방법! 노드몬을 이용하자!! 👇설치방법👇 npm install nodemon으로 설치 package.json의 "scripts"에 아래 코드를 추가하기 "start": "nodemon server/basic-server.js" or npx nodemon으로 server/basic-server.js 파일을 실행하기 npx nodemon server/basic-server.js 참고 https://github.com/remy/nodemon 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓