오늘은무엇을만들까

이진 탐색

이진 탐색이란 순차 탐색: 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 확인하는 방법. 이진 탐색: 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법. 시작점, 끝점, 중간점을 이용하여 탐색 범위를 설정한다.시간 복잡도 단계마다 탐색 범위 = 탐색 범위 / 2이므로 연산 횟수는 log2(N)에 비례한다. 다시 말해 이진 탐색은 탐색 범위를 절반씩 줄이며, 시간 복잡도 O(logN)을 보장한다.

퀵 정렬, 계수 정렬

퀵 정렬 기준 데이터를 설정, 그 기준보다 큰 데이터와 작은 데이터의 위치를 바꾸는 방법이다. 일반적인 상황에서 가장 많이 사용되는 정렬 알고리즘 중 하나이다. 병합 정렬과 더불어 대부분의 프로그래밍 언어의 정렬 라이브러리의 근간이 되는 알고리즘이다. (e.g. C, Java, Python) 가장 기본적인 퀵 정렬은 첫 번째 데이터를 기준 데이터(Pivot)으로 설정한다. 동작 방식 빠른 이유 시간 복잡도 퀵 정렬은 평균의 경우 O(NlogN)의 시간 복잡도를 가진다. 하지만 최악의 경우, O(N^2)의 시간 복잡도를 가진다. 계수 정렬 특정한 조건이 부합할 때만 사용할 수 있지만, 매우 빠르게 동작하는 정렬 알고리즘이다. 계수 정렬은 데이터의 크기 범위가 제한되어 정수 형태로 표현할 수 있을 때 사용 ..

선택 정렬, 삽입 정렬

정렬(Sorting) 데이터를 특정한 기준에 따라 순서대로 나열하는 것 선택 정렬 처리되지 않은 데이터 중에서 가장 작은 데이터를 선택, 맨 앞에 있는 데이터와 바꾸는 것을 반복한다.시간 복잡도 선택 정렬은 N번만큼 가장 작은 수를 찾아 맨 앞으로 보내야 한다. 구현 오차를 무시하면 이는 (N^2 + N - 2) / 2, 즉 O(N^2)으로 표기된다. 삽입 정렬 처리되지 않은 데이터를 하나씩 골라 적절한 위치에 삽입한다. 선택 정렬에 비해 구현 난이도가 높은 편이지만 일반적으로 더 효율적으로 동작한다.

DFS / BFS

탐색(Search)이란 많은 양의 데이터 중에서 원하는 데이터를 찾는 과정을 말한다. 대표적인 그래프 탐색 탐색 알고리즘이 바로 오늘 다룰 DFS, BFS이다. 이 둘은 코딩 테스트에서 매우 자주 등장하는 유형이므로, 반드시 숙지하는 것이 좋다. 이러한 알고리즘들을 사용하기 위해서는, 우선 몇 가지 자료구조를 알아야 한다. 선행되는 자료구조 스택 (Stack) 먼저 들어온 데이터가 나중에 나가는 형식(선입후출, First-In-Last-Out, FILO)의 자료구조 입구와 출구가 동일한 형태로 스택을 시각화할 수 있다. (예: 프링글스 통) 큐 (Queue) 먼저 들어온 데이터가 먼저 나가는 형식(선입선출, First-In-First-Out, FIFO)의 자료구조 큐는 입구와 출구가 모두 뚫려 있는 형태..

구현 유형

구현 유형 구현이란, 머릿속에 있는 알고리즘을 소스코드로 바꾸는 과정이다. 이에 따르면, 사실상 모든 알고리즘 문제를 구현 문제라고 할 수 있겠다. 그래서 어떠한 문제를 구현 문제라고 부르면, 풀이를 떠올리는 것은 쉽지만 소스코드로 옮기기 어려운 문제를 지칭한다. 예시 알고리즘은 간단하나, 코드가 지나치게 길어지는 문제 실수 연산을 다루고, 특정 소수점 자리까지 출력해야 하는 문제 문자열을 특정한 기준에 따라 끊어 처리해야 하는 문제 적절한 라이브러리를 찾아 사용해야 하는 문제 구현 문제에서의 행렬 구현 문제에서는 2차원 배열 형태로써 행렬을 사용하는 경우가 많다. 특히 시뮬레이션, 완전 탐색 문제에서는, 배열을 통해 2차원 공간에서의 방향 벡터가 자주 활용된다. 예시 문제 위의 문제가 동, 북, 서, ..

그리디 알고리즘

최근 알고리즘 공부를 대학교 동아리 스터디에서 진행하게 되었다. 스터디의 진행 방식은 유튜브를 통해 나동빈님의 알고리즘 강의를 보고, 내용을 정리, 주어진 문제를 파이썬으로 푸는 방식이다. 이때 정리한 내용을 동아리 Notion 페이지에 올리게 되는데, 추후 따로 다시 공부하거나, 또 훗날 누군가 이 velog 글을 보며 공부할 때를 위해 알고리즘을 정리한 글을 velog에 남기려 한다. 이제 시작해 보자. 참고한 강의는 아래의 강의이다. https://youtu.be/5OYlS2QQMPA?si=77wCe6SQRnNbqIA7 그리디 알고리즘 그리디 알고리즘이란 그리디 알고리즘이란 Greedy(탐욕적인)라는 이름답게, 단순히 현재의 주어진 상황에서 가장 나은 선택지를 구하는 것, 즉 최적해를 구하는 것이다..

React 기초 정리 - 6장 (Delete 기능 구현, 마무리)

