전체 글95 프로그램, 프로세스, 스레드: 멀티태스킹과 프로세스 동기화 오늘은 프로그램, 프로세스, 스레드에 대해 알아보고, 멀티태스킹 환경에서 발생하는 동기화 문제를 SpinLock, Mutex, Semaphore로 해결하는 방법에 대해 알아볼 것이다! 프로그램(Program)이란?프로그램은 어떤 문제를 해결하기 위해 컴퓨터에게 주어지는 처리 방법과 순서를 기술한 일련의 명령문의 집합체이다. 좀 더 쉽게 말하면, 컴퓨터에서 실행할 수 있는 명령어가 작성된 정적인 상태의 파일이라고 할 수 있다.프로그램의 특징정적(Static): 하드디스크나 SSD 등의 저장장치에 저장된 상태실행 가능한 파일: C/C++ 코드를 컴파일하여 생성되는 실행파일예시: Windows 기준으로 .exe 파일들 (chrome.exe, notepad.exe 등) 프로세스(Process)란?프로세스는 프로.. 2025. 7. 24. 함수형 프로그래밍의 핵심: 순수함수와 함수 조합을 코드로 이해하기 오늘은 함수형 프로그래밍에 대해 알아볼 예정이다. 오늘의 내용은 대부분 를 참고했으며, 해당 강의의 내용 정리라고 볼 수 있다! 함수형 프로그래밍이란?함수형 프로그래밍(Functional Programming)은 수학적 함수의 개념을 기반으로 하는 프로그래밍 패러다임이다. 함수형 프로그래밍을 말할 때는 주로 세 가지 핵심 키워드가 있다.순수함수(Pure Function): 동일한 입력에 대해 항상 같은 결과를 반환하며, 부수효과가 없는 함수불변성(Immutability): 데이터의 상태 변경을 허용하지 않는 특성선언적 프로그래밍(Declarative Programming): 문제 해결 과정보다는 결과에 집중하는 프로그래밍 방식이러한 원칙들을 바탕으로, 기존의 명령형 프로그래밍이 "어떻게(How) 할 것인.. 2025. 7. 24. 파일 시스템: VSFS, FAT 컴퓨터를 사용하는 우리는 매일 수많은 파일을 생성하고 저장하고 삭제한다. 하지만 이러한 파일들이 실제로 저장장치에 어떻게 저장되고 관리되는지에 대해서는 깊이 생각해보지 않는 경우가 많다. 파일시스템은 이러한 파일 관리의 핵심 메커니즘으로, 운영체제가 저장장치의 공간을 효율적으로 활용하고 데이터의 무결성을 보장하는 데 중요한 역할을 한다.이번 글에서는 교육용으로 널리 사용되는 VSFS(Very Simple File System), 오랫동안 표준으로 자리잡은 FAT(File Allocation Table)의 파일 구조와 동작 방식에 대해 알아보려고 한다!1. 파일시스템 기본 용어 정리파일시스템 (File System)파일시스템은 운영체제가 저장장치에서 파일과 디렉토리를 생성, 저장, 검색, 수정, 삭제할 수.. 2025. 7. 23. UML - 클래스 다이어그램(Class Diagram) 오늘은 객체지향 프로그래밍에서 설계할 때 각 클래스를 시각화하기 위해 클래스 다이어그램을 그려보려고 한다. UML이 무엇인지, 클래스 다이어그램의 정의와 표기법에 대해 정리해보겠다. UML이란?UML (Unified Modeling Language) 은 소프트웨어 시스템의 설계와 구조를 시각적으로 표현하기 위한 표준화된 모델링 언어이다. UML은 객체지향 분석 및 설계를 위해 개발된 그래픽 표기법으로, 복잡한 소프트웨어 시스템을 다양한 관점에서 모델링할 수 있다.시스템 구조를 그림으로 표현하기 때문에 팀원들 간에 명확한 소통이 가능하며, 시스템의 아키텍처와 설계 결정사항을 체계적으로 기록하고 유지보수할 수 있다. 클래스 다이어그램이란?클래스 다이어그램(Class Diagram) 은 UML 다이어그램의 한.. 2025. 7. 21. JS로 콘솔 프로그램 만들기: question 사용법과 콜백 지옥 타파 Python이나 C/C++로는 콘솔 프로그램을 만들어본 적이 있지만 JavaScript로는 만들어본 적이 없었다. 알고리즘 문제를 풀면서 여러 줄을 한 번에 받아본 적은 있지만, 사용자의 입력을 기다리면서 상호작용하는 프로그램을 만들기 위해서는 어떤 방법을 사용해야 할까?정답은 readline 모듈에서 제공하는 question 메서드다! readline.question() 기본 사용법question 메서드의 인터페이스는 다음과 같다.rl.question(query[, options], callback) 매개변수:query: 사용자에게 보여줄 질문 문자열options: 선택사항으로, AbortSignal을 통해 질문을 중단할 수 있는 옵션callback: 사용자 입력을 처리하는 콜백 함수 공식 문서 예제i.. 2025. 7. 15. [JavaScript] 백준 2206번: 벽 부수고 이동하기 문제 정보난이도 : 골드 3알고리즘 유형 : BFS문제 링크 : https://www.acmicpc.net/problem/2206 문제 풀이(1, 1)에서 (N, M)까지 이동하는 최단 경로를 찾는 문제다. 맵에는 벽이 있지만, 단 한 번만 벽을 부술 수 있는 능력이 있다. 모든 인접한 칸으로의 이동 비용은 동일하기 때문에 BFS를 활용하여 최단 경로를 구할 수 있다. 이 문제에는 벽을 한 번 부술 수 있다는 조건이 있다.따라서 동일한 위치에 도달하더라도 아래의 2가지 상태가 나올 수 있다.벽을 한 번도 부수지 않은 상태로 도달한 경우이미 벽을 한 번 부수고 도달한 경우앞으로의 경로 선택에 영향을 미치기 때문에, 이 두 상태는 서로 다른 상태로 관리해야 한다. 일반적인 BFS에서는 방문 여부를 bool.. 2025. 5. 12. [JavaScript] 백준 30804번: 과일 탕후루 문제 정보난이도 : 실버 2알고리즘 유형 : 투 포인터, 슬라이딩 윈도우문제 링크 : https://www.acmicpc.net/problem/30804 문제 풀이최대 2가지의 과일만이 존재할 수 있다.정답이 되는 위치를 미리 알 수 없으므로, 처음부터 시작하여 2가지의 과일만 사용한 가장 긴 꼬치를 찾아야 한다.기본 아이디어:새로운 탕후루 꼬치(newTanghuru) 배열을 만들어 현재까지 유효한 과일 조합을 관리한다.과일 종류를 추적하기 위해 Set 자료구조(currentTypes)를 사용한다.배열을 순회하면서 조건에 맞게 과일을 추가하거나 꼬치를 조정한다. 알고리즘 동작 과정 예시:예를 들어, 과일 종류가 [1, 2, 3, 2, 1, 3]이라고 가정해보자.처음 1을 만남: newTanghuru =.. 2025. 5. 11. 프로젝트 회고 - 투데잇: AI 기반 자동 식단 일기 프로젝트 소개'투데잇'은 사용자가 식사 사진을 업로드하면 AI가 자동으로 음식을 인식하고 칼로리와 영양소를 분석해주는 식단 관리 어플리케이션이다. "사진 한 장으로 완성되는 식단 기록"이라는 슬로건처럼, 복잡한 식단 기록 과정을 단순화하여 사용자들이 꾸준히 식단을 기록할 수 있도록 도와주는 서비스를 구현했다. 팀 협업의 가치이 프로젝트에서 가장 값진 경험은 진정한 협업을 경험했다는 점이었다. 모든 프로젝트에서 중요하지만 이번엔 특히 더 의미가 있었다. 우리 팀은 특정 개념에 대해 서로 다른 정의를 가지고 있어서 여러 의견 충돌이 있었기 때문이다. 그 중 가장 기억에 남는 2가지에 대해 말해보겠다. 구체적으로 컴포넌트 정의에서 처음에는 atomic하게 가기로 했다. 하지만 이 방식이 불필요한 컴포넌트를 .. 2025. 5. 10. Next.js에서 ClientOnly 컴포넌트로 클라이언트-서버 렌더링 일관성 문제 해결하기 Next.js의 하이브리드 렌더링 모델은 강력한 이점을 제공하지만, 동시에 클라이언트와 서버 간 렌더링 차이로 인한 도전 과제도 함께 가져옵니다. 우리 프로젝트에서는 9주간의 데이터를 보여주는 캘린더 캐러셀을 구현하면서 이러한 문제에 직면했습니다. 캐러셀은 과거 4주, 현재 주, 미래 4주의 데이터를 표시해야 했으며, 사용자가 화면을 처음 로드했을 때 자연스럽게 '현재 주'를 기본으로 보여주길 원했습니다. 하지만 캐러셀 라이브러리는 클라이언트 사이드에서만 완전히 동작하기 때문에, 서버에서 렌더링된 초기 HTML은 항상 캐러셀의 첫 번째 항목(4주 전 데이터)을 표시했습니다. 이후 JavaScript가 로드되고 실행되면 캐러셀이 의도한 '현재 주' 위치로 이동하게 되는데, 이는 사용자에게 갑작스러운 UI .. 2025. 5. 10. useFunnel 훅 트러블 슈팅: 리렌더링 및 Hydration 문제 해결 배경: 왜 useFunnel을 사용하게 되었을까?퍼널은 '깔대기'라는 의미로, 사용자가 특정 목표를 달성하기 위해 거치는 일련의 단계들을 말합니다. 우리 프로젝트에서는 회원가입, 비밀번호 찾기, 목표 설정처럼 여러 단계로 이루어진 프로세스가 많았습니다. useFunnel은 이런 다단계 프로세스를 더 쉽게 관리하려고 만들었습니다. 각 단계별 UI 컴포넌트 관리, 단계 간 데이터 전달, 그리고 특정 단계로 직접 접근을 편하게 하는 것을 목표로 했습니다.더 자세한 이야기는 이 글에서 확인하실 수 있습니다! useFunnel 훅 소개useFunnel 훅은 다단계 프로세스를 관리하는 커스텀 훅입니다. 사용자가 단계별로 데이터를 입력하고 자연스럽게 다음 단계로 넘어갈 수 있게 도와줍니다. 각 단계마다 입력된 데이.. 2025. 4. 30. Next.js에서 단계적 사용자 경험을 위한 useFunnel 훅 구현하기 회원가입, 결제 프로세스, 설문조사를 만들 때 개발자들이 공통적으로 겪는 문제가 있습니다. 바로 여러 단계를 효율적으로 관리하는 것입니다. 반복되는 로직을 매번 작성하고, 데이터를 관리하고, URL과 동기화하는 과정은 복잡하고 오류가 발생하기 쉽습니다.이 글에서는 이런 문제를 깔끔하게 해결할 수 있는 커스텀 훅 useFunnel을 단계적으로 구현한 경험을 공유합니다. 이 훅을 활용하면 다음과 같은 이점을 얻을 수 있습니다:코드 중복 없이 여러 단계 프로세스를 쉽게 구현타입스크립트의 강력한 타입 검증으로 런타임 오류 방지URL과 상태 자동 동기화로 페이지 공유와 새로고침 문제 해결세션 스토리지 통합으로 사용자 데이터 안전하게 보존직관적인 API로 다단계 프로세스를 명확하게 구현 Funnel 이란?퍼널은 '.. 2025. 4. 29. 투데잇: 개발 환경에서 Sentry 비활성화하기 - 문제와 해결 과정 안녕하세요! 오늘은 개발 환경에서는 Sentry를 비활성화하고 프로덕션 환경에서만 활성화하는 방법과, 해당 작업을 수행하며 겪은 오류 및 해결 과정을 공유하고자 합니다. Sentry란?먼저, Sentry는 애플리케이션의 오류를 실시간으로 모니터링하고 추적하는 도구입니다. 애플리케이션에서 발생하는 예외를 캡처하여 개발자에게 알림을 보내고, 오류의 원인을 분석할 수 있는 상세 정보를 제공합니다. Next.js를 포함한 다양한 프레임워크와 통합하여 사용할 수 있으며, 오류 추적뿐만 아니라 성능 모니터링 기능도 제공합니다. 왜 개발 환경에서 Sentry를 비활성화하려고 했나요?개발 환경에서 Sentry를 비활성화하려는 데에는 몇 가지 중요한 이유가 있습니다: 1. 빌드 시간 단축Sentry는 소스맵을 생성하.. 2025. 4. 2. 이전 1 2 3 4 ··· 8 다음
