분류 전체보기 44

[기록/환경세팅] 리액트 프로젝트에 Tailwind CSS 라이브러리 추가하기

Tailwind CSS는 CSS 라이브러리입니다.더보기🗨️ CSS 라이브러리가 뭔가요?HTML 스타일에 대해서 CSS로 하나 하나 적는 거에 대해 고충을 느껴 보신 분이라면, '누가 CSS 좀 대신 작성해 주면 안 될까?'라는 생각을 한 번쯤은 해보셨을 겁니다. TailwindCSS가 '누가 대신 작성한 CSS'를 모아놓은 소스 코드입니다.첫 번째 사진과 같은 스타일을 적용하기 위해 CSS를 직접 적는다면 두 번째 사진처럼 html로 구조를 만들고, css로 style을 작성해 주어야 합니다. 하지만 CSS 라이브러리를 이용한다면, html로 구조를 만들고 css는 class명 안에 이미 정의된 이름으로 작성할 수 있습니다. 자세한 설명은 공식 문서에서 확인할 수 있습니다. Utility-First F..

기록/환경세팅 2024.04.18

[기록/WARNING/npm] npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates.

■ 문제상황creat-react-app 패키지가 안 깔려있어서 npm으로 설치를 진행하려고 했더니, 설치된 tar 패키지 버전이 맞지 않는다는 경고가 떴습니다. 패키지 66개가 깔렸다길레 다시 creat-react-app 패키지 버전을 확인해 보니 아직도 안 깔렸다고 합니다..■ 해결방법tar 패키지를 최신 버전으로 업데이트해서 해결했습니다. 개발 커뮤니티로 유명한 스택오버플로우(stack over flow)를 참고했습니다. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgradeI already installed node.js in..

기록/WARNING 2024.04.18

[토이프로젝트/React] 리액트 프로젝트 생성(npm init, CRA)

리액트 프로젝트를 만드는 방법은 여러 가지가 있습니다.npm initnpx create-react-app (통칭 CRA)Vite, Parcel, Next.js, Remix 와 같은 툴 이용이번 포스팅은 npm init react-app과 npx create-react-app 의 차이점을 알아보기 위해서, 각 명령어로 프로젝트를 만들어 보는 과정입니다.<hr contenteditable="false" data-ke-type="ho..

[기록/환경세팅] VS Code 터미널 열기/연결 터미널 변경하기

매번 cmd, 터미널과 같은 CLI를 열어서 명령어(Command, 커맨드)를 실행하는 건 꽤나 귀찮은 일입니다. VS Code는 개발자의 편의를 위해 내장 CLI를 제공합니다. 보통 CLI를 터미널이라고 많이들 부르니, 이번 포스팅에서는 CLI를 터미널이라고 하겠습니다. ■ VS Code 내장 터미널 열기 🗨️ 터미널이 안 열려요. 혹시 노랑 박스처럼 워크 스페이스가 2개 이상 열려있지 않나요? VS Code의 터미널은 기본적으로, 열려있는 작업영역(Workspace)의 경로에서 시작됩니다. 워크 스페이스가 여러 개 일 경우에, VS Code가 어떤 경로에서 터미널을 열어야될 지 모르기 때문에 터미널을 선택해 주셔야 합니다. ■ VS Code 터미널 종료 터미널 우측에 오픈된 터미널이 나옵니다. 터미널..

기록/환경세팅 2024.04.18

[기록/환경세팅] Do you trust the authors of the files in this folder? (VS Code Workspace Trust)

