분류 전체보기155

• 

  #OOCSS #Object Oriented CSS #SMACSS #Scalable and Modular Architecture for CSS #BEM #Block Element Modifier 🎈OOCSS (Object Oriented CSS) 📜객체 지향 원칙을 적용해 구조(Structure)와 외형(Skin), 컨테이너(Container)와 내용(Content)을 분리합니다.📜공통 패턴(버튼, 그리드 등)을 재사용 가능한 모듈로 만들어 코드 중복을 줄이지만, 다중 클래스 사용으로 HTML이 복잡해질 수 있습니다.📜HTMLFacebook Twitter📜CSS.btn { padding: 10px 20px; border: none; border-radius: 4px; text-decoration: none; } .primary { background: blue; color: white; } .success { background: green; color: white; }.. 카테고리 없음 2026. 2. 19.

• 

  #크롬 inspect 안될때 #adb #kill #start #devices 🎈크롬 inspect 안될대1. use 디버깅 해제 후 다시 설정2. usb 디버깅 권한 승인 취소 후 다시 설정3. SDK 플랫폼 도구 설치 후 PC의 adb 프로세스 종료 후 다시 시작 C:\Android\platform-tools 해당경로에 설치4. 해당 경로에서 command창 오픈5. adb kill-server 6. adb start-server 7. adb devices📜adb란? Android Debug Bridge로 안드로이드 device와 pc간 통신을 위한 명령어 (adb.exe - 설치시 생김)* 다운 사이트 : https://developer.android.com/tools/releases/platform-tools 💜99_기타/03_웹 지식 2026. 2. 19.

• 

  #Curl #WSL 오늘 개념👉🏽 curl은 뭐라고 부르나?커맨드라인에서 HTTP/HTTPS 등 네트워크 요청 보내는 명령어주로 "커얼" 또는 "컬"이라고 읽음(공식적으로는 "curl" [kɜːrl])용도:파일 다운로드API 호출/테스트서버 응답 확인네트워크 문제 진단 등✅ WSL(Windows Subsystem for Linux)이란?Windows에서 리눅스를 실행할 수 있게 해주는 호환 계층 (compatibility layer)즉, 리눅스를 듀얼부팅하거나 가상머신으로 돌리지 않아도,윈도우에서 리눅스 명령어와 소프트웨어를 그대로 실행할 수 있도록 해주는 시스템입니다.✅ WSL의 주요 특징항목 설명💻 OS 환경Windows 안에서 Ubuntu, Debian, Kali Linux 등 다양한 리눅스 배포판 실행 가능🧰.. 💛03_Server & OS ( Infra )/03_Linux 2026. 2. 19.

• 

  #ACM #개념정리 #Elastic Beanstalk #ALB #ACM 👉🏽 AWS에서 beanstalk을 사용하면 Certificate Manager alb를 자동 재공 및 갱신을 해준다.✅ 개념 정리1. AWS Certificate Manager (ACM)SSL/TLS 인증서를 무료로 발급해주는 AWS 서비스도메인 인증을 통해 자동으로 발급ACM에서 발급한 인증서는 ALB, CloudFront, API Gateway 등에 적용 가능단, EC2에 직접 설치는 불가 (ACM 인증서는 ALB 등에만 적용 가능)2. Elastic Beanstalk + ALB + ACM의 자동화Elastic Beanstalk은 다음과 같은 구성을 자동으로 관리합니다:항목 설명ALB환경 생성 시 자동 생성 (Classic Load Balancer나 ALB)HTTPS환경 설정 시 ALB에 HTT.. 💛03_Server & OS ( Infra )/05_AWS 2026. 2. 19.

• 

  Nginx + AWS Beanstalk + gzip 요약 정리 ✅ Nginx + AWS Beanstalk + gzip 요약 정리📌 1. Nginx 로그 설정 요약log_format main: $remote_addr, $request, $status, $body_bytes_sent, $http_user_agent, 등 기록조건부 로깅: map $http_user_agent $ignore_useragent → ALB 헬스체크 제외access_log:access_log /var/log/nginx/access.log main if=$ignore_useragent;🔹 로그는 클라이언트에 보내는 게 아니라, 서버 내부 파일에 기록되는 것🔹 $http_* 변수들은 요청 헤더 기반 값📌 2. worker_processes & worker_rlimit_nofileworker.. 💛03_Server & OS ( Infra )/04_Nginx 2026. 2. 19.

• 

  #용어정리 #비지니스 #전략용어 🧠 오늘의 비즈니스 & 전략 용어 정리📌 1. de facto (디팩토)뜻: 사실상 존재하거나 표준이 된 것어원: 라틴어, "in fact(사실상)"의 의미예시:→ 업계에서 널리 쓰이지만 공식 표준은 아닌 것 (예: PDF, USB 등)👉 de facto standard = 사실상의 표준📌 2. Persona (페르소나)어원: 라틴어 ‘가면’의미: 특정 대상 사용자의 대표적인 성격, 행동, 특성 등을 가상으로 만든 인물활용 분야별 의미:🧠 심리학: 외부에 보이는 자아🎯 마케팅: 이상적인 고객상🧪 UX 디자인: 제품의 주요 사용자를 구체적으로 모델링한 가상 인물📌 3. Valuation (밸류에이션)뜻: 자산이나 기업의 가치를 수치로 평가하는 과정사용 상황:기업 인수(M&A)투자 유치IPO(.. 💜99_기타/99_IT꿀팁 2026. 2. 19.

