☑ Study Note (TIL)

기록은 기억을 지배한다.

• 새로 학습한 내용을 소화한 후 정리하여 기록으로 남긴다.

• 기록한 내용은 카테고리에 맞게 분류하여 정리한다.

• 꾸준히 기록하도록 노력한다.

✔ Study Note 작성 규칙

• 다른 사람들도 읽었을 때 이해하기 쉽도록, 최대한 깔끔하고 가독성 좋게 기록한다.
• 기록은 일회성으로 끝내지 않고 지속적인 복습을 통해 더 정돈된 기록으로 남긴다.

---

📌 기본 언어

• 프로그래밍이란?

◻ Python

• Python - 출력 함수 print() 사용법
• Python - 입력 함수 input() 사용법
• Python - 사칙연산을 위한 연산자
• Python - 조건문
• Python - 1차원 리스트(배열)
• Python - 2차원 리스트(배열)
• Python - 문자열 다루기
• Python - 튜플 vs 딕셔너리 vs 집합
• Python - enumerate, zip 함수
• Python - 모듈
• Python - Call By Assignment
• Python - 변수 Scope (전역 변수와 지역 변수)
• Python - 정렬 내장 함수 sort, sorted
• Python - 정규표현식 (Regular Expression)
• 🧩 Python - 조각 지식 모음

◻ C / C# / C++

• C - 파일 입출력
• C# - Delegate (대리자)
• C++ - C++과 객체 지향 프로그래밍이란? (블로그 포스트)
• 🛠️ C++ - 자주 쓰이는 메소드 정리
• 🧩 C / C# / C++ - 조각 지식 모음

◻ Vanila JavaScript

• JavaScript 소개 (By MDN 문서)
• JavaScript의 역사 (준비 중)

JavaScript 기초

• JavaScript 통해 HTML 요소에 접근하기 + HTML 요소 생성해 삽입하기
• JavaScript 기본 1 - 사전 지식 약점 포인트
• JavaScript 기본 2 - 변수와 자료형, 상호작용, 형 변환
• JavaScript 기본 3 - 기본 연산자
• JavaScript 기본 4 - 비교 연산자
• JavaScript 기본 5 - 조건문 (if, else, switch), 논리 연산자
• JavaScript 기본 6 - nullish 병합 연산자 ??, 반복문 (for, while)
• JavaScript - 배열 관련 메서드 정리 (+ 화살표 함수)
• JavaScript - 객체 생성 및 사용법
• JavaScript - 이벤트 리스너 (Event Listener)
• JavaScript - 이벤트 활용하기
• JavaScript - 로컬 스토리지 (Local Storage)
• JavaScript - 시간과 관련된 함수 및 객체 (setInterval 함수, setTimeout 함수, Date 객체)
• JavaScript - 정규 표현식 (Regular Expression) 정리
• 🛠️ JavaScript - 내장 메소드 정리
• 🧩 JavaScript - 조각 지식 모음

JavaScript 심화

• JavaScript - 비동기 프로그래밍 (Execution Context)
• JavaScript - Promise
• JavaScript - Ajax, JSON, HTTP 통신
• JavaScript - 클로저
• JavaScript - Wapper Object(래퍼 객체)
• JavaScript - Object Prototypes (프로토타입)

📔 자바스크립트(+TS) 개념 총 정리 (김민태 프론트엔드 아카데미 1강 - 참조사전 학습 내용 정리)

📔 자바스크립트 코테를 위한 실용 문법, 메소드 정리

📌 Front-End

📒 ERROR NOTE - 개발 중 마주했던 🚨에러🚨들을 어떻게 해결했는지 간단히 기록하는 공간

◻ Web 상식 및 개발 방법론

• 웹 브라우저의 동작 원리 - 주소창에 naver.com을 치면 일어나는 일
• FE 디렉토리 구조
• 웹 애플리케이션의 성능을 최적화할 수 있는 방법

◻ HTML

• 웹 사이트의 구성과 HTML의 기본
• HTML의 다양한 태그

◻ CSS

• CSS의 소개와 기본 문법
• CSS - ID와 Class
• CSS - Display 속성 : Block과 Inline
• CSS - Display 속성 : Flexbox
• CSS - Display 속성 : Grid
• CSS - Position
• CSS - 결합자, 속성 선택자, 가상 클래스, 가상 요소
• CSS - 색상 체계, 사용자 지정 CSS 속성 (변수)
• CSS - Transition, 애니메이션
• CSS - Tranformation
• CSS - 미디어 쿼리 (Media Query)
• CSS - BEM (Block Element Modifier) (클래스 이름 짓기 규칙)
• CSS 핵 (Hack) 정리
• 🧩 CSS - 조각 지식 모음
• CSS Preprocessor - SASS
• CSS-in-JS - styled-components
• CSS에서 애니메이션을 적용할 때 성능에 유리한 속성이나 방법

◻ React JS

• React JS 소개 및 설치
• React JS 특징 + Virtual DOM
• React JS - JSX와 컴포넌트 (Component)
• React JS - SPA & Routing
• React JS - react-router를 적용한 React 앱을 webpack으로 빌드하고 Github Page로 배포하기
• React JS - Hook & State & Props
• React JS - Side Effect와 useEffect
• React JS - 상수 데이터 & Mock Data + fetch 매소드
• React JS - Component의 분리와 재사용 (관심사의 분리)
• React JS - Dynamic Routing & Query String
• React JS - Custom Hook
• React JS - 프론트엔드 서버 통신 (ajax, fetch, axios)
• 🧩 React - 조각 지식 모음

React 심화

• React JS - 라이프사이클 기능
• React JS - React Hooks와 상태 업데이트
• React JS - 렌더링 최적화
• React JS - 상태 관리 (Redux, Context API, Zustand)
• React JS - 성능 최적화 방법

