Someday_Study

VSCode GitHub Commit 오류 : Make sure you configure your "user.name" and "user.email" in git.

공부하는 한걸음 — Mon, 20 Jan 2025 00:30:28 +0900

vSCode와 GitHub 연결 후 처음 Commit을 진행할 시 아래와 같은 알림 창이 뜨는 경우가 있다.

번역하자면 "git에서 "user.name"과 "user.email"을 구성했는지 확인하세요." 이다.

간단하게 말하자면 VSCode에서 GitHub로 전송할 때 user의 이름과 이메일을 입력하지 않았다는 것이다.

해결방법

TERMINAL을 활성화시켜 아래와 같은 명령어를 작성한다.

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

여기서 "Your Name" 부분에는 영어로 닉네임을 "your.email@example.com"에는 이메일을 작성한다.

작성 예시

git config --global user.name nick
git config --global user.email nick@bbbb.com

정상적으로 입력 시 Commit를 클릭하면 진행이 된다.

React 실행 오류 : npm error code 3221225477

공부하는 한걸음 — Sun, 19 Jan 2025 01:13:29 +0900

위와 같이 React를 설치 및 실행시킬 시 npm install(node_modules 설치) 명령어를 터미널에 작성한다.

이때 발생할 수 있는 기초적인 error 코드가 3211225477이다.

이때 npm start를 실행하게 되면 아래와 같은 출력물을 볼 수 있다.

react-scripts start

'rdact-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

해결 방법

가장 단순한 방법으로 경로 내 한글로 되어있는 파일 이름을 영문으로 변경해 주는 것이다.

1. vscode 프로그램 종료

2. 실행시키고자 하는 React 파일이 있는 경로의 모든 파일명을 영문으로 변경

3. vscode 프로그램 실행

3-1. 파일 명을 영문으로 바꿨는데도 아래와 같은 오류가 날 경우 npm install (node_modules 설치 명령어) 작성하여 재설치 진행

3-2. error 코드 없음 확인

4. 터미널에 npm start 실행

정상 실행 확인 가능

VSCode GitHub 레파지토리 연결하기

공부하는 한걸음 — Sat, 18 Jan 2025 23:37:06 +0900

vs 코드가 설치가 되어 있고, gitHub 가입이 되어 레파지토리가 생성 되어있다는 전제 하에 진행하겠습니다.

VSCode 설치 는 아래 링크로 가능합니다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

먼저 vs 코드를 실행하시면 아래와 같이 Wellcome 페이지로 이동하게 됩니다.

여기서 왼쪽 아이콘으로 된 메뉴바의 3번째 아이콘인 Source Control을 클릭하시거나 Ctrl + Shift + g를 누르시면 아래와 같은 페이지로 이동하게 됩니다.

왼쪽 파란색 버튼인 다운로드 깃을 눌러주세요

2025년 1월 기준 아래 링크 페이지로 이동하여 프로그램을 설치하였습니다.

https://git-scm.com/downloads/win

Git - Downloading Package

Download for Windows Click here to download the latest (2.47.1(2)) 64-bit version of Git for Windows. This is the most recent maintained build. It was released on 2025-01-14. Other Git for Windows downloads Standalone Installer 32-bit Git for Windows Setup

git-scm.com

기본 설치할 때 Next를 눌렀지만 깃을 기본적으로 사용하는 프로그램은 무엇이냐는 물음에 저는 VSCode를 사용할 것이기에 이 부분만 변경해 주었습니다.

이외 다 기본으로 설정으로 진행했습니다.

자세한 설치는 아래 블로그를 참고하였습니다.

https://okeybox.tistory.com/261

[Git] Git설치, Vscode 설치와 Github연동까지

잡담) 청년인턴 사업을 다니면서 노트북을 받아서 프로그램을 처음부터 새로 설치할 수 있는 기회가 생겼습니다. 최신 버전으로 설치도 하고 이전에 포스팅하지 않았던 부족한 부분에 대해서도

okeybox.tistory.com

설치 완료 후 vs코드를 다시 실행시켜야 설치된 것이 적용이 됩니다.

왼쪽 하단 설정 버튼에 1이라고 알람이 뜬 것을 확인하실 수 있습니다.

Restart to Update를 클릭해 VSCode를 재시작 및 업데이트를 진행해 주세요.

자동 재시작 및 업데이트를 진행하며 아래와 같이 GitHub 가 추가되었다는 업데이트 내역이 확인되실 겁니다.

확인 이후 Welcome 탭에 보시면 중앙의 Start 목록 중 맨 아래 Connect to... 을 클릭하시면 아래와 같은 검색할 수 있는 창이 활성화됩니다.

여기서 GitHub Codespace를 클릭해 주세요.

