빵 입니다.

📌 서론지도를 그리려고 합니다!근데 이제 타입스크립트를 곁들인.... 기존엔 Chart.js만 사용했고, Chart.js에서 제공하는 기본 차트만을 사용했습니다.여러 지도 라이브러리가 있었는데, 무료이면서 메르카토르 도법으로 작업이 가능한 것을 찾았습니다.(+커스텀을 위해 자료들이 많은 것도 한 몫함.)그래서 고른 것이 D3.js !더보기더보기D3.js는 오픈 소스 라이브러리이기 때문에, 개인 프로젝트, 상업적 프로젝트, 웹 애플리케이션 등에 제한 없이 사용할 수 있습니다. D3.js 자체는 유료 버전이 없지만, D3.js를 기반으로 한 상용 라이브러리나 플러그인들은 유료로 제공될 수 있습니다.👉🏻 직접 다 그리면 공짜^^~🥰  📌 사용 패키지우선, 제가 사용한 패키지는 2가지입니다. "d3":..

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', ..