NOGUEN 블로그

그외

2025.06.10 11:43

Develop 카테고리의 최신 글

[Web] JSDoc과 Storybook으로 컴포넌트 문서화

Web

2025.12.25 00:37

핵심만 원한다면 "JSDoc: 단순한 주석이 아니라 IDE와의 대화"로 이동해주세요.개요개발의 패러다임이 바뀌고 있다 개발의 패러다임이 바뀌었다. 불과 몇 년 전만 해도 개발자가 한 줄 한 줄 직접 코드를 작성해야 했지만, 이제는 AI가 개발의 대부분을 수행해준다. 전체적인 아키텍처 설계 면에서는 아직 인간의 통찰력이 필요하지만, 단순 기능 구현을 지시하면 AI는 불과 몇 초 만에 결과물을 내놓는다. 물론 AI에게 모든 것을 맹목적으로 맡기면 심각한 기술 부채로 이어진다. 하지만 인간이 뼈대를 세우고, AI가 살을 붙이면 이야기가 달라진다. '초안 구현'은 AI에게 맡기고, 인간은 그 결과물을 검수하고 리팩토링하는 워크플로우를 구축했을 때 생산성은 폭발적으로 증대된다. 이제 개발의 대세는 AI에게 대부..

[Web] 시맨틱 태그 적용 작업

Web

2025.12.12 22:48

개요 개발을 하다 보면 무의식적으로 `` 태그를 남발하게 되는 경우가 많다. 당장 스타일링하기 편하고, 별다른 고민 없이 레이아웃을 잡을 수 있기 때문이다. 하지만 ``로 점철된 코드는 Div Soup(div만 가득한 죽)이라고 불리며, 검색 엔진(SEO)과 스크린 리더(접근성)에게는 최악의 구조다. 이와 관련한 글을 이전 포스트로 작성했었다. 이번에 서비스의 SEO 최적화와 웹 접근성 향상을 목표로, 기존의 ``로 떡칠된... 코드를 시맨틱 태그로 대대적으로 리팩토링 했다. (사실 div 태그 제거 작업은 할당된 업무에 없었는데 어차피 해야하는 작업이라 같이 해결했다.) 결과적으로 Lighthouse 점수가 유의미하게 상승했는데, 그 과정과 기준을 정리해본다. 시맨틱 태그 적용과 기준`` vs ``..

[Web][Issue] MUI의 INP 성능 저하 문제

Web

2025.12.12 22:45

개요 Sentry에서 INP(Interaction to Next Paint) 지연 경고가 간헐적으로 발생하고 있다. 로그를 분석해 보니 특정 페이지(eventDetail)에서 사용자의 클릭 반응 속도가 눈에 띄게 느려지는 현상이 포착되었다. 범인을 추적해 보니 피크(Peak)가 튀는 순간은 MUI(Material UI) 컴포넌트가 렌더링 될 때였다. Deep Dive : 왜 MUI v5가 범인인가? 최적화를 시작하기 전에, 도대체 왜 MUI v5가 느린지 근본적인 원인을 파악해 보자. 범인은 바로 편리함의 상징인 sx 문법이다. v5의 sx가 문제라는 것이지 지금 버전의 sx도 문제라고 오해하지 않는 것이 좋다. 런타임 오버헤드 (Runtime Overhead) 우선 sx로 작성된 스타일이 실제 DOM..

[JS] Named export와 Default export, 둘 중에 뭘 써야할까?

Web

2025.12.09 20:51

개요 프로젝트를 세팅하거나 새로운 컴포넌트를 만들 때마다 아주 사소하지만, 매번 마주치는 갈림길이 있다. "이거 export default로 내보낼까? 아니면 그냥 export로 내보낼까?" 사실 둘 중 뭘 써도 기능상으로는 전혀 문제가 없다. 어차피 import 해서 쓰면 그만이니까. 하지만 프로젝트 규모가 커지고, 팀원들이 늘어나고, 성능 최적화(Tree Shaking)를 고민하기 시작하면 이 사소한 차이가 생각보다 큰 영향력을 불러온다. 결론부터 말하자면 나는 Named Export를 강력하게 선호한다. 그 이유를 이야기하기 전에, 우선 두 방식이 본질적으로 어떻게 다른지부터 깊게 파보자. Named와 Default export란 두 방식의 차이는 단순히 중괄호 `{}`를 쓰냐 마냐의 문제..

