전체 글 16

[개념깨기] collection in javascript

Collection 프로그래밍에서 Collection은 데이터 요소를 저장하는 자료구조를 말합니다. 각각의 프로그래밍 언어에는 여러가지 data Collection들이 존재합니다. 일반적으로 많이 사용되는 Collection은 Map, Set, List가 있습니다. 언어마다 사용되는 Collection은 모두 다릅니다. 저는 JavaScript에서 사용하는 Collection에 대해 알아보겟습니다 JavaScript에는 크게 2가지의 Collection이 존재합니다. 인덱스 기반 컬렉션(Indexed Collection) 인덱스 값에 의해 정렬이 되는 data collection입니다. 종류로는 Arrays, Typed Array가 있습니다. 키 기반 컬렉션(Keyed Collection) 키를 기준으로..

[개념깨기] URI/URL

URI와 URL의 개념이 모호해서 다시 한번 정리해봤습니다. URI(Uniform Resource Identifier) 논리/물리적 리소스 식별 고유 문자열 시퀸스 특정 리소스의 위치 뿐만 아니라 식별하는 통합 자원 식별자 URI의 하위 개념으로 URL, URN이 있습니다. URL(Uniform Resource Locator) 네트워크 상에서 리소스가 실제로 존재하는 위치, 통합 자원 지시자 해당 주소에 접속하려면 URL에 맞는 프로토콜을 알아야 합니다. URN(Uniform Reousrce Name) 리소스에 이름을 부여하는 것, 통합 자원 이름 URN은 영속적이고, 위치에 독립적인 자원을 위한 지시자로 사용하기 위해 1997년 RFC2141문서에서 정의되었습니다. 리소스가 이름에 매핑되어있어야 하기에..

프로그래밍/WEB 2023.07.03

[HTTP] 413 - Payload Too Large

웹서버를 개발하면 가끔 아래와 같은 에러가 클라이언트에서 발생할 때가 있다. Failed to load resource: the server responded with a status of 413 (Payload Too Large) createError.js:16 Uncaught (in promise) Error: Request failed with status code 413 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:62) 서버를 호출할때 보내는 데이터의 양이 너무 커서 발생하는 에러이다. express서버에서의 해결 방안은 서버를 load할 때 옵션값을 할당하는것 으로 ..

프로그래밍/WEB 2023.05.09

[JS] callback함수 결과값 return

오전에 카카오맵을 재미삼아 건드려보다가 처음 보는 패턴이 필요하였다. 카카오맵엔 위도,경도값으로 주소를 조회하는 api를 제공해주는데 일반적인 함수처럼 return이 오는 것이 아니라 callback함수에 return 되는 형태이다. geocoder.coord2Address(lat, lng, (result:any, status:any) => { ... }) 대충 이런 형태인데 3번째 인자에 function이 아닌 Promise등 다른 type의 argument가 들어가면 function이 아니라는 이유로 에러가 발생한다. 그래서 새로운 Promise 객체를 만든 뒤 callback함수에서 resolve를 호출하고 해당 Promise객체를 await하는 형태로 변경하였다. 전반적인 코드는 아래와 같다. l..

[React, Nginx] nginx에 react 배포시 Not Found

nginx에 react 빌드 파일을 배포하면 html파일은 찾이만 js, css등 html에서 사용하는 staticfile 호출시 404가 뜨는 경우가 있다. Failed to load resource: the server responded with a status of 404 (Not Found) react를 build할 때 homepage 옵션이 적용되지 않아 발생한 문제로 package.json에 { ... "homepage": "http://rikroy.tistory.com/route/", ... } 위와 같이 homepage 옵션으로 pubilc url을 입력해주면 된다.

프로그래밍/WEB 2023.05.08

[JS] jquery로 iframe 내부 tag접근

우선 iframe 선언은 아래와 같이 되어있습니다. dataUrl은 iframe에 보여줄 url을 지정하면 됩니다. v-bind:src 문법은 vue 에서 사용하기에 일반적인 js에서는 src="" 로 사용하시면 됩니다 iframe에 접근할땐 $('#iframeView') 위와 같이 접근하면 iframeView를 id로 갖고있는 tag들이 배열로 return 되게됩니다. 그러므로 하나만 있다면 아래와 같은 형태로 접근하면 됩니다. $('#iframeView')[0] 이제 iframe을 가져왔으니 iframe 내부에 있는 tag들에 접근하겟습니다 $('#iframeView')[0].contentDocument.getElementById('elementId') $('#iframeview').contents(..

[ubuntu 20.4] media change로 인한 모듈 설치 실패

npm을 설치하려고 sudo apt-get install npm 을 입력했을때 Media change: please insert the disc labeled 'Ubuntu 20.04.1 LTS _Focal Fossa_ - Release amd64 (20200731)' in the drive '/cdrom/' and press [Enter] 위에 해당하는 메시지가 지속적으로 나와 정상적인 설치가 불가능했다. 그래서 sudo sed -i '/cdrom/d' /etc/apt/sources.list 를 입력하여 sources.list에서 '/cdrom/d'에 대한 코드를 제거했으며 다시 npm을 인스톨 했을땐 정상적으로 진행이 됫다.

OS/ubuntu 2023.05.08