프로그래밍, 개발 (13) 썸네일형 리스트형 [CSS] position MDN 공식문서 - position(링크) 설명 The position CSS property sets how an element is positioned in a document. CSS에서 position 속성은 요소가 문서(html)에서 어떻게 위치되는지를 결정한다. The top, right, bottom, and left properties determine the final location of positioned elements. 위, 오른쪽, 아래, 왼쪽 속성은 position 속성이 적용된 최종 위치를 결정한다. W3Schools 문서 - position(링크) 설명 The position property specifies the type of positioning method used .. 리액트로 개발하기 - react-router-dom (setup부터 예제까지) React Router 공식문서 Setup yarn add react-router-dom 공식문서에서는 npm command로 나와있지만, 나는 yarn 을 사용하고 있기 때문에 위와 같은 커맨드 라인을 터미널에 쳐주었다. 그리고 다시, yarn start. Create a Browser Router createBrowserRouter 를 통해서, router 를 만들어주고, 진입점인 index.js 파일에 해당 라우터를 설정해준다. 이렇게 해주어야 웹 애플리케이션에서 라우팅이 동작할 수 있게 된다. import React from "react"; import ReactDOM from 'react-dom/client'; import './index.css'; import { createBrowserRou.. 리액트로 개발하기 - create-react-app으로 프로젝트 시작 React로 개발을 시작하기에 앞서 설치해야 하는 것들은 다음과 같다. nodejs npm yarn 설치가 끝나면, 아래의 코드를 쳐서 react 프로젝트를 생성할 수 있다. 공식홈페이지 yarn create react-app my-app yarn을 사용해서 react-app을 생성하는 것이고 my-app이 위치한 곳에는 프로젝트 이름을 적어주면 된다. 실질적으로 아래의 패키지, 파일들은 수정할 일이 거의 없다고 보면 되고, yarn 에서 외부 라이브러리 설치 및 실행 시에 필요한 것들이어서 크게 신경쓰지 않아도 된다. .yarn node_modules yarn.lock .pnp- 신경써서 봐야하는 부분은 바로 아래 패키지다. public src public은 정적 리소스들이 위치한 패키지다. 그리고 작.. 리액트로 개발하기 - Component 생성 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 위 코드는 이런 내용이다. 1. ReactDOM이 id가 root인 요소를 찾아서 가상의 요소를 만들고 2. 여기서 App이라는 컴포넌트를 만들어라. StrictMode란? 공식문서에서는 이렇게 나와있다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. import React from 'react'; function Exampl.. 왜 계층형 아키텍처로는 충분하지 않은가 계층형 아키텍처란? 웹 -> 도메인 -> 영속성 계층으로 구성된 전통적인 웹 애플리케이션 구조를 3계층 아키텍처라고 한다. 1. 웹 계층에서는 요청을 받는다. 2. 그 요청을 도메인 계층에 있는 서비스로 보내서 비즈니스 로직을 수행한다. 3. 도메인 엔티티의 조회 및 저장을 위해서 영속성 계층을 호출한다. 이 계층형 아키텍처는 굉장히 전통적인 형식이다. 전통적이라는 것은 오랜 시간에 걸쳐 장점을 인정받고 살아남았다는 뜻이다. 계층형 아키텍처는 각 계층에 독립적으로 로직을 작성할 수 있는 견고함을 가진다는 장점이 있다. 하지만 이 계층형 아키텍처의 문제점은 바로 변화에 대응하기 어려운 소프트웨어가 될 수 있다는 것이다. 데이터베이스에 의존성이 높다는 것 애플리케이션의 존재 목적은 비즈니스의 규칙과 정책을 .. 객체지향설계원칙(SOLID) ⑤ - DIP DIP DIP는 Dependency Inveresion Principle, 의존성 역전 원칙을 말합니다. In object-oriented design, the dependency inversion principle is a specific methodology for loosely coupling software modules. When following this principle, the conventional dependency relationships established from high-level, policy-setting modules to low-level, dependency modules are reversed, thus rendering high-level modules indepe.. 객체지향설계원칙(SOLID) ① - SRP SRP The single-responsibility principle (SRP) is a computer programming principle that states that "A module should be responsible to one, and only one, actor." The term actor refers to a group (consisting of one or more stakeholders or users) that requires a change in the module. Robert C. Martin, the originator of the term, expresses the principle as, "A class should have only one reason to ch.. 왜 그래프 데이터베이스를 사용하는가? What is a Graph Database? A graph database stores nodes and relationships instead of tables, or documents. Data is stored just like you might sketch ideas on a whiteboard. Your data is stored without restricting it to a pre-defined model, allowing a very flexible way of thinking about and using it. 그래프 데이터베이스는 노드와 관계를 저장한다. 데이터는 화이트보드에 아이디어를 스케치하듯이 저장되고, 이미 정의된(pre-defined) 모델(table, documents)에.. 이전 1 2 다음