[Develop][Front] 간격은 부모 계층이 정해야한다

Develop

2025.12.02 23:12

개요 컴포넌트를 만들다 보면 필연적으로 간격을 어디에 줄 것인가에 대한 고민에 빠지게 된다. 예를 들어, 리스트에 들어갈 `UserCard`라는 컴포넌트를 만든다고 가정해보자. 리스트 아이템 사이에는 20px의 간격이 필요하다. 이때 가장 쉬운 방법은 `UserCard` 자체에 `margin-bottom: 20px`을 주는 것이다. "어차피 이 카드는 리스트에서만 쓰니까, 알아서 간격을 가지고 있으면 편하잖아?" 하지만 프로젝트가 커지고 `UserCard`를 다른 곳(가로 스크롤 뷰, 모달 내부, 그리드 레이아웃 등등)에서 재사용하려고 할 때, 내부에 심어둔 이 margin은 굉장히 거슬리는 무언가가 돼버린다. ▼ 나는 "자식 컴포넌트는 패딩이나 마진 같은 외부 간격에 대해 전혀 몰라야 한다"는 ..

스펙업! 카테고리의 최신글

주니어 개발자 이력서 작성 2 - (내용 채우기와 첨삭)

스펙 업!

2025.12.09 22:29

개요 열심히 기능 개발하고, 버그 잡고, 배포도 했는데 막상 글로 적으려니 XX 기능 개발, YY 페이지 구현 같은 밋밋한 문장밖에 떠오르지 않았다. 솔직히 그런 것들은 기본적으로 해야하는 것들이다. 정말 특수한 기능, 알고리즘이 들어간다거나 혹은 완전히 새로운 로직이 들어가는 기능이 아니고서 구현이나 개발 이라는 것을 쓰는건 작성하는 사람이나 읽는 사람이나 모두 시간낭비가 될거라고 생각했다. 일단 기억나는 대로 적어서 주변의 현업 개발자 지인들에게 피드백을 요청했다. 돌아온 답변은 이랬다. "너무 겸손하게 작성하면 안돼.""이건 자랑인 거랑 자랑 아닌 게 섞여 있어서 평균이 깎여 보여.""자기소개에 대한 증거가 없어. 임팩트를 끼쳤다는 증거가 될 만한 내용이 하나도 없잖아." 이력서는 겸손을 떠..

주니어 개발자 이력서 작성 1 - (Notion? Word? Figma? 결국엔 가독성)

스펙 업!

2025.12.05 23:46

개요 최근 이직 준비를 하면서 이력서를 다시 작성하게 되었다. 그런데 막상 키보드에 손을 올리니 내 경력을 어떻게 포장할지보다 더 원초적인 고민이 앞섰다. "도대체 무슨 툴로 써야 하지?". 주변 개발자 지인들과 선배들에게 조언을 구해봤지만, 돌아오는 대답은 정말 천차만별이었다. "요즘 스타트업은 무조건 노션(Notion)이지.""무슨 소리야, 근본은 워드(Word)지. 인사팀은 보수적이라니까?""요즘은 피그마(Figma)로 깔끔하게 디자인해서 PDF로 주는 게 트렌드야." 각각의 주장이 너무나 타당해서 마음이 이랬다 저랬다 갈대마냥 흔들렸다. 하지만 동시에 반대 의견도 만만치 않았다. "노션은 너무 가벼워 보인다", "워드는 촌스럽다", "피그마는 배보다 배꼽이 더 크다" 등등. 그래서 이번 기회..

신입 개발자 포트폴리오 작성 - 3 (첨삭)

스펙 업!

2024.11.12 21:18

