Nuxt Layout 공식 문서 참고 layouts/ · Nuxt Directory StructureNuxt provides a layouts framework to extract common UI patterns into reusable layouts.nuxt.com 레이아웃을 쓰지 않을 페이지에는 definePageMeta를 사용해서 layout을 false 처리 해주면 해당 페이지에는 레이아웃이 제외된다.definePageMeta({ layout: false,}); 근데 만약 이게 적용이 안 된다면 NuxtLayout에 적용되어 있는 레이아웃 파일 이름을 확인해보자. 만약 이처럼 layout에 특정 이름을 적용해줬다면 위의 defindePageMeta 코드가 작동하지 않을 것이다. 그렇기 ..
분류 전체보기
카카오 API 사용하기step 1. 카카오 developers 사이트 이동 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com step 2. 내 애플리케이션 추가하기 애플리케이션을 생성하면 앱 키가 발급됨 step 3. 사용할 API 기능 확인로컬의 키워드로 장소 검색하기 기능 API 활용 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com ➡ 요청과 결과에 대한 모든 정보가 나와있음 Pos..
네이버 API 사용하기step 1. 네이버 develpers에서 사용할 API 탐색 NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음developers.naver.com step 2. 애플리케이션 등록이미 등록된 앱이 있다면 생략 가능 step 3. 등록된 애플리케이션 확인 step 4. 사용할 API url 및 메서드 확인 Postman을 이용하여 API 요청 확인step 5. Postman 새로운 Request 생성 step 6. Postman 헤더 작성애플리케이션의 Client id & secret 정보 ..
@tailwindtailwind의 base, components, utilities, variants 스타일을 적용하기 위해 사용하는 디렉티브/** * Tailwind의 기본 스타일과 플러그인이 등록한 모든 기본 스타일을 삽입 */@tailwind base;/** * Tailwind의 컴포넌트 클래스와 플러그인이 등록한 모든 컴포넌트 클래스를 삽입 */@tailwind components;/** * Tailwind의 유틸리티 클래스와 플러그인이 등록한 모든 유틸리티 클래스를 삽입 */@tailwind utilities;/** * 각 클래스의 hover, focus, responsive, dark mode 등 다양한 변형 클래스의 삽입 위치를 제어 * * 생략할 경우 Tailwind는 기본적으로 이러한 클..
Vue 스타일 가이드 Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 프로젝트 버전업을 하면서 Vue의 스타일 가이드를 참고하여 코딩 컨벤션을 정했다.가장 중점적으로 생각한 것은 코딩 문법과 파일 이름 설정이다. (변수명은 엔진과도 맞춰야 했기 때문에 비교적 유동적으로 고려했다.) 1. prettier 설정 통해 코드 컨벤션 강화 { "semi": true, // 문장 끝에 세미콜론 사용 "tabWidth": 2, // 탭 너비는 2칸 "bracketSpacing": true, // 중괄호 안에 양쪽 공백 생성 "trailingComma": "all..
interface Props { myObj?: { name: string, icon: string };} const props = withDefaults(defineProps(), { myObj: { name: '', icon: '' },}); optional props를 작성하면 초기값을 설정해주는 것이 권장된다.그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다. Type of the default value for 'myObj' prop must be a function. 기본값 객체는 공유된다.즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변..
[ React ] React에서 slot 사용하기Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다. 그렇다면 React에서는 어떻게 slot을 구현할까? 사용처(?)공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역zodev.tistory.com위의 글에서 JSX를 이용해서 slot을 구현한다고 했는데, 그럼 JSX는 무엇이고 어떤 특징을 가지고 있을까공식 문서를 간단하게만 정리해봤다. JSX는 Javascript를 확장한 문법이다.JSX는 React 엘리먼트를 생성한다.React에서 Javascript 코드 안에서 UI 관련 작업을 하기 위해 사용한다. JSX도 표현식이다.JSX는 Javascript 객체로 컴파일된다. ..
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
You-Dont-Know-JS 내용 참고 가장 흥미로웠던 점은 내가 비교할 두 변수의 타입을 확실하게 알고 있고, 두 변수의 타입이 완전히 일치한다면 === 대신 ==를 쓰라는 것이다. You-Dont-Know-JS/types-grammar/ch4.md at 2nd-ed · getify/You-Dont-Know-JSA book series on JavaScript. @YDKJS on twitter. Contribute to getify/You-Dont-Know-JS development by creating an account on GitHub.github.com 그 이유는 우리가 타입을 확신할 수 없을 때, ===을 사용하여 예상치 못한 결과를 막을 것이기 때문이다. 결론적으로 == 와 ===를 쓰..
태그의 pattern 속성은 정규표현식을 읽는다. 그러나 일반적으로 작성하는 정규표현식과 달리 태그의 pattern에 바인딩하는 정규표현식은 /로 감싸면 안 된다. 공통 input 컴포넌트→ /[0-9]+/는 적용되지 않고, [0-9]+로 써야만 한다.
