김평범's OrdinaryCode

Nuxt3 프로젝트 이동 하기 - 2️⃣ Nuxt3 프로젝트 생성 / 폴더 구조

Nuxt3 프로젝트를 이제 생성해보도록 하겠다. 📎 프로젝트 생성 필수 조건 - Node.js - 활성 LTS 릴리스 이용 - 텍스트 편집기 - 터미널 (Nuxt 명령어 실행 용) ✅현재 nuxt3.15 버전으로 프로젝트를 진행 중  👩🏻‍💻 Nuxt Project 생성 명령어 # Nuxt CLI 설치 (글로벌 설치) npm install -g nuxi # 새로운 Nuxt 프로젝트 생성 nuxi init my-nuxt-app # 의존성설치 cd my-nuxt-app npm install nuxi는 Nuxt 공식 CLI툴로 프로젝트 초기화 및 개발 플로우를 지원한다.nuxi init으로 프로젝트 초기 프로젝트 생성이 가능하다. 🗂️ Nuxt 프로젝트 폴더 구조Nuxt2와 다르게 Nuxt3 첫 프로..

진짜 오랜만에 시작하는 블로그 😎확실히 공부를 하려면 블로그에 기록하는 게 가장 동기부여가 잘되어서, 다시 시작해보려고 한다.   개발자 생활이 오래되다보니, 이제 내가 만든 코드로 레거시가 되는 경험도 하게 됨.바쁘다는 핑계로 미뤄뒀던 Nuxt2에서 Nuxt3 이동을 2025년에는 꼭 이루겠다는 다짐과 함께 오늘부터 Nuxt3에 대한 스터디 기록을 하려고 한다.지치지 않게 힘빼고 시작해 볼 예정 😎 Nuxt3란?🔗 Nuxt 3 공식 소개 페이지 Nuxt는 Vue 기반 프레임워크로 서버랜더링(SSR) / 정적 사이트 생성 (SSG)  등 SEO 최적화를 제공한다.Nuxt3는 Vue 3와 Vite를 기본적으로 사용하여 빠른 개발 환경을 제공하고 있다.  🧐Nuxt3로 오면서 Nuxt2와 달라진 점은..

아침에 출근 후 이슈 때문에 이용한 명령어 정리하기! 출근 후 우분투 서버가 제대로 동작을 안 해서 점검을 하게 되었다. 🙄 일단 서버는 재시작해서 접속이되기 시작했는데, 서버에 돌려놓은 pm2가 모두 죽어 있는 상태 다행히 pm2 save로 목록을 진행해 놔서 ngnix를 재시작했는데, pm2 list들이 ngnix 재시작 후에도 리스트가 안 올라온다.😨 부랴부랴 확인해보니 아래 명령어를 이용하면 pm2 save로 저장해 놓은 list가 재실행된다고 한다. 🙋‍♀️pm2 save 리스트 재실행하기 pm2 resurrect 해당 명령어를 통해서, pm2 save로 저장해놓은 프로세스는 다시 살아났는데, 여전히 서버접속이 안된다.😓 👩‍💻 ngnix 상태 확인하기 그렇다면 pm2 문제가 아니라 ngnix가..

최근 webstorm에서. vue 파일을 생성했는데, Vue파일 확장자는 잘 지정이 되어있는데 웹 에디터에서 그냥 텍스트 형식으로 보이기 시작했다. 모든 Vue 파일이 아니라, 특정파일만 문제가 나서 어떻게 해결해야 되는지 찾아봤고, 오늘은 해결방법 공유를 위한 포스팅 Webstorm > Setting >Editor > File Types 메뉴로 들어간다. 파일타입을 확인해보면 Text 파일에 Registered Patterns를 확인해 보니, 내 프로젝트에서 문제 되던. vue 파일이 여기에 등록이 되어있었다. 어쩐지 새로 파일을 만들어도 계속 Text로 인식했는데 여기에 이미 Text파일이다라고 정의를 하면,. vue 파일로 에디터 자체에서 인식이 안되었던 듯😥 저와 같이 고생하실 분들 위해서 공유하..

