빵 입니다.

📌 컴포저블 함수- 🌟 Composition API 기반으로 작성된 재사용 가능한 함수이다.- 상태 관리가 필요한 경우가 많지만, 반드시 필수는 아니다.- 이름은 보통 useXXX로 작성해 가독성과 목적을 명확히 한다. ◾ 반응형 상태 중심의 컴포저블ref, reactive, computed, watch 같은 Composition API 기능을 활용해 반응형 상태나 로직을 캡슐화한다.상태를 관리하고 컴포넌트에서 상태 변화에 따라 UI가 갱신한다.ex) useCounter() 같은 상태 관리 함수◾ 부수 효과 (Side Effect) 중심의 컴포저블onMounted, onUnmounted, API 호출, 이벤트 리스너 등록 등 Vue의 생명주기나 외부 효과 관리(Side effect)한다.반응형 상태는..

📌 서론지도를 그리려고 합니다!근데 이제 타입스크립트를 곁들인.... 기존엔 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 값..

인터넷 거버넌스는 기존의 다자 거버넌스와 다른 독특한 특성이 있다. 시민 사회 단체가 다른 이해관계자와 비교적 동등한 입장에서 인터넷을 운영하는 정책 수립에 직접 참여하기 때문이다. 따라서 마음만 먹으면 다른 기존 분야에 비해 개인 또는 시민으로서 적극적으로 개입할 수 있는 기회가 열려 있다. 📌 다자 이해관계자 모델전화나 전보 같은 이전의 통신 기술은 정부나 국영 기업이 독점으로 통제하고 규제하는 경우가 많았다. 하지만 인터넷 거버넌스는 독특한 다자 이해관계자 모델을 기초로 하고 있다. 다자 이해관계자 모델은 정부, 민간 부문, 시민 사회, 관심이 있거나 활동하고 싶어 하는 모든 사람의 참여가 필요하다. 다양한 당사자의 참여 덕분에 시민 사회는 단지 로비만 하는 것이 아니라, 전 세계 인터넷을 만드는..