study

화면구조, 설정, 새파일, 열기, 저장, 확장자 1. 새파일만들기 1. Create new 01 = Width / Height (가로 / 세로, 문서 크기) - 단위는 Pixels(픽셀) 사용 02 = Resolution (해상도)03 = Color Mode (색상 모드)04 = Background Contents (배경 ) 1. 인쇄물/웹용 이미지에 적합한 해상도 ( Resolution )해상도는 이미지의 선명한 정도를 뜻 해상도의 단위인 Pixels/Inch를 보면 알 수 있듯이, 1인치당 픽셀의 개수로 해상도를 설정 일반적으로 해상도가 높을수록 이미지가 더 선명하게 보임구분별 해상도구분인쇄물웹단위dpi (dots per inch)ppi (pixels per inch)적정 해상도300dpi72~..

BEM이란? BEM은 CSS 클래스 네이밍 규칙으로, UI를 독립적인 블록 단위로 분리하고 구조와 상태를 명확히 표현하는 것 유지보수성 ↑스타일 충돌 ↓컴포넌트 재사용성 ↑대규모 프로젝트에 특히 유리 이 요소가 어떤 컴포넌트인지 / 그 안의 어떤 부분인지 / 어떤 상태인지를 이름에 드러내는 방법BEM은 Block, Element, Modifier의 약자이고, UI를 독립적인 블록 단위로 나눠 재사용성과 유지보수성을 높이려는 네이밍 규칙입니다. 클래스 이름만 봐도 구조와 상태가 보이게 만드는 규칙 구조: Block__Element상태/변형: --ModifierCSS를 설계 관점에서 작성하게 만들어줌 Block: 독립적으로 의미 있는 컴포넌트예: card, button, menuElement: 블록 ..

카카오 로그인  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  1. 카카오 로그인 > 문서보  2. 내 애플리케이션 > 애플리케이션 추가   3. 앱키 4. 플랫폼 > web 플랫폼 등록    5.    6. : .envVITE_KAKAO_JAVASCRIPT_KEY=????VITE_KAKAO_REST_API_KEY=????VITE_KAKAO_REDIRECT_URI=https://xxx.vercel.app/oauth/ 7. config.jsconst isLocal = window.location..

TMDB API  1. 가입https://www.themoviedb.org/?language=ko The Movie Database (TMDB)찾으시는 영화나 TV 프로그램이 없나요? 로그인 하셔서 직접 만들어주세요.www.themoviedb.org  2. More > API  또는  프로필 > 설정 > API   3.  API  >  생성 > Developer  4. 사용약관 스크롤  맨아래 동의   5.  작성   6. API 페이지 이동 ( API, 액세스토큰  사용 )  7.  More > API    8.  API Reference    9. Movie List > Now Playing > Try it > JSON 생성   10.  11.  이미지 기본 경로 https://developer.th..

vercel 배포 vercel이란?Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, 빠르고 간편하게 웹 애플리케이션을 배포할 수 있도록 도와주는 서비스입니다. Next.js의 개발사이기도 하며, Next.js를 최적화하여 지원하지만, React, Vue, Svelte, Angular 등 다양한 프레임워크를 사용할 수 있습니다. Vercel 공식 사이트 공식 사이트에서 GitHub, GitLab, Bitbucket 계정으로 가입 vs 터미널에서 설치 - 1번만 npm i -g vercel 1. npm run build 또는 yarn build 2. vercel login >> 로그인 선택 >> 이 메일로 로그인했을경우 이메일 확인 >> 이메일 > 코드 인증 이메일 인증 ..

GridCSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 레이아웃 시스템입니다.기존의 float, flexbox 등이 1차원(가로 또는 세로) 정렬에 초점을 뒀다면,CSS Grid는 가로(Row)와 세로(Column)를 동시에 다룰 수 있어 복잡한 레이아웃을 보다 쉽게 구현할 수 있습니다. 특징 설명2차원 레이아웃행과 열 모두를 기반으로 배치 가능레이아웃 정의부모 요소에서 전체 레이아웃 정의 후 자식 요소 배치간결한 문법반복, 영역 지정 등 다양한 기능 제공반응형 디자인미디어 쿼리와 함께 유연한 디자인 가능 mdm바로가기w3shools바로가기 1. Container 속성Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.속성설명displayGrid 레이..

베리어블 프로토타입  # number      # String

기본 타입  1. unknown모든 타입의 슈퍼 타입으로, 모든 값이 할당될 수 있습니다.타입이 명확하지 않을 때 사용하지만, any와 달리 제한적입니다. 사용하기 전 명확한 타입으로 좁히는 타입 가드가 필요합니다. 2. any모든 타입을 허용하는 타입으로, 타입 검사를 건너뛰는 역할을 합니다.타입 안정성을 낮출 수 있으므로 가능한 사용을 자제하는 것이 좋습니다. 3. 기본 타입들null: null 값만 가질 수 있는 타입입니다.void: 함수가 값을 반환하지 않을 때 주로 사용되는 타입입니다.number: 숫자 타입이며, Number Enum을 포함합니다.bigint: 큰 정수를 표현하는 타입으로, 일반 숫자보다 큰 정수를 다룰 때 사용됩니다.boolean: true 또는 false의 불리언 값을 가지..

TypeScript란? TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(Superset) 입니다. TypeScript는 JavaScript의 모든 기능을 포함하며, 여기에 정적 타입 지정(Static Typing)과 향상된 도구 지원 등의 기능을 추가하여 더 강력하고 안전한 코드 작성이 가능하게 합니다. 타입스크립트를 배워야 하는 이유 타입 안정성 → 버그 감소JS의 동적 타입 특성으로 생기는 예기치 못한 에러 방지타입이 명확하니 주니어 개발자의 실수도 줄어듦안정된 코드 작성이 가능 → 생산성 향상협업에 유리자동 완성, 타입 추론, 문서화 없이도 코드 이해 가능VSCode에서 호버만 해도 함수/컴포넌트 정보 확인팀 작업 시 커뮤니케이션 비..

mbti 유형검사  MBTI(Myers-Briggs Type Indicator)는 심리 유형 이론을 기반으로 사람들의 성격을 16가지 유형으로 분류하는 성격 유형 검사입니다.  MBTI의 16가지 성격 유형MBTI 성격 유형은 4개의 차원에서 각 성향을 조합하여 총 16가지로 나눌 수 있습니다:E (외향) vs. I (내향)S (감각) vs. N (직관)T (사고) vs. F (감정)J (판단) vs. P (인식)각 MBTI 유형의 의미E (Extraversion, 외향): 외부 세계와의 상호작용을 중시하고 사람들과 교류하는 것을 좋아합니다.I (Introversion, 내향): 내면 세계에 집중하며 혼자만의 시간을 중요시합니다.S (Sensing, 감각): 현실적이고 사실적인 정보를 중시하며, 경험과 ..