본문 바로가기

WEB64

[Type Challenge] Concat 다들 잘 지내셨나요~! 오랜만에 글을 쓰네요! TS를 사용하는데 제네릭이 너무 까불어서 도저히 참지 못하겠더라구요.. TS 챌린지를 처리해버리고 모든 오픈소스들의 제네릭을 다 이해하는것이 목표입니다.. 꾸준함이 중요한거 아시죠?! 다들 시작합시다! 문제 배열 2개를 넣었을때, 안의 원소들을 모두 합친 하나의 배열을 표현하는 타입 만들기. https://github.com/type-challenges/type-challenges/blob/main/questions/00533-easy-concat/README.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collecti.. 2023. 3. 23.
[Typescript] Axios API 함수 리턴하기, 결과값 리턴 차이를 타입의 측면에서 바라보기 Axios를 사용하다보면 API를 호출하는 함수를 통째로 리턴할지, 그 결과값을 리턴할지 고민을 모두 하셨을거라 생각합니다. 개인 프로젝트 진행 중 고민이 됐었는데요. 사람마다 다르지만 결과값을 리턴하는 케이스가 많더라구요. 왜 함수를 통째로 리턴하는건 선호되지 않을까요? 두개의 차이는 무엇이고 어떤것을 쓰는것이 나은지 알아보겠습니다. (그런 글이 없는것 같아서..ㅎ) ​ TS를 사용하고 있었기에 차이가 체감 되었습니다. export default { // Axios API 함수 리턴 fetchLectureList : () => { return axiosInstance.get(url) } // Axios API 요청의 결과값 리턴 fetchLectureList : () => { return axiosIn.. 2022. 12. 12.
[JS] 널 병합과 연산자 우선순위 이번에는 자칫하면 프로그램에 오류를 낼 수 있는 사소하지만 중요한 것에 대해서 말하고자 합니다. ​ 널 병합과, 우선순위 연산자가 뭔 연관이지? 라고 생각하실 수 있습니다. 하지만 분기문에서 결과가 뒤바뀌는 결과를 낳을 수 있는 예시를 보여드리고자 합니다. ​ 널 병합 연산자 (nullish coalescing operator) statement의 결과값이 null이나 undefined일 경우에, 뒤에 나온 값을 반환해주는 연산자입니다. ES2020에서 나왔습니다. falsy 값을 판단해서 오른쪽 피연산자를 반환하는 '||'와 구분해서 써야합니다. const arr = []; if( arr.length ?? 0 === 0 ) { console.log("참"); }else { console.log("거짓".. 2022. 10. 2.
[TS] Enum vs Object 회사의 소스코드를 보던 중에 문득 들었던 궁금증에 대해서 해결해보고자 합니다. Enum과 Object의 차이를 알아보고, 어떤것을 사용하는것이 좋은지 결론을 내보겠습니다. 네이버 블로그식 질질끌기 포스팅을 제일 싫어해서.. 빠르게 써보겠습니다. ​ 결론부터 내면 object가 as const로 type assertion을 해서 충분히 사용 가능하면 enum은 필요없다 입니다. Enum TS에서 자체적으로 구현한 열거형으로 C의 enum과 유사합니다. '자체적' 이라는 말에서 알 수 있듯, js에는 존재하지 않습니다. ​ Enum은 어떻게 트랜스파일 될까? IIFE(즉시실행함수표현) 의 형태로 변환됩니다. js의 object는 멀쩡하게 나오는것을 볼 수 있습니다. ​ Enum이 Object보다 나은 장점 .. 2022. 9. 11.
[React] Optimization, useMemo, useCallback, memo - (2) 반갑습니다 ^^ 2탄을 이어서 작성해 보겠습니다. React.memo는 컴포넌트를 넣으면 컴포넌트를 반환해주는 함수인데요. (HOC) 이것들에 대한 설명을 찾아보면, memo는 props를 비교하고 얕은 비교를 한다. 이런 설명이 전부입니다. 이렇게만 알고 가면, 이 케이스에는 렌더링이 일어날까? 이런 것들이 대한 답이 되지 않았습니다. 제가 직접 찾아보고 나니 이제는 대답을 할 수 있을것 같더라구요. memo에 props를 50개를 넣었지만, 실제로 호출시에 3개만 넘겨준다면, 그 3개만 비교하게 될 것입니다. React.memo 이 HOC는 주어진 props를 비교하지만 좀 더 자세히 비교를 합니다. 그리고 시간이 꽤나 걸릴것 같은 작업입니다. areHookEquals보다 가격이 훨씬 비싸답니다. d.. 2022. 3. 9.
[React] Optimization, useMemo, useCallback, memo - (1) 반갑습니다 ^^ 최근에는 chrome profiler 사용법을 익히고, 렌더링에 얼마나 걸리나 이런것들을 보는 재미로 지내고 있습니다. Profiler 보는법은 다음번에 포스팅을 해보도록 하겠습니다. 서론이 좀 길 수 있지만, 참고 읽어보시면 분명 도움이 될 것이라고 확신합니다. 일반적인 사람들의 오해 렌더링이 적으면 무조건 속도가 빠르다 -> React.memo 등 최적화를 위한 HOC나 hook들을 사용합니다. 하지만 이 말은 틀렸다고 생각합니다. 잘못된 케이스의 경우를 생각해보겠습니다. - deps가 어떻게 비교되어 작동되는지 모른다면, 무조건 렌더링이 되고, 비교함수도 호출 되므로 더 느려집니다. - 렌더링을 방지하려고 deps에서 비교하는 시간이 더 들 수 있습니다. 어떻게 사용해야 할까? 이미.. 2022. 3. 7.
Chrome Performance Flame chart 색이 투명한경우 (Main탭) 오랜만입니다!! 성능 확인을 위해서 Performance를 뒤적거리던 중... 집 컴퓨터에서 Performance 탭에서 Script 실행시간을 보려고 하는데.. 글쎄 투명으로 나오는게 아닙니까.. 아니.. 뭘 보라는겁니까.. 그래서 시크릿 모드에서 확인해봤는데.. flame chart가 잘 나오는 것이었습니다.. 별것도 아닌데.. 오류를 찾는데 꽤 오랜시간이 걸렸습니다. 침착하게 옵션들을 비교했어야 하는데.. 해결법부터 알려드리겠습니다. chrome setting에서 저 WEBGL-based flamechart를 꺼야합니다.. 끄시고나서, 다시 크롬을 재 실행후 측정을 해보면 아래와 같이 다시 잘 나오는것을 확인할 수 있습니다. 온갖 검색어로 검색을 했지만.. 나오지 않아서... *어떻게 문제를 해결했.. 2022. 3. 1.
[Clean Code] 13장. 동시성 13장. 동시성 동시성은 왜 필요한가? 결합(coupling)을 없애는 전략이다. 싱글스레드는 what, when이 밀접하다. 이것을 분리한다. 구조적 개선뿐만이 아닌 응답 시간(response time), 출력량(throughput)을 위해서도 필요하다. 메일 정보 수집기 한명씩만 처리하는 시스템 동시성의 미신과 오해 동시성은 성능을 높여준다 동시성은 때로 성능을 높여준다. 즉 항상 높여주는것은 아니다. 여러 스레드가 프로세서를 공유할 수 있거나, 여러 프로세서에서 동시에 처리할 독립적 계산이 많은 경우에만 성능이 높아진다. (일반적인 상황은 아님) 동시성을 구현해도 설계는 변하지 않는다(X) 싱글 스레드와, 다중 스레드는 설계가 다르다. what,when을 분리하면 시스템 구조가 크게 달라진다. 웹 .. 2022. 2. 25.
[Clean Code] 12장. 창발성 12장. 창발성 (Emergence) 단순한 규칙 4가지로 우수한 설계가 나올 수 있게 할 수 있다 단순한 설계 규칙 4가지 모든 테스트를 실행한다 결합도가 높으면 테케를 작성하기가 어렵다. 결합도를 낮추려면 DI, 인터페이스, 추상화등을 이용 테스트가 가능한 시스템을 만들면 객체지향 방법론이 지향하는 목표를 저절로 달성할 수 있다. (SOLID) 리팩토링 TC를 모두 작성헀으면 코드를 점진적으로 리팩토링 할 수있다. 변화에 두렵지 않음. 시스템이 깨질까봐 두렵지 않음. side effect가 두렵지 않음. 중복을 없앤다 중복되는 로직이나 코드를 최대한 함수나 클래스로 빼자. TEMPLATE METHOD 패턴은 고차원 중복을 제거하는데 도움을 준다. 프로그래머 의도를 표현한다 코드는 개발자의 의도를 분명.. 2022. 2. 24.
[Clean Code] 11장. 시스템 11장. 시스템 목차 도시를 세운다면? 도시는 각 분야를 관리하는 팀이 있기에 돌아갈 수 있다 깨끗한 코드를 구현하면 낮은 추상화 수준에서 관심사를 분리하기 쉬워진다 이 장에서는? 높은 추상화수준, 즉 시스템 수준에서도 깨끗함을 유지하는 방법을 보여준다 시스템 제작과 시스템 사용을 분리하라 제작(construction)과 사용(use)은 완전히 다르다. 건축물이 만들어질때의 모습과, 완성되어서 사용자가 사용할때의 모습은 완전히 다르다 소프트웨어 시스템은 (애플리케이션 객체를 제작하고 의존성을 서로 ‘연결’하는) 준비 과정 과 (준비과정 이후에 이어지는) 런타임 로직을 분리 해야한다. 런타임 로직과 준비 과정이 뒤섞여있는 예시 public Service getService() { if (service ==.. 2022. 2. 24.
728x90

티스토리툴바