◻ TypeScript

• TypeScript 소개 및 설치
• TypeScript 개론
• TypeScript 초기 세팅 및 타입 종류
• TypeScript 타입의 원리
• TypeScript - 함수와 타입
• TypeScript - 인터페이스 (Interface)
• TypeScript - 클래스 (Class)
• TypeScript - 제네릭 (타입 변수)
• TypeScript - 타입 설명 방식

◻ Animation

• CSS - Transition, 애니메이션
• CSS - Tranformation
• React JS - Framer Motion

◻ Next JS

• CSR vs SSR
• Next JS 소개

◻ Project Setting + Etc.

• CRA를 통해 팀 프로젝트 세팅하기
• (CRA 없이) 개인 프로젝트 직접 세팅하기

📌 Back-End

◻ Node JS

• Node JS & NPM 소개 및 설치
• Express 프레임워크를 이용한 웹 서버 구축해보기

📌 Computer Science

◻ 자료구조

• 자료구조 소개

순차적 자료구조

• 배열 vs 리스트
• 스택 (Stack)
• 큐 (Queue)
• 덱 (Deque)
• 연결 리스트 - 기본 개념
• 연결 리스트 - 단방향 연결 리스트
• 연결 리스트 - 양방향 연결 리스트 (원형 연결 리스트)
• 연결 리스트 - Iterator
• 해시 테이블 - 기초 개념
• 해시 테이블 - 해시 함수
• 해시 테이블 - 충돌 회피 방법 - Open Addressing의 Linear Probing

트리(Tree) 구조

• 트리 기본 개념
• 이진 트리
• 힙 (Heap)
• 힙 (Heap) - make_heap 연산
• 힙 (Heap) - insert, find_max 와 delete_max 연산
• 이진 탐색 트리 (Binary Search Tree / BST)
• 이진 탐색 트리 (Binary Search Tree / BST) 의 삭제 연산
• 균형 이진 탐색 트리 (Balanced BST)

◻ 알고리즘

• 알고리즘 소개
• 시간 복잡도

◻ 컴퓨터 구조

• 컴퓨터 구조 시작하기
• 컴퓨터 구조의 큰 개요
• 2진수 체계
• 불 논리
• PC 하드웨어 - CPU 개요
• 프로세스 메모리의 네 가지 영역 그리고 힙(Heap)

◻ 운영체제

• 운영체제란 무엇일까? (정의, 종류, 역할) (블로그 포스트)
• 시스템의 구조 (사용자 영역, 커널 영역, 하드웨어)
• 프로세스와 스레드
• 프로세스가 만들어지는 과정 (라이프사이클)
• 하드웨어의 추상화 (Abstraction), 동시성 (Concurrency), 보안 (Security)
• 🧩 운영체제 - 조각 지식 모음

리눅스(Linux) 시스템 프로그래밍

• 리눅스 개요
• 파일 I/O Part 1 (Linking, 파일 스트림과 디스크립터, 라이브러리 버퍼)
• 파일 I/O Part 2 (Part 1 복습, 버퍼 심화, 파일 관련 라이브러리 함수)
• 파일 I/O Part 3 (File Offset)
• 리눅스 파일 관리 시스템 Part 1 (inode, File Discriptor)
• 리눅스 파일 관리 시스템 Part 2 (v-node, Link)
• 리눅스 파일 관리 시스템 Part 3 (파일 접근 권한)
• 리눅스 프로세스 관리 Part 1 (fork, exec 시스템 콜)
• 리눅스 프로세스 관리 Part 2 (Multitask Scheduling과 Race Condition 문제 + Process Control 시스템 콜)
• 리눅스 프로세스 관리 Part 3 (멀티 쓰레드)
• 리눅스 프로세스 관리 Part 4 (Pthread Library)
• 리눅스 프로세스 관리 Part 5 (Mutex)
• 리눅스 프로세스 관리 Part 6 (Record Lock)

운영체제 (Opearting System)

• 1. 컴퓨터 시스템과 OS
• 2. OS의 역사
• 7. OS의 구조 (OS Structure)

◻ 네트워크

• 데이터 통신 소개 및 네트워크 기초

◻ 데이터베이스

(준비중)

📌 Data Science

◻ 데이터 마이닝

• Numpy 배열 기초
• Numpy 배열 기초 Part 2

🎮 Game Development

◻ 유니티 (Unity)

• 유니티 소개 및 설치
• 유니티 (Unity) - C# 스크립트 정리

◻ 게임 서버 (Game Server)

• Game Server란?

📌 Etc.

• ⚙️ 개발자 도구

◻ 깃 (Git)

• 명령어 정리 (터미널, 깃)
• Git - 깃으로 자신의 레포지토리 (Repository) 관리하기
• Git - 깃으로 Branch (브랜치) 생성하여 협업하기
• Git - 깃으로 Branch (브랜치) 생성하여 협업하기 심화 (+ 오류 해결하기)
• Git - CRA를 통해 팀 프로젝트 세팅하기
• Git - (CRA 없이) 개인 프로젝트 직접 세팅하기
• Git - Peer Review
• Git - Rebase를 통해 커밋 하나로 압축하기
• 🧩 Git - 조각 지식 모음

◻ UI, UX 및 웹 디자인 (Web Design)

• 웹 디자인의 기초 - 레이아웃
• 웹 디자인 Tips

◻ 아두이노 (Arduino)

• 아두이노의 학습 목적 및 소개

💻 교육 과정 참여

⌨ CodeSoom 리엑트 11기 (2022.08.01 ~ 2022.10.02)

🦁 멋쟁이 사자처럼 11기 스터디를 위한 학습 내용 정리 (2023.04.29 ~ 2023.07)