프론트엔드 연구소
취업을 준비하면 원서접수 이후 코딩 테스트를 보는 경우가 있습니다. 대부분 자료구조, 알고리즘 등을 통해서 코딩 테스트를 보는데 그 외에도 간단한 요구사항을 주면서 취업을 준비할 때 프로젝트를 만들어 보라는 코딩 테스트도 두 번 정도 본 적이 있습니다. 프론트엔드의 경우 실무에서 알고리즘을 잘 사용하는 경우는 없어서 더욱 이런 코딩테스트를 많이 하는 것 같습니다. ex) 버스 예약 시스템 기능 : 예약하기 / 예약 조회하기 / 취소하기 등등 최근 저희 회사에서 지원한 분들의 코딩 테스트 결과물들을 검토한 적이 있습니다. 제가 누굴 평가할 수준은 아니지만, 어떻게 하면 지원자들이 제출한 코딩테스트들을 검토하면서 좋은 개발자를 뽑을 수 있을까 고민해 봤습니다. 1. 요구사항대로 기능 구현을 잘하였는가? (필..
2024년 실수령액 계산기로 이동하기
git rebase 란? git에서 한 브랜치와 다른 브랜치를 합치는 방법이 merge와 rebase가 있습니다. git rebase는 한 브랜치의 베이스 브랜치를 다시 설정하는 기능입니다. 예시를 보면서 한번 알아보도록 하겠습니다. merge 했을 때, 아래와 같이 main 브랜치에서 commit2를 작업을 하고 다른 브랜치에서 작업을 하게 되면 main 브랜치와 다른 브랜치의 베이스 브랜치가 달라지게 됩니다. 베이스 브랜치가 달라진 상태에서 merge를 하게 되면 아래와 같이 새로운 merge commit이 새롭게 생성되고 브랜치가 merge 됩니다. 작업하는 브랜치가 많지 않다면 크게 문제는 없지만, 여러 브랜치를 Merge를 하게 된다면 작업 히스토리가 어떻게 되는지 파악하기 어려울 수도 있습니다..
속도별 페이스 계산기로 이동하기 1km 페이스, 평균 페이스 란? 나이키 런닝앱이나 런닝 하시는 분들은 주로 6분 페이스로 뛴다. 이렇게 이야기를 합니다. 이것은 1km를 달리는 속도가 6분의 시간이 소요된다는 뜻입니다. 이렇게 하는 이유가 10km, 20km 등 시간을 계산할 때, 더 빠르게 계산할 수 있는 장점이 있습니다. 속도별 페이스 계산기 하지만, 런닝머신에서는 주로 속도가 시속으로 되어 있습니다. 시속을 입력하면 페이스와 3, 5, 10, 하프, 풀 코스 기록을 쉽게 계산해 주는 사이트입니다. 속도별 페이스 계산기로 이동하기 속도 계산기 1km 페이스: 00 시간 00 분 00 초 3km 기록: 00 시간 00 분 00 초 5km 기록: 00 시간 00 분 00 초 10km 기록: 00 시간 ..
자바스크립트에 Set 문법이 있습니다. 자바스크립트에서 값을 저장할 때, 배열이나 객체를 많이 사용하는데 ES6 이후 부터 Set이 추가되었습니다. 기존 배열과 차이점이 뭔지 Set에 대해서 알아보도록 하겠습니다. Set 이란? 고유한 값을 저장하는 집합입니다. 값의 중복을 허용하지 않고 Index가 없다는 점이 배열과의 차이점입니다. Set 사용법 const mySet = new Set(); const mySet2 = new Set([1, 2, 3, 4, 5]); 데이터 추가 / 삭제 / 값 존재 여부 const mySet = new Set(); // 값 추가 mySet.add(1); mySet.add(2); mySet.add(3); mySet.add(1); // nope // 값 제거 mySet.de..
파일 업로드 구현할 때, input file 태그에서 파일을 입력받고 파일 업로드를 하고 FormData에 파일을 넣고 axios post 메서드를 이용해서 파일 전송을 할 수 있습니다. 파일 업로드 예시 파일 업로드 const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const file = fileInput.files; const formData = new FormData(); forData.append('file', file); cosnt response = axios.post..
자바스크립트에서는 undefined 와 null 개념이 있습니다. 언뜻 보면 둘다 비어있는, 없다라는 느낌의 친구들인데, 어떤 차이점이 있는지 알아보도록 하겠습니다. 둘다 값이 없거나, 정의 되지 않는 상태를 뜻합니다. Boolean 으로 표현하면 false 입니다. undefined 변수 또는 인수를 선언 후 값을 할당하지 않으면 undefined가 됩니다. 숫자적 표현하면 NaN 입니다. undefined + 12 // NaN null 의도적으로 비어있을 표현하는 값입니다. 숫자적으로 표현하면 0에 가깝습니다. null + 12 // 12
도커란? 컨테이너를 생성하고 관리하기 위한 도구입니다. 컨테이너란? 코드를 실행하는데 필요한 종속성과 도구가 포함되어 있는 코드 패키지 표준화된 소프트웨어 유닛입니다. 컨테이너에 Node.js 어플리케이션이 있는 경우에 그 코드를 실행하기 위해 필요한 도구들을 가지고 있습니다. 뿐만 아니라, 동일한 Node.js 코드와 Node.js를 실행하는 도구를 동일한 버전으로 가지고 있어서 항상 동일한 동작과 결과를 제공하는 장점이 있습니다. 도커를 사용해야 하는 이유 로컬, 개발, 운영 환경 그리고 동료 들과의 환경 설정이 각각 다르면 어디서 오류가 발생하는지 찾기 어렵습니다. 예를 들어 로컬환경에서는 Node 14 버전을 사용하고 운영 환경에서는 Node 12 버전을 사용한다면, 로컬에서는 정상적으로 동작하는..
Next.js 13 버전 이후 Interceptiong Route의 개념이 생겼습니다. Intercepting Route 란? 가로채기 Route 입니다. Next.js 에서 라우터를 가로채기를 하여 현재 레이아웃 내에서 다른 부분의 경로를 로드할 수 있습니다. 이렇게 하면 다른 전환 없이 내용을 표시할 수 있는 장점이 있습니다. 아래 장점과 같이 데이터 페치가 필요하거나, 인증 및 권한 보안 처리가 필요하거나, 동적 조건에 따라서 사용자 요청에 따라서 제어가 필요할 때 사용하면 좋습니다. 장점 데이터 가져오기 인증 및 권한 보안 처리 동적 조건에 따라 사용자 요청에 따라서 제어 가능 서버 리소스 효율 증가 사용법 아래와 같이 페이지 구조를 만들어서 사용 가능합니다. (.)의 같은 수준 디렉터리 (..)..
Next.js 13 이후 버전부터 app 디렉터리 방식으로 라우팅을 구현할 수 있습니다. 그중에 병렬 라우팅(Parallel Routes)에 대해서 알아보도록 하겠습니다. 병렬 라우팅이란? 하나의 레이아웃에 여러 페이지를 동시에 또는 조건부로 렌더링 할 수 있습니다. 주로 대시보드나 피드에서 여러 가지 레이아웃이 역동적인 페이지에서 사용할 수 있습니다. 모달창과 같이 하나의 레이아웃에 여러 페이지를 띄울 수도 있습니다. 또 인증 정보 등 조건에 따라서 렌더링을 할 수 있습니다. 병렬 라우팅을 사용하면 레이아웃마다 각각 오류 처리와 로딩 상태를 정의할 수 있는 장점이 있습니다. 사용법 slot name 을 이용해서 생성합니다. @folder 네이밍 컨벤션을 이용해서 slot를 생성합니다. layout.ts..
