ERD (Entity Relationship Diagram) 개체 (Entity)와 관계 (Relationship)를 중점적으로 표시하며 데이터베이스 구조를 한 눈에 알아보기 위한 다이어그램을 말합니다. 요구사항 분석에서 얻은 개체와 속성들의 관계를 그림으로 표현한 것으로 개체 관계도라고도 합니다. 구성 요소 엔티티 (Enti...

데이터 모델 현실 세계의 정보들을 컴퓨터에 표현하기 위해 단순화, 추상화하여 체계적으로 표현한 개념적 모형입니다. 데이터베이스 설계 과정에서 데이터의 구조를 논리적으로 표현하기 위해 사용되는 도구입니다. 구성 요소 개체 (Entity) 데이터베이스에 표현하려는 것으로 현실 세계의 대상체를 의미합니다. 현실 세...

App.jsx 파일 생성하기 src 폴더에 App.jsx 파일을 작성하겠습니다. 레이아웃 설정 먼저 콘텐츠 영역을 구분하기 위해 Wrapper로 묶어줍니다. Wrapper에는 max-width와 padding을 설정해주고 margin : 0 auto로 중앙정렬 해줍니다. 그 다음 Container로 묶어 안의 내용을 display : fl...

React Routing React는 웹 사이트의 전체 페이지를 하나의 페이지로 담아 동적으로 화면을 변환해가며 보여줍니다. 이러한 방식을 SPA (Single Page Application)이라고 합니다. SPA에서는 사용자에게 브라우저의 주소(URL)에 따른 다양한 화면을 보여줄 수 있습니다. URL에 따라서 그에 상응하는 다양한 화면을 보...

Link 컴포넌트 React에서 사용하며 a 태그와 유사하게 동작합니다. a 태그는 전체 페이지를 새로고침하므로 상태 값을 유지하지 못하며 속도도 저하됩니다. Link 컴포넌트를 클릭하면 URL 경로가 바뀌면서 해당 경로로 지정된 컴포넌트만 재렌더링합니다. 외부 프로젝트에 연결에 사용 프로젝...

useLocation The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes. useL...

data.json 파일 아직 Server를 구현하지 않아 정보를 받아올 수 없기때문에 json파일로 간단한 data.json을 만들어보겠습니다. [ { "id": 1, "title": "리액트에서 리스트 렌더링하기", "content": "안녕하세요.\n이번 글에서는 리액트에서 리스트를 렌더링하는 방법에 대해서 배워보겠습니...

CSS로 텍스트 라인 수 조절하기 한 줄로 제한하기 (white-space) 가장 흔하게 사용되는 한 줄로 조절하는 방법입니다. 위 예시는 영역을 넘어가는 부분을 표시하지않고 끝에 …을 추가합니다. 적용방법 CSS의 3가지 속성을 사용해서 표현합니다. white-space: no-wrap, overflow: hidden, text...

Wrapper Wrapper나 Container는 보통 그룹이 다른 요소 안에 감싸져있거나 포함되어 있는 것을 말합니다. 위 그림에서 Wrapper는 aside와 main을 감싸고 있습니다. <div class="Wrapper"> <aside></aside> <main></main>...

미니 블로그 기획해보기 필요한 기능 글 목록 보기 기능 (리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 주요 컴포넌트 구성하기 글 목록 보기 기능 : MainPage, PostList, PostL...