메모리 주소를 직접 관리하는 것은 쉽지 않기 때문에, C에서는 포인터라는 개념을 통해 변수의 주소를 쉽게 저장하고 접근할 수 있다. 포인터에 대해 알아보자.포인터 변수* 연산자는 어떤 메모리 주소에 있는 값을 받아오게 해준다. 이 연산자를 이용해 포인터 역할을 하는 변수를 선언할 수 있다.#include int main(void){ int n = 50; int *p = &n; printf("%p\n", p); printf("%i\n", *p);}// 출력 예시// 0x7ffe00b3adbc// 50int n = 50; - 정수형 변수 n에 50 저장int *p = &n; - 포인터 변수 p에 변수 n의 주소 저장printf("%p\n", p); - 포인터 p의 값(변수 n의 주소) ..

New 페이지에서 일기를 작성할 수 있는 기능을 구현했다.날짜 선택, 감정 선택, 일기 내용 입력이 가능하며, 날짜 포맷팅 유틸리티를 통해 일관된 날짜 형식을 유지한다.날짜 포맷팅 유틸리티formatWithZero 함수날짜를 두 자릿수로 일관되게 표시하기 위한 함수다.const formatWithZero = (number: number) => number 숫자가 10보다 작을 경우 앞에 0을 붙여 반환한다. getStringDate 함수날짜 데이터를 원하는 문자열 형식으로 변환하는 함수다.export const getStringDate = ( targetDate: Date | string | number, format: string = "yyyy-mm-dd") => { const dateObj =..

메모리 주소C로 작성한 변수들은 실제로 컴퓨터 메모리에 어떻게 저장될까? 메모리 주소를 나타내는 방법과 그 주소를 알아내는 방법, 그 주소에 찾아가는 방법을 알아보자. 16진수컴퓨터 과학에서는 숫자를 10진수나 2진수 대신 16진수(Hexadecimal)로 표현하는 경우가 많다. 16진수를 사용하면 10진수보다 2진수를 나타내기가 더 편리하기 때문이다.10진수를 16진수로 바꾸기JPG 이미지 파일은 항상 255 216 255로 시작하는데, 이것은 10진수다. 하지만 컴퓨터는 0과 1만 이해할 수 있기 때문에 실제로는 10진수를 사용하지 않는다.16진수에서는 10부터 15까지를 a - f로 표현한다. 그리고 0x를 붙여 뒤에 오는 문자들이 16진수임을 알린다. 변환 예시:15: 0x0f16: 0x1017:..

Home 페이지에서 월별 일기 데이터를 관리하고 정렬하는 기능을 구현했다. 사용자가 월을 전환하며 해당 기간의 일기만 볼 수 있고, 최신순 또는 오래된순으로 정렬할 수 있다.날짜 및 기간 관리현재 날짜 표시 및 월 변경pivotDate상태로 현재 표시 중인 월을 관리하고, 좌우 버튼으로 이전/다음 달로 이동할 수 있도록 구현했다.const [pivotDate, setPivotDate] = useState(new Date());const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1));};const onDecreaseMonth = () => { setPivotDate(new..

문제 상황일기 목록의 정렬 기능을 구현하면서 Array.prototype.sort대신 Array.prototype.toSorted를 사용하려고 했는데, 타입스크립트가 이 메서드를 인식하지 못하는 문제가 발생했다.sort vs toSortedsort: 배열을 정렬하고 원본 배열을 변경toSorted: 배열을 정렬하되 원본을 변경하지 않고 새 배열 반환불변성을 유지하기 위해 toSorted를 사용하려 했지만, 타입스크립트에서 타입 오류가 발생했다. 원인 분석tsconfig.json의 EXMAScript 버전 설정을 확인해보니, ES2020으로 설정되어 있었다.{ "compilerOptions": { "target": "ES2020", "module": "ES2020", // ... }}E..

병합 정렬(Merge Sort)은 원소가 한 개가 될 때까지 계속 반으로 나누다가 다시 합쳐나가며 정렬하는 방식이다.이 과정은 재귀적으로 구현된다.동작 원리다음 숫자들을 오름차순으로 정렬해보자.7 4 5 2 6 3 8 1 1단계: 분할숫자들을 반으로 계속 나눈다.7 4 5 2 | 6 3 8 17 4 | 5 2 | 6 3 8 17 | 4 | 5 2 | 6 3 8 1 원소가 한 개가 될 때까지 나눈다.7 | 4 | 5 | 2 | 6 | 3 | 8 | 1 2단계: 병합이제 작은 숫자가 먼저 오도록 병합한다.숫자 1개씩 병합:4 7 | 2 5 | 3 6 | 1 8 숫자 2개씩 병합:4 7과 2 5를 병합: 2와 4 비교 → 2, 4와 5 비교 → 4, 7과 5 비교 → 5, 7 남음2 4 5 7 | 1 3 6 ..

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션하면서, 기존에 자바스크립트로 작성된 공용 컴포넌트들을 타입스크립트로 재작성했다. 기존 프로젝트에서 이미 Button과 Header 같은 재사용 가능한 컴포넌트를 구현해두었지만, 타입 안정성이 부족했다. 타입스크립트를 도입하면서 props의 타입을 명확히 정의하고, 컴파일 타임에 오류를 잡을 수 있도록 개선했다.Button 컴포넌트props 타입 정의text, type, onClick 세 가지 props의 타입을 명시적으로 정의했다.type ButtonProps = { text: string; type: "DEFAULT" | "POSITIVE" | "NEGATIVE"; onClick: () => void;};export defau..

문제 상황Vite + TypeScript 환경에서 tsconfig.json에 정의된 절대 경로 별칭(@) 을 사용하여 모듈을 import했는데 오류가 발생했다. 원인 분석절대 경로를 설정할 때 기존에 CRA에서 사용하던 방식과 똑같이 tsconfig.json에 설정을 해주었었다.{ "paths": { "pages/*": ["pages/*"], "components/*": ["components/*"], "util/*": ["util/*"] },}그런데 알고보니 이 설정이 타입스크립트에만 유효하고, Vite는 이를 직접적으로 해석하여 모듈을 로드하지 않는다고 한다. 각각의 역할tsconfig.json의 paths: 타입스크립트가 타입 검사를 위해 사용vite.config.ts의 reso..

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션 하려고 한다. 기존의 프로젝트는 강의를 따라서 React와 CSS, LocalStorage를 이용해 만든 반응형 웹 애플리케이션이다.일기는 날짜와 감정, 그날의 기록으로 구성되어 있고, 기본적인 CRUD 기능과 정렬 및 감정 필터링 기능을 구현했었다.이 프로젝트에 최신 기술 스택을 반영하고 추가 기능을 구현해서 나만의 새로운 AI 감성 일기장을 만들어보려고 한다. 기술 스택 변경빌드 도구CRA(Create React APP)에서 Vite로 변경하려고 한다.Vite는 CRA보다 개발 서버 시작 시간과 빌드 시간이 훨씬 빠르다.(미리 번들링을 하지 않고 네이티브 ES 모듈을 활용하기 때문이다.)소스 코드를 수정했을 때 변경 사항이 브라우..

알고리즘을 구현할 때 동일한 작업을 반복해야 할 때가 있는데 이를 함수로 구현하면 코드를 효율적으로 만들 수 있다. 그렇다면 함수 내에서도 동일한 작업이 반복되는 경우는 어떻게 해야 할까?함수를 함수 내에서 재사용하는 방법, 즉 재귀적으로 호출하는 방법을 알아보자.재귀란지금까지 우리는 main 안에서 프로그램을 작성하면서 필요한 순간에 함수를 호출했다. main도 함수이므로 함수 안에서 또 다른 함수를 사용한 것이다. 함수 안에서 다른 함수를 호출하는 것처럼, 자기 자신을 호출할 수도 있는데 이를 재귀(Recursion)라고 부른다. 반복문으로 피라미드 그리기피라미드 모양을 출력하는 코드다.#include #include void draw(int h);int main(void){ int height..