반응형 분류 전체보기68 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 32 (코멘트, 세미콜론, 자료형, 변수, 함수의 선언 및 사용) 목차코멘트(Comments)세미콜론(Semicolon)자료형(Data Type)변수(Variables)함수(Function)의 선언 및 사용오늘 하루를 돌아보며 코멘트(Comments)주석이라고도 부르며, JavaScript에서 발생하는 문제를 해결하는 데 도움이 되는 추가 메모를 작성할 수 있다. 주석은 코드 실행에 아무런 영향을 주지 않는다. JavaScript에서는 다음의 두 가지 형태로 주석을 처리할 수 있다.// 한 줄 주석/* 여러 줄 주석 */ 세미콜론(Semicolon)JavaScript에서는 줄 끝에 세미콜론(;)을 추가하지 않아도 정상 작동한다. 세미콜론을 자동으로 삽입(ASI, Automatic Semicolon Insertion)하기 때문이다. 세미콜론을 추가하는 것은 선택 사항.. 2025. 6. 10. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 31 (프로그래밍, JavaScript 에코 시스템, JavaScript 시작하기) 목차프로그래밍JavaScript 에코 시스템(생태계)JavaScript 시작하기오늘 하루를 돌아보며 프로그래밍프로그래밍 언어프로그래밍 언어는 사람이 컴퓨터와 소통할 수 있는 방식이다. 이런 방식 중 하나가 JavaScript다. 사람이 컴퓨터에게 명령을 내리는 방법에는 특별한 규칙과 명령이 있다.머신 코드(Machine Code): 기계 언어라고도 부르며, 컴퓨터가 직접 알아들을 수 있는 유일한 언어다. 0과 1로 구성되어 있다.프로세서(Processor): 작은 칩(Chip)으로 사람이 컴퓨터에게 명령하는 것들을 처리한다. 머신 언어를 처리하는 컴퓨터의 두뇌라고 볼 수 있다. 무언가를 입력(input) 받고, 출력(output)한다.저수준 언어(Low Level Language): 컴퓨터에 더 가까운.. 2025. 6. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 23-30 (UI 프로젝트 회고) 목차1일 차2일 차3일 차4일 차5일 차6일 차7일 차가장 기억에 남는 일 1일 차UI 프로젝트는 컴포넌트화하는 것에 익숙해지는 것이 목표였다. 다양한 시안을 제공해 주셨고, 다양한 컴포넌트를 만들고, 시간이 남는다면 컴포넌트를 모아서 페이지를 만들 수 있다고 하셨다. 우리 조는 웹디스코드를 클론한 페이지를 만들어 보기로 했다. DM 탭에서 친구 목록을 클릭하면 친구와의 채팅이 보이듯이 각자 소개를 보여주고, 채널 탭에서는 각자 만든 부분을 설명하는 채팅이 보이도록 꾸며봤다. 라디오 버튼을 사용해서 화면 전환이 되도록 해보자고 하고 프로젝트를 시작했다. 나는 맨 왼쪽에 있는 탭을 만들기로 했다. 잘 한 것라디오 버튼을 지난 번 로그인 과제에서 '로그인 유지' 체크박스를 만들었던 것처럼 해봤다. labe.. 2025. 6. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 22 (TailwindCSS 핵심 개념, Git rebase) 목차반응형 디자인사용자 정의 스타일함수 및 디렉티브(Directives)Git rebase오늘 하루를 돌아보며 반응형 디자인미디어 쿼리반응형 유틸리티 베리언트(variants)를 사용해 반응형 컴포넌트를 구현할 수 있다. Tailwind CSS의 모든 유틸리티는 중단점(breakpoints)을 지원해서 조건에 따라 복잡한 인터페이스를 구현할 수 있다. 기본적으로 Tailwind CSS는 모바일 퍼스트 중단점을 사용하며, 중단점 접두사별 최소 너비와 미디어 쿼리는 아래와 같다.중단점 접두사최소 너비미디어 쿼리sm640px@media (width >= 40rem) { ... }md768px@media (width >= 48rem) { ... }lg1024px@media (width >= 64rem) { .... 2025. 5. 22. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 21 (TailwindCSS Vite 환경 구성 및 기초) 목차@layer 규칙TailwindCSS Vitepublic 폴더와 src 폴더의 차이Tailwind 핵심 개념(Core Concepts)상태 디자인테마 변수오늘 하루를 돌아보며 @layer 규칙@layer at-rule은 캐스케이드 레이어를 선언할 때 사용한다. 여러 캐스케이드 레이어가 있을 경우에는 우선순위를 정의할 때도 사용할 수 있다.레이어 이름을 선언한 후, 레이어의 스타일을 정의할 수 있다./* 레이어 선언 */@layer module, state;/* state 레이어 스타일링 */@layer state { .alert { background-color: brown; } p { border: medium solid limegreen; }}/* module 레이어 스.. 2025. 5. 21. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음 반응형
