1️⃣ 버블 정렬 (Bubble) loop를 돌면서 인접한 데이터 간의 swap 연산을 통해 정렬하는 방식 - 시간 복잡도 : O(n^2) - 다른 정렬 알고리즘보다 속도가 느린 편 N개의 데이터를 정렬한다고 가정하면, 루프를 한번 돌때마다 맨 뒤에 데이터부터 하나씩 픽스해 나간다. → 루프를 한번 도는데 N번의 비교를 하니 N의 시간복잡도를 가진다. → 그 루프를 N번 돌아야 모든 데이터가 정렬된다. 한 번 도는데 N의 시간복잡도를 가지는 루프를 N번 도니까 버블정렬의 시간복잡도가 n^2이다. 버블 정렬 구현 과정 말로 풀어 써보기 1) 비교 연산이 필요한 루프 범위를 설정한다. 2) 인접한 데이터 값을 비교한다. 3) swap 조건에 부합하면 swap 연상을 수행한다. 4) 루프 범위가 끝날 때까지 ..
1️⃣ 구간 합 합 배열을 이용하여 시간 복잡도를 줄이기 위한 알고리즘 합 배열 S S[i] = A[0] + A[1] + ... + A[i-1] + A[i] 기존 배열의 일정 범위의 합을 구하는 시간 복잡도가 O(N)에서 O(1)로 감소 합 배열을 구하는 방법은 S[0] = A[0] S[i] = S[i-1] + A[i] 예를 들어, 배열 A와 배열 A의 합 배열 S는 다음과 같다. A = [1, 2, 3, 4, 5] S = [1, 3, 6, 10, 15] 구간 합을 구하는 방법 배열 A의 인덱스 i부터 j까지의 구간 합을 구하고 싶다면 S[j] - S[i-1] 예를 들어, A = [15, 13, 10, 7, 3, 12] 라는 배열에서 A[2]부터 A[5]까지의 구간 합을 구하면 S[5] = A[0] + ..
✅ 자바스크립트에서 식별자(Identifier)란? 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열이다. 즉 변수, 함수, 속성 명을 지을 때 사용하는 이름이다.let age = 31function setAge() {}const o = { day: 6,}// age, setAge, o, day가 식별자 - 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없다.- 공백문자는 사용할 수 없다.- 자바스크립트 예약어(if, else, for 등..)는 사용할 수 없다.- 길이 제한은 없으나 통상적으로 길게 쓰지는 않는 편이다.- 식별자는 코드의 일부이지만 문자열은 데이터이기 때문에 식별자와 문자열은 다르다.- 식별자를 문자열로 변환하는 방법은 ..
🌅 기획 배경저는 몸에 이상이 생겼을 때 “이거 전에도 이랬던거 같은데 언제였더라?”, “이거 처음이 아니면 문제있는건가? 병원에 가야하나?” 라는 고민을 자주하는 편입니다. 이런 고민을 자주 하다보니 몸에 이상이 생겼을 때마다 핸드폰 기본 다이어리에 기록하고 있는데 이걸 편하게 관리할 수 있는 앱이 있다면 좋겠다고 생각했습니다. 연령대에 관계없이 건강에 대한 관심이 증대되고 있는 요즘, 개인차원에서 건강관리를 목적으로몸상태를 다이어리처럼 매일 기록하고 관리할 수 있는 서비스가 있었으면 좋겠다고 생각했습니다. 또한, 몸이 아파 병원에 방문했을 때 단편적인 현재 증상의 서술만으로 진료를 받아진료결과가 정확하지 않거나 처방에 대해 만족하지 못한 경우가 종종 있지 않았나요? 매일 몸 상태를 기록하고, ..
1️⃣ DFS (깊이 우선 탐색) 그래프 완전 탐색 기법 중 하나로, 그래프의 시작 노트에서 출발하여 탐색할 한 쪽 분기를 정하여 최대 깊이까지 탐새을 마친 후 다른 쪽 분기로 이동하여 다시 탐색을 수행하는 알고리즘 (완전 탐색이란 그래프에 있는 모든 노드를 탐색하는 것) 특징 - 재귀 함수로 구현 - 스택(Stack) 자료구조 이용 - 시간 복잡도는 O(V+E) V : 노드 수, E : 예지 수 깊이 우선 탐색을 응용하여 풀 수 있는 문제 단절점 찾기, 단절선 찾기, 사이클 찾기, 위상 정렬, ... DFS 핵심 이론 DFS는 한 번 방문한 노드를 다시 방문하면 안 되므로 노드 방문 여부를 체크할 배열이 필요하다. 그래프는 인접리스트로 표현하고, 스택을 사용하여 DFS를 구현해보자. 1) 시작 노드를 ..
알고리즘에서 시간 복잡도는 주어진 문제를 해결하기 위한 연산 횟수를 의미한다. 그래서 시간 복잡도는 코딩테스트를 풀 때 어떤 알고리즘을 사용할지에 대한 선택의 기준이 된다. 예를 들어, 파이썬 프로그램에서는 2,000만번~1억 번의 연산을 1초의 수행 시간으로 예측할 수 있으므로 연산 횟수와 수행 시간을 고려하여 어떤 알고리즘을 써야할지 생각해 볼 수 있다. 물론, 시간 복잡도만으로 어떻게 문제를 풀지 선택하는 것은 아니지만 데이터의 갯수에 따라 시간 복잡도를 계산할 줄 알면 써야하는 알고리즘의 범위를 좁힐 수 있게 된다. 시간 복잡도 표기법 시간 복잡도를 정의하는 3가지 유형이 있다. 빅-오메가 Ω(n)최선일 때(best case)의 연산 횟수를 나타낸 표기법빅-세타 θ(n)보통일 때(ave..
원티드에서 진행하는 4월 프리온보딩 프론트엔드 챌린지 내용이 React 랜더링, 최적화에 관한 내용이라 들어보고 싶어서 신청하였다. 사전과제로 아래와 같은 4가지 질문이 있어서 공부하면서 내용을 정리해보았다. React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기가 존재하고 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 클래스 컴포넌트에서는 라이프사이클이 컴포넌트 중심에 맞춰져 있다. 컴포넌트가 마운트되려 할 때, 마운트 되고나서, 업데이트 되었을 때, 언마운트 될때 실행된다. 모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할..
ChatGPT에게 사람들이 React를 사용하는 이유가 무엇인지 물어보았다. chatGPT의 답변을 정리해보자면 사람들이 React를 사용하는 이유는 다음과 같다. 1) 재사용이 가능한 컴포넌트 기반 개발이 가능하여 복잡한 UI를 쉽게 관리할 수 있다는 점. 2) Virtual DOM (가상돔)을 사용함으로써 페이지의 나머지 부분에 영향을 주지않고 UI 변경사항을 빠르게 업데이트하고 렌더링하여 성능을 향상시킬 수 있다는 점. 3) 선언적 구문을 사용하여 코드 작성 및 추론이 쉬워진다는 점. 4) 온라인 포럼 및 리소스를 통해 지원을 제공하는 대규모 개발자 커뮤니티가 존재한다는 점. 5) 다른 라이브러리 및 프레임워크와 함께 사용할 수 있어 유연하고 다양한 프로젝트와 호환된다는 점. 6) 확장가능하도록 설..
프로토타입(Prototype) 이란? 자바스크립트에서는 객체를 상속하기 위해 프로토타입(prototype)이라는 방식을 사용한다. 자바스크립트의 모든 객체들은 메서드와 속성을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며, 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이 된다. → 상속되는 속성과 메서드들은 각 객체가 아니라 객체의 생성자의 프로토타입이라는 속성에 정의되어 있는 것이다. 자바스크립트에서는 객체 인스턴스와 프로토타입 간의 연결이 구성..
아래와 같은 jsx코드가 있다고 했을 때 {user.name} {board[0]} {board[1]} 화면에는 아래처럼 그려진다. 윤두준 잘생겼다. 귀엽다. 그런데 데이터에 수정이 생기면, 예를 들어 "윤두준"을 "양요섭"으로 바꾸면 화면을 다시 그려야 화면에 보여지는게 바뀐다. 화면을 다시 그리기 위해 h1, ul 모두 다시 그릴 필요없이 바뀐 h1의 텍스트("윤두준")부분만 바뀌면 가장 좋을 텐데 리액트는 React Element로 되어있기 때문에 최소한 Element 단위, 여기서는 h1 Element를 다시 그린다. JSX는 아래와 같은 형태의 자바스크립트 코드로 컴파일되는데 React.createElement(component, props, ...children) 그럼 위 jsx의 h1과 ul은..