지금 상황에서는 GitHub와 처음 연동하는 것이기 때문에 GitHub 로그인이 필요합니다.

따라서 Allow를 클릭하시면 아래와 같은 VSCode에서 GitHub를 사용하기 위해 로그인을 진행하겠다는 인터넷 창으로 연결이 됩니다.

GitHub를 로그인하시면 아래 인증 번호를 작성하라는 창으로 변경됩니다.

GitHub와 연결된 이메일로 인증메일이 가고, 인증코드를 입력하시면 VSCode에서 GitHub를 사용할 수 있는 기본적인 커넥트가 완료된 상황입니다.

여기서 꼭 Continue를 클릭해 주신 후 VSCode를 종료 후 재실행시켜주세요.

만약 클릭하지 않고 VSCode로 넘어갈 경우 아래와 같은 오류가 발생합니다.

VSCode로 넘어가면 오른쪽 아래 알림 창이 뜨는 것을 확인하실 수 있습니다.

간단하게 말하자면 GitHub를 VSCode에서 사용할 수 있도록 로그인은 했지만 승인은 아직 완료되기 전이다라는 뜻입니다.

즉 GitHub를 로그인했지만 확실하게 연결할지에 대해서 선택하지 않았다는 뜻으로 Yes를 누르시면 다시 아래 페이지로 이동하게 되며, Continue를 누르셔야 연동을 허가한다는 최종 확인이 됩니다.

Continue를 클릭하신 후 VSCode로 돌아오셔서 프로그램 자체를 종료시킨 후 재 실행 시켜주세요.

재실행시키지 않을 경우 아래와 같은 오류 현상이 진행될 수 있습니다.

간단하게 말하자면 GitHub에 코드를 올릴 공간이 없으니 새로 만들겠냐는 물음입니다.

Create를 클릭하면 위 검색공간이 활성화되며 아래와 같은 선택지가 활성화됩니다.

Connect to Codespace는 GitHub와 연결되어 있는 레파지토리를 사용하겠다는 것으로 저는 만들어져 있는 기존 레파지토리를 연결시킬 것이기 때문에 해당 선택지를 클릭하였습니다.

여기서 클릭을 해도 연동이 진행되지 않았습니다.

VSCode 재실행 후 첫 화면의 버튼이 아래와 같이 변경된 것을 확인하실 수 있습니다.

원래는 Open Folder 버튼만 있었는데 아래 Clone Repository가 생성된 것이 확인되고, 중앙에 Start의 메뉴 중 Clone Git Repository... 가 생성된 것을 확인하실 수 있습니다.

이후 Clone Repository 또는 Clone Git Repository... 를 클릭하시면

위와 같은 선택지가 활성화되고 클릭하게 되면 해당 GitHub를 정말 사용할 것이냐는 확인창이 활성화됩니다.

여기서 Allow를 클릭하시면 아래와 같은 확인창이 다시 한번 뜰 수 있습니다.

Continue를 누르시면 VSCode를 다시 열겠다는 알림 창이 뜨게 됩니다.

여기서 열기 버튼을 누르면 자동으로 VSCode 프로그램이 실행되면서 로그인한 GitHub 아이디에 연동된 레파지토리가 자동으로 리스트업 됩니다.

리스트 중 내가 원하는 레파지토리를 클릭하면 해당 레파지토리 clone의 저장 경로를 지정하게 됩니다.

여기서 중요한 포인트는 경로의 모든 파일 이름은 영어로 되어있어야 한다는 점입니다.

이 부분에 대한 오류는 React와 관련이 있으며 따로 설명드리겠습니다.

파일 경로까지 설정하셨다면 VSCode 프로그램의 알림 창이 뜨게 됩니다.

간단하게 말하자면 정말 이 경로가 믿을 수 있는 경로인지 물어보는 창입니다.

Yes를 누르시면 GitHub 연결 성공 및 레파지토리까지 연결 완료된 상태가 됩니다!

이상 VSCode와 GitHub 연결 및 GitHub 레파지토리 연결까지 과정을 작성해보았습니다!

도움 되길 바랍니다. :)

Visual Studio Code : React 자동완성 컴포넌트 템플릿 명령어

공부하는 한걸음 — Tue, 10 Dec 2024 11:52:28 +0900

자주 사용하는 코드 스피넷(컴포넌트 생성 약어) 모음

< React Arrow Function Export Component >

rafce
-> 현재 있는 파일 이름을 기준으로 const 에로우펑션에 export가 분리된 형식으로 생성됨

React
Arrow
Function
Component
Export

< React Function Export Component>

rfce
-> 현재 있는 파일 이름을 기준으로 function에 export가 분리된 형식으로 생성됨

React
Function
Component
Export

Visual Studio Code : React 단축키 템플릿 자동완성 Extension 설치

