전체 글32 CRA 프로젝트 babel-preset-react-app 오류 해결 방법 🖥️ 📌 babel-preset-react-app 프로젝트를 시작했는데 위와 같은 경고 메시지가 보여질 수 있는데처음에는 무시하고 작업을 해도 큰 문제가 없어서 그냥 넘어갔지만!!프로젝트 실행시 계속 보여서 원인을 알아보고 해결하는 것이 좋을 것 같아서 찾아봤습니다!📍 원인babel-preset-react-app이 @babel/plugin-proposal-private-property-in-object 패키지를 사용하고 있지만 이를 종속성에 명시적으로 포함하지 않았기 때문입니다. 즉, 원래는 함께 설치되어야 하지만, 빠져 있는 상태 ⚠️ 현재 프로젝트에서는 우연히 해당 패키지가 포함되어 있어서 동작에는 이상이 없지만!패키지를 업데이트하거나 재설치 시 정상적으로 실행되지 않을 수도 있습니다. 📍 해결np.. 2025. 3. 10. React - scss / .module.scss 사용 📌 scss .module.scss 사용📍SASS / SCSS- SASS는 SCSS를 CSS로 컴파일 하는데 필요한 라이브러리 📗 SASS (Syntactically Awesome Stylesheets) - 들여쓰기를 기반으로 한 문법을 사용하고. 중괄호 {}나 세미콜론 ;을 사용하지 않습니다!$primary-color: #3498db.container background-color: $primary-color padding: 20px.title color: white font-size: 24px 📗 SCSS (Sassy CSS) - 기존 CSS와 비슷한 문법을 사용하며, 중괄호 {}와 세미콜론 ;을 사용하며 CSS 파일과 유사하게 작성할 수 있습니다.$primary-color: #349.. 2025. 2. 26. [React Storybook] chromatic 으로 배포하기, 배포 후 빈 화면 400 (Bad Request) 에러 해결 chromatic 📌chromatic 사용해서 Storybook 배포하여 공유하기📍 chromatic - 컴포넌트의 비주얼 테스트(Visual Regression Testing)와 자동 배포를 쉽게 할 수 있는 도구.- Storybook을 배포하여 팀원들과 공유할 수 있다. 🔗 Storybook 참고 내용 - 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 사용하겠습니다. 🔗 Chromatic 📍Chromatic 가입 및 github 연동✅ GitHub로 회원 가입! ✅ Choose from GihHub 선택 - 레포지토리와 동기화- github > storybook이 설치된 레포지토리 선택 npm install --save-dev chromaticnpx chromatic --.. 2025. 2. 20. Vercel로 개인 프로젝트 Github 연동해서 배포하기 📍 Github, Vercel 준비 🔗 GitHub🔗 Vercel-Login✅ Gihhub 로그인 진행✅ Add New... > Project 클릭 ✅ Import Git Repository에서 연동할 Repository import 선택 ✅ Framework Preset에서 저는 React 진행을해서 Create React App으로 선택했어요!그 외 빌드와 환경변수 설정도 가능해요. Deploy 버튼 클릭하면 위와 같이 진행 돼요 ✅ 배포 완료 !!만들어진 화면이 있으면 정상적으로 나오겠지만 저는 빈 화면에 APP 텍스트만 입력된 상태라서 위와 같이 보이고 있어요. 😅 📍Vercel project 생성 완료✅Domains에 보이는 경로를 클릭하면 정상적으로 확인할 수 있어요!Stat.. 2025. 2. 12. React, Storybook 시작하기 📍 Storybook이란?Storybook은 컴포넌트 단위 UI 개발 환경을 지원하는 오픈 소스 도구로, 실제 웹 애플리케이션의 환경과 별개로 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있게 해줍니다.컴포넌트의 문서화 도구로도 활용할 수 있습니다.🔗 Storybook 📍 Install Storybooknpx storybook@latest init ✅ 설치 완료!!/.storybook/src/stories폴더와 파일이 생성되었네요 😁📍 storybook 실행npm run storybook http://localhost:6006/ 확인 완료! 📍 살펴보기 ✅ EXAMPLE > Button, Header, Page 컴포넌트에 대해 확인할 수 있어요!- 컴포넌트를 만든다.- 컴포넌트.st.. 2025. 2. 12. [React Vue 시작과 NodeJS VSCode 설치] 📌 React 사용자 인터페이스를 만들기 위한 라이브러리프로그래밍 언어 : JavaScript2013년 5월 29일 출시 React 공식 문서 - 구버전React 공식 문서 - 최신 🔗 React 온라인 플레이그라운드StackblitzCodesandoxPlaycode 📌 Vue사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고있는 자바스크립트 프레임워크입니다.웹 개발을 단순화하고 정리하기 위해 개발된 대중적인자바스크립트 프론트엔드 프레임워크이다. Vue 공식 문서 🔗 Vue 온라인 플레이그라운드Vue SFCPlaycodePlayUse [React와 Vue를 진행하기 전]NodeJs 와 VSCode 설치 하기 ⬇️✅ N.. 2023. 7. 28. pptx을(를) 액세스 하는 중 오류가 발생했습니다. ppt 오류 📌 파워 포인트 오류 해결법 ⚠️ 오류 원인 작업자에게 전달 받은 경로에서 PPT를 내려 받아서 확인을 하려 했는데 이와 같은 경고문이 떴습니다.. 확인을 하고 별 문제 없겠지하고 파일을 열어본 순간 이렇게 문제가 발생했네요.. 복구 / 취소 선택 중에 당연히 복구를 클릭 했는데 액세스하는 중 오류가 발생했다면서 열리지 않네요.. 그래서 해결 방법을 검색하고 다음에도 이런 상황이 생기면 바로 찾기 위해 글을 작성하게 되었습니다 👇 이렇게 문제가 발생할 경우 문제가 있는 ppt 파일은 그대로 두시고 다른 ppt 파일을 열어봅니다 다른 ppt 파일이 없다면 새롭게 ppt를 열어주면 됩니다! 그런 다음 ⬇️⬇️ 순서대로 따라 해주세요!! 1. 파일 메뉴에서 옵션 선택!! 🖱️ 2. 보안센터 메뉴에서 보안 센터.. 2023. 7. 28. [JavaScript] 변수(Variable), 스코프(Scope), 식별자(Identifier) 📌 변수(Variable), 스코프(Scope), 식별자(Identifier)📍변수 (Variable) - 변수는 데이터를 저장하는 가상의 공간으로 값을 저장하고 필요 시 사용할 수 있습니다.- var, let, const 를 사용하여 선언 📗 var - 함수 스코프(function scope)를 가짐, 재선언 가능 재선언 및 재할당 가능 초기화하지 않으면 undefined 값을 가짐숫자가 아닌 값을 연산하면 NaN(Not a Number) 발생 가능ES6 이전에 주로 사용var name = "tistory";console.log(name); // tistoryvar name = "naver"; // ✅ 같은 변수 재선언 가능(변경)console.log(name); // naver 📗 let -.. 2019. 9. 24. CAFE 24 쇼핑몰센터 - 디자인관리 스킨적용 사이트 내 제공되고 있는 스킨을 적용하기(꾸미기)기본적으로 쇼핑몰 기본디자인으로 적용이 되어 있습니다. 쇼핑몰센터관리하는 화면에서 디자인 관리 -> 디자인 추가유료, 무료, 카테고리별 제공하는 디자인 스킨을 확인할 수 있습니다. 네이쳐 스킨을 선택한 다음 대표디자인 설정을 클릭합니다클릭 시 아래와 같이 안내문이 나타납니다.확인 클릭.새로 디자인 적용한 스킨이 대표디자인으로 사용중임을 알 수 있습니다.스킨을 이용하여 간단하게 사이트를 디자인할 수 있습니다. 2019. 8. 22. 이전 1 2 3 4 다음 반응형
