컴파일러 기본 정리 컴파일러(Compiler)는 사람이 작성한 소스 코드를 컴퓨터가 이해할 수 있는 형태로 변환해주는 프로그램이다. 개발자는 Java, C, TypeScript 같은 언어로 코드를 작성하지만, 컴퓨터는 이 코드를 그대로 이해하지 못한다. 그래서 컴파일러가 코드를 분석하고 실행 가능한 형태 또는 다른 언어의 코드로 변환한다. 1. ...

패키지 관리자 기본 정리 패키지 관리자(Package Manager)는 프로젝트에서 사용하는 라이브러리와 도구를 설치, 삭제, 업데이트, 관리해주는 프로그램이다. 개발을 하다 보면 외부 라이브러리를 자주 사용하게 되는데, 패키지 관리자를 사용하면 필요한 의존성을 쉽게 관리할 수 있다. 1. 패키지란? 패키지는 재사용할 수 있도록 배포되는 코드 ...

프론트엔드 라이브러리 기본 정리 프론트엔드 프로젝트에서는 화면을 만드는 코드뿐만 아니라 스타일 관리, 코드 품질 관리, 컴포넌트 문서화, 테스트를 위한 도구도 함께 사용한다. 이번 글에서는 실무 프론트엔드 프로젝트에서 자주 볼 수 있는 vanilla-extract, Biome, Storybook, Vitest에 대해 간단히 정리한다. 1. van...

React 기본 정리 React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 화면을 여러 개의 컴포넌트로 나누어 관리할 수 있어 재사용성과 유지보수성이 좋다. 1. React의 핵심 개념 React에서 중요한 개념은 다음과 같다. Component: 화면을 구성하는 독립적인 UI 조각 JSX: JavaS...

React Hooks 기본 정리 React Hooks는 함수형 컴포넌트에서 상태 관리, 값 계산, 생명주기 처리 같은 기능을 사용할 수 있게 해주는 문법이다. 처음 Hooks를 공부할 때 useState, useMemo, useEffect가 비슷해 보일 수 있다. 특히 useMemo와 useEffect는 둘 다 두 번째 인자로 [] 배열을 받기 때...

JavaScript 기본 정리 JavaScript는 웹 페이지에 동작을 추가하는 프로그래밍 언어이다. HTML이 구조, CSS가 디자인을 담당한다면 JavaScript는 클릭 이벤트, 데이터 처리, 화면 변경 같은 기능을 담당한다. 1. JavaScript 사용 방법 HTML 파일에서 JavaScript 파일을 연결할 수 있다. <scri...

CSS 기본 정리 CSS(Cascading Style Sheets)는 HTML 요소에 디자인과 레이아웃을 적용하는 스타일 언어이다. HTML이 웹 페이지의 구조를 만든다면, CSS는 색상, 크기, 간격, 배치 등을 담당한다. 1. CSS 작성 방법 CSS는 HTML 안에 직접 작성할 수도 있고, 별도의 .css 파일로 분리해서 작성할 수도 있다....

HTML 기본 정리 HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 마크업 언어이다. 브라우저는 HTML 문서를 읽고 제목, 문단, 이미지, 링크, 버튼 같은 요소를 화면에 표시한다. 쉽게 말하면 HTML은 웹 페이지의 뼈대 역할을 한다. 1. HTML 문서 기본 구조 HTML 파일은 보통 아래와 같은 형태...

스택은 자동 메모리, 힙은 자유 저장소. 스택에는 힙 데이터의 “주소(포인터)”만 저장된다. 메모리 누수를 막으려면 힙 데이터는 사용 종료 시 free()로 해제한다. flowchart TB %% 세로 배치: Stack -> Heap -> Data -> Text Stack[스택] Heap[힙] Data[데...

사용자의 러닝을 좀 더 적극적으로 재미있게 하기 위해서 캐릭터를 키우면서 러닝을 하는 앱이다. 사용자는 러닝을 통해 캐릭터의 체중을 관리하고 목표 달성을 통해 추가 기능을 이용할 수 있게 한다. 위치 기반을 통해 매일 적당한 러닝 거리를 채우며 캐릭터의 건강도 관리하고 사용자 본인의 운동욕구도 북돋기 위함이다. 앱 소개 이름: 달리는 퉁퉁이 ...