티스토리

대가는 결과를 만든다

검색하기

블로그 홈

대가는 결과를 만든다

yunzema.tistory.com/m

yunzema 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

js에서 연산자 ||와 ??의 차이 맨날 햇갈려서 메모겸 기록한다. const test1 = value || '1'const test2 = value ?? '1' || 는 value가 falsy한 값(null, undefiend, 0, '', NaN, false 등)인 경우 모두 '1' 출력??는 value가 null, undefined일 경우에만 '1'출력 공감수 0 댓글수 0 2024. 8. 7.
비동기 함수처리를 이해하기 위한 브라우저의 Javascript Callstack, EventLoop, Callback(Task) Queue 구조 브라우저에서 비동기 처리가 필요한 이유: Single Thread구조인 Javascript는 하나의 작업이 오래걸리는 경우 Signle Thread Blocking 이슈가 발생하게 되어 Freezing 현상을 초래할 수 있음. 이 한계를 보완하기 위해 Background로 비동기 작업을 처리하고 Main Thread의 일반적인 동작은 blocking되지 않도록 처리한다. 브라우저의 구조는 크게 아래와 같이 구성되어 있다. 1. Javascript엔진1-1. Call Stack : 함수가 호출될 시 실행 컨텍스트가 순차적으로 push되고 순차적으로 실행1-2. Heap : 객체가 할당되는 메모리 공간 2. Web API- Background에서 처리- DOM Event, ajax, timer 등의 브라우.. 공감수 0 댓글수 0 2024. 7. 29.
SOLID 원칙에 대한 정리 SOLID원칙이란 객체 지향 설계 프로그래밍의 유지보수성을 높이고, 유연하고, 확장이 쉽게하기 위해 마틴 아저씨가 만든 원칙이다.패턴보다 작지만 표준화 작업, 아키텍처 설계에 이르기까지 다양하게 적용될 수 있는 원칙이다. 1. SRP(Single Responsibility Principle) 단일 책임의 원칙2. OCP(Open Close Principle) 개방 폐쇄의 원칙3. LCP(The Liskov Substitution Principle) 리스코브 치환의 원칙4. ISP(Interface Segregation Principle) 인터페이스 분리의 원칙5. DIP(Dependency Inversion Principle) 의존성역전의 원칙 1. SRP - 단일책임의 원칙1-1. 정의- 작성된 클래스.. 공감수 0 댓글수 0 2024. 6. 25.
Redux에 대해 간단한 요점 정리 Redux, Vuex 등 상태 관리 라이브러리의 필요성에 대한 내용은 굳이 정리 하지 않고, Redux의 구성요소와 Flow, 사용 패턴을 위주로 정리한다.다만, ContextAPI라는 동일한 역할을 수행할 수 있는 내장 기능이 있음에도 불구하고 Redux라는 상태 관리 라이브러리를 별도로 사용하는 이유에 대해선 한번 정리하고자 한다. Index0. ContextAPI 대신 Redux가 필요한 이유1. Redux의 4가지 구성 요소2. DataFlow3. Middleware 0. ContextAPI 대신 Redux가 필요한 이유- 규모가 크지 않고 단순한 어플리케이션의 경우 ContextAPI로 전역 상태 관리를 개발 가능하긴 함.- 상태 관리에 대한 구조화되고 예측가능한 코딩이 가능 (action, s.. 공감수 1 댓글수 1 2024. 6. 17.
input의 change, input event 차이 1. input Event- 사용자가 값을 수정할 때마다(되자마자) 이벤트 발생- 키보드가 아닌 다른 수단을 사용하여 값을 변경할 때도 발생함- ⇦, ⇨ 키와 같이 값을 변경시키지 않는 키보드 입력에는 이벤트 발생하지 않음- event.preventDefault()를 사용해도 아무런 효과가 없음 2. change Event- 기본적으로는 요소의 변경이 끝날 때 발생하지만, input text 에서는 포커스를 잃을 때 이벤트가 발생- select, input checkbox/radio는 선택값이 변경된 직후에 이벤트가 발생함 참고 https://ko.javascript.info/events-change-input 공감수 0 댓글수 0 2023. 11. 10.
Vite에 대하여 좀 더 자세히 목차 1. 번들러 2. Webpack 3. Rollup 4. Esbuild 5. Vite 간단 정리: 기존 브라우저에 모듈 기능이 없었던 시절을 위해 존재하는 번들링 과정 때문에, 개발과정에서 개발서버 실행 및 수정 코드 반영이 비효율적으로 느리다. 현재 네이티브 모듈 기능을 지원 하게된 모던 브라우저에 맞춰 개발서버 실행 시 번들링없이 빠르게 작업할 수 있도록 개발자 경험을 향상 시키고자 Vite가 등장했다. 1. 번들러 - 배경: ES Module(ES6 import) 미지원 -> 웹서비스 규모 커짐에 따라 코드 방대해짐 -> 분리(전역객체를 사용) -> 모듈 시스템 필요! - 기본 역할: 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할 - 추가적인 역할: .. 공감수 0 댓글수 1 2023. 11. 6.
adapter 패턴 1. Intro 어댑터란? 가장 가까이 볼 수 있는 어댑터의 예 - 충전기 타입이 micro usb-b인데 스마트폰의 usb-c라면, 충전기에 usb-c타입으로 전환하기 위한 어댑터를 끼워주어야 한다. 2. 어댑터 패턴 - 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해준다. - 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 사용하기 위해 사용하는 패턴 - 이미 존재하는 타입/인터페이스/구조에 다른 인터페이스에 적응 시켜주는 역할을 하는 adapter를 사용한다. - 다른 추상/인터페이스 유형의 인스턴스를 생성자에서 받는다. 어댑터가 그의 메서드들에 대한 호출을 수신하면,.. 공감수 0 댓글수 0 2023. 2. 12.
새롭게 등장한 웹 빌드툴에 대해 정리해보자 : esbuild, Vite 개발자 경험 개선이라는 목표를 가지고 출시된 웹프론트엔드 빌드 툴 esbuild, Vite에 대해 정리해본다. 개발자가 로컬에서 개발서버를 실행할 때, 기존에 사용하는 Webpack, Rollup, Parcel 같은 툴들은 개발자가 작성한 소스코드와 node_modules 폴더의 전체 코드 베이스를 번들로 묶고, 빌드 프로세스(Babel, Typescript 트랜스파일링 또는 PostCSS)를 통해 번들된 코드를 브라우저에 제공한다. 수정할 때마다 매번 새롭게 빌드 되야했다. 이 모든 작업은 캐싱과 최적화를 하더라도 개발서버를 느리게 만들 수 있다. 번들러? 어플리케이션에서 필요한 모든 종류의 파일들을 모듈단위로 나누어 최소한의 파일 묶음(번들)로 만들어주는 역할을 한다. 자바스크립트에도 모듈 개념이 등.. 공감수 0 댓글수 1 2022. 12. 28.
모호하게 알고있던 타입스크립트 문법 짚고 넘어가기 1. 유니온, 교차 타입 - 실제 사용할 때는 안 햇갈리는데 개념이 가끔 햇갈릴 때가 있음 - Card | Account - 유니온 : 교집합을 생각하면 됨! 두개 이상의 타입이 공통으로 가지고 있는 속성을 타입으로 정함 interface Card { name: string id: string pay(): void } interface Account { name: string id: string transfer(): void } // Card와 Account가 모두 가지고 있는 교집합 속성 name, id 속성이 있으면 파라미터 타입 허용한다. // (두 타입을 모두 허용한다는 의미가 되어 합집합이 아닌가? 라는 생각이 들어 햇갈릴 수 있음) const doSomething = (payment: Card.. 공감수 0 댓글수 0 2022. 12. 27.
git tag 삭제하기 (local, remote) 태그 삭제하기 1. -d 옵션을 사용하여 local에서 태그 삭제 # git tag -d v1.0.0 2. 원격 저장소에 올라간 태그를 삭제하기 위해 :를 사용 # git push origin :v1.0.0 공감수 0 댓글수 0 2021. 11. 24.
React hook 9가지 정리하기 Index1. useEffect2. useRef3. useLayoutEffect4. useReducer5. useContext6. useMemo7. useCallback8. useTransition9. useDeferredValue 1. useEffect- 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 때 사용- 컴포넌트가 mount, update, unmount 됬을 때 실행됨- mount 될 때 : deps 위치에 빈 배열을 전달(deps 위치에 값을 생략하면 리랜더링 될 때 마다 실행된다.)- update 될 때 : deps 위치의 배열에 검사하고 싶은 값을 전달. 마운트될 때도 실행된다. *update될 때만 실행되야 한다면, useRef를 이용하여 flag 값을 두고 flag.current.. 공감수 0 댓글수 0 2021. 8. 17.
useEffect exhaustive-deps-warning React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)해결방법1. 사용하고 있는 state를 useEffect deps 배열 위치에 추가해준다.2. setState 함수 인자로 함수형 업데이트를 사용한다. * useEffect 내부에 함수를 사용하는 경우 해결방법- 함수와 함수가 사용하는 state 값을 useEffect deps 배열 위치에 추가해준다.- useCallback을 사용하여 함수를 랩핑 정의한다. (리랜더링될 때마다 함수를 생성하게 되어 새 참조값을 받아 함수를 재실행하게 된다.) 참고: exhaustiv.. 공감수 0 댓글수 0 2021. 5. 5.
javascript의 객체 얕은 복사와 깊은 복사 javascript에는 'Number, String, Boolean, Null, Undefined 등'의 원시타입이 있고 'Object, Symbol'의 참조타입이 있다. 1. 원시타입의 복사원시타입의 경우 값을 복사하는 경우 해당 값을 다른 독립적인 메모리 공간에 할당하므로, 복사 값이 원본 값에 영향을 주지 않는 깊은 복사가 수행된다. 2. 얕은 복사참조타입은 참조를 공유하는 복사인 얕은 복사를 하는 경우 복사본의 최상위 속성을 재할당해도 원본 객체에 영향을 끼치지는 않지만, 중첩 객체 속성을 재할당하면 원본 객체에 영향을 끼친다. 얕은 복사를 수행하는 코드 : ...전개연산자, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Obj.. 공감수 0 댓글수 0 2021. 3. 11.
웹 페이지 특정 element 인쇄 하기 예시 QR코드 이미지를 전체화면으로 출력하는 예시 const html = document.querySelector('html'); //qr code가 담겨 있는 img dom element 객체로 resource 가져오기 const printContents = document.querySelector(`.qr-code-container`).childNodes[0]; const imgResource = printContents.toDataURL(); //출력할 img dom을 담을 container div 생성 const printDivContainer = document.createElement('div'); printDivContainer.style = ` width:100%; height: 100%; di.. 공감수 0 댓글수 0 2020. 7. 3.
NavigationDuplicated 에러 vue에서 this.$router.push를 이용해 페이지를 이용할 때 현재 페이지 URL과 동일한 경로로 push하는 경우에는 이와 같은 에러가 발생한다. 현재 페이지와 같은 페이지인지 체크하는 로직을 추가해서 개선이 가능하다. 공감수 0 댓글수 0 2020. 6. 18.
three.js에서 shadow 표현 시 알아둘 점 1. WebGLReneder에서 shadow 사용을 활성화 해줘야 한다. RENDERER.shadowMap.enabled = true; 2. light object와 shadow를 유발시키는 object에 castShadow를 활성화 해줘야 한다. OBJECT.castShadow = true 3. shadow가 표현될 물체에 receiveShadow를 활성화 해줘야 한다. OBJECT.receiveShadow = true; ** 참고 ** - 여러 Children Mesh를 보유한 Mesh의 경우 Parent Mesh에 castShadow나 receiveShadow를 활성화한다고 해서 표현되지 않는다. 하위 Mesh에서 활성화 해줘야 표현이 정상적으로 된다. Object3D의 method인 travers.. 공감수 0 댓글수 0 2020. 6. 16.
js event listener 내에서 많이 사용하는 객체 정리 & 이벤트 위임 이벤트 정의 함수 내에서 자주 쓰게되는 객체들 간단히 정리해본다. ELEMENT.addEventListener('click', function (e){ console.log(this); //event listener를 추가하는 dom element 객체 console.log(e.currentTarget);//위의 this와 동일 console.log(e.target);//클릭한 dom element 객체 console.log(this.parentNode);//클릭한 dom element의 부모 객체 }) 이어서 많이 사용하는 addEventListener의 이벤트 위임에 대해 정리한다. - addEventListener를 dom에 많이 부여할 수록 메모리를 차지하므로 페이지 성능에 영향을 줄 수 있다. .. 공감수 2 댓글수 0 2020. 6. 15.
window 혹은 특정 element에서 scroll top 아래의 예시와 같이 사용할 수 있다. window.scrollTop=0; this.$refs['something'].$el.scrollTop=0; document.getElementId('something').scrollTop=0; 공감수 0 댓글수 0 2020. 6. 3.
POI (Point Of Interest) 전자지도 위에 지리정보와 함께 좌표 등으로 표시되는 주요 시설물, 역, 공항, 터미널, 호텔, 백화점 등을 표현하는 데이터 공감수 0 댓글수 0 2020. 6. 1.
QR코드에 대해 정리 1. 역사 94년 덴소 웨이브라는 도요타 자동차의 자회사에서 부품 구별하기 위해 개발하면서 시작됨. 기존 바코드의 가로방향 1차원적 표현 방식에서 정보를 더 담기 위해 2차원 코드를 개발. 빠르게 응답하고, 더 많은 정보를 담기 위해 탄생! QR은 Quick Response에서 유래했다능..! - 기존 바코드 : 20자내외 숫자 정보 저장 - QR 코드 : 숫자 최대 7089자, 문자 4296자 저장 2. QR코드의 구조 QR코드는 3가지 패턴으로 구성된다. 1. 위치 찾기 패턴 (Position) : 세 모서리에 크게 자리잡고 있는 사각형 : QR코드를 인식할 때 어느 방향에서도 위치를 빠르고, 정확하게 파악하기 위한 기준 역할 2. 얼라인먼트 패턴 (Alignment) : QR코드 인식시의 각도로 인.. 공감수 0 댓글수 0 2020. 5. 31.
js로 html의 class를 추가/제거/토글하기 안녕 위 p tag의 class에 b라는 class을 추가, 제거, 토글 하기 const aDom = document.querySelector('.a'); aDom.classList.add('b'); // => 안녕 //!!아래와 같이하면 아예 대체되버린다.!! aDom.className='b'; // => 안녕 //제거 aDom.classList.remove('b'); //토글 : 있으면 제거, 없으면 추가한다. aDom.classList.toggle('b'); 공감수 0 댓글수 0 2020. 5. 20.
AWS EC2의 키페어 추가, 삭제하는 방법 EC2에 SSH로 접근제어를 위해 키페어(private-public)를 사용하는데, 하나의 키페어를 여러 개발자가 공유해서 쓸 수도 있겠지만, 필요에 따라 개발자별로 별도로 키페어를 관리하는 상황이 있을 수 있다. AWS EC2 웹 콘솔에서 '키페어'를 클릭해서 들어가면 생성했던 키페어 목록을 볼 수 있다. 처음 EC2를 생성했을 떄 키페어를 기본으로 생성하고 적용되게 되어 있다. 하지만 한번 EC2가 생성된 후의 키페어 추가(삭제)는 키페어를 발급한 후 직접 EC2에서 추가(삭제) 해주어야한다. 웹 콘솔에서 키페어 생성을 한 후 PEM, PPK 중 필요한 파일을 선택한 후 생성한다. 이 private key 파일은 처음 키페어를 생성했을 때만 얻을 수 있다. (윈도우 환경에서 putty를 이용한 접속을.. 공감수 1 댓글수 0 2020. 4. 24.
[이슈] three.js 모듈 webpack환경에서 import해서 사용할 때 알아둘 것 three.js 라이브러리를 npm으로 설치하고 webpack 환경에서 사용할 때 알아두어야 할 사항이다. three.js example에서 사용하는 control이나 여러가지 loader들을 import 해서 사용할 때 three/examples/js/ 디렉토리 이하에 있는 것을 import 해서 사용하면 " THREE is not defined " 에러가 발생한다. 해결방법! 결론부터 얘기하자면, three/examples/js 디렉토리에 있는 것이 아니라 three/examples/jsm에 있는 모듈들을 사용 해야한다. (npm에 별도로 import해서 쓸 수 있는 three-obj-mtl-loader 같은 모듈들이 있긴 하지만, 모든 모듈들이 있는 것은 아니기 땜에 근본적 해결책을 알아야 한다.).. 공감수 1 댓글수 1 2020. 4. 16.
PWA(Progressive Web App) PWA란? Vue나 React Cli로 프로젝트를 만들면서 PWA대헤 아마 한두번씩 마주쳤을 것이다. PWA란 무엇일까? 간단하게 말해서는 웹과 네이트 앱의 이점들을 가지도록 개발된 짬뽕 웹 앱이라고 보면된다. 그럼 Web App과 Native App의 장점들을 한번 가볍게 짚어보자. - Web App : App을 설치할 필요 없이 웹페이지에 접속하면 된다. 링크로 공유가 용의하다. - Native App : 운영체제와 잘 통합되므로 성능이나 UX면에서 더 자연스럽고 부드럽다. 오프라인에서도 동작한다. 한번 설치 후에는 홈 아이콘으로 쉽게 접근 가능하다. 위에 나열한 두 방싱의 장점들을 다 포섭하고자 PWA가 나왔다고 보면된다. 위의 장점들 말고도 더 있을 수 있다. (PUSH 알림 기능 등) PWA는 .. 공감수 0 댓글수 0 2020. 4. 12.
스코프, 호이스팅, 클로저 정리하기 1. 스코프란? - scope란 사전적 의미로 '범위'라는 의미를 지닌다. - 자바스크립트에서 변수에 접근할 수 있는 범위 혹은 변수가 영향을 끼칠 수 있는 범위라고 생각하면 된다. - 크게 나누면 전역, 지역 스코프로 나눌 수 있지만 스코프 레벨을 좀더 자세하게 나누자면, 함수 레벨 스코프, 블록 레벨 스코프(ES6), 렉시컬 스코프로 나눌 수 있다. 1-1. 함수레벨 스코프 - 자바스크립트에서 var 키워드로 선언된 변수, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 지닌다. - 변수는 함수 내부 전체에서(만) 유효한 식별자가 된다. 1-2. 블록 레벨 스코프 - ES6의 let, const 키워드는 블록레벨 스코프 변수를 만들어 준다. - 여기서 블록이란 if/else, while/for 내.. 공감수 2 댓글수 0 2020. 4. 4.
웹페이지 Viewport와 Element의 절대/상대위치 구하기 Web 3D Viewer에서 raycast를 사용하기 위해 마우스의 좌표값을 이용하게 된다. 이때 3D rendering이 되는 canvas의 절대 좌표가 고려되어야 한다. 고려되지 않는다면, 실제 마우스의 위치와 3D viewer 상에서 교차하는 위치가 오차가 발생할 수 있다. (canvas의 절대 좌표 위치가 x:0, y:0이 아니라면) 초기에는 이부분 처리를 viewer의 margin 값을 기준으로 tolerance 값을 하드코딩으로 부여했는데, 당연히 이렇게 부여하는건 부적절하다. 이참에 정리! 1. Viewport : 전체 웹페이지 중 브라우저 상에서 사용자가 보고 있는 화면 부분 2. 절대위치 : 전체 웹페이지 기준으로 해당 Element의 절대적인 위치 3. 상대위치 : 특정 Element .. 공감수 1 댓글수 0 2020. 4. 4.
javascript reduce 원리 정리 이전에 Array method에 정리한 적이 있지만 reduce에 원리에 대해 정리해본다. reduce는 iterator에 항목들의 값을 하나로 축약 혹은 모아서 어떤 하나의 값으로 도출할 때 사용하는 메서드이다. 정의해보자면 다음과 같다. // f: 항목마다 실행하여 합칠 값을 반환하는 함수 // acc: (초기값이래로 계속 축적되거나) 반환될 최종값 // iter: iterator 배열 const reduce = (f, acc, iter) => { //acc를 따로 지정하지 않은 경우 두번째 파라미터가 iterator일 것이다. //iter를 iterator로 정의해주고, acc를 iterator원소 첫번째로 초기화 한다. if(!iter) { iter = acc[Symbol.iterator](); .. 공감수 0 댓글수 0 2020. 3. 31.
OKR (Objectives and Key Results) OKR은 Objectives and Key Results의 약자로 의역하자면 "목표 및 핵심 결과 지표" 이다. 조직적 차원에서 목표를 설정하고, 그 결과를 추적할 수 있도록 돕는 목표 설정 프레임 워크이다. OKR은 구글의 핵심 목표설정 프레임워크 였고, 그를 이어 링크드인, 트위터 등 많은 회사들이 뒤따라 도입해왔다. 이 프레임워크에서 '목표'는 성과를 측정할 수 있는 방법이 존재하는 것이어야 한다. 주로 3~5가지의 핵심 목표와, 그밑에 각각 3~5가지의 주요 측정 가능한 결과로 구성된다. 1. OKR 목표 -야심차고, 장기적으로 내다볼 수 있는 목표 -목표 달성 진척사항을 추적/평가할 때 단위를 수치화 할 수 있는 형태로 설정 2. 주요 결과 - 단순히 Todo List가 아닌, 비즈니스 우선순위.. 공감수 0 댓글수 0 2020. 3. 31.
HTTPS & HTTP의 패킷 평문 노출 여부 Wireshark로 확인 - 각 HTTPS와 HTTP의 전송의 경우 내부 데이터를 평문으로 확인이 가능한지를 Wireshark로 패킷 확인 해보자 - 보라색 부분이 HTTPS 통신 패킷, 연두색 부분이 HTTP 통신 패킷 - 각 통신에서 Application Data가 들어 있는 패킷을 열어보았다. (빨간 밑줄 친 패킷) - 위가 HTTPS 패킷(198163), 아래가 HTTP 패킷(198787) - 아래 비교 사진에서 볼 수 있듯이 HTTPS 패킷에서는 전송 내용을 평문으로 확인할 수 없도록 암호화되어 있는 반면에, HTTP 통신 패킷에서는 값이 평문으로 그대로 노출되는 것을 확인할 수 있다. - 이에서 확인할 수 있듯이, HTTP 전송의 경우 데이터 자체를 암호화 하지 않으면 패킷 도청으로 데이터 유출이 가능하다. 알아야할 .. 공감수 6 댓글수 2 2020. 3. 30.
iterator/iterable -2 : map 함수에 관하여 *iterator/iterable 프로토콜을 이용한 *map 함수를 직접 구현 해보고 원리를 파악해보자 // 샘플 배열 데이터 students = [ {name: "김구라", address: "등촌동"}, {name: "윤종신", address: "화곡동"}, {name: "김국진", address: "목동"} ]; // students 배열에서 각 학생의 이름을 조회하는 코드를 작성해보자 let names = []; for (const student of students){ names.push(student.name); } console.log(names);//["김구라", "윤종신", "김국진"]을 출력 // 위의 코드를 추상화해서 재사용성을 높인 map 함수를 구현해보자 // fn : 위에서 정의했.. 공감수 0 댓글수 0 2020. 3. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.