leteu / 개발 블로그
카테고리 없음
블로그 이전
https://leteu.dev leteu Devleteu 개발 블로그leteu.dev 이제 포스트 여기서 적을 거고 기존 포스트들도 살짝살짝 수정해 둬서 코드 보기는 더 좋아졌을 거라 생각합니다.
프로그래밍/Vuejs
[Vuejs] Expose로 ref에서 함수 꺼내 쓰기
사실 expose 하는 방법에 대한 글이라기 보단typescript로 작성할 때 자동완성 때문에 글 쓰게 됨난 vscode 쓰기 때문에 jetbrains에서는 원래 잘 나오고 있는지는 모른다.그래도 그냥 이렇게 해라https://leteu.dev/posts/vue-expose#1 일단 하는 방법 간단하다. 우선 setup 써서 하는 놈 먼저...... optional API는 ...expose: ['something'],... 이렇게 해주면 끝이다. 이제 사용 방법이다. #2 어떻게 쓰냐위에서 작성한 Component를 `Child` 컴포넌트라고 하고 시작하겠다. ...import Child from 'src/components/path/to/ChildComponent.vue'const ChildRe..
프로그래밍/Javascript & TypeScript
[JS] 네비게이션 타이밍 가져오기 (새로고침, 뒤로가기, 네비게이트)
페이지 새로고침을 통해 화면에 왔을 경우 뭔가 처리를 하고 싶었다.죄다 beforeunload만 알려주길래 그냥 MDN 뒤져서 찾음. https://leteu.dev/posts/js-navigation-timing#1 PerformanceNavigationTiming 이거 쓰면 다 해결됨 window.performance.getEntriesByType('navigation’) #2 사용법 우리는 바로 전 화면의 타입을 봐야하니 위 코드에서 이렇게 바꿔줄거다 window.performance.getEntriesByType('navigation’)?.[0]?.type #2-1 navigate a태그나 location.href로 넘어왔거나 아래 3개의 경우가 아니면 이거다. #2-2 reload 내가 원..
프로그래밍/Javascript & TypeScript
[JS] 배열 활용 map, filter, reduce, forEach, find 메소드
https://leteu.dev/posts/js-array-higher-order-function자바스크립트를 하다 보면 엄청 자주 쓰게 되는 배열 조작 메소드들을 소개해보려고 한다.알아두면 두고두고 쓸 일이 많다.아래 링크에서 더 자세하고 많이 볼 수 있다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDNJavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.developer.mozilla.org * 아래 나오는 친구들 모두 원래의 배열은 변형하지 않는다.#1 Map arr.map(callback(curr..
프로그래밍/Javascript & TypeScript
[ JS ] 조건문 - If, Switch
안녕하세요. 공부한 것 복습하려 올리는 블로그입니다. 첫 포스팅은 간단한 조건문으로 해보려 합니다. 처음 자바스크립트를 접하는 분들이 최대한 이해하기 쉽게 노력해보겠습니다. 재밌게 읽어주세요 :) # If ##1 문법 if ( 조건1 ) { } else if ( 조건2 ) { } else if ( 조건3 ) { } else { } ##2 설명 if ( 만약 …면 ) { 실행할 코드 } else는 조건문 없이 상위의 if문이 거짓일 때 실행하고 싶은 경우 사용합니다. else if는 계속 늘려줄 수 있습니다. ##3 예시 // 예시 코드 const 기분 = "happy"; if ( 기분 === "tired" ) {// 만약 기분이 "tired"라면 console.log("😩"); } else if ( 기분..
프로그래밍/Vuejs
[vuejs] Component 기초 - template, render, setup, slot
컴포넌트는 Vue에서 가장 기초가 되는 부분이다. 컴포넌트 하나 잘 만들어두면 비슷한 화면은 계속 가져다 쓸 수 있다. Vue 3를 기준으로 작성하였다. #1 참고 https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 일단 공식 문서를 보자. 답은 저기에 있다. 결론만 보고 싶다면 넘어가자 #2 화면 일단 제일 중요한 건 화면이다. 일단 뭐가 보여야 재밌으니 화면부터 들어가겠다. Template, Setup, Render 이렇게 3곳 중 한 군대를 골라서 화면을 만들어줄 수 있다. ## template 제일 익숙한 html로 짤 수 있다. pug 언어로도 가능하다. ( 이 포스..
프로그래밍/ReactJs
[React] react-router-dom을 vue-router처럼 쓰기
오랜만에 글을 써본다. 재미로 쓴 flutter가 전체 조회수의 약 80~90% 정도를 차지해서 현타가 왔다. 회사에서 리액트를 쓸 일이 생겨 알아보던 중 라우팅 코드가 굉장히 더러운 거 같은데 vue-router 쓰던 입장으로썬 이해가 안 가서 비슷하게 한번 만들어봤다. #1 react-router-dom 이란 https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our s..
프로그래밍/Flutter
[Flutter] 위젯(Widget) 기초 - text, icon, button 등등
써본 위젯 다 쓰진 못하겠고 많이 사용할만한 거만 계속 적어보려 한다. #1 위젯 종류 https://flutter-ko.dev/docs/reference/widgets Flutter 위젯 목록 flutter-ko.dev 위젯 종류가 굉장히 많다. 버튼만 해도 아이콘이 있고 없고 배경이 채워진 버튼, 아웃라인만 있는 버튼 등등 종류가 많다. 위 링크의 공식 문서 보면서 잠깐 개발해보며 많이 사용한 위젯 위주로 설명해보려고 한다. #2 기초 위젯은 크게 두가지로 나뉜다. ##Stateful Widget 동적 State의 데이터가 변할때마다 다시 빌드하는 위젯 상수는 가질 수 있지만 프로퍼티로 변수를 가지지 않음 stful 치고 엔터누르면 바로 나온다. 클래스 명을 입력하면 알아서 코드가 다 나온다. ##S..
프로그래밍/Flutter
[Flutter] 위젯(Widget) 알아보기 - Scaffold
Flutter 레이아웃 잡는 위젯에 대해 포스팅해보려고 한다. 개발해보면서 많이 사용해본 것들 위주로 올리려고 한다. #1 Scaffold ( 스캐폴드 ) https://api.flutter.dev/flutter/material/Scaffold-class.html Scaffold class - material library - Dart API Implements the basic material design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the ScaffoldState for the current ..
프로그래밍/Flutter
[Flutter] Flutter 1 - 설치부터 빠르게
지금 회사에서 프론트앤드 개발하면서 앱까지 개발하게 됐다. "Vue 할 줄 아니 nativescript하면 되겠네" 싶었는데 맘에 안 들어서 플러터 해보려고 한다. 플러터가 뭐 검색하면 잘나오니 이거 써보겠다. #1 Flutter SDK 설치 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev 플러터 사이트 들어가서 자신에 맞는 OS 찾아 설치해줍시다. 필자는 Window 씁니다. 다운로드가 완료되었으면 아무 곳이나 찾기 쉬운곳에 압..
