삽질블로그 삽질블로그

프로젝트를 노드 패키지 관리자로 관리하기 위한 과정 (with next) 1. package.json 생성 2. $ npm install react react-dom next 3. html 에 있는 태그, react 에서 모듈을 가져오겠다는 "React.", id가 app 인 태그, html, body 모두 react 에서 생성해주므로 필요없다. 결과 (index.jsx) import {useState} from 'react'; function Header({title}) { return {title}; } function HomePage() { const [likes, setLikes] = useState(0); function handleClick(){ //console.log( "increment ..

참고문헌: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs * 사용용어 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법입니다. 라우팅 - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다. 데이터 가져오기 - 데이터가 있는 위치와 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치입니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법. 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다. 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법. 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션..

검색 시에 쿼리스트링으로 검색내용들을 저장해놓고 페이지가 새로고침 되었을 때 쿼리스트링에 담겨있는 내용을 가져와 검색 객체에 set 해주는 기능을 구현하는데 type 관련 문제가 있었다. route.query 에서 반환하는 타입이 string 이 아닐 수 있다는 이유로 다음과 같은 에러가 발생한다. 검색객체의 interface 에 LocationQueryValue 타입을 추가해주는 방법도 있지만 사실 값은 실제로 number 아니면 String 이어야만 하기 때문에 불필요한 타입을 추가하는게 마음에 걸렸다. 그래서 다음과 같이 객체에 초기화되어있는 값의 type을 체크해서 무조건 String 또는 Number 로 타입을 변환하는 작업을 추가했다. const makeParamByQueryString = (..

기존에 이렇게 정의되어있었다. const isExistTargetId = (target: Customer | Course, selectedTargets: Customer[] | Course[]) => { const found = Array.prototype.find.call( selectedTargets, (selectedTarget: Customer | Course) => selectedTarget.id === target.id, ); return !!found?.id; }; Array 함수를 이용하는데 call 을 사용한 이유는 다음과 같이 This expression is not callable 이라는 에러가 발생했기 때문이다. 분명히 selectedTargets 는 어떤 타입이든 [] 배열로 정의..

무조건 무조건 Apple silicon 으로 다운받아야한다. 2021년 apple silicon 이 탑재된 맥 버전이 따로 나왔다. 그간 얼마나 차이가 있겠어 하면서 느린 반응속도 감수하며 썼던 내 모습이 참으로도 안타깝다 ^^; 귀차니즘이 고생을 샀구나 ~~

vue2-google-map을 사용할 때 map에서 제공하는 함수들을 사용하는 방법 this.$refs.gmap.$mapPromise.then((map) => { map.setZoom(18) }) 이 promise 에서 map에 담아주는 객체는 google.maps.Map 에서 제공하는 객체이므로 이 객체를 google map api 문서 (https://developers.google.com/maps/documentation/javascript/reference/map) 에 써져있는 그대로 사용할 수 있다. * 기본세팅방법 import vue2-google-maps import Vue from "vue"; import * as VueGoogleMaps from 'vue2-google-maps'; imp..

Write with reference to https://ui.toast.com/weekly-pick/ko_20190307 1. 부모로부터 받아온 props data 를 watch 할 때 감시하고 있는 것이 객체나 배열이라면 내부 속성의 변경여부도 검사한다고 정의해줘야만 watch 에서 감지한다. 아래와 같이 deep : true 로 설정해줘야한다. export default { name: 'ColourChange', props: { colours: { type: Array, required: true, }, }, watch: { colours: { // This will let Vue know to look inside the array deep: true, // We have to move our m..

이미지를 리사이징하기 위해 base64로 이미지를 변환한다. 여기서 이미지 변환 quality 에 대하여 브라우저 의존적이며, 크롬이나 파이어폭스에서의 default 값은 0.92이다. (0~1 사이로 정의해야하며 낮으면 그만큼 low quality image로 변환된다. canvas.toDataURL(`image/jpeg`, /* default quality */) 이미지 용량 줄이기 let base64 = e.target.result; /** 용량 줄이기 */ const image = new Image(); image.src = base64; image.onload = (event) => { const $canvas = document.createElement(`canvas`); const ctx =..