신입 개발자 포트폴리오 작성 - 1 (프로필 작성)개요포트폴리오를 작성하게 된 계기산업기능요원을 준비하기 위해 이력서와 이것저것 취업에 필요한 것들을 준비를 하고 있다. 처음에는 점핏이나 사람인과 같은 플랫폼에서 제공하는 이력서noguen.com 신입 개발자 포트폴리오 작성 - 2 (프로젝트 작성)개요프로필에 이어서... 신입 개발자 포트폴리오 작성 - 1 (프로필 작성)개요포트폴리오를 작성하게 된 계기산업기능요원을 준비하기 위해 이력서와 이것저것 취업에 필요한 것들을 준비를 하noguen.com 신입 개발자 포트폴리오 작성 - 3 (첨삭)신입 개발자 포트폴리오 작성 - 1 (프로필 작성)신입 개발자 포트폴리오 작성 - 1 (프로필 작성)개요포트폴리오를 작성하게 된 계기산업기능요원을 준비하기 위해 이력서..

[면접 질문] Flutter 심화 질문/답

스펙 업!

2024.08.08 21:08

Flutter의 컴파일 과정 [Flutter] Dart의 컴파일 과정개요의문의 시작 Flutter를 통해 개발을 하면, '한 번에 두 가지, 필요에 의하면 여섯 가지의 플랫폼까지도 동시에 개발을 할 수 있다니 굉장히 편리하잖아?' 라는 생각과 '근데 웹으로 대체하던데noguen.com Dart 언어의 장단점 [Flutter] 코드가 어떻게 화면이 되나요(2) — Dart Virtual Machine중간언어(기계어)로 프로그램을 실행하기 위해서는, 가상의 머신이 필요하다.medium.com Dart는 싱글 스레드 언어 [Flutter] Dart는 싱글 스레드 언어개요싱글 스레드인데 어떻게? 처음 Dart가 싱글 스레드 언어라는 말을 들었을 때는 별 생각이 없었다. 그냥 그런가보다... 했었는데 Futu..

신입 개발자 포트폴리오 작성 - 2 (프로젝트 작성)

스펙 업!

2024.06.08 12:30

CS 카테고리의 최신 글

Transaction Management Overview

데이터베이스

2024.04.04 19:42

Transactions DBMS의 성능을 향상시키기 위해서는 사용자 프로그램의 동시 실행이 필수적이다. 디스크 액세스는 빈번하게 발생하며 비교적 느리기 때문에 CPU를 활용하여 여러 사용자 프로그램을 동시에 처리하는 것이 중요하다. 사용자 프로그램은 데이터베이스에서 검색한 데이터에 대해 많은 작업을 수행할 수 있지만, DBMS는 데이터베이스에서 읽거나 쓰는 데이터에만 관심이 있기 때문이다. DBMS는 사용자 프로그램을 추상화하여 트랜잭션(Transaction)이라는 개념으로 표현한다. 트랜잭션은 읽기와 쓰기의 연속으로 구성된 DBMS의 추상적인 사용자 프로그램이다. 트랜잭션은 일련의 데이터베이스 작업으로 구성됩니다. 일반적으로 트랜잭션은 다음과 같은 단계로 진행된다. 시작 (Begin) 트랜잭션이 시작되..

통계 DB의 보안(내용보완필요)

데이터베이스

2024.04.04 19:35

개론 앞에서는 DB외에도 일반적으로 사용하는 방법을 알아보았다. 이제는 통계 DB에서의 개인정보 유출을 배워본다. 통계 DB 통계 DB에서는 개인의 정보를 다룬다. 그러나 해당 DB에서는 집계 질의문만 처리해주기 때문에 특정 개인의 정보를 알 수 없다. 평균 나이, 최소 나이, 최고 나이 등등과 같은 집계 정보만 주기에 고라니의 나이나 고라니의 몸무게와 같이 특정 데이터는 얻을 수 없다. 추론 문제 그러나 추론이 가능하다. 예를 하나 들어보자. 나이와 등급이 연결되어있는 통계 DB가 있다고 해보자. 등급은 꽤나 민감한 정보로 아무도 모르지만 현재 노근은 대학 내의 학생 중 최고령자의 이름을 알고 있다. 그리고 이 최고령자가 유일무이하단 것도 알고 있다. 이 상황에서 노근은 해당 사람의 나이를 모름에도 등..

인터넷 응용프로그램의 보안

데이터베이스

2024.03.08 19:08

