빵 입니다.

nuxt3를 이용해 포트폴리오 사이트를 만들면서 익혀보려고 마음을 먹었다.틈틈이 시간날 때 셋팅하고 시작을 했고...가볍게 라우팅✔firebase 연결✔ (← 써보고 싶었음)조금조금씩 위 내용들은 실행을 했다. 그러나 슬픈 예감은 틀리지 않지... (기초적인 학습을 안하고 안해서 그런 듯...)API 통신 예제들을 적용해 보면서 외부 API와의 연결 셋팅까지만 해보려고 했는데 에러가 떴다.더보기📍 이 에러를 발생시킨 나의 코드(Nuxt에선 Data fetching을 하는 데에 사용하는 몇 가지 메서드들이 있는데, 생각없이 냅다 useFetch를 써버리니까 뜬 에러입니다.) 데이터 가져오기 로딩 중... 오류 발생: {{ error.message }} {{ post.title }..

📌 모듈 시스템◾ 자바스크립트에서 모듈 시스템은 코드를 효율적으로 분리하고 재사용 가능하게 만드는 역할을 한다.◾ CommonJS와 ESM은 모듈화를 지원하는 두 가지 방식이다. 📌 CommonJS🧿 Node.js 환경에서 사용 - Node.js 초기 설계 단계에서 채택된 모듈 시스템🧿 require() 함수로 모듈을 가져오고, module.exports로 내보낸다.// math.jsmodule.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b,};// app.jsconst math = require('./math');console.log(math.add(2, 3)); // 5 🧿 동기적 모듈을 로딩- 동기적으로 모듈을 로드하기 때문에..

📌 중괄호 {}를 생략한 경우괄호 {}를 생략하면 화살표 함수가 단일 표현식을 암시적으로 return한다.단일 표현식을 암시적으로 반환// const fn = () => expression;const add = (a, b) => a + b;  📌 중괄호 {}를 사용한 경우중괄호 {}를 사용하면 화살표 함수 내부에서 명시적으로 return 키워드를 사용해야 한다.중괄호 {}와 return을 명시적으로 사용// const fn = () => {// return expression;// };const add = (a, b) => { return a + b; // 명시적으로 반환};

현재 작업 중인 프로젝트에 Typescript를 도입해서 사용 중인데 type-check를 해보니 정말 개판인거에요.(네. 제가 개판으로 사용했습죠...) 그래서 에러 뜬 파일들을 일일이 열어서 수정을 했는데... 소스도 깨끗하지 않더라고요. props를 가져올 때의 default 값도 제각각~ 대충 알고 막연하게 사용했던 자신을 반성하며... 정리를 해보았습니다! 여기서 default❗defineProps({ list: { type: Array as () => { label: string; value: number }[], default: () => [] }, paginationValue: { type: Object as () => PaginationValue, default..

서버의 리소스와 캐싱된 리소스를 확인을 하기 위해 ETag를 비교하거나 Last-Modified(마지막 수정일)를 비교한다. 📌 ETag(Entity Tag)서버가 리소스의 특정 버전에 대해 생성하는 고유 식별자 리소스의 내용이 변경되면 ETag 값도 변경된다. 클라이언트가 캐시된 리소스를 사용할 수 있는지 확인하는 데 사용한다. 서버는 클라이언트가 제공한 ETag 값과 현재 리소스의 ETag 값을 비교한다. 🧿 작동 방식 => 클라이언트는 서버에 리소스를 요청할 때 If-None-Match 키를 사용하여 이전에 받은 ETag 값을 전달한다. 1. 서버가 리소스를 클라이언트에 전달할 때 ETag 헤더를 함께 보낸다. 2. 이후 클라이언트는 요청을 보낼 때, If-None-Match 헤더에 ETag 값..

📌 GET method🧿 경로 매개변수 (Route Parameters)URL 경로의 일부로 포함되어 전송되는 파라미터특정 리소스를 식별할 때 사용// 요청GET /user/123// 서버측 라우터app.get('/user/:id', (req, res) => { const userId = req.params.id; res.send(`User ID: ${userId}`);});===> :id는 경로 매개변수로, req.params.id로 접근할 수 있다.  🧿 쿼리 문자열 (Query Parameters)URL의 끝에 ? 뒤에 key=value 형태로 전송되는 파라미터검색 조건, 필터링 옵션 등을 전달할 때 사용// 요청GET /search?q=express&page=2// 서버측 라우터app.g..

라인 차트를 사용하는데, 기본적으로 흐린 라인이었다가 포커스가 가면 Point Dot과 라인에 색상이 입혀지는 디자인이 나왔다. 어찌저찌 레퍼런스에서 라인 색상 hover 전, 후를 대응하는 속성값들을 찾아서 적용했는데,아무리 찾아도 툴팁 레이블 색상과 레전드의 레이블 색상을 변경하는 방법을 모르겠더라. 그래도 똑같이 구현하고 싶고, 또 전혀 없을 것 같은 내용은 아니라 열심히 찾아보았다.역시나 없을리가 없지~다른 분들의 시간 절약을 위해 공유해 보겠습니다. 우선, 차트 마우스오버 효과를 주기 위한 설정값들입니다.import { type ChartData } from 'chart.js'const lineChartData = reactive>({ labels: ['January', 'February', ..

const options = reactive({ plugins: { }, scales: { x: { ticks: { font: { size: 16 } } }, y: { ticks: { font: { size: 16 } } } }})

안뇽하세요~ 넥스트 라우팅 관련하여 좋은 글들이 아주 많았는데 스스로 학습하고 머릿 속에 정리해 놓으려고 저만의 언어로 요약해 보았습니다~ 최하단에 출처를 남겨놓았으니 원본 글들도 꼭 봐주세요~ --- [목차] 1. 라우팅 - 리액트 라우팅 vs 넥스트 라우팅 - 라우팅 컨벤션 2. Index routes - Root Path - 원하는 라우팅 생성 - Layout 패턴 3. Nested Routes (중첩된 라우트) 4. Dynamic Routes (다이나믹 라우트 / 동적 라우트 매칭) - 동적 데이터에서 경로를 생성하려는 경우 - 정확한 세그먼트 이름을 모르는 경우 -- Catch-all Segments (모든 경우의 수를 캐치하기) -- Optional Catch-all Segments (모든 경..

화면별 권한이 필요할 경우, vue-router에서 제공하는 네비게이션 가드를 이용해 화면에 접근 후 발생하는 이벤트들을 관리할 수 있다. 📌네비게이션 가드 vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다. 🧿전역 가드 router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다. 🧿라우트 별 가드 beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있다. 나의 경우 전역 가드와 라우트 별 가드 둘 다 설정했다. 프로젝트에 JWT를 적용했는데, 토큰 유무뿐만 아니라 토큰이 있어도 유효 기간이 만료된 경우도 있어서 일괄 처리를 위해 전역 가드를 사용했고 , 사용자가 이미 로그인한 상태에서 다시 로그인 화면..