Youngble_개발스토리

재귀란? 자신의 함수에서 자기자신을 호출하는 것 재귀함수를 사용하는 이유 모든 곳에서 재귀함수를 사용하고 있다. 예로 간략한 리스트는 다음과 같다. - JSON.parse - JSON.stringify - document.getEementById - DOM traversal algorithm(DOM 순회 알고리즘) - data structures - cleaner alternative to iteration DOM traversal algorithm(DOM 순회 알고리즘) DOM의 모든요소가 중첩된 트리 구조로 되어있기 때문에 만약 div 태그안에 div가 들어있고 이러한 중첩 계층이 100개나 될때 그것을 살펴보고자 할때 흔한 접근법 중 하나가 재귀적으로 코드를 작성하는 것이다. Data structu..

분할정복이란? 알고리즘 디자인 패러다임 중 하나이다. 정의 : 문제를 즉각 해결할 수 있을 때까지 재귀적으로 둘 이상의 하위 문제(Sub-problem)들로 나누고(Divide) 문제를 해결한 다음(Conquer) 그 결과를 이용해 다시 전체 문제를 해결하며 합치는 방법 분할정복 핵심 진행방식 ① 분할 : 동일한 타입의 하위 문제로 큰 문제를 분할한다. ② 정복 : 재귀적으로 하위 문제들을 해결한다. ③ 병합 : 적절히 해결된 결과를 사용해 큰 문제를 해결한다. 분할정복 종류 이진탐색, 퀵정렬, 병합(합병)정렬 이글에서는 이전 알고리즘&자료구조 글로 썼던 이진탐색의 예시로 진행한다. 선형탐색/순차탐색(Linear search, Sequential Search) function search(arr, val..

YML/YAML 이란? Yet Another Markup Language의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어이다. 최근에는 YAML Ain't Markup Language라고 불리는 재귀적 말장난도 있다. YAML 은 JSON이나 XML과 마찬가지로 설정 파일 등의 목적을 가진 데이터를 기술하기 위해 만든 포맷으로 JSON과 비교하자면 좀 더 구조가 복잡하지만 사람이 보기에 가독성 측면에서 좀 더 자연스러운 포맷이다. 어디서 사용하는가? 여러곳에서 활용하고 있겠지만 현재 내 입장에서는 github actions을 이용할때 CI/CD 를 배포할때 사용하는 포맷이다. 처음에는 그저 CI/CD를 구현하기위한 주목적으로 큰틀만 알고 사용했지만 여러 추가적인 action이 필요하게 되고(cloud..

슬라이딩 윈도우란? 고정 사이즈의 윈도우가 이동하면서 윈도우 내에 있는 데이터를 이용해 문제를 풀이하는 알고리즘 여기서 말하는 윈도우와 슬라이딩은 창문 틀에서 창문이 슬라이딩 하는 것 같은 알고리즘이라는 뜻 프로그램을 작성할때나 코딩테스트에서 리스트를 활용하는 경우는 굉장히 많다. 일반적으로 인덱스를 처음부터 끝까지 완전 탐색을 하게 되는데, 완전 탐색을 할 경우 효율성이 좋지 않을 때 활용할 수 있는 알고리즘 3가지는 다음과 같다. Two Pointer Sliding Window Prefix Sum 문제설명 주어진 Array에서 주어진 number 만큼의 연속되게 붙어있는 값들을 더했을때 가장 큰 값 max를 구해야한다. 예를들어 maxSubarraySum([2,6,9,2,1,8,5,6,3],3) 라는..

출처: https://github.com/pocojang/developer-roadmap GitHub - pocojang/developer-roadmap: 2020년 웹 개발자가 되기 위한 로드맵 2020년 웹 개발자가 되기 위한 로드맵 :kr:. Contribute to pocojang/developer-roadmap development by creating an account on GitHub. github.com 로드맵의 목적 이 로드맵의 목적은 전체적인 방향에 대한 아이디어를 제공하고 다음에 무엇을 배워야 할지 혼란스러울 경우와 트렌드에 뒤떨어진 것을 배우지 않도록 안내하는 것입니다. 왜 어떤 도구가 다른 도구보다 적합하다고 생각되는지에 대한 이해를 넓혀 가야 하며 유행에 따른 도구를 기억하는 ..

문제 해결 패턴 중 Frequency Counter 패턴(빈도카운터)과 Multiple Pointers 패턴(다중포인터)을 공부하였다. 빈도카운터 정확한 공식적인 이름이 있는게 아니지만 문제 해결할때 많이 등장하고 Colt Steele은 이를 frequencty counter 라고 정의하여 사용하기 때문에 이렇게 외우기로 했다. Frequency Counter Pattern, 빈도 카운터 패턴 빈도카운터패턴은 애너그램 anagram과 같은 문제나, 두 배열이나 문자 string값을 비교하여 배열의 값들이 다른 한쪽의 배열의 제곱인지 체크하는 등에서 사용하는데 자바스크립트 객체의 속성접근을 이용하여 있는지 확인후 없다면 +1 있다면 있는 값의 +1 해주는 식으로 만들고 비교할때 하나씩 지우는 방식이다. 말..

css-module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다. css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다. CRA 에서는 {이름}.module.css 라고 이름을 작성하면 css-module이 된다. 이때 module을 꼭써야 적용됨. 기존 css 같은 경우 예를들어 big 이라는 클래스명 css을 넣어줄려고한다고 생각해보자. css 파일이 2개가 있고 하나는 Box1css 하나는 Box2.css 라고 이름을 붙이고 각각 다음과 같이 css 내용을 작성하고 // Box1.css .big{ width : 200px; } // Box2.css .big{ width : 100; } 이것을 각각의 div에 넣어준다고 생각해보자. import ‘./Box..

드디어 웹팩과 번들러에 대한 공부를 정리하려고한다. 많이 본 그림일거다. 웹팩이라하면 말그대로 여러가지 js,css,ts,이미지파일 등등 웹만드는 파일들을 한군데 묶어준다(bundling)라는 개념은 대강 알고있었다. 그런데 언제? 왜? 그리고 어떻게 웹팩으로 번들링을 해주는건지는 모른다. 따라서 다시 기초로 돌아가보자. 예제를 위해 간단한 코드와 파일을 생성해보고 이를 테스트해보면서 다시한번 개념을잡자. 기본적으로 내가 만든 구성은 다음과 같다. 기본적인 index.html 을 만들고 이곳에서 쓸 js파일을 5개 만들었다. Import 하고싶은 script에 type을 module을 작성하고 5개의 js파일을 import해주었다. 각각의 js파일에는 string값이 들은 변수, while문을 도는 함수..

스택이란? 한쪽 끝으로만 넣고 뺄수 있는 자료구조 예를들어 빨래통이 있다고 한다면 빨래를 빨래통에 차례대로 넣고나서 세탁기에 넣을때 처음에 넣은 맨아래 빨래가 아닌 마지막에 넣은 빨래부터 아래로 세탁기에 넣는다. → 이러한 자료구조를 Last In First Out 이라고 해서 LIFO 자료구조 라고한다. 왜필요한가? 넣은 순서를 쌓아두고 있고 그 순서가 필요한 경우가 있다. 예를들어 컴퓨터의 되돌리기(Ctrl+Z) 기능의 경우 직전 행동으로 되돌리고 싶을때 사용하는 기능인데 이를위해서 행동들의 순서대로 기억해야하고 마지막 행동부터 처리해야하기때문에 이러한 스택을 사용한다. 스택구현 스택 이라는 자료구조에서 제공하는 기능 push(data): 맨위(뒤)에 데이터 넣기 pop(): 맨위의 데이터뽑기 pee..

정렬 버블정렬 요소들이 마치 거품이 일어나듯이 연쇄적으로 자기 자리를 찾아간다고하여 버블정렬이라고 부른다. 배열첫인덱스부터 끝인덱스까지 순차적으로 비교해가면서 순회하는 반복문을 사용 끝인덱스에 가장 큰수를 넣었다면 다시 처음부터 끝에 넣은 큰수 인덱스제외 비교해가며 순회한다. 시간복잡도는 O(N^2) 선택정렬(Selection Sort) 인덱스 0부터 배열의 길이만큼의 값을 비교하여 전체중 최소값의 인덱스를 기억하고 그것을 순차적으로 왼쪽부터 정렬하는것 시간복잡도는 O(N^2) 삽입정렬(Insertion Sort) 전체에서 필요할때만 하나씩 올바른 위치에 “삽입"하는 방식 인덱스0 부터 차례로 정렬을 하기때문에 만약 그다음 for문에 해당하는 인덱스값이 그 앞 인덱스에 해당하는 값과 비교하여 더 크다면 ..