공부하는 한걸음 — Tue, 10 Dec 2024 11:21:43 +0900

리엑트 React의 단축키, 템플릿 자동완성을 사용할 수 있도록 확장팩을 설치하는것이 편합니다.

Extension 단축키 : Ctrl + Shift + X

검색창에 react 검색

ES7+ React/Redux/React-Native snippets 설치

Visual Studio Code : React 자동완성 컴포넌트 템플릿 명령어

자주 사용하는 코드 스피넷(컴포넌트 생성 약어) 모음 rafce-> 현재 있는 파일 이름을 기준으로 const 에로우펑션에 export가 분리된 형식으로 생성됨ReactArrowFunctionComponentExport rfce-> 현재 있는 파일

someday-study.tistory.com

Visual Studio Code React 실행 시 TERMINAL 경로 수정

공부하는 한걸음 — Tue, 10 Dec 2024 10:55:13 +0900

VSCode TERMINAL(터미널) 로 파일 경로 수정하는 방법

다양한 공부를 진행하다보면 파일이 많이 생성되는 경우가 있다.

리엑트의 경우 설치된 폴더 기준 서버가 각기 다르기떄문에 실행화면을 보기 위해서는 설치 폴더별 서버를 실행시켜 줘야 한다.

< TERMINAL 명령어 보이게 하기 >

이미 리엑트를 실행했다면 아래와 같이 경로 등이 활성화되지 않는 경우가 있다.

　단축키 Crtl + c 　

현재 경로 기준 명령어를 작성할 수 있도록 활성화 된다.

< TERMINAL React 실행 파일 경로 변경 >

실행할 파일을 변경하고 싶을 경우 경로를 변경해줘야 한다.

// 파일 한단계 나가기(상위 파일로 변경)
cd ..

// 원하는 파일로 경로 변경
cd ./react06

< React 서버 실행 및 실시간 출력화면 >

// TERMINAL, cmd 명령어
npm start

정상적으로 실행이 된다면 아래와 같이 반응한다.

JavaScript 조건문 삼항 연산자

공부하는 한걸음 — Tue, 10 Dec 2024 10:14:26 +0900

조건에 대한 참, 거짓이 각 1개씩일 경우 자주 사용하는 연산자

if - else 문 대체체라고도 표현함

// 조건식 ? 참일경우 결과값 : 거짓일 경우 결과값;
condition ? exprIfTrue : exprIfFalse;

　condition　 : 조건문
　?　 : 조건문 종료 시 작성
　exprIfTrue　 : 조건문이 참(true) 일 경우 실행할 표현식 (치환 값)
　:　 : 참, 거짓 표현식 구분자
　exprIfFalse　 : 조건문이 거짓(false)일 경우 실행할 표현식 (치환 값)

Visual Studio Code 비주얼 스튜디오 코드 VSCode 리엑트 설치 React

공부하는 한걸음 — Sat, 30 Nov 2024 00:43:00 +0900

리엑트를 VSCode에서 사용하기 위한 설치 및 시작 방법

< 1. Node 다운로드하여 설치하기>

리엑트를 사용하기 위해 먼저 다운로드하여야 하는 프로그램이 있다.

아래 링크를 클릭하여 해당 파일을 다운받기!

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

아래와 같은 사이트에 접속하게 되는데 Download Node.js.(LTS)를 클릭해 다운로드하기.

여기서 LTS라는 뜻은 가장 많이 다운로드한 즉 가장 많이 사용하는 버전이라는 뜻

현재 2024년 11월 기준 가장 최신 버전은 v23.3.0이나

사용자들이 가장 많이 이용하는(다운로드한) 버전은 v22.11.0이라는 뜻이다.

다운로드 받은 msi 파일을 실행시켜 준다.

따로 지정할 부분은 없고 동의해 진행해 주면 된다.

위 창과 같이 설치가 완료되었다면 다음 단계로 넘어가자.

< 2. 윈도우 설정하기>

시작메뉴에서 Windows PowerShell을 검색해 관리자로 실행한다.

먼저 Node의 설치가 정상적으로 되었는지 Node의 설치 버전을 확인하는 코드를 작성해 본다.

-> 설치 버전 확인 코드 : node -v

-> 반드시 띄어쓰기를 확인하고 v뒤에 공백이 있는지 확인해야 한다.

노드가 정상적으로 설치되었다면 위와 같이 내가 설치한 노드의 버전을 확인할 수 있다.

VSCode에서 리엑트를 실행하는 명령어를 사용하기 위해 실행규칙을 변경해야 한다.

기본적으로 Executionpolicy는 Restricted 상태이다.

여기서 Executionpolicy의 상태를 RemoteSigned로 변경해야 한다.

아래와 같이 set-ExecutionPolicy RemoteSigned를 작성한 후 Y (반드시 대문자여야 한다.)를 입력한 후 실행한다.

