본문 바로가기

전체 글

(115)
[re-poompoom] FSD 디렉토리 구조 적용 중, 역할 기준 폴더에 관하여 ✅ atoms/, molecules/, organisms/ 구조의 배경이건 Atomic Design 패턴에 기반한 UI 계층 구조입니다.계층설명예시atoms가장 작은 단위의 UIButton, Input, Labelmolecules2개 이상의 atom 조합Input + Labelorganisms섹션 단위 구성 요소Header, Footer, Form ➡️ 이 구조는 UI 재사용성, 디자인 시스템 구성에 유리하지만➡️ 실제 비즈니스 로직과 도메인 흐름과는 분리되어 있어서, 복잡해질 수 있습니다. ✅ FSD에서 이걸 어떻게 해결하나?FSD는 UI 계층보다 **도메인 관심사(domain-centric)**를 기준으로 나눕니다.범위위치예시특정 feature 안에서만 쓰임features/review/ui/Butt..
[Web] 디스플레이 해상도에 따른 실 사용자 뷰포트 고려 📘 이 글을 읽기 전에 먼저 최신 실전 정리 편을 확인하는 것을 권합니다이 글은 당시 관점으로 정리된 내용이라 여전히 참고할 부분이 있지만, 지금은 해상도·DPR·DPI Scaling·뷰포트 같은 개념을 더 명확하게 정리한 최신 실전편이 별도로 준비되어 있습니다.최신 글을 먼저 보면 이 글에서 다루는 설명과 사례들을 훨씬 수월하게 이해하실 수 있습니다.👉 먼저 보면 좋은 최신 글: [디스플레이 해상도·뷰포트·Figma 1440 총정리] ✅ 디자인 툴 vs 실제 브라우저 화면 차이항목디자인 툴 (Figma 등)실제 브라우저 (PC 기준)해상도1440×1024, 1920×1080 등 프레임 기준대부분 1366×768, 1920×1080 등사용 가능 높이전체 해상도 기준주소창 + 북마크바 + 탭바 등으..
[프로젝트 회고] STDev 해커톤 1. 피그마 SVG Export할 때는 Frame으로 감싸주고, 바로 밑에 하나의 벡터 이미지가 존재하도록. 2. Vite에서 SVG 사용할 때, 로컬에서는 잘 되는데 배포 환경에서 안되는 경우. import { ReactComponent as Logo } from './logo.svg'; // 이건 CRA 방식 Vite는 기본적으로 CRA 방식을 지원하지 않으므로 vite-plugin-svgr를 설치해야 합니다.npm install vite-plugin-svgr// vite.config.ts or vite.config.jsimport { defineConfig } from 'vite';import svgr from 'vite-plugin-svgr';import react from '@vitejs/plu..
[Python] 진수 변환 bin(), oct(), hex()는 "정수(int)를 문자열(string)로 변환"하는 함수고,int(문자열, 진수)는 "문자열(string)을 정수(int)로 변환"하는 함수입니다.1. 핵심 차이 정리함수목적예시결과 타입bin(x)10진수 int → 2진수 문자열(str) 변환bin(10) → '0b1010'문자열(str)oct(x)10진수 int → 8진수 문자열(str) 변환oct(10) → '0o12'문자열(str)hex(x)10진수 int → 16진수 문자열(str) 변환hex(10) → '0xa'문자열(str)int(str, base)문자열(str, 주어진 진수) → 10진수 int 변환int('1010', 2) → 10정수(int)✅ 요약:bin, oct, hex → int → str 변환..
[코테] 정렬 헷갈림 2. sorted() vs sort() 차이두 함수는 목적은 같지만 방식이 다릅니다.항목sorted()sort()동작 대상아무 이터러블(iterable) 가능 (리스트, 튜플, 문자열 등)리스트 객체만 가능리턴 값새로운 정렬된 리스트 반환제자리(in-place) 정렬, 리턴값은 None원본 수정 여부원본 리스트 수정 안 함원본 리스트를 수정함사용 가능 대상리스트, 튜플, 이터레이터 등리스트만 가능
[re-poompoom] poompoom 개선 ✅ 프로젝트 도중 발생한 애로사항1. container/presenter/styles 구조 적용에 대한 애로사항1-1. 파일 구조 불일치 문제 발생1-2. 3가지 그룹으로 분리하기 애매한 컴포넌트 발생( 작은 컴포넌트에선 과도한 분리가 부담 )1-3. 파일 이름이 길고 반복됨.=> 관심사의 분리(SoC: Separation of Concerns)라는 목적은 분명히 장점이 있으나, Presenter는 Container 없이도 다양한 페이지에서 재사용 가능하다는 등 재사용성과 작업 기한에 무리가 있어, PostCard/Container.tsx 같이 역할을 구분하여 개선하였다. 2. 폴더 구조가 중구난방이어서 이해하기 어려운 애로사항=> 도메인 기준으로 폴더를 분리하여 FSD 방식으로 구조화하였다. 3. ✅..
[좋은 코드] 코테 스타일 가이드 ✅ 조건문 표현 스타일 기준 5가지1. 현재 기준 변수는 좌측에 둔다원칙: 현재 비교하고 있는 값(=기준)은 좌측에 배치이유: 조건을 읽을 때 **"지금 값이 ~한가?"**를 자연스럽게 읽기 위함예시: # ❌ (덜 직관적)if freq[stack[-1]] = freq[stack[-1]]:2. 숫자 상수(리터럴)는 우측에 둔다사람 눈은 좌측에 변수, 우측에 상수를 배치했을 때 더 빠르게 해석 가능예시: # ❌if 100 100:오른쪽의 상수가 기준처럼 보이는 것이 일반적 읽기 순서에 맞음3. 의미 있는 순서대로 정렬하라 (작은 → 큰)조건식은 왼쪽이 작고, 오른쪽이 큰 형태로 정렬되면 이해가 빠름예시: # ❌if 100 >= x and x >= 0:# ✅if 0 이렇게 삼단 비교(0 4. not 사용은 ..
[Python] 문자열 뒤집기 배열 뒤집기🔹 s[::-1]는 슬라이싱(slicing) 문법s = [1, 2, 3]rev = s[::-1]print(rev) # [3, 2, 1] ✅print(s) # [1, 2, 3] ✅ 원본은 변경되지 않음🔸 reverse(): 원본 리스트 자체를 뒤집는다s = [1, 2, 3]result = s.reverse()print(result) # Noneprint(s) # [3, 2, 1] ← 원본이 바뀜 🔸 reversed(): 반복자를 반환s = [1, 2, 3]result = reversed(s)print(result) # print(list(result)) # [3, 2, 1] ← 새로 만들어짐print(s) # [1, 2, 3] ← 원본..
[HTML/CSS 실무 팁] CSS 라이브러리 선택 ✅ 디자인 시스템이 빡센 경우. SCSS✅ 빠른 개발. Tailwind + module.css or @layer 확장 (특히 드롭다운, 중첩 hover, 커스텀 애니메이션은 Tailwind보다 CSS가 더 명확한 영역) ✅ Flex 용어 정리속성주축(main axis)교차축(cross axis)flex-direction: row가로(width)세로(height)flex-direction: column세로(height)가로(width) 🤔 요소에 height를 설정해야 하는지 헷갈림.. A자식이 교차축 크기를 명시하지 않는 경우? 자동으로 align-items: stretch 가 적용된 상태 A반대로, 교차축에 height을 명시하면? 자기 height인 2rem(콘텐츠의 크기)만큼 높이 가짐
[HTML/CSS 실무 팁] 헷갈리는 개념들 block 요소: width, height, margin 가능.inline 요소: width, height, margin 상하 X -> 대신 line-height 사용. attribute: HTMLproperty: JSON 폰트는 index.html에서 cdn으로 불러오기. 디자이너와 협업 시아이콘(svg, img) Export할 때, 항상 Frame or Component인 상태로 만들어서 진행하기(Ctrl + Alt + G)그룹으로 만드는 것은 단순한 시각적 그룹화일뿐, 레이아웃 박스, 좌표/사이즈 기준 제공하지 못함. focus: 요소가 선택되었을 때 (키보드·마우스·터치 등)active: 요소를 클릭/터치로 누르고 있는 동안 잠깐 transform: translate(), rotate(), sc..
[코테] 프로그래머스 120894 기본 CS 및 replace() 헷갈림 https://school.programmers.co.kr/learn/courses/30/lessons/120894 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr def solution(numbers): d = { "zero": 0, "one": 1, "two": 2, "three": 3, "four": 4, "five": 5, "six": 6, "seven": 7, "eight": 8, "nine": 9 } for x in d: numbers = numbers.replace(x, str(d[x])) return int(numbers) # replac..
[프로젝트 진행] 계획 관리 (일정 vs 마일스톤) 💡 전제: 개발 목표간단한 명언 추천 웹앱 만들기 (사용자 입력 → API 요청 → 명언 출력)사용 기술: React, TypeScript, Tailwind, Open API, Vercel✅ 마일스톤 중심 프로젝트 계획 예시📍M1. 프로젝트 세팅 & 기본 UI 구성기간: 1주차목표: 사용자 입력 받고 기본 UI 구성 완료작업(Task):Git 저장소 세팅CRA/Next.js 초기 프로젝트 생성폰트, 컬러, 스타일 가이드 적용입력창, 버튼, 레이아웃 구성🎯 마일스톤 달성 기준: “입력창과 버튼이 정상적으로 보이고 동작한다”📍M2. API 연동 및 핵심 기능 구현기간: 2주차목표: 명언 추천 기능이 동작하며 화면에 잘 나타남작업(Task):API 연동 로직 구현 (fetch 또는 axios)응답 데이..