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()..

1. 이미지 넣기 앱 아이콘으로 설정할 이미지를 넣는다. 2. 이미지 등록 2-1) [drawable] 우클릭 → [New] → [Image Asset] 클릭 2-2) 저장한 이미지 경로를 찾아 등록 2-3) 이름을 등록하고, 이미지 배율을 조절 3. 앱 이름 변경 미동여지도 [app] → [res] → [values] → strings.xml 파일 수정 4. 패키지 이름 변경 플레이 스토어에 앱을 올릴 때는 패키지 이름이 com.example로 시작하는 패키지 이름은 제한되어 있다는 문구를 만나게 된다. 4-1) 폴더 구조 변경 1) 상단 톱니바퀴 설정 버튼 클릭 2) Compact Middle Packages 체크 해제 [com.example.airquality]처럼 축약되었던 폴더 구조가 [com]..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 Share Layout Animation 레이아웃 공유 란? 서로 다른 애니메이션 효과를 자연스럽게 이어지도록 하는 방법이다. 1. Layout Animation ( CSS 변경을 통한 자동 애니메이션 적용 ) Layout에 prop을 사용한 애니메이션 적용 방법 Layout prop이란? element에게 prop을 주어 CSS를 변경하게되면, 해당 element는 Layout이 바뀔 때 애니메이션 효과가 발생한다. ( CSS 때문에 Layout이 바뀐다면 저절로 애니메이션 효과가 이루어진다. ) function App() { const [clicked, setClicked] = useSta..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 AnimatePresence AnimatePresence 란? elemet가 나타나거나 사라질 경우 애니메이션 효과 발생시키는 컴포넌트이다. 자연스러운 show / hide의 애니메이션 효과를 부여한다. * AnimatePresence의 규칙 * 1. visible상태여야 한다. 2.내부에는 조건문이 있어야 한다. 1. AnimatePresence를 사용한 Show / Hide 구현 import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import styled from "styled-c..