본문 바로가기

전체 글203

[Git] git 로컬 저장소에 원격 브랜치 가져오기 💡 git 로컬 저장소에 원격 브랜치 가져오기 💡 VS code로 git clone을 했을 때 main 브랜치가 아닌 다른 브랜치에서 작업해야하는 경우가 있었다. 해당 브랜치를 로컬 저장소에서 git checkout origin/브랜치명 했을 경우 작업이 온전히 되지 않는 경우가 있었다. 1. 원격 브랜치 업데이트 먼저, 원격 저장소에 있는 브랜치들을 로컬 저장소에 업데이트 해야한다. 아래 명령어를 통해, 가져오고 싶은 브랜치를 확인하고, 로컬 저장소 목록을 업데이트한다고 생각하면 된다. git remote update git branch -r # 원격 브랜치 확인 git branch -a # 모든 브랜치 확인 2. 원격 브랜치 가져오기 t 옵션은 로컬에서 원격 브랜치를 tracking 하겠다는 의미이다.. 2023. 4. 14.
[Typescript] 타입스크립트에서 JSON import하는 방법 타입스크립트에서 JSON import하는 방법 // *.ts import testJSON from "./testJSON"; 자바스크립트에서 json을 import 하는 방법은 위와 같이 import 하면 된다. 하지만, 타입스크립트로 전환하게 된다면 타입스크립트는 기본적으로 JSON 파일 확인을 지원하지 않기 때문에 json을 가져오기 위해 별도의 설정이 필요하다. 간단하게 tsconfig.json 파일에서 "resolveJsonModule":true의 주석을 풀어줌으로써 typescript 파일에서 JSON 파일을 import 할 수 있다. // tsconfig.json { "compilerOptions": { "resolveJsonModule": true, // more awesome compiler.. 2023. 4. 9.
[React] vite로 react 프로젝트 설치 vite로 react 프로젝트 설치(Upate 2024.10.27) [Vite] Vite는 어떤 역할을 하고 있는가[Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.bo5mi.tistory.com  1. vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다. https://vitejs-kr.github.io/(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/)  ViteVite, 차세대 프런트엔드 개발.. 2023. 4. 5.
npm install 오류 발생 시, 해결 방안 npm install 오류 발생 시, 4가지 해결 방안 방법 1) pacakage-lock.json을 삭제 후, npm install 실행 방법 2) pacakage-lock.json과 node\_modules 모두 삭제 후, npm install 실행 방법 3) npm cache clean —force 이 명령어는 npm의 cache를 모조리 삭제하는 명령어 방법 4) 연속적으로 발생했던 npm install 오류 ⇒ canvas 라이브러리 문제 1. pacakage.json에서 canvas를 삭제 후, npm install 실행 2. pacakage.json에서 canvas를 되돌린 후, npm install 실행 ⇒ npm install 설치 되는 것을 확인함 ! 3. 해결 방안 !! (How t.. 2023. 4. 5.
Mac에 Homebrew 설치하기 Homebrew 설치하기1. 아래 명령어를 터미널 붙여넣는다.코드를 복사하고 싶다면, 해당 링크로 들어가 코드 복사 하기 - https://brew.sh/index_ko/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"위 명령어 사용하여 Homebrew를 설치한다.완료 후, brew help 등 명령어를 실행하면, zsh: command not found: brew 와 같은 에러가 발생한다. 2. 이후, 아래 명령어를 터미널 붙여넣는다.eval $(/opt/homebrew/bin/brew shellenv)* eval 명령어: 기회를 한 번 더 달라, 이 라인을 다시 해석하고 실행하라 라.. 2023. 4. 5.
nvm(node version manager) 설치 과정 nvm 이란,nvm이란 Node Version Manager의 약자로, Node.js 설치 및 버전 변경을 관리해주는 도구이다.  nvm을 사용하여 상황에 맞게 Node.js를 원하는 버전으로 설치, 변경 가능하다.nvm 설치 이유간략하게, 다른 팀원들과의 node, npm 버전을 맞추기 위함이다. nvm 설치 과정1. 아래 명령어를 터미널 붙여넣는다.curl -o- | bash2.  nvm을 확인했을 경우, 다음과 같이 command not found가 뜰 것이다.$ nvm ls -bash: nvm: command not found3. vi ~/.zshrc를 이용하여 zshrc에 환경 변수 설정한다.vi ~/.zshrc4. vi 에디터로 zshrc 안에 삽입 및 확인을 한다.알파벳 i (insert).. 2023. 4. 5.
npm update check failed 에러가 났을 경우 해결하기 ┌───────────────────────────────────────────────────────────────────┐ │ npm update check failed │ │ Try running with sudo or get access │ │ to the local update config store via │ │ sudo chown -R $USER:$(id -gn $USER) /Users/veritystothard/.config │ └───────────────────────────────────────────────────────────────────┘ 위와 같은 에러가 발생했을 경우, 아래의 명령어를 입력하면 된다. sudo npm i -g npm 2023. 4. 5.
npm install -g EACCES: permission denied 해결하기 💡 npm install 작업을 할 경우 함부로 sudo 권한으로 사용하게 되면 폴더마다 권한이 뒤섞이기 때문에 조심해야한다. (유념하기) npm 전역 설치 시 EACCES: permission denied 해결 방법 1. npm global 경로를 만든다. (첫 번째 코드) 새 디렉토리 경로를 사용하도록 npm을 구성하고, (두 번째 코드) vi에서 ~/.zshrc 파일을 연다. (Mac의 기본 쉘이 된 zshrc) (세 번째 코드) mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.zshrc 2. vi 편집기로 profile에 들어왔다면, 당황하지 말고 알파벳 i (insert)를 누르고 다음 사항을 입력한다. export PATH=~.. 2023. 4. 5.
[React] 리액트 파일 확장자를 jsx로 하는 이유 결론적으론 .js와 .jsx의 확장자로서의 차이는 없다. 리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용한다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 한다. 즉, 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절하다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 한다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정한다. Reference https://stackoverflow.com/questions/46169472/reactjs-js-vs-j.. 2023. 1. 11.
[React] 비동기 통신과 AJAX와 fetch 함수 한 번에 보기 0. Before enter to Fetch, What is AJAX? HTML에서 화면을 이동하기 위한 방법이 어떤 것이 있을까? 방식으로 주소를 줘서 이동하는 것을 생각할 수 있을 것이다. 그러나 이 방식은 화면 전체를 교체하는 것이기 때문에 이동할 때마다 화면이 깜빡거리게 될 뿐더러 페이지의 용량이 크다면 전환까지의 시간이 오래 걸린다. 심지어 자바스크립트는 싱글 스레드 방식이기에 하나의 스레드에서 모든 것을 돌려야 한다. 이를 보완하기 위해 비동기 통신이라는 개념이 등장했다. 여기서 잠시 비동기가 무엇인가 하면, 비동기란 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라.. 2023. 1. 11.
[React] 로그인 기능(JWT, Local Storage): token 저장, 서버에 전달하기 유튜브 프리미엄은 로그인을 해야 광고를 보지 않을 수 있고, 쿠팡에서는 로그인을 해야 내 장바구니로 넘어갈 수 있다. 이러한 인가 과정에서 필수적 요소는 바로 token이다. ! 로그인 후 발생되는 token을 localStorage에 저장하고, 특정 사이트에서 필요할 때 서버에 보내는 것까지의 과정을 알아보자. 0. token, 왜 필요한가? HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token이다 ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마.. 2023. 1. 11.
웹 통신의 큰 흐름(브라우저, 프로토콜 스택, LAN 어댑터, 허브, 스위치, 라우터, 방화벽, 캐시 서버, 웹 서버) 웹 브라우저에 google.com을 입력했을 때 어떤 일이 일어날까? in 브라우저 1. 주소창에 입력된 URL 파싱 2. HTTP request 메시지 생성 3. 웹 서버에 HTTP request 메시지를 전송 이 때 만들어진 메시지 전송은 브라우저가 직접하는 것이 아니다. 브라우저는 메시지를 네트워크에 송출하는 기능이 없으므로 OS에 의뢰하여 메시지를 전달한다. 우리가 택배를 보낼 때 직접 보내는게 아니라, 이미 서비스가 이루어지고 있는 택배 시스템(택배 회사)을 이용하여 보내는 것과 같은 이치이다. 단, OS에 송신을 의뢰할 때는 도메인명이 아니라 IP주소로 메시지를 받을 상대를 지정해야 하는데, 이 과정에 DNS 서버를 조회해야 한다. - 네트워크에 HTTP 요청을 보내는 것은 네트워크를 담당하는.. 2023. 1. 9.

티스토리툴바