front-end

2023년 8월 14일부터 8월 25일까지 진행된 >wecode 49기 Pre-course에서 배운 내용을 정리한 포스트입니다.

N/A디자인 시안에 따른 UI 구성 (HTML & CSS) \- 코드 컴포넌트화 \- 반응형 / 크로스 브라우징 \- SEO / 접근성 \- 각종 최적화화면 조작 (JavaScript) \- 마우스, 키보드, 스크롤 이벤트 등 \- 동적인 화면 \- 사용자

git bash의 sh도 Shell을 의미할까요?프론트엔드 개발자가 Linux와 Terminal, 그리고 Database에 대하여 얼만큼의 지식이 필요할까요?운영 체제(OS, Operating System) \- 컴퓨터라는 도구와 소통 및 명령 할당할 수 있는 중간

분산 버전 관리 시스템(VCS)의 하나 프로젝트의 변경 사항을 기록, 특정 시점의 버전으로 회귀, 여러 개발자와의 협업 등을 위해 필요한 툴Git repository: Git으로 관리하는 저장소 \- Local repository: 본인의 컴퓨터에 저장된 프로젝트 저

메타(前 페이스북)에서 개발 및 관리하는 JavaScript Library특징 \- 선언적: 절차적인 방식의 JavaScript와는 달리 "어떻게"를 고민하지 않아도 됨 \- Virtual DOM \- Component: 재사용 가능한 UI 구성 단위, 독립 사용

JavaScript가 브라우저가 아닌 외부 환경에서 동작하는 JavaScript 실행 환경설치 시 오랜 기간 지원이 가능한 버전인 LTS(Long Term Support) 버전이 안정적npm(node package manager)는 개발 시 필요한 패키지를 관리할 수

Route: 일종의 경로Routing: 경로를 찾는 행위Router: 경로를 찾는 행위를 해주는 도구프론트엔드의 영역에서의 Routing은 다른 경로(url)에 따라 다른 화면(view)를 보여주는 것을 의미SPA(Single Page Application)는 HTML

혹시 아래 주소가 변경될지도 모르기 때문에 Homebrew 링크를 남겨 놓습니다.터미널 오픈 후 아래 명령어 Copy & PasteHomebrew 버전 확인아래 명령어 차례대로\\ 입력계정명 확인 방법: Finder > 이동 > 홈 > 좌측 상단 확인nvm 설치nvm

해당 자료는 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.HTML과 CSS, 그리고 낮은 수준의 JavaScript를 다루는 웹 퍼블리셔는 기본적으로 웹과 웹 표준에 대해 알아야 합

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.HTML은 태그(Tag)로 구성되어 있고, 그 구성을 엘리먼트(Element)라고 합니다.HTML의 attribu

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.서식 태그 중 i 태그를 아이콘 태그처럼 사용하는 예시가 많습니다만, 시맨틱하지 않은 사용 방법입니다.CSS 적용

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.HTML에서 가장 중요한 태그는 a 태그입니다. CSS display property는 다양한 계열로 나뉩니다.

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.table 태그는 과거 align, bgcolor 등의 스타일을 태그 내에 직접 적용할 수 있었으나, 이제는 미지

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.form 태그의 포함된 요소들은 input 태그, select 태그 등이 있으먀, 각각은 서버로 전달되는 이름과

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.HTML5.2에 이르러 많은 변화가 있었습니다.Semantic tag는 '의미를 가지는 태그'를 뜻합니다.

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.CSS는 Cascading Style Sheet의 줄임말입니다. 따라서 '상속'이라는 개념이 중요합니다.CSS S

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.기본적으로 CSS 속성은 나중에 선언된 경우가 우선 순위가 높습니다.그러나 나중에 선언되었다 해도 극복할 수 없을

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.실무에서 CSS는 HTML 외부에서 만들고 그것을 연결하여 사용하는 방식인 외부 스타일 시트(External St

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.CSS 상속(inherit)은 부모 요소에서 자식 요소로 속성값이 전달됨을 의미합니다.폰트 관련된 속성값(font

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.웹 폰트 사용 시에 폴백 폰트를 함께 선언해야 합니다. 폴백 폰트는 주로 OS에서 설치된 시스템 폰트를 선언하는

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.CSS 속성 중에서 margin, padding, border-radius 등은 value를 축약(shorthan

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.HTML 태그도 CSS 선택자와 속성, 값도 웹 표준이 되기 위한 과정이 존재합니다.벤더 프리픽스(vendor p

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.요소 중앙 정렬의 두 번째 방법은 position과 transform을 이용하는 것입니다. 첫 번째 방법(posi

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.flex는 부모 요소인 flex container에게 주는 속성과 자식 요소인 flex item에게 주는 속성을

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.flex: 1은 실무에서 빈번하게 사용합니다.적응형 웹과 반응형 웹의 차이는 뚜렷합니다.반응형 웹의 3요소는 뷰포

해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다.user agent stylesheet를 초기화하기 위해 reset, base, initialize 등으로 명명된

Syntactically Awesome Style SheetsLess, Stylus와 같은 CSS 전처리기(CSS Preprocessor)의 일종네스팅, 변수 사용, 조건문 등 다양한 기능 내장Sass 3.0을 Scss라고 부름

상태(state)와 라이프 사이클(lifecycle) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 함수사용 규칙 \- 함수 컴포넌트 내부에서 호출 \- 커스텀 훅 내부에서 호출 \- 최상위에서 호출종류: useState, useEffect, useC

JavaScript에서 객체와 배열은 사용 빈도가 높은 자료 구조객체와 배열에 저장된 데이터를 전체가 아닌 부분만 추출하여 사용하고자 할 때의 번거로움을 줄이고자 구조 분해 할당을 사용구조 분해 할당은 객체와 배열을 '변수'로 분해할 수 있음

Clean Up Effect: setInterval과 그것을 초기화하는 ClearInterval까지 이해한 상태 (20230909)예를 들어, 단순하게 input 받아 output 내는 함수는 Side Effect가 없는 순수 함수라고 함그러나 외부의 값을 읽어오거나

반복적인 UI를 하드코딩하지 않고 데이터를 만들어놓고 Array.map() 메서드를 이용하여 UI를 표현백엔드 API가 완전하지 않아도 프론트엔드 개발은 가능그것을 가능케 하는 것인 Mock Data, 즉 모조 데이터이 데이터는 실제 서버에서 주는 데이터의 형식과 동일

이 자료는 프로젝트의 원활한 진행을 위해 제작된 것입니다.

이 글을 지난 9월 11일부터 15일까지 진행된 미니 프로젝트의 과정을 아카이빙하기 위해 작성되었습니다.SNS 쓰레드 서비스와 유사한 UI의 Wereads라는 가상의 서비스를 개발하는 것이 1차 프로젝트의 목표였습니다.필수 구현 사항은 회원 가입과 로그인으로 이어지는

이 글을 지난 9월 18일부터 10월 6일까지 진행된 미니 프로젝트의 과정을 아카이빙하기 위해 작성되었습니다.이번 프로젝트의 목표는 제시된 여러 사이트 가운데 하나를 선택해 클론 코딩을 하는 것이었습니다.단순하게 웹 사이트를 구현하는 것이 아니라, PET(Product

이 글을 지난 10월 9일부터 10월 27일까지 진행된 미니 프로젝트의 과정을 아카이빙하기 위해 작성되었습니다.

vite 설치프로젝트명 설정프레임워크 설정 (React / etc)템플릿 설정 (Variant: TypeScript / JavaScript / etc)기본 패키지 설치추가 패키지 설치react-router-dom styled-componentsstyled-resetre