roofTopCaat의 코딩노트

- 들어가기 전에 - Lifecycle feature : 인간의 생몰주기와 비슷하게 컴포넌트가 화면에 나타나고 업데이트되고 사라지는 과정을 관리하는 것을 말한다. 대표적으로 `componentDidMount` , `componentsDidUpdate`, `componentWillUnmount` 등의 메소드가 있다 State : 컴포넌트의 데이터, 사용자가 입력한 텍스트나 현재 선택된 탭 등을 말한다 Hook 훅은 React 16.8 버전에서 새로 추가된 기능으로 React의 상태(State)와 Lifecycle feature를 연결해준다 이전까지는 동일한 효과를 내기 위해 클래스 컴포넌트를 사용해야 했다 제일 기초적이고 중요한 UseState 'UseState'는 가장 기본적인 Hook으로 함수 컴포넌트..

일 대 다 ( One To Many ) 일 대 다란 하나의 엔티티가 다른 엔티티 그룹과 여러 관계를 가질 수 있다는 의미이다 일 대 다 관계는 외래 키(foreign key)를 사용하여 DB 테이블 간에 설정된다 외래 키는 '다' 테이블에서 '일' 테이블의 기본 키(primary key)를 참조한다. 이를 통해 데이터의 무결성을 유지하고 관련 데이터 간 연결을 관리한다 예를 들어, 고객과 주문은 일 대 다 관계이다 1) 고객 roofTopCaat은 여러 주문을 넣을 수 있다 2) 한 주문에는 두 고객이 연관될 수는 없다 실제 세계에서는 더 많은 정보가 있겠지만 약식으로 두 테이블의 관계를 살펴보자 이 관계를 통해 고객 ID와 주문 ID로 묶이며 기본 키를 통해 고유한 번호의 고객이 어떤 번호의 주문을 했..

React.js 리액트 없이도 웹사이트는 만들 수 있지만, 웹사이트의 UI가 복잡해지면 복잡해질수록 리액트를 사용하면 훨씬 수월하게 만들 수 있다 React 컴포넌트 Java가 class로 시작해 class로 끝나는 것처럼, React는 컴포넌트가 거의 전부라고 할 수 있다 컴포넌트란 HTML / CSS / JavaScript가 합쳐진 하나의 블록이라고 생각하면 편하다 이는 현대 웹개발에서 절대 빼놓을 수 없는 API와 비슷한 개념이기도 하다 React는 재사용성 / 분산성 면에서 유리하다는 점에서 (대부분의 프로그래밍 방식에서 공통된다) 컴포넌트 방식을 채택해 프론트엔드에 도입시켰다 컴포넌트 빌딩 JSX 문법 React는 기존 JS문법에서 탈피한 JSX문법을 사용한다 JSX문법은 javascript와 ..

클라우드 (Cloud Computing) 클라우드 컴퓨팅은 인터넷을 통해 IT 리소스를 사용한 만큼 지불하는 종량제 형식으로 제공하는 것을 말한다 이를 온 디맨드 (On - Demand) 라 지칭한다 (수요에 반응함) 당신이 만약 게임 기업을 운영한다고 쳤을 때, 서비스의 파이가 커지고 유저 수가 늘어나면 그만큼의 서버 수와 저장공간이 필요하게 된다 여기서 클라우드 컴퓨팅이 적용되면, 1) 클릭 몇 번으로 즉각적으로 서비스를 사용자에게 제공 가능하다 2) 서버실이나 방대한 양의 저장 디스크가 필요 없어지며 필요만 만큼의 컴퓨팅 리소스를 프로비저닝해 최고의 효율을 뽑아낼 수 있다 3) 서버, 스토리지, DB와 일련의 애플리케이션의 통합적 서비스를 쉽게 이용 가능하다 4) 상기 서술한 온 디맨드 형식을 통해..

시맨틱 HTML 이란 시맨틱 HTML은 HTML문서를 작성할 때 다수의 사람이 직관적으로 이해가 가게끔 설정된 명칭의 모임이다 1. / navigation header 태그는 웹 페이지의 탑 섹션, 특히 메인 타이틀 / 로고 / 링크 내비게이션등으로 구성되며 웹 페이지에 처음 방문하는 유저들이 페이지의 목적성을 파악할 수 있는 부분이다 nav 태그는 주로 웹 페이지 메뉴 항목을 탐색하는 곳에 쓰인다 roofTopCaat hello, my name is roofTopCaat # my github repo # my tistory blog # my skill stacks 2. main 태그는 웹 페이지의 주요 내용을 담당한다 About my Blog Welcome to my Tistory Blog! 3. ar..

Media Query 컴퓨터, 스마트폰, 태블릿 등의 다양한 디바이스 환경에 맞춰 변화하는 UI 셋을 만들어 주기 위한 CSS 기술이다 미디어 쿼리는 미디어 유형과 미디어 특성을 기반으로 동작한다 미디어 유형은 장치의 종류가 어떤 것인지를 말하며 미디어 특성은 장치 속성이나 상태를 기반으로 하며 화면 너비 / 장치 방향 / 픽셀 밀도등을 포함한다 미디어 유형 , 쿼리 연산자 , 쿼리 조건은 다양하나 대표적으로 쓰이는 것은 screen이며 생략가능하다 추후 필요에 따라 검색하면 되기에 깊게 들어가지 않는다

CSS 포지셔닝의 종류 Static (정적 포지셔닝) Relative (상대적 포지셔닝) Absolute (절대적 포지셔닝) Fixed (고정적 포지셔닝) 1) Static(정적) 포지셔닝 고정적 위치값을 가지며 left나 top값을 추가할 수는 있지만 기능하지 않는다 2) Relative(상대적) 포지셔닝 고정적 위치값을 지니나 left나 top 등으로 위치값을 상대적으로 변화시킬 수 있다 3) Absolute(절대적) 포지셔닝 가장 가까운 ancestor의 위치와 상대적으로 관련된다 참고할 ancestor가 없다면 좌측 상단에서부터 값이 적용된다 4) Z - index z 인덱스는 가로세로 xy축 다음의 3차원적 포지션이다 일반적으로 -1과 0값으로 위치를 조정한다 5) Fixed(고정적) 포지셔닝 ..

1) Group (복수 지정) h1, h2, ...임의값 { background-color:blueviolet; color:red } 2) Parent > Child (내부 자식이 한 단계 아래일 때만) .Parent div > Child div { color:firebrick; } ABC ㄱ ㄴ ㄷ .box > "done" { } 이나 .box > "list" { } 로 선택가능하다 3) Descendant (손자선택기) (하나의 최상위 항목에서 중위를 생략하고 하위 항목을 선택한다) (이 값에 부모자식 > 를 넣어서 하면 작동되지 않는다) .최상위 div li { color:blue; } 4) Chaining (선택기 연결) (모든 선택기가 참일 때 적용) (사이 띄어쓰기가 없다) element.di..