devOhzl

Location - 현재 브라우저에 표시된 HTML 문서의 URL 또는 관련 정보 (URL의 프로토콜, 호스트, 포토번호 등의 정보)를 반환하거나 제어한다.- window 객체의 일부이고 window.location 속성을 통해 접근할 수 있다.(window는 생략 가능)  📌 속성 .href 전체 URL 주소 .protocol프로토콜 정보 (http/https) .hostname 도메인 이름 .pathname 도메인 이후 하위 경로 .host  포트 번호를 포함하는 도메인 이름 .port 포트 번호 - http이면 80포트 생략 가능. 프로토콜이 https이면 443포트는 생략 가능  .hash  해시 정보 ( 페이지의 ID )  📌 함수 .assign(주소)  해당 주소로 페이..

동기(Synchronous) & 비동기(Asynchronous)📌 동기(Synchronous) : 각 함수와 코드들이 위에서 아래로 차례로 동작자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다린다.즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 간단하고 직관적이지만, 작업이 오래 걸리거나 응답이 늦어지는 경우에는 전체적인 성능과 사용자 경험에 영향을 줄 수 있다. 예를 들어 서버에 데이터를 요청하고 응답을 받아야 하는 작업이 있다면, 응답이 올 때까지 다른 작업을 하지 못하고 대기해야 한다. 이렇게 되면 프로그램의 흐름이 멈추거나 지연되게 된다. 📌 비동기(Synchrono..

싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 웹 자원을 모두 다운받는다.즉, 규모가 커질수록 첫 로드의 시간이 오래걸리게 된다. 한 페이지만 로드하면 되는 첫 시작 페이지에서 필요로 하지 않는 여러 페이지(또는 프레임워크를 사용하는 경우 import한 컴포넌트 파일)를 로딩하기 때문이다.  이 때 코드 스플리팅을 사용하면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생기게 된다.개발 환경 조건싱글 파일 컴포넌트 체계 (.vue)웹팩 - 모듈 번들러 (2.x 이상)바벨 Syntax-dynamic-import 플러그인 코드 스플리팅 자체는 Webpack 같은 번들러에 의해 주로 처리되지만, Babel은 이 과정에서 중요..

개발하던 화면은 페이지를 넘기면서 데이터를 등록하여 그 데이터를 계속 가지고 있다가 마지막 페이지에서 저장하는 화면이었다. 나는 Vuetify를 사용하고 있었고, VWindow 컴포넌트를 사용해서 화면을 구성했다.https://vuetifyjs.com/en/components/windows/#usage Window component — VuetifyThe window component is a wrapper container that allows transitioning between content. It serves as the baseline for...vuetifyjs.com 처음에 화면에서 관리하는 데이터가 너무 많아지니 데이터들을 store에서 관리하면 어떨까 싶었지만,같이 개발하는 팀원이 st..

DataTable의 한 행에서 값들을 입력하여 추가하거나 수정하여 저장하는 기능을 개발했다. 저장을 하기 전에 필수로 입력해야하는 값이 있다면 입력 여부를 확인해야한다. 필수로 검사 할 객체의 키를 배열로 받아, 해당 키들이 모두 값이 있는지 확인할 수 있는 공통 함수를 작성했다.처음에 작성했던 로직export const isValidNull = (keys, list) => { if (!keys) return false; return list.some((item) => { let isNull = false; keys.some((key) => { if (item[key] !== null && typeof item[key] === "object") { ..

객체📌 Object.assign()하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환한다.const target = { a: 1, b:2 }const source1 = { b: 3, c: 4 }const source2 = { c: 5, d:6 }const result = Object.assign(target, source1, source2)console.log(target) // { a: 1, b: 3, c: 5, d: 6 }console.log(result) // { a: 1, b: 3, c: 5, d: 6 } Target 객체를 수정하지 않고 새로운 객체로 변환하려면, Target 객체에 빈 객체 { } 를 넣어주면된다.target,source1,..

Core Components를 이용한 UI 작성하기 https://reactnative.dev/docs/components-and-apis#user-interface Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnat..

리액트 네이티브란? React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크 사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리인 React를 기반으로 하지만, React는 브라우저를 대상으로 하고, React Native는 모바일 플랫폼을 대상으로 한다. 웹 개발자도 JS를 이용하여 "네이티브" 모양과 느낌을 주는 애플리케이션을 작성할 수 있다. 또한 작성하는 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발 가능하다. 리액트 네이티브의 장점 1. 다른 플랫폼에서는 웹으로 개발 후 앱에 인베딩하여 사용하지만, React Native는 소스 코드를 작성을 하면 실제 네이티브 요소로 변..

1. api 호출 아래는 엑셀 다운로드 api를 호출하면 리턴되는 형태이다. blob 형태로 받기 위하여 responseType을 추가한다. const getList = async() => { const param = { params: { /* ... */ }, responseType: 'blob', headers: { 'Content-Type': 'application/json' } } const response = await axios.get($System.server.url + "/api/v1/account/downloadExcel", param); return response; } api를 호출하면 blob 객체로 호출이 된다. 2. response, blob 객체 생성 받은 response로 b..

📌 .length 배열의 길이(숫자)를 반환한다. const arr = ['A', 'B', 'C'] console.log(arr.length)// 3 📌 .at 대상 배열을 인덱싱한다. 음수 값을 사용하면 뒤에서부터 인덱싱한다. 쉽게 마지막 값을 가져올 수 있다. const arr = ['A','B','C'] console.log(arr[0]) // A console.log(arr.at(0)) // A console.log(arr[arr.length - 1]) // C console.log(arr.at(-1)) // C 📌 .concat 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환한다. 전개 연산자를 사용해도 가능하다. const arr1 = ['A','B','C'] const arr2 = ['..