오랜만에 VS Code를 사용하려고 하니 못 보던 창이 뜨더군요.. 찾아보니까 굳이 보안을 생각하지 않아도 되는 프로젝트는 Yes 누르는 게 좋을 것 같습니다. VS Code 1.58 릴리스부터 프로젝트를 열려고 하면 아래 사진과 같은 Workspace Trust(작업영역 신뢰 설정)창이 뜹니다. 워크스페이스(workspace)에 대해 신뢰 기능을 사용하면 명시적인 승인 없이 VS Code가 해당 프로젝트의 코드를 탐색/편집/실행 여부를 결정하며 확장 프로그램 접근 또한 결정할 수 있습니다. ✅ Yes, I trust the authors VS Code는 Open Project에 대해서 enable trust(신뢰 가능한) 프로젝트라고 판단합니다. 기존과 같이 모든 기능을 제한없이 사용할 수 있습니다. ..

기록/환경세팅 2024.04.18

[기록/ERROR/Node.js] visualstudio2019-workload-vctools - Unable to resolve dependency 'chocolatey-dotnetfx.extension'

■  요약Chocolatey는 Visual Studio 2019 build tools에 의존적입니다. 즉, Chocolatey를 설치 또는 이용하기 앞서 Visual Studio 빌즈툴이 없으면 이용 또는 설치를 하지 못 합니다. (공식 커뮤니티 사이트를 통해 확인한 내용) Visual C++ build tools workload for Visual Studio 2019 Build Tools 1.0.1Build classic Windows-based applications using the power of the Visual C++ toolset, ATL, and optional features like MFC and C++/CLI.community.chocolatey.org  따라서 아래 경고는 Vis..

기록/ERROR 2024.04.15

[기록/환경세팅] Node.js 설치 (npm 설치)

React를 사용하기 앞서 React가 로컬에서 실행할 수 있는 환경을 제공해주는 Node.js를 설치하는 과정입니다. 마지막에 문제를 겪으면서 해결하는 추가 포스팅도 있습니다. 1. Node.js 설치💬 Node.js가 뭔가요?Node.js는 자바스크립트가 브라우저가 아닌 곳에서도 실행될 수 있는 환경을 제공해 주는 "런타임 환경"입니다. 자바스크립트 기반의 백엔드를 개발하기 위해서 꼭 필요한 환경 중 하나입니다. 하지만, JS 런타임 환경 외에도 다양한 기능들을 가지고 있어서, 프론트엔드 개발을 할 때, 이 기능을 이용하기 위해 Node.js를 설치하기도 합니다. 구글에 'Node.js' 검색해서 홈페이지 접속하셔서 Download Node.js(LTS) 버튼 눌러주세요.물건을 구매하면 고장나거나 ..

기록/환경세팅 2024.04.11

[기록/환경세팅] VS Code 설치

프론트엔드 IDE로 유명한 Visual Studio Code를 설치하는 과정입니다.■ Visual Studio Code 설치공식 홈페이지에서 운영체제에 맞는 Stable 버전을 다운로드 받으셔서 설치 진행하시면 됩니다. [공식홈페이지 바로가기]💬 Stable과 Insiders가 뭐가 다르나요?Stable : 안정화 버전Insiders : 테스트 버전Insiders 버전은 정식 출시 이전의 테스트 버전으로, 최신 기능을 먼저 사용할 수 있지만 불안정하고 버그 발생 확률 높습니다. Stable 버전은 안정화를 거쳐 버그가 최소화된 버전이니 최신 기능을 이용해 봐야 되는 게 아니라면 Stable을 추천드립니다.Next 계속 누르시면 됩니다.설치 전, 옵션을 선택하는 화면입니다. 저와 똑같이 설정할 필요는 없..

기록/환경세팅 2024.04.11

[기록/환경세팅] Windows 파일 탐색기에서 숨김 파일 및 폴더 보기

개발하다보면 숨김 폴더 보기 옵션을 활성화 시켜야 원하는 파일을 찾을 수 있을 때가 많습니다. 위의 사진에서 두 폴더의 투명도가 다릅니다. 투명하게 보이는 게 숨김 폴더입니다. 숨긴 항목을 활성화하면 숨겨져 있는 파일과 폴더 모두 볼 수 있게 됩니다. ■ Windows11 ■ Windows10 감사합니다! :)

기록/환경세팅 2024.04.11