React 기초 정리 시리즈의 마지막 정리이기도 한 이번 6장에서는, CRUD 구현의 마지막인 Delete 기능의 구현에 대해 알아보겠다. 이번에도 5장에 이어 egoing님의 코드를 약간 필자의 입맛에 맞게 리팩토링한 코드를 사용할 것이며, 전체 코드는 5장 최하단부에 나와 있다. 시작하자. Delete 기능 구현 우선, Create, Update와 마찬가지로 Delete 기능을 사용하기 위한 버튼을 만들어 주어야 한다. 이전 장들에서 구현했던 Create, Update와는 다르게, Delete 기능은 특정 페이지(링크)로 이동하지 않고 읽고 있던 topics 내 원소를 즉각 삭제하므로, a 태그가 아닌 button 요소를 이용한다. 해당 button은 사용자가 topics 내 원소를 읽는 중에만 작동..

React 기초 정리 - 5장 (Update 기능 구현)

이번 5장에서는 CRUD 중 Update의 기능에 대해 다루어 보려고 한다. egoing님의 말을 빌리자면, Update는 Create와 Read의 기능을 조금씩 합쳐(하이브리드) 구현한다. 코드는 지난 정리 4강에서 최종 완성된 코드를 사용해, 계속해서 편집할 것이다. (최종 코드 전문은 React 기초 정리 4강 말단에 있다.) 시작해 보자. Update 기능 구현 요구사항 우선, Update 기능을 위해 구현해야 할 것들은 다음과 같다. 유저가 글을 읽는 상황(SUB 모드)에서, Update 버튼이 Create 아래에 표시된다. 이 버튼을 누르면 유저가 읽고 있던 항목의 정보를 담은 title, body 입력(수정)창과 그 아래 Update 버튼이 표시된 Update 화면으로 본문이 변경된다. 내용..

React 기초 정리 - 4장 (CRUD, Create 기능 구현 + 객체 State의 변경)

CRUD에 관한 간단한 설명과, 그 중 하나인 Create 기능의 React로의 구현을 4장에서 다룬다. CRUD란? CRUD란 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로, 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다. 이미 CRUD를 안다면 웬 뜬금없는 CRUD인가 할 수 있지만 우리가 지금껏 구현해 온 기능들은 모두 CRUD 중 Read(읽기)에 속한다. 유저에게 그들이 읽을 수 있는 정보를 보여주는 방법을 배운 것이다. 이제 CRUD 중 C, U, D를 알아볼 차례다. Create 기능 구현 3장의 정리까지는 (생활코딩) egoi..

React 기초 정리 - 3장 (이벤트, State)

이번 장에서는 이전 2장의 Props를 이용해 이벤트를 관리하는 것부터 정리할 것이다. 시작해 보자. 이벤트 (Event) Vanilla JS에서 Script로서 event 객체 넘겨받는 그 이벤트랑 같은 이벤트다. 그래서 영어로도 언급했다. 사용법 우선 2장과 비슷한 코드로 계속해서 실습 예시를 보자. 2장과 같은 코드에, topics에서 text key를 삭제하고, 태그를 추가했다. (당연히 Header 컴포넌트도 작성했다.) 그 결과 이런 뷰가 나타나게 된다. 우리는 여기서 을 클릭할 경우 '안녕!!!!!'이라는 문구가, 아래 를 클릭할 경우 각 의 key가 alert으로 표시되도록 하고 싶다. 처음으로 할 것은, App 함수 내 타깃 태그들에 props로 넘길 함수들을 생성해 줘야 ..

React 기초 정리 - 2장 (배포, 컴포넌트, Props + 중괄호 문법)

React 기초 정리 1장에 이어, 2장에서는 배포와 문법들에 대해 설명하고자 한다. 배포 터미널에 다음 과정을 수행하면, React 앱의 배포 버전을 생성할 수 있다. npm run build를 입력한다. 메인 디렉토리에 'build' 폴더가 생성된다. npx serve -s build를 입력한다. 이 명령어는 build 폴더 속 index.html 파일을 실행하는 웹서버를 구동한다. 서버 구동과 동시에 접속 주소를 알려 준다. 이제 개발 환경 설정, 배포를 알아보았으니, 어떻게 React 코드를 작성하는지에 대해 알아보겠다. 컴포넌트 React에서는 HTML DOM의 재사용성과 코드 가독성을 높이기 위해 사용자 정의 태그를 선언하여, 여러 태그를 그룹핑하여 사용한다. React에서는 이..

React 기초 정리 - 1장 (React란, 개발 환경 설정, 폴더 구조)

웹 개발을 본격적으로 해야겠다고 생각한 후, 종강하면 꼭 요즘 프론트엔드 세계에서 기본이라는 React를 마스터.. 까지는 아니더라도 손에 익혀야겠다고 생각했다. 매일 React를 공부하려고 다짐해도 육각별만 띄우다 끝나던 나날들.. 이제는 청산하기로 마음을 먹고, 개인적으로 가장 강의 스타일이 담백 & 깔끔하고 무엇보다 가격이 무료인 생활코딩의 egoing님 강의로 리액트를 배워보았다. 아래는 강의를 모두 듣고 그 내용을 정리한 것이다. egoing 만세 생활코딩 만세 생활코딩에서 볼 수 있는 강의는 위와 같이 10개의 동영상으로 준비되어 있었으나, 아래의 Index 제목들은 편의에 의해 필자가 새로 작성했다. (생활코딩 React 강의 주소: https://opentutorials.org/course..