티스토리

eumjo_o

검색하기

블로그 홈

eumjo_o

eumjoo.tistory.com/m

eumjo_o 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

react-query react-query https://react-query.tanstack.com/comparison https://github.com/tannerlinsley/react-query/tree/master/examples 참고 블로그 https://dev.to/g_abud/why-i-quit-redux-1knl https://kdinner.tistory.com/113 https://velog.io/@velopert/using-redux-in-2021#recoil https://velog.io/@velopert/using-redux-in-2021#api요청은-이제-react-query-swr에게-맡기자 우아한형제들 https://techblog.woowahan.com/6339/ https://www.youtu.. 공감수 2 댓글수 1 2023. 7. 31.
Unit Testing 6장 6장 단위 테스트 스타일 6.1 단위 테스트의 세 가지 스타일 출력 기반 테스트 output based testing 상태 기반 테스트 state based testing 통신 기반 테스트 communication based testing 6.1.1 출력 기반 테스트 정의 💡 출력 기반 테스트 output based testing 테스트 대상 시스템(SUT)에 입력을 넣고 생성되는 출력을 점검하는 방식 전역 상태나 내부 상태를 변경하지 않는 코드에만 적용되므로 반환 값만 검증하면 됨 이러한 테스트 스타일은 부작용이 없고, SUT 작업 결과는 호출자에게 반환하는 값 뿐 ⇒ 함수형 프로그래밍 functional programming 6.1.2 상태 기반 스타일 정의 💡 상태 기반 테스트 state based.. 공감수 0 댓글수 0 2023. 6. 30.
Unit Testing 5장 5장 목과 테스트 취약성 5.1 목과 스텁 구분 💡 목 - 데스트 대상 시스템(SUT)과 그 협력자 사이의 상호 작용을 검사할 수 있는 테스트 대역 5.1.1 테스트 대역 유형 💡 테스트 대역 - 테스트를 편리하게 하는 것이 목표인 모든 유형의 비운영용 가짜 의존성을 설명하는 포괄적인 용어 목 (목, 스파이 spy) 스텁 (스텁, 더미 dummy, 페이크 fake) 테스트 대역의 모든 변형은 목과 스텁의 두 가지 유형으로 나눌 수 있다. 목 (목, 스파이) 외부로 나가는 상호작용을 모방하고 검사하는데 도움 SUT가 상태를 변경하기 위한 의존성을 호출하는 것에 해당 SUT와 관련 의존성 간의 상호작용을 모방하고 검사 스텁 (스텁, 더미, 페이크) 내부로 들어오는 상호작용을 모방하는 데 도움 SUT가 입력 .. 공감수 0 댓글수 0 2023. 6. 30.
WebRTC 화상회의 구현 webRTC란, WebRTC 통신 구조 WebRTC Technology Media 캡쳐 기기 P2P 연결 WebRTC Protocol SDP (Session Description Protocol) ICE (Interactive Connectivity Establishment)TURN 서버 STURN 서버 TURN 서버 WebRTC 연결구조 Mesh Networking SFU (Selective Forwarding Unit) MCU (Multi-Point Control Unit) LiveKit Library 화상회의 구현 🌱 출처 1. WebRTC란 - https://webrtc.googlesource.com/src/ “WebRTC is a free and open-source project providi.. 공감수 0 댓글수 0 2023. 5. 31.
leetcode0026 - Remove Duplicates from Sorted Array / Easy / TypeScript https://leetcode.com/problems/remove-duplicates-from-sorted-array/ Time Complexity O(N) new Set(array) : O(N) array 순회 모두 : O(N) Space Complexity O(N) 중복을 제거한 숫자 배열은 최대 길이가 N이기 때문에 O(N) function removeDuplicates(nums: number[]): number { const sortedArray = [...new Set(nums)]; for(let i = 0; i < sortedArray.length; i++) { nums[i] = sortedArray[i]; }; return sortedArray.length; }; 공감수 0 댓글수 0 2023. 4. 30.
leetcode0023 - Merge k Sorted Lists / Hard / Typescript https://leetcode.com/problems/merge-k-sorted-lists/ Merge k Sorted Lists - LeetCode Can you solve this real interview question? Merge k Sorted Lists - You are given an array of k linked-lists lists, each linked-list is sorted in ascending order. Merge all the linked-lists into one sorted linked-list and return it. Example 1: Input: lis leetcode.com Time Complexity O(N log(N)) N은 node의 총 개수 모든 va.. 공감수 0 댓글수 0 2023. 4. 30.
leetcode0022 - Generate Parentheses / Medium / Typescript https://leetcode.com/problems/generate-parentheses/ Generate Parentheses - LeetCode Can you solve this real interview question? Generate Parentheses - Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. Example 1: Input: n = 3 Output: ["((()))","(()())","(())()","()(())","()()()"] Exa leetcode.com DFS 탐색 Log 0 0 1 0 ( 2 0 (( 3 0 ((( 3 1 ((() 3 .. 공감수 0 댓글수 0 2023. 4. 30.
leetcode0021 - Merge Two Sorted Lists / Easy / Typescript https://leetcode.com/problems/merge-two-sorted-lists/ Merge Two Sorted Lists - LeetCode Can you solve this real interview question? Merge Two Sorted Lists - You are given the heads of two sorted linked lists list1 and list2. Merge the two lists in a one sorted list. The list should be made by splicing together the nodes of the first two lists leetcode.com Time Complexity O(N + M) list Node 두 개의 .. 공감수 0 댓글수 0 2023. 4. 30.
leetcode0020 - Valid Parentheses / Easy / Typescript https://leetcode.com/problems/valid-parentheses/ Valid Parentheses - LeetCode Can you solve this real interview question? Valid Parentheses - Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid. An input string is valid if: 1. Open brackets must be closed by the sam leetcode.com Time Complexity O(N), Space Complexity O(N) braket.. 공감수 0 댓글수 0 2023. 4. 30.
leetcode0019 - Remove Nth Node From End of List / Medium / TypeScript https://leetcode.com/problems/remove-nth-node-from-end-of-list/ Remove Nth Node From End of List - LeetCode Can you solve this real interview question? Remove Nth Node From End of List - Given the head of a linked list, remove the nth node from the end of the list and return its head. Example 1: [https://assets.leetcode.com/uploads/2020/10/03/remove_ex1.jpg] leetcode.com /** * Definition for sin.. 공감수 0 댓글수 0 2023. 4. 30.
image 이해 (sprite image, bitmap, base64) image 이해 (sprite image, bitmap, base64) Sprite Image Sprite Image는 여러 개의 작은 이미지들을 하나의 이미지 파일로 합쳐 놓은 것이다. 이렇게 하면 이미지 파일을 한 번에 한 번만 다운로드하므로, 페이지 로딩 속도가 빨라진다. 또한, CSS background-position 속성을 사용하여 필요한 이미지만 보이게 할 수 있다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS Mapbox 공식 문서 https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/ https://docs.mapbox.c.. 공감수 0 댓글수 0 2023. 4. 27.
leetcode0017 - Letter Combinations of a Phone Number / Medium / Typescript https://leetcode.com/problems/letter-combinations-of-a-phone-number/ Letter Combinations of a Phone Number - LeetCode Can you solve this real interview question? Letter Combinations of a Phone Number - Given a string containing digits from 2-9 inclusive, return all possible letter combinations that the number could represent. Return the answer in any order. A mapping of d leetcode.com 백트래킹(Backt.. 공감수 0 댓글수 0 2023. 4. 4.
leetcode0015 - 3Sum / Medium / TypeScript https://leetcode.com/problems/3sum/ 3Sum - LeetCode Can you solve this real interview question? 3Sum - Given an integer array nums, return all the triplets [nums[i], nums[j], nums[k]] such that i != j, i != k, and j != k, and nums[i] + nums[j] + nums[k] == 0. Notice that the solution set must not contain du leetcode.com Time Complexity O(N^2), Space Complexity O(N) 배열을 오름차순으로 정렬 첫번째 array에서 O(N).. 공감수 0 댓글수 0 2023. 4. 4.
leetcode 0014 - Longest Common Prefix / Easy / Typescript https://leetcode.com/problems/longest-common-prefix/ Longest Common Prefix - LeetCode Can you solve this real interview question? Longest Common Prefix - Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "". Example 1: Input: strs = ["flower","flow" leetcode.com slice vs substr vs substring Performance sub.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode13 - Roman to Integer / Easy / TypeScript https://leetcode.com/problems/roman-to-integer/ Roman to Integer - LeetCode Can you solve this real interview question? Roman to Integer - Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 For example, 2 is written as II in Roman numeral, just tw leetcode.com Time Complexity O(N), Space Complexity O(1) 문자열 길이만큼 순회.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0011 - Container With Most Water / Medium / TypeScript https://leetcode.com/problems/container-with-most-water/ Container With Most Water - LeetCode Can you solve this real interview question? Container With Most Water - You are given an integer array height of length n. There are n vertical lines drawn such that the two endpoints of the ith line are (i, 0) and (i, height[i]). Find two lines that toget leetcode.com Time Complexity O(n), Space Comple.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0010 - Regular Expression Matching / Hard / Typescript https://leetcode.com/problems/regular-expression-matching/ Regular Expression Matching - LeetCode Can you solve this real interview question? Regular Expression Matching - Given an input string s and a pattern p, implement regular expression matching with support for '.' and '*' where: * '.' Matches any single character. * '*' Matches zero or more of leetcode.com Time Complexity: O(2^p + s) 라고 하.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0008 - String to Integer (atoi) / Medium / Typescript https://leetcode.com/problems/string-to-integer-atoi/ String to Integer (atoi) - LeetCode Can you solve this real interview question? String to Integer (atoi) - Implement the myAtoi(string s) function, which converts a string to a 32-bit signed integer (similar to C/C++'s atoi function). The algorithm for myAtoi(string s) is as follows: 1. Read leetcode.com Time Complexity O(N), Space Complexity.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0007 - Reverse Integer / Medium / TypeScript https://leetcode.com/problems/reverse-integer/ Reverse Integer - LeetCode Can you solve this real interview question? Reverse Integer - Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0. Assume the envir leetcode.com Time Complexity: O(n) Space Complexity: O(n) Math.abs로.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0006 - Zigzag Conversion / Medium / Typescript https://leetcode.com/problems/zigzag-conversion/ Zigzag Conversion - LeetCode Can you solve this real interview question? Zigzag Conversion - The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility) P A H N A P L S I I leetcode.com "PAYPALISHIRING" P A H N A P L S I I G Y I R 정답 - .. 공감수 0 댓글수 0 2023. 3. 31.
leetcode0005 - Longest Palindromic Substring / Medium / TypeScript https://leetcode.com/problems/longest-palindromic-substring/ { while(left >= 0 && right palindrome.length) .. 공감수 0 댓글수 0 2023. 3. 31.
leetcode0004 - Median of Two Sorted Arrays / Hard / TypeScript https://leetcode.com/problems/median-of-two-sorted-arrays/ Median of Two Sorted Arrays - LeetCode Can you solve this real interview question? Median of Two Sorted Arrays - Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays. The overall run time complexity should be O(log (m+n)). Example 1 leetcode.com Time Complexity O(n+m), Space Com.. 공감수 0 댓글수 0 2023. 3. 31.
leetcode0003 - Longest Substring Without Repeating Characters / Medium / TypeScript https://leetcode.com/problems/longest-substring-without-repeating-characters/ 공감수 0 댓글수 0 2023. 3. 31.
leetcode 0002 - Add Two Numbers / Medium / Typescript https://leetcode.com/problems/two-sum/ Two Sum - LeetCode Can you solve this real interview question? Two Sum - Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not leetcode.com Map을 사용해 nums 배열 순회 찾으려는 값을 key로 사용하고, index에 해당하는 값이 value가 되도록 하여 map.. 공감수 0 댓글수 0 2023. 3. 9.
Unit Testing 4장 4장 좋은 단위 테스트의 4대 요소 가치있는 테스트를 어떻게 식별할 수 있을까?? 4.1 좋은 단위 테스트의 4대 요소 자세히 살펴보기 회귀 방지 리펙터링 내성 빠른 피드백 유지 보수성 4.1.1 첫번째 요소: 회귀 방지 💡 회귀: 코드를 수정한 후 기능이 의도한 대로 작동하지 않는 경우 회귀방지: 테스트가 얼마나 **버그(회귀)**의 존재를 잘 나타내는지에 대한 척도 코드는 자산이 아니라 책임!!! 테스트에서 버그(회귀)가 드러날 확률이 높아지는 원인 3가지 테스트 중에 실행되는 코드의 양 코드 복잡도 코드의 도메인 유의성 4.1.2 두 번째 요소: 리펙터링 내성 리펙터링을 통해 코드의 비기능적 특징을 개선하는 것으로 가독성을 높이고 복잡도를 낮추는 것 💡 거짓 양성(false positive) 실제로.. 공감수 0 댓글수 0 2023. 2. 27.
Unit Testing 3장 3.1 단위 테스트를 구성하는 방법 3.1.1 AAA 패턴 사용 준비(arrange), 실행(act), 검증(assert) 패턴 = AAA 패턴 = 3A 패턴 모든 테스트가 단순하고 균일한 구조를 갖는데 도움이 된다. 준비(arrange) - 테스트 대상 시스템과 해당 의존성을 원하는 상태로 만든다. 실행(act) - 메서드를 호출하고 준비된 의존성을 전달하며 출력 값을 캡쳐 검증(assert) - 결과를 검증 Given - When - Then 패턴 AAA와 유사한 패턴, 테스트 구성 측면에서는 차이가 없으나, 프로그래머가 아닌 사람에게 Given-When-Then패턴이 더 읽기 쉽다. (비기술자들과 공유하느 테스트에 적합) - Given(준비),When(실행), Then(검증) 3.1.2 여러 개의 .. 공감수 0 댓글수 0 2023. 2. 27.
Unit Testing 2장 2장 단위테스트랑 무엇인가 코드 출처 - https://github.com/AcornPublishing/unit-testing/tree/main/Book 단위 테스트란? 작은 코드 조각(단위)를 검증하고, 빠르게 수행하고, 격리된 방식으로 처리하는 자동화된 테스트 런던파 코드 조각(단위)을 격리된 방식으로 검증 ⇒ 테스트 대상 시스템을 협력자(collaborator)에게서 격리하는 것 하나의 클래스가 다른 클래스 또는 여러 클래스에 의존하면 모든 의존성을 테스트 대역(test double)으로 대체해야 한다. 💡 테스트 대역 - 모든 종류의 가짜 의존성을 설명하는 포괄적인 용어 테스트 대상 시스템의 의존성을 테스트 대역으로 대체하면, 테스트 대상 시스템만 검증하는 데 집중할 수 있을 뿐만 아니라 규모가 .. 공감수 0 댓글수 0 2023. 2. 27.
Unit Testing 1장 1장 단위 테스트의 목표 1.2 단위 테스트의 목표 💡 단위 테스트와 코드 설계의 관계 코드를 단위 테스트 하기 어렵다면 코드 개선이 필요하다는 것을 의미한다. 강결합(tight coupling) 제품 코드가 서로 충분히 분리되지 않아서 따로 테스트하기 어려움을 뜻함 코드 베이스(소스 코드 전체 집합)를 쉽게 단위 테스트할 수 있다고 해도 반드시 코드 품질이 좋은 것을 의미하지는 않는다. 낮은결합도를 보여도 좋은 프로젝트는 아닐 수 있음 단위테스트의 목표 스프트웨어 프로젝트의 지속 가능한 성장을 가능하게 하는 것 단위테스트의 필요성 테스트가 없는 프로젝트의 경우 시작은 유리하지만, 이내 진척이 없을 정도로 느려진다. 지속적인 정리와 리팩터링 등 적절한 관리 없이 방치할 시, 시스템이 더 복잡해지고 무질서.. 공감수 0 댓글수 0 2023. 2. 27.
Pixel 수를 통한 해상도 조절 모든 캔버스는 2개의 크기를 지닌다. (== drawingbuffer 의 크기) 캔버스 안에 얼마나 많은 픽셀이 존재하는지 캔버스 디스플레이(화면에 표시)되는 크기 ← css가 결정 - 즉, PPI가 높을수록 더 세밀한 화면 표현이 가능해지고 고화질의 이미지 구현 가능 사진 출처 - [픽셀(pixel), 해상도(Resolution)]https://treasure01.tistory.com/34 // 내부 픽셀 해상도는 100px X 100px canvas.width = 100; canvas.height = 100; // 위 캔버스로 저장한 이미지 스타일 사이즈 변경 시 // 스타일 사이즈가 220px X 20px 로 변경되어도 100px X 100px 의 픽셀 해상도 유지 canvas(넓이X높이) 이미지 .. 공감수 0 댓글수 0 2023. 2. 19.
웹과 브라우저를 위한 프로파일링과 성능 개선 Devtools Performance 에서 성능 측정 가능 Performance 결과 Network 탭 : 다운로드 요청과 완료 시간을 볼 수 있음 Main 탭 : 렌더러의 메인 쓰레드로 다양한 렌더링과 더불어 스크립트 실행도 함 FP, FCP, L, DCL, LCP : 로딩 시 하나의 기점이 되는 지표들 → paint와 로드 카테고리로 나뉜다 FP = First Paint 페이지 네비게인션 후 첫 픽셀을 그린 순간 FCP = First contentful paint 첫 엘리먼트를 그린 순간 LCP = Largest contentful paint 가장 큰 엘리먼트를 그린 순간 DCL = Dom Content Loaded Dom Tree를 구성하고, 스크립트( + defer 스크립트)를 실행 완료했을 때,.. 공감수 0 댓글수 0 2023. 1. 31.

문의안내

티스토리
로그인
고객센터

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