uni's code uni's code

안녕하세요. 알고리즘의 정렬, 그 중에서도 간단하고 이해하기 쉬운 3대장인 선택정렬, 버블정렬, 삽입정렬에 대해 알아보겠습니다. 0. 정렬 알고리즘이란? 정렬 알고리즘은 sorting으로, 원소들을 일정한 순서대로(오름차순, 내림차순) 열거하는 알고리즘을 의미합니다. 1. 선택정렬(Selection Sort) 1) 아이디어 1. 각 루프마다 최대원소를 찾고, 최대원소와 마지막에 있는 원소와 교환한다. 2. 그리고 마지막에 있는 원소를 제외한다. 3. 하나의 원소만 남을 때까지 위의 루프를 반복한다. 각 회차별 마지막에 있는 원소의 자리를 "선택" 하고, 그 자리에 해당하는 값을 찾기 위해 비교한다고 보면 된다. 2) 코드 function selectionSort(arr){ let answer=arr; f..

vue를 사용할 때는 vue-router에서 제공하는 navigation guard 기능이 있었기 때문에, 각 페이지에 접근을 할 때 guard 처리해주기가 수월했다. 하지만, next.js에서는 그러한 기능이 따로 없기 때문에 직접 만들어야 했다. 그래서, hoc를 통해 next.js router guard(navigation guard)를 만들어보고자 한다. 1) 목적 각 페이지에 접근을 할 때, 각 페이지별 접근을 할 수 있는 유저가 있고, 접근이 불가능한 유저가 있을 것이다. 예를 들어, 로그인 페이지 같은 경우 로그인을 안한 유저는 접근이 가능하지만, 이미 로그인 한 유저라면 접근이 불가능하게 만들어야 한다. 이러한 접근에 대한 검사를 매 페이지마다 이루어져야 하는데, 각 페이지 컴포넌트에 이 ..

오늘은 react의 hoc 패턴에 대해 알아보겠습니다. 1) hoc란? hoc는 high order component의 약자로써, 고차컴포넌트라고 합니다. 쉽게 말하면, 다른 컴포넌트(=자식)를 감싸는 wrapper 컴포넌트(=부모)라는 뜻입니다. 리액트 공식 문서에 따르면 hoc를 사용하는 이유는 횡단관심사의 분리 입니다. 횡단관심사는 Cross-Cutting concern이라고 합니다. 하나의 컴포넌트만 가지고 있는 관심사를 넘어서 여러 컴포넌트에서 가지고 있는 공통의 관심사라는 의미입니다. 예를 들어, 각 페이지 별 유저에 대한 권한을 검사해 검증을 하는 기능이 공통적으로 가지고 있다고 합시다. 이러한 권한 검사가 공통의 관심사가 됩니다. 이러한 페이지 컴포넌트를 자식 컴포넌트로, 검증하는 컴포넌트..

배열과 배열을 합칠 때, 사용하는 방법 3가지에 대해 알아보겠습니다. 1. concat concat 메서드는, 배열이나 값들에 대해 합쳐서 새로운 배열을 리턴합니다. 기존의 배열에는 영향을 주지 않습니다. ✅ example1 const arr1 = ['a', 'b', 'c']; const arr2 = ['A', 'B', 'C']; const arr3 = arr1.concat(arr2); console.log(arr4); //[ // 'a', 'b', 'c', 'A', 'B', 'C' //] ✅ example2 concat 인자 안에 배열이 와도, 배열의 원소를 꺼내서 합칩니다. (배열 자체가 원소가 되지 않습니다) const arr1 = [1, 2, 3]; const arr2 = arr1.concat([..

test code를 작성하기 위해, jest와 react testing library를 사용하였습니다. 1. test code의 기본 틀 describe('validation test', () => { it('when nothing input, submit button is disabled', async () => { //given & when render(); //then const submitButton = await screen.findByRole('button', { name: '계정 만들기', }); expect(submitButton).toBeDisabled(); }); it('when email is not valid, email error appear', async () => { //giv..

testcode 관련 eslint 설정에 대해 알아보겠습니다. 일반 규칙 뿐만 아니라, test code에서 권장하는 lint도 고쳐주기 때문에, 협업을 하거나 초기에 배울 때 도움이 될 것 같습니다. 1. install npm install eslint-plugin-testing-library eslint-plugin-jest-dom 2. react 에 적용 // .eslintrc.json { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 3. next.js에 적용 // .es..

시작하기 전 잠깐의 tmi를 풀어보자면.. 지금까지 vuetify, bootstrap, tailwind, antdesign 등등 써보면서, 개인적으로 최애는 tailwind가 될 것 같습니다. 미리 좋은 점에 대해 소개드리자면, css custom이 많이 편합니다. ㅠㅠ 단점은 js기능을 많이 지원하지 않는데, 예를 들어 pagination이라던가.. 하지만 css custom이 많이 편한점이 정말 맘에 듭니다!! 왜 이제서야 안거니.. 내 최애 css 프레임워크 등극이다.. 각설하고 tailwind 적용법에 대해 소개하겠습니다. 1. tailwind란? utility-first 컨셉의 css 프레임 워크입니다. 속성이 중시됨으로, 미리 만들어진 속성에 대한 클래스들이 있고 이를 조합하여 컴포넌트를 구성..

테스트코드를 작성해야한다는 점이 중요하다는 것은 진작 알고는 있었지만, 시간이 없다는 이유로 도전하지 못했었다. 이번에 회사에서 대대적으로 프론트 리빌딩을 하는 과정 속, TDD를 쓰자고 건의하였고, TDD에 대해 알아보면서 정리한 내용을 아래에 담았다. 1. TDD란? test driven development 의 약자로 “테스트 주도 개발” 코드를 개발하는 과정에서 테스트코드가 추가됨으로, 코드 개발을 하고 테스트 코드를 작성하는 과정으로 오해할 수 있으나, 이는 경기도 오산!(ㅋㅋ) TDD 과정은 아래와 같다. 테스트를 작성하고 테스트가 정상이 될때가지 코드를 작성한다~ → 테스트 실패시 코드 작성하며 테스트 성공할때까지 작성 -> 리팩토링 1) 테스트 케이스를 작성 2) 코드 개발 -> 테스트 케..