Code Playground

< h1 > Code Playground </ h1 >

초창기 웹 렌더링 초창기에는 모든 웹 페이지가 정적인 페이지였다. 대부분의 로직은 서버에서 수행되었고, 브라우저는 서버로부터 전달받은 정적인 HTML과 CSS를 단순히 렌더링하는 방식으로 동작했다. 즉, 우리가 웹 사이트에 접속하면 브라우저는 서버에 간단한 HTTP 요청을 전송하고, 서버로부터 전달 받은 HTML을 렌더링하는 방식인 것이다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링해야 했다. 당연히 매 번 처음부터 새로 렌더링하기 때문에 성능적인 문제도 많았고 화면이 전환될 때마다 화면이 깜박이는 등의 문제가 있었다. Ajax의 등장 그러다 1999년에 자바스크립트를 통해서 서버와 브라우저가 비동기로 데이터를 주고 받을 수 있는 Ajax..

처음에 회사에서 서비스 개발 프로젝트를 맡았을 때 내가 작성했던 테스트 코드는 util성 함수들에 대한 unit 테스트 코드가 전부였다. 거기에 조금 더 덧붙여서 Redux Saga의 Generator 함수에 대한 간단한 unit 테스트들을 작성하였는데 방법은 매우 간단했다. Saga Generator 함수들을 실행했을 때 어떤 이펙트들이 순차적으로 실행되는지 각 단계 별로 mocking하여 테스트하는 방식이다. 그 때 내가 작성했던 테스트 코드 한 대목을 가져와봤다. describe('1. success scenario', () => { let gen: any; beforeAll(() => { gen = fetchAllSaga(); }); it('yield user and example API call..

Find All Numbers Disappeared in an Array Given an array nums of n integers where nums[i] is in the range [1, n], return an array of all the integers in the range [1, n] that do not appear in nums. Example 1: Input: nums = [4,3,2,7,8,2,3,1] Output: [5,6] Example 2: Example 2: Input: nums = [1,1] Output: [2] Constraints: n == nums.length 1 [1, , , 4, ] - 그리고 숫자가 들어있는 칸만 남겨둔다 => [1, 4] 이렇게 풀면 총 3번 ..

Third Maximum Number Given integer array nums, return the third maximum number in this array. If the third maximum does not exist, return the maximum number. Example 1: Input: nums = [3,2,1] Output: 1 Explanation: The third maximum is 1. Example 2: Example 2: Input: nums = [1,2] Output: 2 Explanation: The third maximum does not exist, so the maximum (2) is returned instead. Example 3: Example 3:..

Valid Mountain Array Given an array of integers arr, return true if and only if it is a valid mountain array. Recall that arr is a mountain array if and only if: arr.length >= 3 There exists some i with 0 arr[i + 1] > ... > arr[arr.length - 1] Example 1: Input: arr = [2,1] Output: false Example 2: Input: arr = [..

올 해 1월부터 바닐라코딩 부트캠프 6기를 같이 수료한 몇몇 사람들과 시작한 스터디가 있는데, 바로 영어로 된 개발 블로그 글을 번역하고 스터디 멤버들과 함께 공유하는 스터디이다. 이런 스터디를 구상한 이유는 이리 저리 돌아다니면서 요즘 핫하다는 블로그 글을 수집은 많이 하는데 정작 잘 읽지는 않아서이다. 좋은 글을 꾸준히 많이 읽는 것은 정말 개발자에게 특히 중요한 일이지만 혼자서 하면 작심 삼일이 되고 잘 안하게 되기 마련이다. 그래서 시작한 스터디인데 생각보다 많은 글들을 읽게 되어 만족도가 높다. 현재까지 번역해서 노션에 정리한 글이 7개 정도 된다. 물론 1월 중순부터 시작한 것 치고 많지 않아보일 수도 있지만 어쨌든 중요한건 꾸준히 계속 하고 있다는 것이니까! 오늘은 번역한 글들 중에서 정말 ..

Remove Duplicates from Sorted Array Given a sorted array nums, remove the duplicates in-place such that each element appears only once and returns the new length. Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory. Clarification: Confused why the returned value is an integer but your answer is an array? Note that the input..

Remove Element Given an array nums and a value val, remove all instances of that value in-place and return the new length. Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory. The order of elements can be changed. It doesn't matter what you leave beyond the new length. Clarification: Confused why the returned value is an in..

어쩌다 회사 회의 시간에 location.href에 string을 할당하는 방식이랑 location.assign을 쓰는 방식 중에 어떤거를 쓰는 것이 더 좋을까에 관한 얘기가 나왔는데 순간 2개의 차이점이 뭔지 헷갈려서 찾아본 내용을 간단히 정리해보았다. window.location read-only 속성을 가진 window.location 은 document의 현재 location 정보를 담은 Location 객체를 리턴해준다. window.location은 read-only Location 객체임에도 불구하고 DOMString을 할당할 수 있다. 이 말인즉슨 대부분의 경우 location이 마치 string인 것처럼 사용할 수 있다는 뜻이다. // 아래 2개는 완전히 같다. location = 'ht..

Merge Sorted Array Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. The number of elements initialized in nums1 and nums2 are m and n respectively. You may assume that nums1 has a size equal to m + n such that it has enough space to hold additional elements from nums2. Example 1: Input: nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3 Output: [1,2,..