금융권 개발 일지 블로그

■ 문제상황 searchBox 파일에서도 나지 않는 오류인데, 이 컴포넌트를 재사용하는 곳에서 오류가 발생했습니다. JSX에서 컴포넌트는 대문자로 시작해야 된다는 규칙이 있기 때문입니다.■ 해결방법컴포넌트의 이름을 규칙에 맞게 수정합니다. searchBox -> SearchBox 파일명까지 수정했는데, 에러가 사라지지 않는다면 VS Code를 껐다가 다시 키면 됩니다.감사합니다. :)

■ 문제상황보다시피, 해당 소스 파일은 jsx입니다. ts 또는 tsx 파일이 아닌 곳에서 TypeScript에서만 쓸 수 있는 import type 구문을 사용해서 나타난 오류입니다. VS Code에서 설정에 따라, JS 개발에 대한 유효성을 검사하는 기능이 있기 때문에 이를 비활성화 해주면 해결됩니다.🗨️ 'import type' 구문은 뭔가요?TypeScript에서 'import type' 구문은 실제 값들을 가져오지 않고 타입이나 인터페이스만을 가져오기 위해 사용됩니다. 이 기능은 TypeScript 3.8 버전부터 사용할 수 있습니다.■ 해결방법❎ (비추천) VS Code의 확장 프로그램 비활성화확장 프로그램을 비활성화하면 VS Code에서 JS 개발에 관련된 유효성 검사를 모두 비활성화하는 ..

AntD는 컴포넌트 라이브러리 패키지입니다. 컴포넌트 라이브러리란, 컴포넌트를 재사용할 수 있도록 라이브러리로 제공하는 것입니다.더보기✅ AntD 사용한 리액트 프로젝트(이하, 리액트 앱, 앱) 개요(개요 번호와 본문 번호는 관계 없습니다.) 1. CRA 사용해서 typescript 템플릿 기반의 리액트 앱 생성자세한 설명은 [바로가기]를 눌러 주세요. 2. VS Code에서 workspace 열기워크스페이스를 열면 Workspace Trust를 물어봅니다. Yes 눌러주세요. 자세한 설명은 [바로가기]를 눌러주세요.워크스페이스 여는 방법 : File > Open Workspace from File... 3.components 폴더 생성컴포넌트 폴더에는 AntD의 예제 코드..

■ 문제상황 VS Code에서 Commit을 진행할 때, VS Code에서 git 계정으로 로그인한 기록이 없으면 이러한 경고가 뜰 수 있습니다.■ 해결방법git bash에서 git 계정의 이름과 이메일 주소를 입력 후, 다시 commit을 진행하면 됩니다.git 계정 확인방법  git bash로 로그인 정보 저장방법계정을 확인했다면 아래 명령어를 git bash에 입력해 로그인 정보를 저장합니다.git config --global user.name "My Name"git config --global user.email "myemail@example.com" commit 진행Source Contorl에서 Commit을 다시 누르면, 커밋이 진행됩니다.감사합니다. :)

들어가기 앞서.. Git을 이용하면 버전 관리 및 협업을 손쉽게 할 수 있습니다. 또한, 간단한 호스팅 기능도 제공하니 포트폴리오를 위해 사용법을 익혀보는 것을 추천드립니다.Git은 VS Code에서 우측 사이드바의 Source Control에서 이용할 수 있습니다.목차1. Git 프로그램 설치 파일 다운로드2. Git 프로그램 설치 파일 실행아래 포스팅에서 설명을 잘 해주고 있습니다. 윈도우에서 Git Bash 설치하기1. 설치 파일 다운로드 Windows에서 Git을 사용하기 위한 GitBash를 설치한다. (2.30 버전) Git Bash 설치 파일을 받기 위해 공식 홈페이지(https://git-scm.com/)에서 다운로드 한다. 다운로드 완료 후 설치 파일xangmin.tistory.com더보..

들어가기 앞서.. 명령어 팔레트(Ctrl + Shif + P)를 통한 간단한 화면 세팅을 설명하는 포스팅입니다. 명령어 팔레트를 열어서 명령어를 입력하면 됩니다. 목차 ■ Toggle Menu Bar (메뉴바 보여주기/없애기) ■ Toggle Side Bar Position (사이드바 위치 변경) ■ Toggle Side Bar Visibility (사이드바 보여주기/없애기) 단축키 : Ctrl + B ■ Toggle Activity Bar Visibility (액티브바 보여주기/없애기) 단축키 : Ctrl + Shift + A ■ Toggle Status Bar Visibility (상태바 보여주기/없애기) 메뉴바의 View에서 선택할 수도 있습니다. ■ Zoom Out/In 줌아웃 단축키 : Ctrl..

■ 문제상황typescript 기반의 react-app에서 아무 내용도 없는 빈 tsx 또는 ts 파일을 만들면, 다음과 같은 에러가 뜹니다.■ 문제원인TypeScript 컴파일러가 --isolatedModules 플래그(flag, 참/거짓을 나타내는 1비트의 값)에 따라서 컴파일을 하는 도중에 발생하는 오류입니다. --isolatedModules 플래그가 true일 경우, 프로젝트 내의 모든 ts나 tsx 파일을 모듈로 컴파일됩니다. TypeScript에서는 import나 export가 있으면 모듈로 인식됩니다. 그렇지 않을 경우 전역 파일(A global script file)로 인식하고 모듈로 컴파일하지 못하게 되면서 오류를 발생시킵니다.■ 해결방법✅ (추천) import 또는 export 추가im..

■ 문제상황Tailwind를 처음 적용할 때 Unknown at rule @tailwind 경고 표시가 뜹니다.■ 해결방법아래처럼 해결할 수 있습니다.*참고 포스팅 [VSCODE] tailwind 설치 후 vscode에서 "Unknown at rule @tailwind" css warning 끄기vscode 기본 설정 상태라면 tailwind 설치 후 vscode에서 css syntax warning을 뿜어냅니다. 이럴 땐, vscode 설정 창을 열고 (단축키: ctrl + , ) unknown으로 검색하면 "Unknown At Rules" 항목을 "warning"에서 "ignore"로 변hiperzstudio.tistory.com감사합니다.

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

■ 문제상황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..