* 컴포넌트 개념 컴포넌트는 웹페이지에서 특정한 기능을 담당하는 부분을 그룹핑해서 모듈화시킨 요소이다. 예를 들면, 네비게이션 기능을 담당하는 네비게이션 컴포넌트, 리스트 중 하나의 아이템을 보여주는 아이템 컴포넌트, 상세한 내용을 보여주는 상세 컴포넌트 등이다. 즉, HTML 문서(웹페이지)에서 특정한 기능을 담당하는 HTML 요소들의 그룹이다. 아래는 아이템 컴포넌트의 예시다. todo name todo description * 컴포넌트 사용하는 이유 컴포넌트를 사용하는 이유는 웹페이지에서 공통적으로 사용되는 HTML 요소들을 그룹으로 묶어서 재사용하기 위함이다. 프로그래밍 언어의 함수나 모듈과 유사한 역할을 한다. 또한, 재사용하지 않더라도 웹페이지에서 특정한 기능을 담당한다고 생각되는 부분이 명확..

* 리액트 설치하기 리액트 설치 가이드 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org npx create-react-app syleemomo-react 또는 npx create-react-app@latest syleemomo-react cd syleemomo-react npm start Node 14.0.0 이상 버전 및 npm 5.6 이상 버전이 필요하다. 위 명령어로 잘 설치가 되지 않으면 아래와 같이 create-react-app 모듈을 먼저 설치한 다음에 CMD 창에서 create-react-app 명령어로 폴더를 생성하자! npm install -g create-react-app cr..

참고 블로그 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 그리드 기본개념 - 컨테이너에 적용하는 속성들 A B C D E F G H I .container{ display: grid; border: 3px solid #333; } .container .item{ background-color: orange; margin: .1rem; } 컨테이너에 적용하는 속성 (grid-template-columns, grid-template-rows, -ms-grid-rows, -ms-grid-columns) ..

참고 블로그 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work 참고 문서 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org 참고 문서 2 미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN CSS Media Query는 예를 들..

참고 블로그 CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog 참고블로그 2 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com flexbox 로 만들수 있는 10가지 레이아웃 * 컨테이너 속성 display: flex .cont..

* 프로젝트 개요 회사에서 온라인 도서 서비스를 런칭한다고 하자. 아래 데이터 모델 설계와 API 설계를 활용하여 도서 서비스 API 서버를 구현하고 테스트 해보자! * 데이터 모델 설계 - Book 필드명 설명 데이터 타입 title 책의 제목 - 필요 문자열(String) author 책의 저자 - 필요 문자열(String) summary 책의 내용 요약 문자열(String) genre 책의 장르 문자열(String) release 책의 발매일 - 필요 문자열(String) ISBN 책의 국제표준도서정보 - 필요 숫자(Number) 책의 발매일은 같은 제목의 책이라도 개정판은 날짜가 다를수 있으므로 필요한 필드로 설정한다. * 데이터 모델 설계 - User 필드명 설명 데이터 타입 name 사용자 이..

프로젝트 구조 food-recipe-app ___ index.html |___ style.css |___ app.js 프로젝트 구조는 간단하다. food-recipe-app 이라는 루트폴더 아래 HTML, CSS, JAVASCRIPT 파일 3개가 있다. 웹페이지 레이아웃 설계 프로토타이핑을 참고하여 웹페이지 레이아웃을 간단하게 설계하였다. 네모 박스는 모두 div 요소(element)를 가리킨다. 우선 헤딩(heading)과 검색창이 들어가는 상위 div 요소와 사진 리스트가 들어가는 하위 div 요소로 분리하였다. 그 다음은 상위 div 안에 헤딩과 검색창을 화면 중앙에 정렬하기 위한 div 요소가 들어간다. 그리고 중앙에 정렬된 div 안에 헤딩을 담기 위한 div 요소와 검색창을 담기 위한 div ..

express 라우팅 참고문서<figure id="og_1634602562184" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Express 라우팅" data-og-description="라우팅 라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응..

* CSS 구조 div{ background-color: blue; } CSS 는 선택자(selector)와 중괄호({ }) 안의 속성이름(attribute name) : 속성값(attribute value) 이 콜론(:)으로 연결되어 있다. 여기서는 div 가 선택자이다. 의사 클래스 참조문서 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org * 의사 클래스 제출 #submit{ all: unset; background-color: skyblu..

* HTML 뼈대구조 DOCTYPE - 해당문서의 HTML 버전을 알려주는 역할 (html 5 버전) head - 해당 문서에 대한 정보인 메타데이터(metadata)를 알려주는 역할 meta 태그의 charset 속성 - 해당 문서의 문자 인코딩 방식을 지정하는 역할 meta 태그의 name 속성 - 해당 문서에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어하는 역할 meta 태그의 content 속성 - 모든 장치에서 웹화면이 잘 보이도록 뷰포트(viewport)를 설정하는 역할 title - 브라우저 탭에 표시되며 웹 페이지의 제목을 설정하는 역할 body - 브라우저 화면에 보이는 모든 태그를 감싸주는 역할 * HTML 요소의 구성 사진 갤러리 앱 사진 갤러리 앱 - 요소(elem..