yunicornlab

계기npm에는 수많은 패키지 라이브러리들이 있다.https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 프로젝트 중 라이브러리 또는 프레임워크를 선택할 때 아래 npmtrends 사이트를 참고하곤 했다.(아래는 예시) 그러면서..

부트캠프에서 출퇴근 관리 웹을 개발하는 Riset이라는 창작 프로젝트를 진행했었다.Riset은 Sun Rise + SunSet의 줄임말로, 해가 뜰 때 출근하고 해가 질 때 퇴근하는 직장인을 의미한다.여기서 나는 프론트엔드로 참여했고, 채팅과 일정 관리, 다크모드와 반응형 등을 구현했다.이 중 채팅 구현 과정을 돌아보려고 한다.구현한 채팅 기능 소개아래 사진처럼 직원들 목록 화면에서 이름을 검색할 수 있고 1명 또는 다수를 선택해서 채팅방을 만들 수 있다.채팅은 실시간 통신으로 구현했고 1:1 채팅뿐 아니라 그룹 채팅이 가능하다.검색은 직원 이름 검색, 채팅방 목록 검색, 채팅 내용 검색 모두 구현했고, 텍스트 메시지와 파일도 전송할 수 있다.이미지는 기본 화면과 다크모드, 그리고 반응형을 골고루 가져왔..

배열을 생성하는 방법 - 생성자, from, of, fill, copyWithin, with📌 생성자생성자 Array()를 통해 새로운 Array 인스턴스를 생성할 수 있다.new를 붙이지 않아도 Array()는 정상적으로 동작하지만, 일부 특수한 경우에는 new를 생략할 시 예기치 않은 결과가 나올 수 있고 명확성을 위해 new Array()를 사용하는 것이 좋다.new Array(요소들... 또는 길이) 하나의 숫자만 전달하면 길이만 설정된 빈 배열이 생성되고,여러개의 요소를 전달하면 해당 요소들로 이루어진 배열이 생성된다.매개변수 없이 new Array()만 사용하면 빈 배열이 생성된다.const arr1 = new Array(5);console.log(arr1); // [ ] (비어 있는 5칸..

배열 요소에 접근하는 방법 - at, 대괄호 표기법📌 at( )ES2022(ES13)에서 새롭게 추가된 메서드로, 대괄호 표기법과 달리 배열의 특정 요소를 가져올 때 음수 인덱스 지원이 가능하다.배열.at(index)const arr = [10, 20, 30, 40];console.log(arr.at(0)); // 10 (첫 번째 요소)console.log(arr.at(-1)); // 40 (마지막 요소)console.log(arr.at(-2)); // 30 (뒤에서 두 번째 요소)console.log(arr.at(10)); // undefined (범위를 초과)console.log(arr.at(-10)); // undefined (음수로 범위를 초과) 음수 인덱스 지원하기 때문에 arr.at..

배열 메서드를 총정리해보려고 한다.너무 많아서 어려울 거라 생각했는데 생각보다는 적어서 할 수 있을 것 같다.정리하면서 배열 메서드를 마스터 할 것이다.정리할 배열 메서드는 아래 MDN에 있는 메서드를 바탕으로 할 것이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.developer.mozilla.org 카테고리📌 요소 접근at, 대괄호 표기법 📌 확인isArray, length ?..

문제N x N 크기의 2차원 배열을 생성하려고 아래와 같이 코드를 작성했다.let grid = Array.from({ length: N }).fill( Array.from({ length: N }).fill(0)); 그런데 웬걸, grid[0][0] = 1을 했더니 모든 행의 grid[i][0]도 1로 변하는 문제가 생겼다.문제는 fill() 메서드에 있었다.fill()로 배열 안에 배열을 생성하면 얕은 복사가 되어 모든 행이 동일한 배열을 참조하게 되는 것이다. 수정먼저 결론을 말하자면, 이런 문제가 발생되지 않기 위해 각 행을 개별적으로 생성해야한다. 올바르게 수정한 코드는 아래와 같다.let grid = Array.from({ length: N }, () => Array.from({ l..

코딩 테스트에서 효율적인 알고리즘을 작성하려면 시간복잡도를 이해하는 것이 필수다.상위 문제일수록 주어진 문제를 해결하는 데 얼마나 빠르게 동작하는지를 고려해야 한다. 시간복잡도란?시간복잡도(Time Complexity)란 입력값이 증가할 때 알고리즘의 실행 시간이 어떻게 변하는지를 나타내는 척도이다.입력 크기의 값에 대해 단위 연산을 몇 번 수행하는지 계산해서 알고리즘의 수행 시간을 평가하는 방법이다.대부분은 시간복잡도를 수학적으로 표현할 때 빅오 표기법(Big-O Notation)을 사용한다.빅오는 최악의 경우를 기준으로 알고리즘의 성능을 분석하는 방식이다. 가장 많이 쓰는 것은 빅오 표기법이지만, 그 외에도 다양한 표기법이 있다.1. 빅오(Big-O) 표기법최악의 경우(Worst Case)를 기준으로..

준비 단계1. 사용 언어 문법 및 특징 숙지코딩 테스트에서 사용할 언어를 하나 정하고, 해당 언어의 문법과 주요 기능을 익혀야 한다. 다음과 같은 사항을 숙지하는 것이 중요하다.변수 및 자료형: 정수, 실수, 문자열, 리스트, 딕셔너리 등조건문과 반복문: if, for, while 등의 기본 흐름 제어함수 및 재귀 호출: 함수의 정의와 활용, 재귀 함수 이해라이브러리 활용: 정렬, 수학 연산, 데이터 구조 관련 기본 라이브러리언어별 특징: 파이썬(Python)의 리스트 컴프리헨션, 자바(Java)의 컬렉션 프레임워크 등2. 시간복잡도 이해효율적인 알고리즘을 설계하려면 시간복잡도를 이해해야 한다.시간복잡도는 알고리즘이 실행되는 데 걸리는 시간을 대략적으로 분석하는 방법이다.빅오 표기법(Big-O Notat..