study

Vue js 설치 vue cli

vue/cli 설치하기 $ npm install -g @vue/cli $ vue --version ⁉ 문제사항 문제 - vue 를 설치했지만 찾을 수 없다고 함. 확인 $ npm list -g @vue/cli /Users/desktop/.npm-global/lib ├── @vue/cli@5.0.8 └─┬ clear@ -> ./ └── @vue/cli@5.0.8 deduped vue cli 설치경로를 확인해준다. 설치경로를 확인 후 환경변수를 등록해준다 해결 - 환경변수 등록해주기 $ vi ~/.zshrc # 추가 export PATH="/Users/desktop/.npm-global/bin:$PATH" $ source ~/.zshrc 다시 뷰버전을 확인하여 환경변수가 등록이 되었는지 호출이 되었는지 확인..

웹페이지 속도 측정 해보고 개선하자, 구글 웹페이지 속도 측정 최적화하기

Intro 페이지 리뉴얼을 담당으로 진행하였다. 오픈 후에는 구글 웹페이지 속도 측정 도구를 이용하여 페이지 성능을 검증해보았다. 검증 결과를 토대로 개선이 필요한 사항들을 파악과 해결 후 기록 Google Page Speed Insights 데스크톱 및 모바일에서 웹페이지 사이트 성능을 테스트하기 위한 도구 📌 문제점 이미지 로드가 오래걸린다는 문제가 확인되었다. 현재 문제가 되는 이미지는 png 파일형식으로 크기도 꽤 큰 편이였다. 불필요한 파일 소스들이 많다는 점도 문제가 되었다. ✔ 개선사항 체크하기 문제를 개선하기 위해 jpg, png 이미지들을 .webp 이미지로 교체하기로 하였다. .webp란 이미지 품질은 그대로 유지하면서도 다른 파일형식과 비교하여 더 낮춰서 저장할 수 있다. 이에 적극적..

next.js 살포시 찍먹 정도 해보기

코딩애플 next js 강의 들으면서 기록함 👀 Next js 풀스택 프레임 워크 (프론트 + 백) 리액트 문법을 기반으로 함 최신버전에서는 파일과 폴더를 만들면 자동으로 html 페이지 생성 클라이언트 사이드 렌더링 기능 가능 이미지 최적화 폰트 등등 훨씬 더 편리하게 but 큰 프로젝트 시 복잡한 폴더파일들 컴포넌트들이 엄청 많아짐 그냥 html렌더링만 잘하는 📌설치하기 next.js 13.2.4 버전 node js LTS 설치 18 버전 이상 npx create-next-app@latest --experimental-app 프로젝트 이름을 정한 후 TypeScript/ESLint/Tailwind/src 디렉토리 등 사용여부를 확인한다. (나는 모두 no) ✔ next 13.2.4 로 진행 npm r..

공부하거나 코딩하면서 듣는 노래 추천

2023 프로그래머스 개발자 설문조사 리포트 2023 프로그래머스 개발자 설문조사 리포트 4034명이 참여한 온라인 설문 조사 결과를 통해 우리나라 개발자들의 솔직한 의견을 확인하세요. programmers.co.kr 프로그래머스에서 개발자 대상으로 조사한 여러 가지 설문조사 중 과연 개발자들은 노동요 무엇을 들을까! 흥미로운 질문에 과연 1위는? A. 재즈요 오 케이팝이 1위일 거라는 예상과 다르게 재즈를 듣는다는 결과가 나왔다 개인적으로도 일할 때나 공부할 때는 주로 재즈나 lofi 음악을 듣는 편이다. 주위에 추천했다가 자장가 모음아니냐고 한소리 들었지만 적당한 베이스 멜로디를 왜 몰라주지 lofi : Low Fidelity의 약자로 음질이 낮고 잡음이 많은 곡을 의미한다. 반대로 고음질의 음원을 ..

[퍼온글]컴퓨팅 사고와 개발 실력 늘리는 공부법

https://velog.io/@teo/computational-thinking 컴퓨팅 사고와 개발 실력 늘리는 공부법 혹시 개발 실력 늘리는방법 효과보신 글이나 유튜브 영상 있으시면 공유해주실분 계신가요... 인강보면서 개발공부중인데 이게 맞는 공부법인가 싶네요. ‘컴퓨터적으로 사고’하는 개발자가 velog.io 테오님의 글 늘 갖고 있던 고민에 대해 잘 풀어 설명해주신 글 같아 남겨둔다.

네이버 국제 강아지의 날 사이트 살펴보기

티스토리에 네이버 사이트 글이라 일단 고 글 쓰다가 한 번 날려먹음 휴 화나 매년 3월 23일은 국제 강아지의 날 몰랐음 이렇게 귀염 가득한 하루가 있었네 화면을 클릭하면 귀여운 강아쥐들이 오른쪽 왼쪽 뛰어다닌다. 귀 여 워 출근해서 찾은 짧은 즐거움 Intro. 일단 보자 으_흠 그러다 문득 궁금했다 어떻게? 무엇을 사용했길래 화면에 강아지들이 뛰어다닐까 자세히 파보지는 않겠다 훑어만 보기 보니까 90년생이라면 한 번쯤 보고 했을 법한 고전게임 바탕화면 부수기가 생각남 화면을 클릭하면 다양한 연장으로 컴퓨터 바탕화면울 지지고 박살 내는 게임 그럼 지금 사용한 기술에는 뭐가 있을까 wappalyzer을 사용하면 현재 방문한 사이트가 어떤 프로그램으로 만들어졌는지 확인할 수 있음 1. LottiesFile..

gsap 웹 애니메이션을 위한 라이브러리

GSAP (The GreenSock Animation Platform) : 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인기반 애니메이션 자바스크립트 라이브러리 CDN으로 가져오기 https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger gsap에 스크롤 이벤트를 적용할 때 ScrollTrigger와 함께 쓰인다. 그러므로 같이 cdn으로 가져왔다. 공식 문서 읽기 https://greensock.com/get-started/ Getting Started with GSAP Welcome! In this article we’re going to cover GSAP's core fundamentals and animate so..

Sql 데이터 정규화 이해하기

https://youtu.be/Y1FbowQRcmI https://youtu.be/rVxcheAkMSk sql 데이터 정규화 부분을 공부하고 있는데 도저히 이해가 어려웠다. 정규화 강의를 찾다가 두 개 영상을 보고 조금 맥락이 잡히는 것 같아 공유합니다. 모두모두 화이팅 ! 제1정규화 정규형 제2정규형 제3정규형,, 헷갈리는걸 다시 복습