stonesy

이번에 프로젝트를 진행하면서 팀원들끼리 코딩컨벤션을 정해 정리해보았다. 🤍프론트엔드 코딩컨벤션 ※참고프론트엔드 코딩 컨벤션☑️식별자: 변수, 함수, 배열, 클래스 등과 같은 프로그래밍 요소를 구분하고 식별하기 위해 사용되는 이름❌ 직관적으로 의미를 파악할 수 있도록 가급적이면 약어를 사용하지 않습니다.❌ 한글을 직번역한 변수명을 사용하지 않습니다.❌ 공백을 허용하지 않습니다.❌ 언어에서 사용하는 예약어를 사용하지 않습니다.👌🏻 변수, 함수는 카멜 케이스로 선언합니다.userName, totalAmount, orderName // goodusername, TotalAmount, order_name // bad👌🏻 배열은 복수형으로 선언합니다.👌🏻 private 변수는 _를 접두사로 선언합니다...

주요 로직영어 공부 문제(https://stonesy927.tistory.com/275)와 마찬가지로 ei 이분탐색을 통해서 특정 조건을 만족하는 바로 다음 값을 찾는다.int left = i;int right = N-1;while(left영어 공부 문제에서는 numbers[mid]-numbers[i]-p⇒ 연속 공부 기간보다 작거나 같은 idx 바로 다음 idx가 return되었다.광고 시간 구하기 문제에서는 ads[mid].end-ads[i].start⇒ 광고 시작 ~ 끝까지 L보다 작거나 같은 idx 바로 다음 idx가 return될 것이다. 또한 누적합 개념을 사용하였다.int ans = S[left]-S[i];if(left여기서 S[left]-S[i]는 i~left-1까지의 총 합이고, 마지막 ..

주요로직n개의 수가 정렬되어 있어 정렬 로직 없이 이분탐색을 사용할 수 있다.길이 n의 numbers 배열을 한번씩 순회하면서 + 이분탐색을 통해서 O(NlogN)으로 문제를 해결했다.int answer = 0;for(int i=0; i이분탐색을 통해서 특정 조건을 만족하는 idx 바로 다음 값을 찾았다.int left = i;int right = n-1;while(left그리고 연속으로 영어 공부를 할 수 있는 날 left-i+p을 계산하고, answer 값을 비교하며 최대값으로 update 해주었다.answer = Math.max(answer, left-i+p); 코드import java.io.*;import java.util.*;public class Solution_10507_binarySearc..

가장 긴 증가하는 부분수열(LIS)  가장 긴 증가하는 부분 수열을 구하기 위해 아래와 같이 DP를 이용해서 풀 수 있지만, 이 경우 시간복잡도가 O(N^2)이기 때문에 N값이 매우 커지면 위험하다고 생각했다.//1. dpfor(int i=0; iA[j]) dp1[i] = Math.max(dp1[i],dp1[j]+1); }} 이분탐색, O(logN)이분탐색을 이용하면 DP를 이용했을 때 O(N^2)이었던 시간복잡도를 O(NlogN)으로 줄일 수 있다.public static void binarySearch(List arr, int target){ int left = 0; int right = arr.size()-1; while(left=target){ right = mid-1; }else{ ..

OS 운영체제운영체제란 HW와 SW자원을 관리하는 자원관리자이다. 크게 다음과 같은 역할을 수행한다.CPU 스케줄링과 프로세스 관리: CPU를 어떤 프로세스에 할당할지 결정하고, 프로세스의 생성과 삭제, 자원 할당과 반환을 수행한다.메모리 관리: 한정된 메모리 공간을 어떤 프로세스에 얼마나 할당할지 결정한다.디스크 파일 관리 및 I/O 디바이스 관리 등 컴퓨터의 요소CPU(중앙처리장치)CPU는 메모리에 저장된 명령어를 읽어 명령을 수행한다. 크게 제어장치, 산술논리연산장치, 레지스터로 구성된다.메모리메모리는 데이터를 저장해두었다가 필요할 때 CPU로 전달하는 역할을 수행한다. 인터럽트인터럽트는 어떤 신호가 들어왔을 때 CPU를 잠깐 정지시키는 것을 말한다. I/O 디바이스로 인한 인터럽트, 0으로 숫자를..

외판원 순회(TSP)외판원 순회 문제란 모든 도시를 한 번씩 방문하고 다시 출발점으로 되돌아오는 최소 비용을 구하는 문제이다.N(도시의 수) 값이 작으면, 순열로도 문제를 해결할 수 있지만 N 값이 매우 커지면 불가능하다. 순열의 시간복잡도가 O(N!)일 때 N의 값이 대략 11을 넘어가면 위험하기 때문이다. N 값이 매우 클 경우, DP를 이용해서 풀어야한다. DP + 비트마스킹dp[current][visited]: current 도시에서 남은 도시들을 모두 방문하여 출발점으로 되돌아가기 위한 최소비용current: current 현재 도시visited: 현재까지 방문한 도시들을 비트마스킹으로 표현해놓은 것 비트마스킹모든 도시를 방문한 경우 visited == (1(1 도시를 아직 방문하지 않은 경우v..

React Router단계1. react router 설치npm install react-router-dom 2. src/main.jsx 또는 src/main.tsx 파일을 열어 React Router의 BrowserRouter로 애플리케이션을 감싼다.import React from 'react'import ReactDOM from 'react-dom/client'import { Provider } from 'react-redux';import { store } from './app/store';import { BrowserRouter } from 'react-router-dom'import App from './App.jsx'ReactDOM.createRoot(document.getElementById..

Custom HookCustom Hook은 다음과 같은 경우에 사용하면 좋다고 한다.재사용성: 여러 컴포넌트에서 동일한 로직을 반복해서 사용하는 경우, Custom Hook으로 분리하면 코드를 재사용할 수 있어 유지보수가 용이하다.컴포넌트 가독성 향상: 컴포넌트 내부에 비즈니스 로직이 많아지면 가독성이 떨어질 수 있다. Custom Hook으로 로직을 분리하면 컴포넌트가 더 깔끔하고 이해하기 쉬워진다.단일 책임 원칙: 컴포넌트가 한가지 책임만 가지도록 하기 위해 Custom Hook을 사용해 로직을 분리하면 좋다. 이렇게 하면 각 컴포넌트가 명확한 역할을 가지게 되어 코드의 유지보수가 쉬워진다.상태 관리와 부수 효과 처리: 복잡한 상태 관리나 부수 효과(side effects)를 처리할 때, Custom..

CRA란 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다.*Esbuild: Go 언어로 작성된 JavaScript 빌드툴, 속도가 빠름 📌Webpack과 Vite의 차이점개발서버Webpack: 소스 코드와 모든 종속 관계의 모든 번들링 후 서버가 준비된다.Vite: Esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동된다.프로덕션 빌드Webpack: 각 모듈을 범위마다 함수로 매핑하여 결합한다.Vite: 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합한다. 중복을 제거하기 때..

🔎재사용 가능한 & 일관성 있는 컴포넌트 만들기버튼 컴포넌트를 재사용 가능하게 + 일관성 있게 만들어보자. 1. 목표/요구사항1) 버튼의 shape은 항상 동일해야 한다.버튼의 전체적인 모양은 변하지 않아야 한다. 즉, 어떤 크기를 갖든, 어떤 색을 갖던지 간에 border-radius, padding 값에 대한 속성들은 고정되어 있어야 한다. 2) variant props을 통해 preset된 색상을 선택할 수 있어야 한다.일관성 있는 디자인을 구현하기 위해 제한적으로 props를 통해 정의된 스타일을 적용할 수 있도록 만든다.미리 정의된 색을 variant라는 props을 이용하여 선택할 수 있도록 만든다. 3) size props를 통해 preset된 크기를 선택할 수 있어야 한다.색상과 마찬가지..