datepick에서 이번에 신규로 개발한 기능은 기존 날짜를 선택하면 이전기간과 비교해서 보여주는 datepicker를 개발 중이었다. 이전기간이 변경이 되면, 비교 기간이 자동으로 v-model에 연동되어서 변경이 되는데 아쉬운 점이 연결된 데이터는 변경이 되었는데 datepicker에서는 표시가 안 되는 문제가 발생했다.🤷‍♀️ 오늘은 v-model로 연결된 데이터가 변경되면, 해당 날짜로 datepicker를 focus 시키는 기능을 찾아보기로 했다! VCalendar VCalendar는 vue에서 range를 선택하기에 최적화되어있는 datepicker로, 현재 range를 선택할 때 내가 사용하고 있는 datepicker라이브러리이다. https://vcalendar.io/ Welcome | V..

인텔리제이(intelliJ)에서 나온 웹스톰(WebStorm)을 기본 에디터로 이용 중인데, 최근 재택근무를 이용하면서 방송화면으로 내 코드를 보여줘야 되는 일이 발생했다🤣 보통 폰트를 고정해 놓고 사용하는데, 상황마다 키우고 줄이 고를 반복해야 하다 보니 단축키를 찾게 되었다. 웹스톰(WebStrom) 폰트크기 변경하는 방법 1️⃣File → Setting을 들어던 지 Ctrl + Alt +S를 눌러서 Setting 창을 열어준다. 2️⃣Change font size(Zoom) with Ctrl+ Mouse Wheel 체크하기 위 기능을 체크해서 켜주면, 앞으로 컨트롤을 누르고 마우스 휠을 조절해 주면 에디터 폰트 사이즈가 바로 변경이 된다.👍

UI상 한 화면에 많은 데이터를 이용할 때 carousel을 이용해 준다. vue carousel 라이브러리를 확인해 보면 가로, 세로 몇 개씩 콘텐츠를 보여줄지 변수로 지정을 하는데 이때 화면 크기에 따라서 자동으로 수정되는 UI를 만들어보도록 하겠다. 💛Vue Carousel 라이브러리 추천 https://www.npmjs.com/package/vue-slick-carousel vue-slick-carousel Vue Slick Carousel with True SSR Written for Faster Luxstay. Latest version: 1.0.6, last published: 3 years ago. Start using vue-slick-carousel in your project by r..

📌React 컴포넌트(Component)의 역할 리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다. 컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서 화면에 필요한 UI형태로 띄워주는 역할을 한다. 리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다. 리액트에서는 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 1️⃣함수형(Function) 컴포넌트 자바스크립트의 함수형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 ..

갑자기 잘되던 git push가 안돼서 보니 로그인이 끊긴 상태 webstorm에서 Setting > version Control > GitHub를 확인해 보면 계정 연결상태를 확인할 수 있다. 연결이 끊긴 상태가 되면 webstrom 자체에서 로그인을 하라는 창이 생성되는데, 왜 그런지 모르겠는데 이메일 패스워드를 입력을 해도 로그인이 안된다🥲 이럴 경우 github의 Use Token 기능을 이용해서 로그인이 가능하다. 일단 GitHub사이트에서 토큰을 먼저 발행해오자. 😉Github Token 발행하기 Github의 setting메뉴를 접속해서 Personal access tokens > token Classic 메뉴에 접속해 준다. 우측 상단의 Generate new Token을 눌러서 New P..

📑Next.js pages 폴더구조 이해하기 Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다. Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다. 기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다. next.js에서는 별다른 작업이 없어도 자동적으로 해당 페이지에 접근이 가능하다. export default function about() { return ( About ) } export default function users() { return ( users ) } '/about' → /pages/about.jsx 파일 화면 접근 '/users' → /pages/users.jsx..