본문 바로가기
반응형

프론트엔드6

[로드맵] Javascript 로드맵 1. Javascript1.1 Javascript(기본: VanillaJS + ModernJS) 1.2 Javascript(상세) 1.3 Javascript(기본: ES2018이후) 2. Typescript2.1 Typescript 2.2 Typescript(상세) 3. 코딩테스트3.1 프로그래머스 4. 전문분야4.1 웹: 프론트엔드(HTML/CSS/Bootstrap/JS/React.js) 4.2 웹: 백엔드(Node.js/Express.js/Socket.io/Nest.js) 2024. 7. 13.
[프론트엔드] 목차 프론트엔드 개발 학습 시리즈1. 프론트엔드 개발 개요프론트엔드 개발이란?프론트엔드 개발의 정의와 역할프론트엔드와 백엔드의 차이프론트엔드와 백엔드의 주요 차이점과 협업 방식프론트엔드 아키텍처SPA, MPA, PWA의 개념과 차이점2. HTML 기초와 고급HTML 기본 문법HTML 문서 구조, 태그와 속성시맨틱 HTMLheader, footer, nav, section, article 등폼과 입력 요소폼 태그, 입력 필드, 버튼, 폼 속성멀티미디어 요소오디오, 비디오, 캔버스 요소3. CSS 기초와 고급CSS 기본 문법선택자, 속성-값 쌍, 외부 스타일시트레이아웃 기초박스 모델, 여백, 패딩, 테두리, 너비와 높이레이아웃 고급Flexbox, Grid 레이아웃반응형 디자인미디어 쿼리, 반응형 이미지와 비디오4.. 2024. 6. 26.
[개발 규칙] CSS 규칙 CSS 코딩 컨벤션CSS 코딩 컨벤션은 CSS 코드를 일관성 있게 작성하여 가독성을 높이고, 유지보수를 용이하게 하며, 팀 협업을 원활하게 합니다. 아래는 CSS 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따릅니다./* 좋은 예: 2칸 들여쓰기 */.selector {property: value;}/\* 좋은 예: 4칸 들여쓰기 \*/ .selector { property: value; }2. 중괄호 위치(Braces)중괄호: 여는 중괄호는 동일한 행에 시작하고 닫는 중괄호는 새 줄에 위치합니다. /* 좋은 예 */ .selector { property: value; } /* 나쁜 예 */ .. 2024. 6. 8.
[개발 규칙] HTML 규칙 HTML 코딩 컨벤션HTML 코딩 컨벤션은 HTML 코드를 일관되게 작성하여 가독성을 높이고, 유지보수를 쉽게 하며, 협업을 원활하게 합니다. 아래는 HTML 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따르세요.Text Text```2. 태그와 속성의 소문자 사용소문자 사용: 태그와 속성 이름은 소문자로 작성합니다.```3. 속성 값에 따옴표 사용속성 값 따옴표: 속성 값은 항상 따옴표로 감쌉니다.```4. 자체 닫는 태그(Self-closing Tags)자체 닫는 태그: XHTML처럼 자체 닫는 태그는 /를 사용하지 않습니다.```5. 의미론적 태그 사용(Semantic HTML)의미론적 태그: 가능한.. 2024. 6. 8.
[진행 계획표] Year03. 프로그래밍 기본 JavaScript / TypeScript (선택이유) - 웹 개발에 있어 주요 언어 - 프론트 엔드 / 백엔드 모두 사용 가능 (환경 설정) - Windows: Visual Studio Code + Node.js - Mac OS: Visual Studio Code + npm 1) Javascript 기본 문법 - Vanilla Javascript - Modern Javascript - Javascript documentation - Node.js - Node.js documentation - npm 2) Typescript 기본 문법 - Typescript - Typescript 가이드북 3) Frontend - HTML / CSS - CSS documentation - CSS Style Sheet -.. 2023. 9. 16.
[Javascript 로드맵] 자바스크립트 로드맵 - Notion Tutorial : https://www.notion.so/ko-kr/help/guides - Git Tutorial : https://git-scm.com/book/en/v2 - Visual Studio Code : https://code.visualstudio.com/docs - VSCode Extension: Liver Server / Javascript Code Snippets / Prettier / ESLint - (MacOS)NVM으로 Node 관리: https://dev-yakuza.posstree.com/ko/environment/nvm/ - 생활코딩 : https://opentutorials.org/course/3084 - Heropy 블로그 : https://heropy.. 2023. 4. 16.
반응형

티스토리툴바