• #해상도 #주요해상도 #고려대상 1. 주요 해상도(해상도별 명칭·픽셀 크기·보편적 용도) 정리명칭 픽셀 (가로x세로) 비율 주요 사용처/기기SD(Standard)640×4804:3오래된 PC/노트북, 90년대 TVHD(HD Ready)1280×72016:9저사양 노트북, 유튜브 기본HD, 구형 스마트폰Full HD (FHD)1920×108016:9현대 데스크탑/노트북 모니터 표준, TV, 유튜브2K/QHD(Quad HD)2560×144016:9고급 모니터, 게이밍, 고성능 노트북4K(UHD)3840×216016:9고가 TV/모니터, 영상 편집, 4K 스트리밍5K5120×288016:9일부 애플 iMac/고해상도 디스플레이8K7680×432016:9초고해상도 TV, 특수 목적WXGA1366×768~16:9보급형 노트북, 저가형 노트북SX.. 💜99_기타/99_IT꿀팁 2026. 2. 19.

• 

  Doctype이란? 쿼크모드란? 웹표준 vs 웹접근성! 시멘틱 태그란? 🎈Doctype이란?📜Doytype(Document Type Declaration)은 HTML 문서의 첫 줄에 위치하는 선언문으로서 브라우저에게 문서의 HTML버전을 명시함📜 형태로 작성되며 브라우저가 표준모드(Standards Mode)로 올바르게 렌더링 하도록 구성ex) html4 : html5 : 🎈쿼크 모드(Quirks Mode)란?📜Doctype이 없거나 잘못 선언된경우 브라우저가 활성화하는 레거시 렌더링 모드로 1990년대 Netscape/IE의 비표준 동작을 모방함!! 📜CSS 레이아웃이 깨지거나 브라우저 간 불일치가 발생해 현대 웹 표준을 따르지 않음 📜Doctype이 있으면 Almost Standards나 Standards Mode로 전환되어 W3C규격.. 💚04_HTML5 & Javascript & CSS/03_CSS(Cascading Style Sheet) 2026. 2. 19.

• 

  Figma 시트별 지원범위 figma를 통해서 형성관리를 하기위해서 계정을 구입할려고 라이센스별 지원내역을 확인 결과 풀시트를 통해서 진행 하는것이 계정 1개를 가지고 프로젝트 단위로 하는것이 제일 좋은 선택이였다. figma에서 제일 많이 사용하는 Figma Design은 스타터로 사용시 공유 이후에는 처음 생성된 시트 이외에 추가 시트가 생성이 불가하다. 그렇기에 편법으로 시트를 많이 생성후에 관리하는 부분으로 진행 하였으나 해당 내역은 너무 비효율적이라 계정 구입을 하여 사용하는 구조로 하였다. 1. 콜라보 시트     - 1-1. FigJam- 1-2. Figma Slides2. 데브 시트     - 1-1. FigJam- 1-2. Figma Slides- 1-3. Dev Mode- 1-4. Figma Buzz 3. 풀.. 💜99_기타 2026. 2. 3.

• 

  #NVM #LTS #NODE #Verstion 🦖NVM(Node Version Manager)이란?Node 버전 업데이트하기 위한 패키지로 Node.js버전을 관리할수 있다. NVM설치를 통해 최신 LTS버전설치 및 변경이 가능하다ㅏ.  🦖NVM설치 윈도우 기준 github.com/coreybutler/nvm-windows/releases 접속 후 Exe파일 설치 진행  🦖Node.js버전 변경 node -v // 내가 사용하고 있는 Node 버전 확인하기nvm list available // 사용 가능한 버전 조회하기nvm install 14.15.4 // 14.15.4(LTS) 버전 다운로드하기nvm list // 설치 되어있는 버전확인하기nvm use 14.15.4 // 14.15.4 버전 사용하기node -v 🦖LTS(.. 💚04_HTML5 & Javascript & CSS/01_Javascript 2025. 4. 10.

• 

  #npm #pnpm #차이 #구성 🦖 특징패키지 설치 방식전통적인 방식 (node_modules에 모든 의존성 설치)의존성 중복을 최소화하고 심볼릭 링크 사용속도비교적 느림 (중복된 의존성 파일들로 인해)더 빠름 (공유된 캐시 사용, 중복된 의존성 제거)디스크 사용량의존성 중복 설치로 인해 더 많은 디스크 공간 사용디스크 공간 절약 (중복된 의존성 링크 사용)설치 구조각 프로젝트마다 독립적인 node_modules 디렉터리중복을 최소화한 node_modules 구조, 심볼릭 링크 사용호환성대부분의 프로젝트에서 기본적으로 사용일부 프로젝트에서 호환성 문제 발생 가능캐시기본적으로 설치 후 캐시 없음 (다시 설치 시 다운로드 필요)패키지 캐시 시스템을 이용해 빠르게 설치커맨드npm install, npm run 등 기본 명령어pnpm ins.. 💚04_HTML5 & Javascript & CSS/01_Javascript 2025. 4. 8.

• 

  Eslint 설정 정보 // if-else 예시 if (response.data.success) { console.log('Login successful:', response.data) } else { console.log(111) console.error('Login failed:', response.data.message) }// 함수 예시 const login = async () => { try { const response = await axios.post('/api/login', { email: form.value.email, password: form.value.password, }) } catch (error) { c.. 💚04_HTML5 & Javascript & CSS 2025. 4. 4.