실행 후 다시 한번 Executionpolicy를 가져오면 RemoteSigned로 변경된 것을 확인할 수 있다.

< 3. VSCode 설정>

실행 후 다시한번 Executionpolicy를 가져오면 RemoteSigned로 변경된 것을 확인할 수 있다.

VSCode를 실행하기 전 바탕화면에 react라는 파일을 생성했다.

VSCode를 처음 실행하면 위와 같은 화면이 뜨는데 여기에 만들어놨던 react 파일을 연다.

상단 메뉴바에서 Terminal을 실행해 줍니다.

하단에 창이 생기며 명령어를 작성할 수 있습니다.

여기서 오류상황을 줄이기 위해 TERMINAL을 powershell이 아닌 cmd 모드로 실행하겠습니다.

오른쪽 powershell +옆에 잇는 화살표 버튼을 클릭합니다.

Split Terminal을 클릭한 후 Command Prompt를 클릭하면 cmd 모드로 TERMINAL이 새로 생성됩니다.

cmd로 활성화된 TERMINAL에 npx create-react-app./test01을 입력하면 아래와 같이 react 파일 안에 test01 파일이 생성되면서 리엑트를 실행하기 위한 하위 파일들이 생성됩니다.

왼쪽 EXPLORER에 생성된 파일을 확인하신 후 TERMINAL에 HAPPY hacking! 를 확인하셨으면

리엑트 구동을 휘한 파일이 정상적으로 생성이 된 것입니다.

< 3. React 실행>

리엑트 파일이 설치된 곳은 바탕화면에 생성한 react 폴더 안의 test01 폴더입니다.

여기서 cd test01을 입력하여 경로를 리엑트가 설치된 test01로 변경합니다.

여기서 npm start를 입력하면 실행이 되면서 Windows 보안경고창이 뜨는데 액세스 허용버튼을 클릭해 주세요

정상적으로 구동이 되었다면 아래와 같은 인터넷 창이 뜨게 됩니다.

즐거운 리엑트 시간 되세요!

Figma 피그마 화면 색상 모드 변경하기

공부하는 한걸음 — Thu, 28 Nov 2024 11:52:41 +0900

현재 피그마에서 지원하는 색상의 모드는 총 3가지 이다.

Lihgt 모드, Dark모드, System 모드

대부분 Light모드와 System 모드는 동일하게 적용이 될 것이다 .

왼쪽 상단의 내 닉네임을 클릭하면 메뉴창이 뜬다.

여기서 두번째 Settings 탭을 클릭해준다.

처음 화면인 Account 탭의 중간쯤 보면 Theme 목록의 선택바를 클릭하면 위 캡쳐본과 같이 세가지 선택지(서비스)를 제공한다.

원하는 화면색상모드를 선택하면 즉시 적용된다.

적용된 화면 색상모드를 확인한 후 팝업창의 오른쪽 위 x 버튼을 누르면 끝!

Figma 피그마 새로운 협업 팀 만들기

공부하는 한걸음 — Thu, 28 Nov 2024 10:52:26 +0900

협업 또는 개인작업을 위해 기존과 구분되는 프로젝트(팀)를 생성하는 방법

무료 Starter 버전을 사용하고 있는 경우 팀 자체는 생성할 수 있으나 하나의 팀 = 하나의 프로젝트만 구성할 수 있습니다.

혹 프로젝트를 추가로 생성을 원할 경우 구독(업그레이드)을 진행하셔야 합니다.

*무료버전 사용시 제약 사항 정리*

- 팀 생성 제한 없음
- 프로젝트 추가 불가 (팀당 기본 1개 프로젝트만 사용 가능)
- 1개 프로젝트당 3개의 피그마 디자인 파일, 3개의 피그마 잼 파일을 생성할 수 있다.
- 1개 프로젝트당 3페이지의 피그마 디자인 파일을 생성할 수 있다.

오른쪽 탭을 확인하시면 최대 사용파일을 확인하실 수 있습니다 .

왼쪽 첫 프로젝트를 시작할 당시 작성했던 이름을 클리해줍니다.

하단 + Create new 를 클릭합니다.

새로운 팀을 구성한다는 창이 뜨고 저는 포트폴리오를 위한 개인 팀을 생성할 예정입니다.

팀이름을 작성하셨으면 하단 Create team을 클릭합니다.

혹 협업을 위한 팀이면 각 팀원의 이메일을 넣어주세요.

저와 같이 혼자만 있는 경우 Continue 버튼 하단의 Skip for now를 클릭해주세요.

현재 무료버전을 사용하고 있기 때문에 해당 결제 창이 나옵니다.

오른쪽 상단의 X 버튼을 눌러주면 생성이 완료된 것을 확인하실 수 있습니다.