ENN

#styled-components는? 컴포넌트를 만드는 기술이다. 컴포넌트를 만들면서 css를 깔끔하게 사용할 수 있도록 한다. jsx가 아닌 익숙한 문법의 css를 작성할 수 있다는 장점이 있다. #사용법 styled.button → 상위 태그가 button인 컴포넌트가 생성된다. div를 넣으면 상위 태그가 div인 컴포넌트가 된다. import styled from 'styled-components'; cosnt SimpleButton=styled.button` css~~~ `; styled(SimpleButton) : 이렇게 어떤 컴포넌트를 인자로 받아서 생성하면, 해당 컴포넌트를 감싸는 컴포넌트가 만들어진다. prop을 사용해서 다른 css를 적용할 수 있다. (${}를 사용하여 함수를 넣을 수..

#Next.js는? React Express..js React-router-dom Server Side Rendering → 이 모두를 내재하고 있다. #사용법 개발환경 실행 : npm run dev 배포 파일 생성 : npm run build 서비스 시작 : npm run start 개발환경이 아닌 실서버를 실행한다. next.js는 서버까지 내장하고 있다. #Route a 태그를 사용해 href에 파일경로를 적어주면 해당 파일 위치로 이동한다. 파일 경로 안에 파라미터를 넣을 수도 있다. ex) /pages/sub/[id].js useRouter라는 훅을 이용해서 파라미터 값을 가져올 수 있다. import {useRouter} from 'next/router'; const id=Number(rout..

타임리프 특징 서버 사이드 HTML 렌더링(SSR) : 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용됨 네츄럴 템플릿 : 순수 HTML을 최대한 유지하는 특징이 있음. 따라서 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있음 스프링 통합 지원 : 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있도록 지원 타임리프 기본 기능 타임리프 사용 선언 기본 표현식 타임리프는 다음과 같은 기본 표현식들을 제공 간단한 표현 변수 표현식: ${...} 선택 변수 표현식: *{...} 메시지 표현식: #{...} 링크 URL 표현식: @{...} 조각 표현식: ~{...} 리터럴 텍스트: 'one ..

1. SELECT 가장 기본인 데이터를 불러오는 쿼리문 SELECT FROM -- 지정한 테이블에서 해당하는 컬럼의 데이터를 불러옴 SELECT FROM WHERE -- 조건에 맞는 데이터만 불러옴 SELECT FROM WHERE ORDER BY ASC or DESC -- 조건에 맞는 데이터를 ORDER BY절 뒤에 있는 컬럼을 기준으로 정렬, 기본값은 오름차순 SELECT FROM WHERE ORDER BY ASC or DESC LIMIT -- LIMIT절의 개수만큼 데이터를 불러옴 2. INSERT 데이터를 삽입하는 쿼리문 INSERT INTO VALUES (V1, V2, V3) -- 테이블의 모든 컬럼에 값을 입력함, 따라서 컬럼 수와 값의 개수가 동일해야함 INSERT INTO (C1, C2) V..

1. 의존성 설정 build.gradle 파일에 위의 의존성을 작성 spring boot 프로젝트 생성 시 dependency에 mybatis framework를 추가했다면 따로 의존성을 추가할 필요 없음 위의 방법이 아닌 경우 dependencies {…}에 implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0 를 추가하고 Refresh Gradle Project를 해줌 2. DB 연결 설정 및 mybatis 설정 application.priperties 파일을 열고 아래와 같이 설정 정보를 작성 # MyBatis spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver s..

1. Mysql과 연결된 Spring Boot Application 생성 기존 개발에 사용하던 프로젝트를 이용함 2. docker-compose.yml 작성 프로젝트 최상단에 Dockerfile, docker-comppose.yml 파일 생성 2-1. Dockerfile 작성 FROM : 베이스 이미지 지정 ARG : 인자를 정의, ./build 이후 값은 추후 jar 파일을 복사할 때 사용 COPY : 위에서 정의한 .jar 파일을 app.jar파일로 복사 ENTRYPOINT : .jar 파일을 수행하기 위한 명령어 2-2. docker-compose.yml 파일 작성 3. 소스 빌드 및 실행 프로젝트 최상단에서 빌드 실행 //docker-compose.yml 파일 실행 $ docker-compose ..

Redux #Redux의 동작 구조 store : 정보가 저장되는 곳 state : 실제 정보가 저장되는 곳. 직접적인 접근이 불가능하다. reducer : 현재 state값과 action을 인자로 받아서 새로운 state를 리턴하는 가공자이다. dispatch : reducer를 호출해서 state값을 변경한 뒤, subscribe을 이용해 render한다. subscribe : render함수를 등록해놓으면 state가 바뀔 때마다 render함수가 실행된다. getState render : getState를 통해 state를 가져와 ui를 만든다. action : dispatch에게 전달된다. #Redux를 쓰면 좋은 이유 중앙집중적 데이터 관리 하나의 부품이 변경되었을 때, 중앙의 redux가 나..

Hook이란? - Hook: React 버전 16.8부터 리액트 요소로 새로 추가되었으며, 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있게 해주는 요소 - 훅이 존재하기 이전에는 상태 관련 로직이 하나로 묶이기 때문에 상태 로직을 재사용하는 것이 어려웠다. 여기에 훅을 도입하면서 상태 로직을 추상화하여 재사용이 가능하게 한다. - Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 통해 컴포넌트 재사용이 가능하다. 리액트 내장 훅 API 1. useState() import React, {useState} from 'react'; const [state, setState] = useState(initialState); - ..