FrontEnd 5

[FrontEnd/React] craco 라이브러리 설치: CRA 환경에서 Webpack 환경 설정 방법(브라우저에서 Node.js 모듈 폴리필하기)

더보기✅ 문제 상황 및 해결 아이디어 확인하기문제상황: React 애플리케이션에서 웹팩(Webpack) 빌드 에러 발생CRA로 생성한 리액트 앱에서 자연어 처리를 위해 natural 라이브러리를 사용하려고 하니, url 모듈이나 util 모듈 등을 찾을 수 없다는 에러가 발생했습니다. 즉, node.js의 핵심 모듈에 대한 폴리필(polyfill)이 없어서 발생된 문제입니다.*polyfill: 구형 브라우저 미지원 문법 등을 대응하기 위한 코드 문제상황 재연: natural 라이브러리 설치 → 소스 코드에 라이브러리 importnpm install natural위 명령어로 라이브러리를 설치한 뒤에, 소스 코드 내에 require('natural') 또는 import natural from 'natural..

FrontEnd/React 2024.07.12

[FrontEnd/React] 리액트에서 개발 로그 만들기

들어가기 앞서.. 로그 레벨을 분리해서 관리하는 게 익숙하지 않아, 생각없이 로그를 지워가면서 개발을 진행하고 있었습니다. 문득, 나중에 다시 코드에 로그를 추가해 가면서 추적할 생각을 하니 암담하더군요. 개발 로그가 왜 필요한지 몸으로 깨우쳤습니다. 이번 포스팅은 리액트에서 어떻게 개발 로그를 만드는지를 다루면서 개발 로그에 대한 중요성을 잊지 않고자 작성한 내용입니다. 제가 이해한 대로 정리한 거라 틀린 게 있다면 댓글로 피드백 부탁드립니다. :)목차1. 개발 로그의 필요성1.1. 로그의 필요성로그는 어디에서 어떤 이유로 문제가 발생하여 프로그램에 장애/이슈 등이 발생했는지 파악하기 위해 꼭 필요합니다. 로그가 없다면 모든 소스 코드를 전부 읽어야 되기 때문입니다. 잘 만들어진 로그는 문제를 빠르고 ..

FrontEnd/React 2024.05.13

[FrontEnd/CSS] TailwindCSS 사용법 정리(고급 기능)

목차■ 미디어쿼리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..

FrontEnd/CSS 2024.04.18

[FrontEnd/CSS] TailwindCSS 사용법 정리(flex, grid)

목차■ 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 ..

FrontEnd/CSS 2024.04.18

[FrontEnd/CSS] TailwindCSS 사용법 정리(기본 기능)

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

FrontEnd/CSS 2024.04.18