금융권 개발 일지 블로그

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

목차■ 미디어쿼리PC보다 모바일을 사용하는 시간이 긴 요즘 같은 시대에 반응형을 대응하지 않는다면 조금 아쉽죠.화면의 크기에 따라 css를 바꿀 수 있는 미디어쿼리입니다.노랑(default), 남색(sm), 파랑(md), 빨강(lg), 회색(xl) Responsive Design - Tailwind CSSUsing responsive utility variants to build adaptive user interfaces.tailwindcss.com■ hover, focus, 입력폼의 상태 나타내기아래 링크는 hover과 focus보다 입력폼의 상태나 다른 예시 코드가 많아서 참고하기 좋더라구요.입력폼 비활성화 [바로가기] Username 입력 검증 [바로가기] E..

목차■ flexflex부모에게 flex를 주면 자식이 수평으로 나열됩니다. 01 02flex-1이때, 자식에게 flex-1을 주면 해당 자식이 최대한의 너비를 갖습니다.flex-1인 자식이 2개 이상이면 너비를 공평하게 나눠 갖습니다. 01 02 03 04 Flex - Tailwind CSSUtilities for controlling how flex items both grow and shrink.tailwindcss.com■ Grid - 세로로 나열grid   grid-flow-col : 위에서 아래로 나열grid-rows-숫자 : 행(row) 개수 (1~12까지 있음)grap-숫자 : 항목(item) 간 간격 (1~12까지 있음) 01 02 03 04 05 ..

설치는 따로 포스팅해 놓았습니다. [기록/환경세팅] React-App에 Tailwind CSS 라이브러리 추가하기Tailwind CSS는 CSS 라이브러리입니다. 더보기 🗨️ CSS 라이브러리가 뭔가요? HTML 스타일에 대해서 CSS로 하나 하나 적는 거에 대해 고충을 느껴 보신 분이라면, '누가 CSS 좀 대신 작성해 주면 안 될까subin2022.tistory.com 본문의 기본 기능과 캡처한 이미지는, 제가 생각하기에 자주 사용되는 키워드를 선별한 것입니다. 추가적인 기능 이용이 필요할 경우 공식 문서에서 확인하시면 됩니다.목차■ 컬러차트 : [컬러명]-[숫자]사용 예시는 'TailwindCSS 사용법 정리(고급 기능)'의 미디어쿼리를 참고해 주세요. [바로가기]색상 관련 클래스명은 공식문서 중..

✅ 프로젝트명 : 리액트 게시판✅ 수행기간 : 2024.04.01 ~ 2024.07.31✅ 프로젝트 설명회사(SI, 경영부서)에서 사용할 외주관리사이트 생성■ 착수리액트 기술의 개요 및 필요성에 대해 추후 업로드 하겠습니다.■ 분석요구사항정의서, 업무 프로세스 정의서 추후 업로드 하겠습니다.■ 설계프로젝트 아키텍처서버 사이드 기술의 부재로, 화면과 서비스의 로직이 뒤섞이는 것을 예방하고자, MVC 패턴을 기반으로 프로젝트 아키텍처를 구성했습니다. (아키텍처 구성도는 추후 업로드하겠습니다.) 화면정의서, ERD, (프로그램 목록) 추후 업로드 하겠습니다.■ 개발Node.js 설치 [바로가기]React는 JavaScript를 기반으로 동작하기 때문에, JavaScript를 실행시킬 런타임 환경이 필요합니다...

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

리액트 프로젝트를 만드는 방법은 여러 가지가 있습니다.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..

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