FrontEnd 썸네일형 리스트형 Tailwind CSS vs SCSS (Sass) Tailwind CSSUtility-First Framework: Tailwind CSS는 utility-first CSS 프레임워크로, 클래스 이름이 특정 스타일을 의미한다. 예를 들어, bg-blue-500, text-center, p-4와 같은 클래스들이 있다.설정 및 커스터마이징: Tailwind는 설정 파일을 통해 쉽게 커스터마이징할 수 있다. 테마, 색상, 여백 등을 설정 파일에서 정의하여 재사용할 수 있다.재사용 가능한 클래스: 스타일을 클래스 단위로 재사용할 수 있어서, 동일한 스타일을 여러 요소에 적용할 때 편리하다.디자인 일관성: 디자인 시스템을 구현하기 쉽다. 미리 정의된 클래스들을 사용하여 일관된 디자인을 유지할 수 있다.JSX와의 호환성: React와 같은 프레임워크와 잘 통합되어.. JS / Truthy, Falsy 자바스크립트에서 falsy와 truthy 값은 다음과 같다.Falsy 값자바스크립트에서 falsy 값은 다음과 같은 6가지가 있다:false0 (숫자 0)-0 (음수 0)0n (BigInt의 0)"" (빈 문자열)nullundefinedNaN (Not-a-Number)이 값들은 조건문에서 false로 평가된다.Truthy 값Falsy 값에 해당하지 않는 모든 값은 truthy 값이다. 몇 가지 예시는 다음과 같다:true{} (빈 객체)[] (빈 배열)"hello" (빈 문자열이 아닌 문자열)42 (0이 아닌 숫자)-42 (음수이지만 0이 아닌 숫자)3.14 (부동 소수점 숫자)new Date() (Date 객체)Infinity (무한대)-Infinity (음의 무한대)이 값들은 조건문에서 true로 평.. JS 자주쓰는 regex, function(replace) 2022.09.02 javascript regex, functions replace let str = date.replace("-", ""); //replace let str = date.replace(/-/gi, ""); //replace AllNumber regex regexNum = /[^0-9]/g;Email regex emailRegex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,10}$/iTel regex telRegex : /^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/ 부트스트랩 Vue 사이드바 컴포넌트가 제대로 동작하지 않을때 (Bootstrap Vue Sidebar component not working properly) import 'bootstrap-vue/dist/bootstrap-vue.css 를 임포트 해줘야 한다. https://stackoverflow.com/questions/64213922/bootstrap-vue-sidebar-component-not-working-properly 웹 프론트엔드 간단한 성능 검사(Chrome Task Manager) Chrome Task Manager를 활용한 간단한 프론트엔드 성능검사 특정 화면에서 브라우저가 느려지는 상황 원인 파악을 위해서 사용했다. Chrome Task Manager 크롬의 작업 관리자로 Memory footprint, Cpu, Network, ProcessID를 통해서 현재 페이지에서 브라우저에 어느정도 부하가 걸리는지 확인 할 수 있다. memory footprint : 현재 탭에서 사용하는 메모리 Javascript memory : 자바스크립트에서 사용하고 있는 메모리 CPU : 해당 탭의 현재 cpu사용량 아무것도 하지 않는 상태 = 0.0 특정 액션이 발생하면 cpu 사용량 수치가 올라가는데 보통 20 ~ 30 정도의 수치를 유지 하는 것이 좋은것 같다. 페이지를 이동할때는 60~70.. 윈도우 nvm 설치 후 npm 버전 확인시 오류 해결하기 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. 윈도우 PC에 npm 사용하기전에 npm -v 실행후 위와 같은 메시지가 출력. npm-windows-upgrade 패키지 설치가 필요 PowerShell [관리자 권한] 실행 후 Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force 실행 npm install --global --production npm-windows-upgrade 실행 npm-windows-upgrade 실행 npm -v로 확인 참고 https://github.com/npm/cli/issues/4980 윈도우에서 nvm을 통한 node 설치 에러 nvm install 12 1. 위와 같은 명령어로 nvm에서 노드를 설치 하게되면 자동으로 특정 12.xx.xx 버전의 노드가 설치된다. 2. 이후에 use 명령어를 사용하면 인스톨 되지 않았다고 출력 해결 방안 1. 기존에 설치한 node를 nvm uninstall로 삭제 2. 특정 버전 전체를 입력해서 설치(ex: nvm install 12.22.8) 3. 이후에 use 명령어에서도 버전 전체를 입력해준다. [React] 리액트로 사이트 제작하기_1 (AWS S3, Cloudfront, Route53) 사이트 제작하기 최근 프로젝트를 진행하면서 주로 사용하고 있는 기술들을 리마인드 해보기 위해서 간단한 포트폴리오 웹 사이트를 제작 해보려고 합니다. 사용하는 기술 배포 및 호스팅 = S3(Repository / Static Host), Cloud front(CDN), Route53(DNS) 버전관리 = github 배포자동화 = CICD pipeline FrontEnd = Next.js + Typescript + ReduxToolkit STEP 1) AWS S3 셋업 -S3는 스토리지 서비스이고 이 곳에 정적 배포 파일을 올리고, 정적 호스팅 기능으로 호스팅 해보도록 하겠다. AWS 가입해서 대시보드에서 s3라고 검색하고 들어가기 버킷 만들기를 클릭 버킷 이름 지정, 리전 선택후 생성하면 아래처럼 리스트.. 이전 1 2 3 다음
