전체 글 219

스프레드 연산자 / Distructuring Assignment

Symbol은 primitive type이라 new로 만들면 안된다. 앞에가 대문자인 이유는 나중에 추가되어서 레거시에 symbol키워드를 많이 쓸까봐. ES는 그 해거를 전년에 미리 발표한다 (그래야 각 브라우저들이 대처해서 만들수 있으니까) Symbol은 유니크한 값을 나타낸다. 심볼의 역할은 enum과 iterable 두가지를 가지고있다. enum은 값은 의미없고 구분만 필요할때 사용한다. ECMA에서는 Global Symbol Registry를 사용하도록 권장하고있다. Symbol.for('A') 이렇게 쓰면 레지스트리에 A라는 값으로 등록이 된다. 이터레이터는 Symbol.iterator로 만들엇다. (중요) obj = { [Symbol.iterator](){ return {next(){ ret..

이미지 리소스 리퀘스트를 줄일 수 있는 방법

S3에 이미지를 업로드하게되면 이미지가 많은 페이지를 로딩할경우 S3에 지나치게 많은 리퀘스트를 보내게 된다는점이 고민이었다. 리퀘스트가 곧 서버비이기때문에... 그래서 이를 어떻게 줄일까 여러방면으로 고민을 해보았는데 두가지 키워드를 들을 수 있었다. 첫번째는 Lazy loading - 스크롤이 있는 페이지에서 사용자가 아직 보지 않은 이미지가 존재한다면(옵저버에 걸리지않은 이미지들은) 이미지를 로딩하지 않다가 옵저버에 이미지가 걸리는 순간 이미지를 가져오도록 요청하는 방식이다. 두번째는 이미지 스프라이트 여러 이미지를 하나의 이미지로 이어붙여 css를 통해 내가 원하는 부분만 보여주는 방식으로 여러장수만큼의 리퀘스트를 한번으로 줄일수 있다는 장점이 있다. - 문제: 유저가 업로드한 이미지를 스프라이트..

deep dive Array / Number /

mysql에서 계층형 답글을 할때는 셀프조인으로해서 or매핑으로 보낸다.(옛날에는 with같은것을 많이 썻음) 요즘 추세는 대대댓글은 많이 안쓰기때문에 질문에 답글정도로 depth를 잡고, 질문, 답글테이블을 따로 두는 편이다. Array.filter는 리턴을 array타입으로하지만 find는 그 값에 해당하는 타입으로 반환한다. like에서 %로 시작하면 느리고 부담이 많이 된다. 그럴때는 fulltextsearch를 써서 구현해야 한다. jsx는 바벨을 통해서 출력해야 실제로 자바스크립트코드로 인식해서 출력이 된다. ({ x } 라고 쓰면 바벨을 통하지 않는다면 그냥 문자열로서 출력된다. jsx는 바벨에 포함되어있다.) 탈퇴는 isdel이나 outdt를 이용해서 처리를 많이한다. -----------..

deep dive Array

화목은 특별한 일 없는 이상 오픈캠프 사용 가능 토요일은 종일 신청 해두셨는데(매주) 9시부터 6시까지 열 예정, 근데 좀늦게열수도있으니 9시반쯤오는게 좋을듯 토요일 오전에는 이론을 나가고 오후에는 팀프로젝트 실습을 나갈 예정이다.. 노드책은 안봐도된다, 강사님은 서브라임에 vim으로 코딩한다. 제품을 어떻게 만들것이냐 Admin , customer두개로 가는게 좋을듯 admin -> react JS customer -> next TS server -> node express JS or TS 사파리는 PWA에서 push를 못받는다 PWA는 Progressive web app이다. html로 만든것을 핸드폰으로 바탕화면에 바로가기를 만들면 앱을 설치한것처럼 된다. 제일 중요한건 push를 받을수 있다는 점..

deep dive closure / class

MDN에 정의된 클로저에 대한 정의는 "함수와 그 함수가 선언된 렉시컬 환경과의 조합이다" 라고 쓰여있다. 스코프든 콘텍스트던 도메인은 영역은 혼자서 존재할 순 없다(기준이 존재한다) 컨텍스트끼리도 서로 관계를 갖고 기준이 있다. (컨텐스트는 문맥, 맥락이 된다. 컨텍스트에서 컨텍스트를 유발하기때문) 렉시컬 스코프는 상위에서 하위로 흐르는 흐름을 의미하는데 상위스코프에서는 하위스코프를 접근할 수 없다.(문맥상 하위에서는 상위에 대해서 유추할 수 있찌만 상위에서는 하위를 유추할 수 없기 때문) 클로저를 쉽게말하면 함수가 선언된 위치와 그 함수의 상위스코프간의 콤비네이션이다. 클래스에서 static 을 쓰면 인스턴스를 생성할때 할떄 내려주지않는다 (new로 생성할땨도 내려주지 않는다) 함수든 클래스든 인스턴..

aws 프리티어 트래픽초과시 과금정책...

- CloudFront 최초 50GB까지 데이터 전송량에 대해 무료로 제공하고 초과시 10테라바이트까지는 기가바이트당 0.120달러의 비용을 지불하게 된다... 또한 기본 200만개의 http or https요청도 무료로 받게되는데 이후에는 10000개의 요청당 0.0120달러를 과금하게된다 -S3 s3같은경우 가장 많이 이용되는 get리퀘스트와 put,post등의 요청을 나눠놓았는데 겟요청의 경우 20,000번의 요청 이후에는 10000요청당 0.0035달러가 과금되고 포스트는 무료라 써있다.. (진짜??) 20,000요청은 직접 호스팅을 해보니 정말 순식간에 사용해버릴수 있는 수준이라 너무 적은것 같다 ㅜㅜ 왜 여러웹페이지에서 그렇게 많은 트래픽들이 발생하고(클릭당 트래픽이라고 해도 무방하니..) 왜..

브라우저마다 locale을 표기하는 방법이 다르다.

사이트에 접속지역별 자동 언어적용기능을 만들려 했는데 이것을 위해서 navigator.language함수를 이용했다. 그런데 특정브라우저에서만 작동하고 특정브라우저에서는 작동하지 않았다.. 이유는 엣지는 한국에서 접속시 "ko"를 , 크롬은 "ko-KR"을 반환했기 때문에다. 이 이외에도 해외국가 코드들이 브라우저마다 표기가 달라 애를 먹었었다.