IT개발81 [React] React 프로젝트에 prettier & eslint 설치하기 PrettierPrettier란?Prettier는 코드 포매터로, 소스 코드를 일관되게 포맷팅해주는 도구임. 여러 개발자들이 협업할 때 코드 스타일이 통일되지 않으면 가독성 이 떨어지고, 코드 리뷰가 복잡해질 수 있음. Prettier를 사용하면 다음과 같은 장점이 있음:일관성: 팀 내 모든 코드가 동일한 스타일로 포맷됨.생산성 향상: 코드 스타일에 대한 논의나 고민을 줄여줌.자동 포맷팅: 파일을 저장할 때 자동으로 포맷팅할 수 있어 편리함.https://prettier.io/docs/ What is Prettier? · PrettierPrettier is an opinionated code formatter with support for:prettier.io 설치 명령어Prettier를 설치하는 방법은.. 2025. 2. 18. [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. [Figma] 피그마 AutoHTML 플러그인 과거 웹퍼블리셔로 실무경험을 했을때 디자이너와 협업 과정에서 Photoshop, Sketch, Zeplin 을 주로 사용했던것 같은데, 요즘에는 Figma가 대세인것 같다.IT 분야로 다시 도전하는 가운데 Figma도 좀 알고 있어야할 것 같아서 이런 저런 영상을 보며 알아보는데 Dev 모드라고 해서 디자인을 코드로 변환해주는 좋은 기능이 있는걸 발견했다.그런데 문제는 언제부터인가 그게 유료화가 된 것 같다. 이제 입문자로 테스트 삼아 공부하는 가운데 유료결제를 하고싶지 않아 그냥 있었는데, 좀 더 찾아보니 기능이 좀 더 단순하지만 무료로 활용할 수 있는 AutoHTML 플러그인이 있다는 것을 알게 되었다. https://autohtml.dev/ AutoHTML | Figma PluginWrite you.. 2025. 2. 18. (React + Typescript) + (Spring Boot + JPA + MySQL) 프로젝트 세팅 / tailwind css 설치 오류 포함 개인적으로 React + Typescript도 공부할겸, Spring Boot도 복습할 겸 맨땅에 헤딩을 하는 방법으로 무작정 프로젝트를 시작했다.그런데 역시나 초기 세팅부터 이래저래 우여곡절이 많았다. 기존에는 백엔드 프로젝트를 할때 spring boot 프로젝트 만들고 프론트엔드 부분은 Thymeleaf를 주로 활용해서 intelliJ나 STS로 진행을 했었는데, 이렇게 프론트엔드 작업과 백엔드 작업을 한번에 하는 경우 프로젝트를 어떻게 세팅해야 할지 막막했다. 특히 React + Typescript는 기본 지식이 있는게 아니라 이번에 맨땅에 헤딩 하면서 공부할 생각이었기에 전적으로 chatGPT와 구글링의 도움이 필요했다. 그래서 지금 정리하는 아래의 방법이 일반적인 방법인지 솔지히 모르겠지만, 나.. 2025. 2. 12. [vue] Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 🔍 문제 상황Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음. 💡 문제 원인slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발.. 2025. 2. 10. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. 이전 1 2 3 4 ··· 14 다음
