전체 글

(TS) document interface

열심히하자.

The template root requires exactly one element.eslint-plugin-vue 오류 해결

생기는 이유 (추측) vue3에서는 template 내 element가 하나여야할 이유가 없음. 하지만 한 폴더 내 vue 관련 프로젝트가 많을 경우나 기타등등 여러 요인으로 인해 vue의 lint가 vue 버전을 확실히 추적하기 어려워함. 그래서 vetur가 모든 것마다 에러를 뿜어버림. 해결 https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue Vue 3 The template root requires exactly one element. eslint-plugin-vue After scaffolding a Vue 3 project I noticed ..

소켓 연결 이슈

이슈 웹앱 화면에서 카카오페이 결제 시, 결제가 안되고 로딩 화면에서 멈추게 됨. 기존 코드 분석 해당 웹앱은 소켓 통신을 사용함. 웹앱 화면을 나오게 되면 소켓 연결이 자동적으로 끊겼다가, 웹앱으로 다시 접속하면서 자동으로 연결됨. 카카오 페이를 이용할 시, 인증을 위해 카카오톡 어플로 이동함. 위 상황에서 소켓이 원치 않은 타이밍에 연결이 끊겼다가 복구되며 사이드이펙트가 발생. 원인 소켓 연결이 원하는대로 이루어지지 않음 해결방안 카카오페이에 결제 요청을 보낸 이후 소켓 연결을 강제로 disconnect. (카카오톡으로 화면이 전환될 때, 자동으로 커넥트가 해제되고 연결되는걸 방지하기 위함) 카카오톡 앱에서 거래요청이 성공하면 기존 앱 화면에 success가 전달되고, 실패하면 fail이 전달되게 함..

[자료구조-JS] 싱글 링크드 리스트 구현

싱글 링크드 리스트(Singly Linked List) 목표 싱글 링크드 리스트(Singly Linked List)가 어떤 것인지 정의하기 배열(Array)와 링크드 리스트(Linked List)의 차이점에 대해 비교해보기 싱글 링크드 리스트의 삽입, 삭제, 순회 등의 메서드를 직접 구현해보기 링크드 리스트(Linked List)가 뭔가요? 링크드 리스트는 head와 tail, length 프로퍼티로 구성된 자료구조 입니다. 링크드 리스트 내부에서는 노드가 별도로 존재하며, 각 노드는 노드에 연결된 값(value)과 다음 노드를 연결하거나 null과 연결되는 포인터(pointer)로 구성됩니다. 링크드 리스트와 어레이의 비교 리스트 리스트는 인덱스가 없습니다. 리스트의 노드는 포인터에 의해 다음 노드로 ..

ESLint, Prettier 통합

윈도우 기준 Ctrl + P 누르고 > Preference: Open User Settings (JSON) 검색 후 진입 json 파일에 아래 내용 추가 { "workbench.settings.useSplitJSON": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "editor.formatOnSave": false, }

라이브러리, 프레임워크 사용 중 생긴 uncaught syntaxerror: unexpected token '<'

uncaught syntaxerror: unexpected token '

vue ESLint 끄기

좋은 습관은 아니지만 간단한 연습을 할 때는 꺼두는 것이 정신건강상 이롭다. vue.config.js에 아래 코드를 넣으면 된다 defineConfig의 인수 객체에 lintOnSave: false를 추가하자. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, })

DOMContentLoaded, load event

DOMContentLoaded document.addEventListener("DOMContentLoaded", () => { // ...something }) DOMContentLoaded 이벤트는 모든 HTML DOCUMENT가 파싱되고, 와 들이 다운로드되고 수행되었을 때 실행된다. 다만 이미지 다운로드나 subframes, async script는 고려하지 않고 실행된다. DOMContentLoaded는 stylesheets(css)는 기다려주지 않지만, deferred scripts는 stylesheet를 기다려준다. 그리고 DOMContentLoaded는 deferred script 뒤에 실행된다. 또한 deferred나 async가 붙어있지 않은 script (ex. ) 는 파싱되어 대기중인..

Form Bindings

Text Input {{text}} Checkbox Multi Checkbox Jack Hero Potato {{ checkedNames }} Radio One Two {{picked}} Select Please select one A B C {{selected}} Multi Selected A B C {{multiSelected}}

Passing Props