본문 바로가기

분류 전체보기

(101)
[좋은 코드] 코테 스타일 가이드 ✅ 조건문 표현 스타일 기준 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)응답 데이..
[FE] CSS 컨벤션 .selector { /* 박스 모델 */ display: flex; position: relative; top: 0; margin: 10px; padding: 15px; /* 크기 */ width: 100%; height: auto; /* 테두리 및 배경 */ border: 1px solid #ccc; border-radius: 5px; background-color: #f5f5f5; /* 텍스트 및 글꼴 */ font-size: 16px; color: #333; text-align: center; /* 기타 */ cursor: pointer; transition: all 0.3s ease;}
[Web] 프로젝트 디자인 협업 진행 - 논리적 픽셀 크기window.innerWidth: 1512window.innerHeight: 982=> 논리적 픽셀 크기: 1512x982. i.e) 뷰포트 크기와 동일하게 동작함. 디스플레이 해상도는 물리적 픽셀 크기를 뜻함. - DPR & 운영체제 배율window.devicePixelRatio: 1.25 i.e) DPR(픽셀 비율): 1.25=> 운영체제 배율(125%)은 자동으로 브라우저에서 DPR에 반영됨. 운영체제 배율과 DPR은 다른 개념!!! Ex)고해상도 이미지는 DPR 기반으로 제공@media screen and (min-resolution: 192dpi) { .image { background-image: url('image@2x.png'); }}텍스트와 레이..