티스토리

Dev Blog

검색하기

블로그 홈

Dev Blog

nomadkim880901.tistory.com/m

ALL ABOUT ENGINEERING, CAREER and BETTER LIFE 🌳

구독자: 1

방명록 방문하기

주요 글 목록

Command Pattern 특정 작업을 실행하는 객체와메서드(아래의 placeOrder 등)를 호출하는 객체를 분리할 수 있습니다.class OrderManager() { constructor() { this.orders = [] } placeOrder(order, id) { this.orders.push(id) return `You have successfully ordered ${order} (${id})`; } trackOrder(id) { return `Your order ${id} will arrive in 20 minutes.` } cancelOrder(id) { this.orders = this.orders.filter(order => order.id !== id) retu.. 공감수 3 댓글수 0 2024. 11. 9.
peerDependencies 와 overrides 의 차이점(package management) 바로 요약peerDependencies - 다른 패키지들의 의존 관계도 만족되는 경우에만 peerDependencies 의 설정된 버전이 사용된다.overrides - 의존 관계와 상관없이 overrides 를 사용하면 항상 설정된 버전이 사용된다.패키지 관리에서 peerDependencies와 overrides의 차이는 버전 처리 및 강제 적용 방식에 관한 것입니다.아래는 그 차이에 대한 설명입니다:peerDependencies• 목적: 주로 패키지가 호스트 프로젝트(또는 다른 라이브러리)가 특정 버전의 의존성을 제공할 것으로 기대할 때 사용됩니다.• 버전 유연성: peerDependencies는 의존성을 자체적으로 설치하지 않습니다. 대신, 호스트 애플리케이션이 사용해야 하는 요구된 버전 범위를 명시.. 공감수 0 댓글수 0 2024. 11. 9.
테스트코드 작성 가이드 목차왜 테스트해야 하는가무엇을 테스트해야 하는가좋은 테스트란규모별 테스트 전략테스트코드 Q&A 그리고 팁테스트코드 작성 스타일 가이드1. 왜 테스트해야 하는가개발자는 이미 개발 과정에서 수많은 테스트를 진행하고 있으며,엄밀히 말해서 개발자가 소스 코드를 입력/수정하고 저장한 다음 진행하는 일은대부분 테스트와 관련이 있다고 볼 수 있습니다.문제는 이러한 테스트가 대부분 반복적인 작업이라는 것입니다. 따라서 반복된 테스트 작업을 코드로 작성해서 자동화를 하게 되면테스트에 대한 비용이 줄어들고, 테스트가 누락되거나 잘못 검증하는 등의 실수도 방지할 수 있습니다.또한 코드 수정에 대한 두려움이 없어져 적극적으로 리팩토링 등의 코드 개선을 할 수 있게 되고,이는 곧 코드의 품질의 향상으로 이어지게 됩니다.Ref.. 공감수 7 댓글수 0 2024. 11. 3.
철학의이해_방통대_기말과제물 플라톤의 향연 내용요약 플라톤의 향연은 사랑(에로스) 에 대한 아가톤, 소크라테스 등의 참석자들의 찬양과 알키비아데스의 소크라테스를 향한 즉흥적인 찬양에 대한 이야기이다. 이 이야기는 아폴로도로스가 그 향연에 참석했던 소크라테스의 제자인 아리스토데모스로부터 전해들은 이야기를 동료들에게 말하면서 시작된다. 최초 화자인 아리스토데모스가 얘기했던 순서 그리고 방식에 따라 재현되는데, 마치 액자 속 안 액자 속에 들어가며 겹겹의 이야기들을 하나씩 벗겨 핵심을 찾아가는 느낌을 준다. 아리스토데모스는 평소와 다른 차림새로 멀끔한 모습을 한 소크라테스를 만나서 엉겁결에 초대도 안 받은 상태에서 아가톤의 향연장에 동행하게 되었다. 그는 사색에 빠져 뒤처진 소크라테스보다 앞서 향연장에 도착했는데, 초대를 받지 못했던 상.. 공감수 0 댓글수 0 2023. 12. 23.
Day5_코딩 기초 트레이닝_프로그래머스 코드 처리하기 description: https://school.programmers.co.kr/learn/courses/30/lessons/181932 My answer was function solution(code) { let answer = ''; let mode = 0; for(let idx = 0; idx < code.length; idx++) { const firstCondition = !mode && (idx % 2 === 0) const secondCondition = mode && (idx % 2 === 1) if(code[idx] !== '1' && (firstCondition || secondCondition)) answer += code[idx]; mode = code[idx] =.. 공감수 0 댓글수 0 2023. 7. 16.
Day4_코딩 기초 트레이닝_프로그래머스 홀짝에 따라 다른 값 반환하기 Description 양의 정수 n이 매개변수로 주어질 때, n이 홀수라면 n 이하의 홀수인 모든 양의 정수의 합을 return 하고 n이 짝수라면 n 이하의 짝수인 모든 양의 정수의 제곱의 합을 return 하는 solution 함수를 작성해 주세요. My answer was function solution(n) { const isOdd = !!(n % 2); let result = 0; if(isOdd) { for (let i = 1; i < n+1; i = i + 2) { result += i } } else { for (let i = 2; i < n+1; i = i + 2) { result += Math.pow(i, 2) } } return result; } Best.. 공감수 0 댓글수 0 2023. 7. 15.
Day3_코딩 기초 트레이닝_프로그래머스 문자열 섞기 Description 길이가 같은 두 문자열 str1과 str2가 주어집니다. 두 문자열의 각 문자가 앞에서부터 서로 번갈아가면서 한 번씩 등장하는 문자열을 만들어 return 하는 solution 함수를 완성해 주세요. 입출력 예 str1. str2. result "aaaaa" "bbbbb" "ababababab" My answer was function solution(str1, str2) { var answer = ''; for(let i = 0; i < str1.length; i++) { answer += str1[i] + str2[i] } return answer; } Best answer was function solution(str1, str2) { return [...str1].. 공감수 0 댓글수 0 2023. 7. 15.
디자인 패턴과 프로그래밍 패러다임(정리중) Section 1 디자인 패턴 Section 2 프로그래밍 패러다임 Section 1 1.1 디자인 패턴 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것 1.1.1 싱글톤 패턴 싱글톤 패턴(singleton pattern) 은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴. 단 하나의 인스턴스를 만들어 이를 공유하는 방식으로, 보통 데이터베이스 연결 모듈에 많이 사용된다. 따라서, 인스턴스를 생성할 때 드는 비용이 줄어드는 장점이 있으나, 의존성이 높아진다는 단점이 있다. 자바스크립트 예제 class Singleton { constructor() { if (!Singleton.instance) { .. 공감수 0 댓글수 0 2023. 7. 3.
테스트코드를 짜야 하는 이유 테스트 코드를 왜 그리고 어떻게 작성해야 할까?_인프랩 테스트 코드는 왜 만들까_요즘IT 프론트엔드에서 의미있는 테스트 코드 작성하기 공감수 0 댓글수 0 2023. 4. 16.
Section9: Testing & the DOM(Frontend Javascript Testing) Accessing The DOM from Inside Tests DOM vs NodeJS Environment Accessing the DOM Specialized Libraries Should set testing environment in package.json or right in the single file as jsdom or happy-dom for emulation. Set up testing to access html page content rendered at document of virtual window. fs and path are still available because all the Node APIs available inside the test files. the Dom is.. 공감수 0 댓글수 0 2023. 4. 5.
Section8: More on Mocking & Diving Deeper Mocking Global Objects & Functions Mocking Frontend Features Examples Case1. fetch is a globally available function which is not imported. Thus, cannot use vi.mock to replace a module in this case. SubGlobal method allows us to replace globally available objects and functions with implementations. Then, Production codes are not effected! sendDataRequest function export async function sendDataReq.. 공감수 1 댓글수 0 2023. 4. 5.
Section7: Mocking & Spies: Dealing with Side Effects Dealing with Side Effects Dealing with Side Effects & External Dependencies Understanding Spies & Mocks Examples Why need? In some cases, test interacts with upper system such as hard drive, database outside of program and code. Means that there could be side effects. e.g. important files or data could be deleted or edited accidentally. spy fn creates an empty function that keeps track of any fu.. 공감수 0 댓글수 0 2023. 4. 5.
Section6: Advanced Testing Concepts More Key Testing Library APIs toBe() vs toEqual() Testing Asynchronous Code Using Setup & Cleanup Hooks toBe vs toEqual() Use "toEqual" method for deep-comparison on values not address of the object. In contrary, toBe method does shallow comparison. Testing Asynchronous Code test code here case1. callback use DoneCallback Vitest and Jest will pick up errors and consider the test to have failed a.. 공감수 0 댓글수 0 2023. 4. 5.
Section 5: Integration Tests Combining Units Testing Units With Dependencies Balancing Unit & Integration Tests Why do? Accidentally, If an order of codes is wrong and input has wrong value, although all unit tests passed, the function including the unit functions doesn’t work as intended. Solution: Integration Test 공감수 0 댓글수 0 2023. 4. 5.
Section 4: Writing Good Tests What to & Not to Test What should & shouldn’t be tested Good tests are short & concise key points What should & shouldn’t be tested Only test your code don't test third-party code don’t test what you cannot change Example, fetch() API Don't test if it works as intended Don't test your server-side code implicitly via your client-side code Write separate tests for your backend code instead Do Test.. 공감수 0 댓글수 0 2023. 4. 5.
Section 3: Testing Basics Understanding Unit Testing Fundamentals Creating Unit Tests AAA - Arrange, Act, Asset AAA - Arrange, Act, Assert A - Arrange, Define the testing environment & values A - Act, Run the actual code / function that should be tested A - Assert, Evaluate the produced value / result and compare it to the expected value / result Writing Good Tests Is An Iterative Process! Test examples(basic-testing-fro.. 공감수 0 댓글수 0 2023. 3. 28.
Section 2: Setup & Testing Software Adjusting The Development Environment Required Tools An Example setup Altenative 공감수 0 댓글수 0 2023. 3. 28.
Info to share! PNG vs. SVG https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html designus https://designus.io/ Web Design https://www.smashingmagazine.com/category/web-design/ 아맞다 디자인 참고 https://www.behance.net/gallery/161161601/-Ahmatda-Checklist-for-Your-Belongings?tracking_source=search_projects%7Cmobile+app+ui%2Fux 슈퍼앱 https://brunch.co.kr/@glmapsi85/115 효율적인 안내문구 - 오류 문구 https.. 공감수 0 댓글수 0 2023. 3. 26.
Awesome Blogs 거북이같은 개발자의 집필 공간 Evans Library https://evan-moon.github.io/ 공감수 0 댓글수 0 2023. 3. 26.
Whatever for Web Development! CRA(create-react-app) + TypeScript 환경 빌드 퍼포먼스 최적화 https://hyperconnect.github.io/2020/12/14/typescript-build-optimization.html TOAST UI FE Guide https://ui.toast.com/fe-guide/ko 카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/ 공감수 0 댓글수 0 2023. 3. 26.
4장 이미지 갤러리 최적화 Repository 학습할 최적화 기법 이미지 지연 로딩 이미지 지연 로딩 라이브러리 적용 레이아웃 이동 피하기 화면상의 요소 변화로 레아이웃이 밀리는 현상 리덕스 렌더링 최적화 병목 코드 최적화 메모이제이션 적용 이미지 지연 로딩 react-lazyload라는 라이브러리를 이용하여 빠르게 이미지 지연 로딩을 적용해 볼 것입니다. 일반 컴포넌트도 이 안에 넣어 지연 로드할 수 있다는 것입니다. 이미지가 화면에 들어오는 시점보다 조금 더 미리 이미지를 불러와 화면에 들어온 시점에는 이미지가 준비되어 있도록 해야 합니다. 다행히 react-lazyload 라이브러리에서는 그렇게 할 수 있는 옵션을 제공해 주는데, 바로 offset이라는 옵션입니다. 이 옵션에는 얼마나 미리 이미지를 로드할지 픽셀 값으로 넣어.. 공감수 0 댓글수 0 2023. 3. 24.
3장 홈페이지 최적화 Repository 학습할 최적화 기법 이미지 지연 로딩 이미지 사이즈 최적화 서버에 저장되어 있는 정적 이미지 최적화 폰트 최적화 커스텀 폰트 적용 최적화 캐시 최적화 불필요한 CSS 제거 사용하지 않는 CSS 코드 제거 이미지 지연 로딩 네트워크를 확인할 때는 명확한 흐름을 파악할 수 있도록 네트워크에 throttling을 적용합니다. banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면, 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되므로 사용자 경험에 좋지 않을 겁니다. 동영상의 다운로드를 방해하는, 당장 사용되지 않는 이미지를 나중에 다운로드되도록 하여 동영상이 먼저 다운로드되게 하는 것입니다. 즉, 이미지를 지연 로드하는 것이죠... 공감수 1 댓글수 0 2023. 3. 20.
2장 올림픽 통계 서비스 최적화 Repository 학습할 최적화 기법 CSS 애니메이션 최적화 컴포넌트 지연 로딩 단일 컴포넌트 분할 컴포넌트 사전 로딩 이미지 사전 로딩 애니메이션 최적화 문제의 애니메이션 찾기 설문 항목을 클릭하면 해당 응답에 대해 필터링되고 막대 그래프의 배경 색과 막대의 가로 길이가 변합니다. 그런데 이 애니메이션을 계속 보다 보면 약간 이상하게 느껴집니다. 막대가 늘어날 때 부드럽게 늘어나지 않고 어딘가 살짝 끊기는 듯한 느낌이 있습니다. 이런 끊김 현상을 쟁크(jank) 라고 합니다. 느끼지 못한다면, 개발자 도구를 열고 Performance 패널의 CPU 설정을 6x slowdown으로 설정하면 애니메이션이 끊기는 현상을 더 잘 확인할 수 있습니다. 애니메이션의 원리 일반적으로 사용하는 디스플레이의 주사율.. 공감수 0 댓글수 0 2023. 3. 20.
비전공이지만 개발자로 먹고삽니다_반병현x이효석 개발자는 도대체 무슨 일을 하는 사람인가요? 개발자는 여러분이 사용하는 프로그램들을 설계하고, 설계도를 실제 작동하는 제품으로 구현해내는 사람들입니다. 컴퓨터로 문제를 해결하기 위한 논리적인 해법을 제시하고, 이를 설계하고 실제로 시험해보기도 합니다. 프로그래밍 언어를 통해 사람과 기계가 소통할 수 있게 해주는 통역사이자, 뜻대로 컴퓨터를 움직일 수 있게 하는 설계자이기도 하고, 이 전체 과정을 조율하는 관리자이기도 합니다. 개발자의 특성 비슷한 맥락에서 성취감에 자주 노출될수록 개발자의 퍼포먼스가 좋아지는 편입니다. 만약 개발자 동료와 함께 일해야 하는 상황이라면 프로젝트의 목표를 잘게 쪼개어 하나씩 각개격파해 나가는 형태로 협업하면 좋은 성과가 나올 것입니다. 개발자는 항상 공부해야만 살아남을 수 있.. 공감수 0 댓글수 2 2023. 3. 12.
49. Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저_evergreen browser 1의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다. ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6 모듈(ESM) 은 대부분의 모던 브라우저(Chrome 61, FF 60, SF 10.1, Edge 16 이상)에서 사용할 수 있다. 하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다. IE를 포함한 구형 .. 공감수 0 댓글수 0 2023. 2. 25.
48. 모듈 48.1 모듈의 일반적 의미 모듈_module 이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공개_export 한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수.. 공감수 0 댓글수 0 2023. 2. 25.
47. 에러 처리 47.1 에러 처리의 필요성 에러_error가 발생하지 않는 코드를 작성하는 것은 불가능하다. 따라서 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. 직접적으로 에러를 발생하지는 않는 예외_exception 적인 상황이 발생할 수도 있다. 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 가능성이 크다. 47.2 try..catch...finally 문 예외적인 상황이 발생하면 첫번째, 반환하는 값(null 또는 -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법과 두번째, 에러.. 공감수 0 댓글수 0 2023. 2. 25.
46. 제너레이터와 async/await 46.1 제너레이터란? ES6에서 도입된 제너레이터_generator는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터와 일반 함수의 차이는 다음과 같다. 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 46.2 제너레이터 함수의 정의 제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 표현식을 포함한다. 이것을 제외하면 일반 함수를 정의하는 방법과 같다. 애스터리스크(*)의 위치는 function 키워드와 함수 이름 사이라면 어디든지 상관없다. 46.3 제너레이터 .. 공감수 1 댓글수 0 2023. 2. 25.
45. 프로미스 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스_Promise 를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기.. 공감수 0 댓글수 2 2023. 2. 25.
44. REST API REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API 의 구성 44.2 REST API 설계 원칙 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것 이 RESTful API를 설계하는 중심 규칙이다. -알라딘 eBook (이웅모 지음) 중에서 공감수 0 댓글수 0 2023. 2. 25.

문의안내

티스토리
로그인
고객센터

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