전체 글15 Vue3 : Composition API (methods, computed, watch) methods 대체export default { setup() { function setNewAge() { user.age = 32; } return {setAge: setNewAge} }}computed, v-model // v-model 사용 가능 import { ref, computed } from 'vue';export default { setup() { const firstName = ref(''); const lastName = ref(''); function setFirstName(event) { firstName.value = event.target.value; } .. 2025. 8. 1. Vue3 : Composition API (ref, reactive) 컴포지션 API란?컴포넌트 로직을 쓸 때 사용할 수 있는 대안큰 규모의 Vue 애플리케이션 개발 시 크게 두 가지 한계나 문제 상황에 부딪힐 가능성이 있음. 문제- 같이 있어야 하는 로직이 여러가지 옵션 즉, data(), methods, 연산 등에 나뉘어 있는 상황- 컴포넌트의 로직을 재사용해야하는 경우 까다롭거나 복잡해질 수 있음. 기존 옵션APIdata() { return { name: 'Max' }},methods: { doSmth() { ...}}컴포지션 APIsetup() { const name = ref('Max') function doSmth(){...} return {name, doSmth} }data(), methods, computed, watch 를 setup() 메.. 2025. 7. 31. 자바스크립트 공부6 - JS 모듈 시스템, 조건문과 삼항 연산자 모듈화 시스템이란?코드를 기능별로 분리하여 재사용 가능하고 유지보수하기 쉬운 단위로 만드는 시스템입니다.모듈화의 장점✅ 코드 재사용성 - 한 번 작성한 모듈을 여러 곳에서 사용✅ 유지보수성 - 기능별로 분리되어 수정이 용이✅ 네임스페이스 관리 - 전역 변수 충돌 방지✅ 의존성 관리 - 모듈 간의 의존 관계를 명확히 표현 import, export 문법export(내보내기)여러 개 내보내기// calculator.js 파일export function add(a, b) { return a + b;}export function subtract(a, b) { return a - b;}export const PI = 3.14;메인 하나만 내보내기// greeting.js 파일function greet(name.. 2025. 6. 25. AI 빅스쿨 1주차 - AI 종류와 특징 AI 종류와 특징 알아보기OpenRouter 사이트https://openrouter.ai/models OpenRouterThe unified interface for LLMs. Find the best models & prices for your promptsopenrouter.aiOpenRouter.ai에서는 다양한 AI 언어모델(LLM)들이 제공되며, 인기 순위는 주로 사용량, 성능, 최신 트렌드에 따라 변동됩니다. 2025년 기준으로 가장 인기 있는 모델 10가지는 아래와 같습니다. OpenRouter.ai 인기 AI 모델 TOP 10OpenAI GPT-4o (GPT-4 Omni)OpenAI GPT-4 TurboAnthropic Claude 3 OpusAnthropic Claude 3 SonnetG.. 2025. 6. 18. 자바스크립트 공부5 - this와 화살표 함수의 관계 this와 화살표 함수의 관계화살표 함수의 this는 자신만의 this를 갖지 않고, 외부(상위) 스코프의 this를 그대로 사용합니다.기본 함수와 thisconst obj = { name: 'Jane', sayHello: function () { console.log(this.name); // "Jane" }};obj.sayHello();화살표 함수와 thisconst obj = { name: 'Jane', sayHello: () => { console.log(this.name); // ❌ undefined (또는 window.name) }};obj.sayHello();function Person(name) { this.name = name; // 일반 함수 사용 시 문제 발생.. 2025. 6. 2. 자바스크립트 공부4 - 비동기 처리 Promise미래의 작업을 예약하고 결과(성공 여부)에 따라 콜백을 실행할 수 있는 자바스크립트 기능입니다.then, catch, finally 메서드를 사용하여 처리 흐름을 관리합니다.Promise의 가장 유용한 기능 중 하나는 일부 데이터(외부 서비스/API)를 불러와 해결할 수 있다는 것입니다.기존 콜백 패턴const temperatures = [10, 5, 3];sumTemperatures(temperatures, value => { console.log(value); // 18 (the sum of temperatures)});Promise로 리팩토링const temperatures = [10, 5, 3];sumTemperatures(temperatures).then(value => { .. 2025. 5. 29. 이전 1 2 3 다음