암호화 대칭적 암호화(Symmetric Encryption) 암호화에 필요한 키가 복호화 키로도 사용이 되는 암호화 방식을 말한다. 키가 하나만 있으면 되기에 간편한 방법이지만 키를 건네줄 때 부담이 생기게 된다. 암호화된 내용도 중간에서 가로챌 수 있는데 키라고 중간에 못 가로챌 일은 또 없다. 이렇게 하나의 키로 암호화와 복호화를 모두 하게 되면 키를 교환하는데에 부담이 생기게 된다. 공개키 암호화(Public-Key Encryption) 그래서 이런 부담을 줄이고자 나온게 공개키 암호화다. 각 사용자들은 모든 사람에게 알려진 공개 암호화 키와 자신만 알고 있는 비공개 복호화 키를 하나씩 갖고 있다. 사용자가 아마존에게 암호화된 주문 정보를 보내는 것을 예시로 보자.▼ 아마존은 암호화를 해주는 pub..

CPU Scheduling

운영체제

2024.03.04 21:23

개요 운영체제는 항상 한정된 자원을 두고 자신과의 싸움을 한다. ▼ 자원은 계속해서 늘어나고 있지만 자원이 늘어나는 만큼 더 많이 사용하게 되어 자원은 항상 부족하다. 프로세스가 구동이 되려면 메모리 자원과 CPU자원이 필요하다. 모든 프로세스가 자원을 원하는 만큼 가져가면 좋겠지만 그렇게 다 주기엔 자원이 모자르기에 누구에게, 얼마나, 얼마동안 줄 지를 결정해야한다. 이렇게 프로세스에게 자원을 주는 일련의 행위를 Scheduling, 해당 행위를 맡고있는 OS의 일부분을 Scheduler라고 부른다. Q. Scheduler의 정체가 정확히 무엇인지? 하드웨어? 아니면 프로세스? A. 스케쥴러는 하드웨어나 별도의 프로세스가 아닌 OS의 기능중 하나이다. Term에 따른 종류 스케쥴러는 term을 단위로 ..

Process

운영체제

2024.03.04 20:49

프로세스(Process)란? 프로세스란 지금 실행하는 프로그램을 의미하며, 프로그램의 가장 기본적인 단위를 의미하기도 한다. 프로세스의 문맥(Context) 현재 혹은 특정 지점을 놓고 봤을 때 프로세스가 어디까지 수행됐는지, 프로세스를 실행시키기 위해 어떤 메모리 공간을 만들었는지, Program Counter가 어디를 가리키고 있는지를 알려주는 정보를 프로세스의 문맥이라고 한다. 프로세스의 요소 각 프로세스는 크게 아래의 2가지를 갖는다. address space(core image) process table entry 여기서 entry는 해당 프로세스를 수행하기 위해 필요한 정보와 나중에 수행하기 위해 필요한 레지스터 값과 상태를 저장한다. Entry보다는 Process Control Block이라..

Algorithm 카테고리의 최신 글

백준 2178번 미로 탐색 - SWIFT, C++

2025.12.04 22:31

문제N×M크기의 배열로 표현되는 미로가 있다.101111101010101011111011 미로에서 1은 이동할 수 있는 칸을 나타내고, 0은 이동할 수 없는 칸을 나타낸다. 이러한 미로가 주어졌을 때, (1, 1)에서 출발하여 (N, M)의 위치로 이동할 때 지나야 하는 최소의 칸 수를 구하는 프로그램을 작성하시오. 한 칸에서 다른 칸으로 이동할 때, 서로 인접한 칸으로만 이동할 수 있다.위의 예에서는 15칸을 지나야 (N, M)의 위치로 이동할 수 있다. 칸을 셀 때에는 시작 위치와 도착 위치도 포함한다. 입력첫째 줄에 두 정수 N, M(2 ≤ N, M ≤ 100)이 주어진다. 다음 N개의 줄에는 M개의 정수로 미로가 주어진다. 각각의 수들은 붙어서 입력으로 주어진다. 출력첫째 줄에 지나야 하는 최소의..

백준 1402번 아무래도 이 문제는 A번 난이도인 것 같다 - C++

2025.02.02 02:33

