썸네일 Apps-in-Toss 미니앱 ‘모닝 숏뉴스’ 출시기 매일 아침, 핵심만 가볍게: Apps-in-Toss 미니앱 ‘모닝 숏뉴스’ 출시 준비기아침마다 뉴스를 확인하려고 여러 앱과 기사를 오가는 경험은 생각보다 피로합니다. 하루 동안 발생한 이슈가 무엇인지 빠르게 파악하고 싶은데, 정보는 많고 흩어져 있으며 읽어야 할 맥락도 길기 때문입니다.그래서 하루를 시작하기 전에 핵심 이슈를 짧고 구조적으로 확인할 수 있는 미니앱, 모닝 숏뉴스를 개발하게 되었습니다. 현재 토스 앱 내 미니앱에서 확인해보실 수 있습니다. 문제를 작게 정의하기처음부터 “개인화 뉴스 플랫폼”을 만들려 하지는 않았습니다. 로그인, 관심사 설정, 알림, 추천 알고리즘까지 넣기 시작하면 제품의 본질보다 기능 구현 자체가 목적이 되기 쉽다고 판단했습니다.모닝 숏뉴스의 MVP는 한 가지 경험에 집중..
썸네일 Next.js 실무 문법 정리 Next.js + React Frontend HandbookSpring Boot 기반 MSA 커머스 프로젝트의 프론트를 Next.js로 시작하기 전에 빠르게 훑는 실무 문법 정리입니다. TypeScript는 이미 안다는 전제로, React와 Next.js App Router 중심으로 정리했습니다.기준: 2026-04-24 현재 Next.js 공식 문서의 최신 App Router 흐름. 공식 문서에는 Latest Version이 16.2.2로 표시되어 있으며, Next.js 13/14 시절 자료와 캐싱 기본값이 다를 수 있습니다.0. 추천 프로젝트 전제커머스 MSA 프론트에서는 보통 아래 조합이 실무적으로 안정적입니다.Next.js App RouterTypeScriptReact Server Componen..
썸네일 React 문법 정리 Spring + Next.js 기반 MSA Commerce 프로젝트를 시작하기 전에 더 완성도 있고 실무 중심적인 코드를 작성하기 위해리액트를 학습한 것을 정리한 내용입니다. 효율적이고 체계적으로 학습하기 위해 인터넷 강의 1개를 선택하여 수강하였고, 강의를 들으며 보충이 필요하다고 생각되는 것과 강의 외적으로 궁금한 내용들도 정리해 두었습니다.(MacOS를 기준으로 작성되었습니다.) ■ 강의 정보- 강의자: 얄팍한 코딩사전- 강의명: 얄코의 가장 쉬운 리액트(React) ■ 강의 정리강의 내용 뿐만 아니라 추가적으로 찾아보고 정리한 내용들이 포함되어 있습니다. 1. 반응성사용자와의 상호작용 시 페이지 전체를 새로고침할 필요 없이 변경된 부분만 효율적으로 업데이트해 사용자 경험을 개선 2. 재사용성..
썸네일 Typescript 문법 정리 Spring + Next.js 기반 MSA Commerce 프로젝트를 시작하기 전에 더 완성도 있고 실무 중심적인 코드를 작성하기 위해타입스크립트를 학습한 것을 정리한 내용입니다. 효율적이고 체계적으로 학습하기 위해 인터넷 강의 1개를 선택하여 수강하였고, 강의를 들으며 보충이 필요하다고 생각되는 것과강의 외적으로 궁금한 내용들도 정리해 두었습니다.(MacOS를 기준으로 작성되었습니다.) ■ 강의 정보- 강의자: 얄팍한 코딩사전- 강의명: 얄코의 가장 쉬운 타입스크립트 ■ 강의 정리강의 내용 뿐만 아니라 추가적으로 찾아보고 정리한 내용들이 포함되어 있습니다. 타입 안정성 확보로 런타임 오류를 줄여 안정적인 개발 가능 (특히 대규모 프로젝트에서 협업 시 유용) *JavaScript vs TypeScr..
썸네일 Kotlin 백엔드 실무 문법 정리 Kotlin Backend HandbookSpring + Next.js 기반 프로젝트를 시작하기 전에 빠르게 훑고, 개발 중에도 바로 참고할 수 있도록 만든 Kotlin 백엔드 실무 문법 정리입니다.목표:Kotlin 문법을 "문서로 빠르게 압축 학습"하기Spring Boot 백엔드에서 자주 쓰는 문법을 우선 익히기단순 문법 암기가 아니라 "실무에서 어떻게 쓰는가"까지 연결하기이 문서는 "거의 모든 기본/핵심 문법"을 폭넓게 다룹니다. 다만 실제 현업에서 특히 많이 쓰는 것은 아래입니다.val, var, 타입 추론null-safety: ?, ?:, ?., !!data class, enum class, sealed class함수 선언, 기본값 인자, named argument컬렉션 처리: map, filte..
썸네일 Cursor: Agenticc IDE 프로젝트 진행 시, 전체적인 설계 및 리팩토링과 같은 대규모 작업의 경우 Claude, Codex를 활용하고세부적인 작업을 진행할 때는 커서를 사용하고 있습니다. 커서 제작사에서 의도한대로 툴을 효율적으로 다루기 위해 서치하고 정리한 내용을 공유합니다.(MacOS를 기준으로 작성되었습니다.) ■ 참고 페이지https://cursor.com/ko/blog/agent-best-practiceshttps://www.builder.io/blog/cursor-tips ■ 단축키 정리- 에디터 뷰 & 에이전트 뷰 스위치: cmd + E- 인라인 코드 생성: cmd + K- 커맨드 팔레트: cmd + shift + P- Primary 사이드바: cmd + B- 프로젝트 스트럭처: cmd + shift + E- 파..
썸네일 AI Agentic Coding Tool: Antigravity AI가 발전함에 따라 개발자들이 개발하는 방식에도 큰 변화가 생겼습니다. 기존에 개발자들은 사용하는 개발 툴에 대한 지식을 갖추고 직접 코딩을 써내려갔다면, 이제는 개발 방법론과 주기에 대한 지식이 있다면 프레임워크나 언어에 대한 지식이 충분하지 않아도 Agentic IDE와 같은 AI Agents를 이용하여 고퀄리티의 프로젝트를 완성할 수 있게 됐습니다. 여담이지만, 프레임워크나 언어에 대한 지식의 중요성이 낮아진 시점에 개발에 있어서 중요한 역량을 3가지 뽑자면 문제 해결력, 사고의 유연함, 세심함이라고 생각합니다.문제 해결력: 변하지 않는 개발자/엔지니어의 덕목이라고 생각합니다.사고의 유연함: 융통성이라고 표현할 수도 있을 것 같은데, 본인의 생각에만 갇혀 있지 않고 열린 자세로 다양한 의견을 받..
썸네일 자료구조와 알고리즘 정리 미뤄뒀던 자료구조와 알고리즘을 학습하고 정리한 것을 공유하고자 합니다. ■ 강의 정보- 강의자: 얄팍한 코딩사전- 강의명: 얄코의 가장 쉬운 자료구조와 알고리즘- 커리큘럼섹션 1. 인트로섹션 2. 배열과 리스트섹션 3. 스택과 큐섹션 4. 트리섹션 5. 정렬 알고리즘섹션 6. 해시 맵섹션 7. 그래프 ■ 강의 정리 *Big-O 표기법'이 알고리즘은 데이터를 많이 넣을수록 얼마나 느려질까'를 수학적으로 표시- 시간복잡도: 작업에 필요한 연산횟수- 공간복잡도: 필요한 메모리 양 *1차원 정적배열 & 동적 배열 시간복잡도조회, 수정: O(1)제거, 추가: O(n)- 동적배열의 추가의 경우 내부에 여유 공간이 있다면 O(1) *2차원 배열- 생성: 시간&공간복잡도: O(n*m)- 조회, 수정: 시간&공..
썸네일 이미지 및 비디오 생성 워크플로우 로컬 구축 AI 오픈소스 생태계가 빠르게 발전하면서 성능 좋은 미디어 생성 모델이 많이 배포되어 평소에 관심 있던 미디어 생성 워크플로우를 로컬에 구축해봤습니다. 시행착오들을 겪고 완성한 구축 방법을 공유드리고자 합니다.(MacOS 기준으로 작성되었음을 알려드립니다.) ■ 사전 용어 정리1. ComfyUI'노드 기반의 시각적/절차적 프로그래밍 프레임워크'로 생성형 AI 워크플로우를 설계하고 실행하는 환경입니다. 2. Conda파이썬을 포함한 다양한 언어의 패키지와 가상 환경을 관리해 주는 도구로, 프로젝트별로 서로 다른 라이브러리 버전을 충돌 없이 설치하고 실행할 수 있게 해줍니다. 3. Hugging Face인공지능 모델, 데이터셋, 데모 앱을 공유하고 협업하는 세계 최대의 AI 커뮤니티 플랫폼으로 뒤에서 언급..
썸네일 Aider + Qwen 로컬 구축 및 활용 Aider와 Qwen 오픈 소스 LLM을 활용하여 로컬에 코딩 에이전트를 구축하는 방법을 공유하고자 글을 작성합니다.(MacOS를 기준으로 작성되었음을 알려드립니다.) ■ Aider 란?터미널(CLI)에서 실행되는 오픈소스 AI 페어 프로그래머 도구로 단순한 챗봇을 넘어 실제 프로젝트의 소스 코드를 직접 수정하고 Git과 연동하여 변경 사항을 자동으로 커밋해주는 강력한 툴입니다.코드 직접 수정: AI가 요청 사항에 대해 코드를 제안하고 파일에 즉시 적용합니다.- Default 설정 값이 즉시 적용으로 되어있기 때문에 원하지 않을 경우 실행 옵션 적용 필요Git 통합: 작업이 완료되면 자동으로 적절한 커밋 메시지와 함께 커밋을 생성합니다.멀티 파일 지원: 여러 파일을 동시에 분석하고 수정 범위를 파악합니..
썸네일 Python 문법 학습 요약 AI가 급속도로 발전하는 시점에 Python 언어를 활용할 일이 많이 생기게 될 것 같아 문법을 간략하게 공부한 김에 정리해봤습니다. ■ 파이썬 설치https://www.python.org/downloads/ ● 버전 확인python3 --versionpython3 -V ■ VSCode 설치 ■ workspace 폴더 생성 *VSCode 맥OS 입력 오류 (cmd+C 관련)cmd + shift + P > open keyboard shortcuts > "cmd+c"- vim 키 바인딩 제거- 터미널 복사 -> cmd + shift + c 로 키 바인딩 변경 ■ 파이썬 파일 실행 방법Ex> python3 app.py ■ 변수 선언 및 초기화{VAR_NAME} = 'Temporary Name'; ■ 변수 출..
썸네일 Flutter / Dart 학습 및 실습 요약 ✶ 코딩애플님의 플러터 강의를 듣고 학습 및 실습한 내용을 요약한 글입니다. *위젯글자, 이미지, 아이콘, 박스Text(‘content’, style: TextStyle(fontWeight: FontWeight.w800)), Image.asset(‘assets/ImageName.jpg’, width: 100, height: 100) *ScaffoldappBar, body, bottomNavigationBarRow( children: [] ), Column *Container 사용 예시import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart'; void main() { runApp(const MyApp());} clas..
썸네일 리눅스 마스터 2급 합격 후기 및 정보 공유 개발 업무를 하다보니 자연스럽게 리눅스 서버를 다루는 일이 생기다 보니 어느 정도 필수 문법을 알게 되었는데좀 더 능숙하게 사용하여 업무의 효율을 높이고자 공부하는 김에 자격증까지 따게 되어 기록으로 남깁니다. ■ 1차시험 방식 : 온라인 시험 (객관식 50문항)시험 시간 : 60분통과 기준 : 60점 이상팁 : 족보와 ChatGPT/Gemini 띄우고 참고 및 활용 가능 ■ 2차시험 방식 : 오프라인 필기 시험 (객관식 80문항)시험 시간 : 100분통과 기준 : 60점 이상 (과목 당 40% 미만 과락)준비물 : 신분증, 컴퓨터용 사인펜, 수험표과목 정보- 1 과목 : 리눅스 운영 및 관리 (48문제)- 2 과목 : 리눅스 활용 (32문제) ■ 참고 사이트https://www.comcbt.com/ ..
썸네일 Google OTP 2FA 구현 ■ OTP 2FA (One-Time Password Two-Factor Authentication)사용자 인증 방식을 강화하기 위해 사용하는 기술로 1회용 비밀번호(OTP)를 활용하여 다중 인증(MFA)을 구현하는 기술이다. ■ Google OTP를 활용한 2차 인증 구현 방법에 대해서 아래에 기술하고자 한다.Google OTP를 활용한 2차 인증의 경우, 다른 서버와 통신을 하지 않기 때문에 폐쇄망에서 사용 가능하다.*주의사항 : 서버와 통신하여 인증하는 절차가 없기 때문에 사용자의 시간과 서버의 시간을 일치시켜줘야 한다. ■ 인증 로직1. 사용자의 애플리케이션에서 서버에서 발행한 계정에 해당하는 6자리 숫자를 입력 받는다.2. 서버에서 사용자의 비밀키(32자리)를 이용하여 메서드 호출 시간에 따른 6..
썸네일 Git & Github 사용법 다음은 "Coding Apple"의 Git & Github 관련 강의를 듣고 요약 정리한 내용들 입니다.(Mac OS 기준으로 작성되었음을 알려드립니다.) [ Lecture 1 : git 설치법 ] ■ Git파일 변경내역을 보존하고 관리하는 도구 ■ MacOS1. Homebrew 다운로드/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"(시키는거 잘 따라하면 됨) 2. Terminal(1) brew install git(2) git config --global init.defaultBranch main 3. Visual Studio Code(1) shift + cmd + p(2) In..