1. Style JSX 스타일을 꾸미는 방법 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } 컴포넌트에 CSS를 적용시켜준다. global : 모든 컴포넌트에 CSS 적용한다. - NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용) 2. Custom App Component ( 템플..

* NextJS 프로젝트 설치 및 실행 * https://cocococo.tistory.com/42 * Source Code * https://github.com/kangilbin/React.js/tree/master/nextjs-study 1. Routes pages 폴더 안에 새로운 page 파일을 넣게 되면 자동으로 이동할 수 있다. ( about.tsx ) export default function Potato() { return "about"; } export default로 만들어 주어야한다. 함수명은 상관없다. 파일 이름이 그대로 url로 들어간다. index 파일은 메인 홈페이와 연결되어있다. http://localhost:3000 => index 페이지 2. Routing import L..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * Pre-Rendering, SSR, CSR 개념 * https://cocococo.tistory.com/41 1. NextJS 실행 과정 1) reactJS를 백엔드에서 동작시켜서 페이지를 미리 만들어 컴포넌트들을 렌더링 시킨다. 2) 렌더링이 끝났을 때 HTML이 되고 HTML를 페이지 소스 코드에 넣어준다. 3) 사용자는 자바스크립트와 reactJS가 로딩되지 않더라도 콘텐츠를 볼 수 있다. 4) react가 로딩이 끝났을 때 기본적으로 존재하는 것들과 연결시켜주어 react ..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * ReactJS는 Client-Side-Rendering 방식이다. 1.Client-Side-Rendering( CSR ) 이란? CSR은 클라이언트(사용자)에서 모두 처리하는 방법으로 서버에서 전체 페이지를 최초에 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. SSR과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것이다. ( 최초 렌더링된 HTML ) ..

REST API REST(Representational State Transfer) 란? HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. REST API 란? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. 크게 URL, HTTP 메서드, 요청 매개변수 또는 요청 바디로 구분된다. 1. URL 맵핑 import org.springframework.web.bind.annotation.GetMapping; import org.springframework..

DTO DTO란? 계층 간 데이터 교환을 하기 위해 사용하는 객체로, DTO는 로직을 가지지 않는 순수한 데이터 객체(getter & setter 만 가진 클래스)이다. HTTP 응답을 반환할 때 비즈니스 로직을 캡슐화하거나 추가적인 정보를 함께 반환하려고 DTO를 사용한다. 따라서 컨트롤러는 사용자에게 DTO를 요청 바디로 넘겨받고 이를 Entity로 변환해 저장해야 한다. 즉, 서비스의 메서드에서 리턴하는 Entity를 DTO로 변환해 리턴해야 한다 1. DTO 구현 import com.example.demo.model.TodoEntity; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok..

REST API REST(Representational State Transfer) 란? HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. REST API 란? 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. JPA JPA 란? DB 테이블과 객체 사이의 매핑을 처리해주는 ORM(객체와 DB 맵핑해주는 것)이란 기술의 표준이다. * 개발 환경 아래 주소를 보고 참조 * https://cocococo.tistory.com/36 * Source Code *..

Lombok 롬복 라이브러리를 이용하면 getter, setter, builder, constructor를 작성하는데 시간을 소모할 필요가 없다. 롬복이 제공하는 어노테이션 프로세스가 자동으로 작성해 준다. 1. Lombok 설치 방법 1-1) https://mvnrepository.com/ 사이트에서 Lombok 다운 원하는 버전을 다운로드한다. 1-2) Lombok 설치 방법 ( 파일 이동 ) 다운로드한 lombok.jar 파일을 이클립스가 있는 곳으로 이동시킨다. ( Lombok Install ) cmd 터미널 또는 powershell를 켜서 jar 파일이 다운로드 된 디렉터리로 이동 후 롬복 해당 명령어를 통해 설치한다. java -jar lombok-1.18.6.jar 이클립스가 자동으로 잡힌다..

스프링 부트 프로젝트 생성 1. Spring Initializr로 Spring Boot 프로젝트 생성하기. 1-1) https://start.spring.io/ 링크 이동 원하는 옵션 및 버전 선택할 수 있다. 1) ADD DEPENDENCES를 클릭하여 사용하고자 하는 라이브러리를 선택한다. 2) GENERATE를 클릭하여 파일을 다운로드하고 압축을 푼다. 1-2) 이클립스에서 import 받기 1) 이클립스 실행 후 File → import를 선택 2) 프로젝트를 Gradle로 만들었다면 Existing Gradle Project를 선택 3) 압축을 풀었던 프로젝트 폴더를 선택 후 next 클릭 4) 옵션 선택 Gradle Wrapper 윈도우에서 Gradle을 설치하지 않았지만, 프로젝트를 다운로드..

Observer Pattern 이벤트가 발생할 때마다 ‘즉각적으로 처리’할 수 있도록 만드는 프로그래밍 패턴으로 이벤트가 일어나는 것을 감시하는 감시자의 역할을 만든다고 하여 옵저버라고 한다. ex) 키의 입력, 터치의 발생, 데이터의 수신 등 이벤트란? 함수로 요청하지 않았지만 시스템이나, 루틴에 의해서 발생하게 되는 동작들을 이벤트라고 부른다. 1. 기본 개념 B에서는 자신의 이벤트를 받을 수 있는 인터페이스를 만들어 공개하고 A는 이를 구현하여 B에 넘겨주면 인터페이스만 알아도 이벤트를 넘겨줄 수 있다. 이때 이 인터페이스를 ‘Observer’ 또는 코틀린에서는 ‘Listener’라고 부르며 이렇게 이벤트를 넘겨주는 행위를 ‘Callback’이라고 합니다. 2. 옵저버 패턴 구현 fun main()..