문제어떤 정수 A가 있으면 그 숫자를 A = a1 * a2 * a3 * a4 ... * an으로 했을 때 A' = a1 + a2 + a3 ... + an이 성립하면 "A는 A'으로 변할 수 있다"라고 한다. (ai는 정수) 만약 A'이 A''으로 변할 수 있으면 "A는 A''으로 변할 수 있다"라고 한다.이때 A와 B가 주어지면 A는 B로 변할 수 있는지 판별하시오. 입력첫째 줄에는 테스트 케이스의 개수 T(1 ≤ T ≤ 100)이 주어진다. 테스트 케이스마다 두 정수 A, B(-2^31 ≤ A, B ≤ 2^31-1)가 주어진다. 출력각각의 테스트 케이스마다 한 줄에 변할 수 있으면 yes, 아니면 no를 출력한다. 문제 링크1402번: 아무래도이문제는A번난이도인것같다 풀이 처음에는 정말 아무 생각없이..

백준 11722번 가장 긴 감소하는 부분수열 - C++

2024.11.23 16:02

문제수열 A가 주어졌을 때, 가장 긴 감소하는 부분 수열을 구하는 프로그램을 작성하시오.예를 들어, 수열 A = {10, 30, 10, 20, 20, 10} 인 경우에 가장 긴 감소하는 부분 수열은 A = {10, 30, 10, 20, 20, 10} 이고, 길이는 3이다. 입력첫째 줄에 수열 A의 크기 N (1 ≤ N ≤ 1,000)이 주어진다.둘째 줄에는 수열 A를 이루고 있는 Ai가 주어진다. (1 ≤ Ai ≤ 1,000) 출력첫째 줄에 수열 A의 가장 긴 감소하는 부분 수열의 길이를 출력한다. 문제 링크https://www.acmicpc.net/problem/11722 풀이다이나믹 프로그래밍을 사용하면 되는 문제다.다이나믹 프로그래밍을 사용하면 쉽게 풀린다는 것은 문제를 보고 바로 알았지만 시행..

백준 2116번 주사위 쌓기 - C++

2024.11.21 21:22

문제천수는 여러 종류의 주사위를 가지고 쌓기 놀이를 하고 있다. 주사위의 모양은 모두 크기가 같은 정육면체이며 각 면에는 1부터 6까지의 숫자가 하나씩 적혀있다. 그러나 보통 주사위처럼 마주 보는 면에 적혀진 숫자의 합이 반드시 7이 되는 것은 아니다.주사위 쌓기 놀이는 아래에서부터 1번 주사위, 2번 주사위, 3번 주사위, … 의 순서로 쌓는 것이다. 쌓을 때 다음과 같은 규칙을 지켜야 한다: 서로 붙어 있는 두 개의 주사위에서 아래에 있는 주사위의 윗면에 적혀있는 숫자는 위에 있는 주사위의 아랫면에 적혀있는 숫자와 같아야 한다. 다시 말해서, 1번 주사위 윗면의 숫자는 2번 주사위 아랫면의 숫자와 같고, 2번 주사위 윗면의 숫자는 3번 주사위 아랫면의 숫자와 같아야 한다. 단, 1번 주사위는 마음대로..

프로그래머스 전력망을 둘로 나누기 - C++

2024.11.20 21:15

문제 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이완전 탐색과 BFS가 섞인 문제다.오늘도 피곤 이슈로... 대략적인 풀이만 올리고 다음에 몰아서 풀이를 올릴 예정이다. 우선 n이 작고, 제공되는 간선의 수도 100 보다 작기 때문에 모든 경우의 수를 다 해볼 수 있다.그러면 첫번째부터 마지막 간선까지 선을 하나씩 제거해나가며 BFS를 돌려보면 된다. 문제 조건이 하나만 끊어도 둘로 나눠지게 설계되어있기에 모든 간선을 한 번씩 끊어보며 확인해보면 된다. 그런데 처음에는 두 번 다 돌려야 하나? 했는데 양 쪽 구간을 모두 확인한다고 두번 돌릴 필요는 없다.n이 정해져있기 때문에 한쪽이 k개라면,..

티스토리툴바