전체 글 썸네일형 리스트형 백오피스 도매페이지 사용자 경험 개선 사례 백오피스의 도매매장 페이지에서 관리 중인 매장수는 대략 7000개다. 운영팀에서 주로 이 페이지에서 업무를 처리하는 만큼 "도매 매장들이 너무 늦게 뜹니다"와 같은 피드백을 받게 되었다. 네트워크 탭을 열어 확인해 본 결과 7천 개의 매장을 한 api를 통해 모두 불러오고 있었고, Timing탭을 통해 확인해 보니 최종 응답시간이 87.82ms로 측정되고 있었다. 실제로 화면에서 로딩 스피너의 대기시간이 충분히 불편함을 느낄 정도의 대기시간이라 생각했고, 개선할 필요가 있다고 판단하여 무한스크롤과 페이지네이션중 고민하고 있었다. 페이지네이션과 무한스크롤 선택에 있어서 참고한 자료는 다음과 같다. https://www.hellodigital.kr/blog/dmkt-general-pagination-vs-i.. 더보기 [책 러닝 타입스크립트] 15장. 타입 운영 과하게 사용하면 읽기 어려울 수 있으니 유념하자. 15.1 매핑된 타입 하나의 타입에서 다른 타입으로 매핑시킨다. in을 사용해 다른 타입으로부터 계산된 타입을 가져온다. type NewType = { [K in OriginalType]: NewProperty; } 유니언 타입에 존재하는 각 문자열 리터럴 키를 가진 객체를 생성하려고 할때 사용. 15.1.1 타입에서 매핑된 타입 일반적으로 매핑된 타입은 keyof 연산자를 사용해 키를 가져오는 방식으로 작동한다. interface AnimalVariants { alligator: boolean; baboon:number; cat: string; } type AnimalCounts = { [K in keyof AnimalVariants]: number; .. 더보기 [책 러닝 타입스크립트] 14장. 구문확장 14.1 클래스 매개변수 속성 클래스를 많이 사용하는 프로젝트이거나 클래스 이점을 갖는 프레임워크가 아니라면 클래스 매개변수 속성을 사용하지 않는 것이 좋다. 타입스크립트는 매개변수 속성을 선언하기 위한 단축 구문을 제공한다. 단축구문 적용전 class Engineer { readonly area: string; constructor(area: string) { this.area = area; } } new Engineer("computer").area; // string 단축구문 적용후 class Engineer { constructor(readonly area: string) { this.area = area; } } new Engineer("computer").area; // string reado.. 더보기 실용주의 프로그래머 - Topic24 죽은 프로그램은 거짓말을 하지 않는다. 때때로 우리에게 일어나는 문제를 우리가 인식하기 전에 다른 사람이 먼저 발견하는 경우가 있다. 코드도 마찬가지다. ‘그런 일은 절대 일어날 리 없어’라는 사고에 빠지기 쉽다. 모든 오류는 정보를 준다. 여러분은 오류가 발생할 리 없다고 자신을 설득 하고선 그걸 무시하기로 할 수도 있다. 반면에 실용주의 프로그래머는 만약 오류가 발생했다면 정말로 뭔가 나쁜 일이 생긴 것이라고 자신에게 이야기한다. 일단 그놈의 오류 메시지 좀 읽어라. 망치지 말고 멈춰라 가능한 한 빨리 문제를 발견하면 좀 더 일찍 시스템을 멈출 수 있으니 더 낫다. 게다가 프로그램을 멈추는 것이 할 수 있는 최선인 경우가 흔하다. 다른 대안이라곤 깨진 데이터를 중요한 데이터베이스에 기록하거나, 세탁기에 스무 번 연속으로 탈수 명령을 내리면.. 더보기 바벨 vs SWC 바벨은 무엇인가 최신버전의 자바스크립트 문법을 이전 버전의 문법으로 변환시켜주는 트랜스파일러. 자바스크립트로 작성되었다. 변환하는 과정 parser → traverser → generator parser: 자바스크립트 소스코드를 AST로 변환 traverser: AST를 바벨 설정에서 정의한 방식으로 코드를 수정 geerator: 수정된 AST를 코드로 호환되는 코드로 번역 SWC(Speedy Web Compiler)는 무엇인가 바벨과 마찬기지인 트랜스파일러. Rust로 작성되었으며 Babel보다 훨씬 더 빠르다. 이유는? 병렬처리가 가능하기 때문(+가비지 컬렉션의 효율적인 처리) 속도 비교 동기적으로 코드 변환을 실행시키는 인위적인 환경에서 비교해 봤을 때 → SWC로 ES3로의 변환을 진행했음에도 불.. 더보기 [책 러닝 타입스크립트] 13장. 타입스크립트 config 타입 스크립트는 어떤 것이든 구성 가능하며 모든 일반적인 자바스크립트 사용 패턴에 맞출 수 있다. 타입스크립트의 구성력은 다음을 통해 제공되는 100개 이상의 풍부한 구성 옵션에서부터 비롯된다. tsx에 전달된 명령줄(CLI)플래그 타입스크립트 구성 파일 TSConfig 13.1 tsc 옵션 tsc명령은 타입스크립트의 대부분 옵션을 —플래그로 사용할 수 있다. 예를들어 index.ts 파일에서 tsc를 실행할 때 index.js파일 생성을 건너 뛰려면(타입 검사만 실행) —noEmit 플래그를 전달한다. tsc index.ts --noEmit tsc —help를 실행해 일반적으로 사용하는 CLI플래그 목록을 가져올 수 있다. (전체는 tsc —all) 13.1.1 pretty 모드 tsc CLI는 색상과.. 더보기 [책 러닝 타입스크립트] 12장. IDE기능 사용 내용정리 타입스크립트의 가장 큰 장점은 언어 서비스가 자바스크립트와 타입스크립트 코드를 위한 강력한 개발 도우미 제품군을 제공한다는 것이다. 이 장에서는 가장 유용한 몇가지를 다뤄보겠다. 12.1 코드 탐색 대부분의 개발자들은 코드를 적극적으로 작성하는것 보다 코드를 읽는 데 훨씬 더 많은 시간을 보낸다. vs Code에서 제공하는 단축키와 함께 일반적으로 사용되는 탐색 옵션을 살펴보자. 12.1.1 정의 찾기 코드의 원래 위치로 다시 이동하기 Go to Definition은 요청된 이름이 원래 정의된 위치로 즉시 이동 Cmd / Ctrl+이름을 클릭하면 정의된 곳으로 이동 [Peek Definition](Option(맥) / Alt(윈도우) + F12)은 정의를 보여주는 Peek 상자를 불러옴 [Go to Ty.. 더보기 [TIL]JS스터디- 스코프,전역 변수의 문제점, let/const 키워드와 블록 레벨 스코프 1. 스코프 식별자의 유효 범위를 의미하며, 식별자를 검색할 때 사용되는 규칙을 의미한다. const a = 1; const f1 = () => { const a = 3; f2(); }; const f2 = () => { console.log(a); // ? }; f1(); 위의 실행결과로 어떤값이 출력될까? 정답은 3이 아닌 1이 출력되는데, 이유로는 자바스크립트는 함수를 어디서 호출했는지에 따라 함수의 상위 스코프가 결정되는 동적 스코프가 아닌, 정의를 어디서 했는지에따라 함수의 상위 스코프를 결정하는 렉시컬 스코프를 따르기 때문이다. 2. 전역 변수의 문제점 스코프 체인상의 종점에 위치하기 때문에 변수를 검색할 때 가장 마지막에 검색된다. 따라서 참조에 있어 지역변수에 비해 느리다. 3. let/c.. 더보기 이전 1 2 3 4 다음
