24-05-09

fly.io
서버스펙 (하) -> 무료 수준 제공
트래픽 발생 x - > 서버 중지

24-05-08

[github 계정].github.io

index.html 파일 만들기(필수)

[github 계정].github.io 접속
=> https://[github 계정].github.io

웹퍼블리셔 포트폴리오
웹퍼블리셔 포트폴리오 템플릿

fly.io
vercel

24-05-07

네이버클라우드 배포
aws ec2
fly.io

네이버클라우드플랫폼

https://edu.ncloud.com/schedule/apply/788

📚 네이버 클라우드 온라인 플랫폼 안내
온라인 강의 : https://www.edwith.org/ptnr/ncloudedu

도메인

https://iwantmyname.com/

SSH 접속
ssh -p {서버 접속용 포트} {서버 접속용 공인 IP}

yum 최신화, yum update
yum install epel-release -y

yum update -y

Set up the repository
yum install -y yum-utils

yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo

Install Docker Engine
yum install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

도커 시작 (백그라운드에서 실행)
systemctl start docker

도커 종료
systemctl stop docker

도커 활성화
systemctl enable docker

도커 버전확인
docker -v

도커 작동 테스트
docker run hello-world

##MariaDB 설치

컨테이너 실행
docker run \
  --name mariadb_1 \
  -d \
  --restart unless-stopped \
  -e MARIADB_ROOT_PASSWORD=sbsst123414 \
  -e TZ=Asia/Seoul \
  -p 3306:3306 \
  -v /docker_projects/mariadb_1/conf.d:/etc/mysql/conf.d \
  -v /docker_projects/mariadb_1/mysql:/var/lib/mysql \
  -v /docker_projects/mariadb_1/run/mysqld:/run/mysqld/ \
  mariadb:latest

docker exec -it mariadb_1 mariadb -u root -psbsst123414
데이터 베이스 보기
show databases
데이터 베이스 생성
CREATE DATABASE sbb_db;
나가기
exit;

Git 설치
yum install git -y

자바 17설치

yum -y install wget curl (wget 브라우저 같은 역할)

(wegt 명령으로 자바 알집 설치)
wget https://download.java.net/java/GA/jdk17.0.2/dfd4a8d0985749f896bed50d7138ee7f/8/GPL/openjdk-17.0.2_linux-x64_bin.tar.gz

자바 알집 풀기
tar -xvf openjdk-17.0.2_linux-x64_bin.tar.gz

mv jdk-17.0.2/ /opt/jdk-17/

vi ~/.bashrc
프로파일에 JAVA_HOME 변수와 PATH를 설정한다.(bash 쉘 기준)

.bashrc 내용

#.bashrc

#User specific aliases and functions

alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

export JAVA_HOME=/opt/jdk-17 # 추가
export PATH=$JAVA_HOME/bin:$PATH # 추가

#Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi

i 를 누르면 편집 가능
export JAVA_HOME=/opt/jdk-17 # 추가
export PATH=$JAVA_HOME/bin:$PATH # 추가
추가 해주고 ESC 누르고 :wq 눌러서 저장하고 나오기

수정된 프로파일을 시스템에 반영한다.
source ~/.bashrc

JDK 설치 확인
java -version

24-04-16

스프링부트

quesryDSL - 복잡한 쿼리를 개체형태로 JQL 형태로 하는 기술
파일업로드 rest api
JPA(eager,lazy), 트렌젝셔널, casType , 예외 , 롤백

24-04-15

프로젝트 진행

24-04-12

• Rq 도입
• Axios 리펙토링 도입
• Axios interceptor 도입

24-04-05

프로젝트 페이지 url -> 자료탭 -> 깃헙 링크,발표자료 등 업로드

24-04-04

Next.js

useState

useEffect

userRouter
-> 프론트에서 리다이렉트 하는방법
router.push 를 통해 리다이렉트 페이지를 설정할수 있다
( 자세히 알아보기)

24-04-03

@Data 어노테이션
lombok 에서 자주쓰는 getter setter 과 같이 자주 쓰는걸 한번에
사용할수 있게 해주는 어노테이션

@Transactional
Db에서 지켜주면 좋은 원칙
뭔가 처리할때 잘못 된 사항에 대해 롤백해주는 어노테이션

PATCH 와 PUT 의 차이 (면접 단골질문)

PUT으로 보낼땐 자원의 모든걸 담아서 보내야함
name,age 가 있다면 name,age가 다 필요함

PATCH를 보낼땐 부분 수정이 가능함

전체교체를 하는 경우가 많이 않기때문에 PATCH를 활용하는 방식을 고려
두개의 차이점을 자세히 알아보기

next.js
단건 / 다건 조회
등록
수정/삭제 순으로 직접 해보기 (모르겠으면 영상으로 리마인드 복습)
JWT 영상 보면서 알아보기 (개념 , 응용지식)

리액트와 다른코드 비교 하는사이트
https://component-party.dev/

next.js

const { name, value } = e.target;

const value = e.target.value;
const name = e.target.name;
두개의 결과는 같은 값, 위에 문법이 최신 버전으로 적용한 간결한 형태

24-04-02

04.08 ~ 04.19 프로젝트 주 (개인 프로젝트)
4.5 기획 발표 ( 원페이지 발표)
4.15 중간발표 (완성된 기능이 있다면 보여주는것)
4.22 최종 발표 (개인 프로젝트)
4.22 ~ 5.20 종강까지 마지막 팀 프로젝트

CRUD
POST를 통해 등록 기능을 완성하고
수정 삭제 기능을 추가적으로 구현 해보기

24-03-29

자바스크립트 jsx
타임스크립트 tsx 로 파일명 작성

/about 이라는 페이지 안에서
/about/info
/about/pf 라는 페이지 주소로 들어가게 하려면

위와 같이 about 안에서 info와 pf 폴더를 만들어서
page.tsx로 만들면 해당 요청으로 페이지 접근이 가능하다.

article이라는 페이지 에서 동적으로
article/1 , article/2 라는 형식처럼 id값으로 접근하게 만들려면

위와같이 article에서 폴더를 [id]로 만들고
page.tsx를 작성하면 article/{id} 로 접근이 가능하다.

useParams 로 id값을 가져올때
'use client'라고 명시를 해줘야 CSR형식으로 사용할수 있다.

마케팅적으로 노출을 시켜야하는 페이지들은
SSR을 이용하는게 좋다 (페이지를 그려내는 속도가 빠름)

state와 같은 데이터 처리를 해야하면 CSR 을 이용하는게 좋다

tsconfig.jon에서 "checkJs": false, 설정을 통해
타임스크립트를 잠시 임시로 꺼둔다

24-03-28

스프링부트 -> 포스트맨
CRUD 진행

NEXT.js tsx -> jsx
ts => 속성 타입스크립트 수업

H2 console 접근할때
JDBC URL을 application.yml에 설정한대로 입력해줘야 연결이 성공

  datasource:
    url: jdbc:h2:mem:db_dev;MODE=MYSQL
    username: sa
    password:
    driver-class-name: org.h2.Driver

api 시큐리티 설정

SecurityFilterChain apiFilterChain(HttpSecurity http) throws Exception {
      http
              .securityMatcher("/api/**")
              .authorizeRequests(
                      authorizeRequests -> authorizeRequests
                              .requestMatchers("/api/*/articles").permitAll()
                              .requestMatchers("/api/*/articles/*").permitAll()
                              .anyRequest().authenticated()
              )
              .csrf(
                      csrf -> csrf
                              .disable()
              );
      return http.build();
  }

csrf 를 따로 disable 설정 해주고
.requestMatchers("/api//articles").permitAll() 다건
.requestMatchers("/api//articles/*").permitAll() 단건

@GetMapping("")
   public RsData<List<Article>> getArticles() {
       List<Article> articles = this.articleService.getList();

       return RsData.of("S-1", "성공", articles);
   }

	RsData<List<Article>> 

부분을 아래와 같이
controller에서 ArticlesResponse를 선언해줘서

	RsData<ArticlesResponse> 

로 변경해서 사용을 해주는게 좋다.
이런식으로 같은곳에서 선언해줘도 되고
따로 article 에서 DTO 나 Response 패키지를 만들어서 관리
해줘도 좋음 본인의 취향,선택

@AllArgsConstructor
   @Getter
   public static class ArticlesResponse {
       private  final List<Article> articles;
       
   }

   @GetMapping("")
   public RsData<ArticlesResponse> getArticles() {
       List<Article> articles = this.articleService.getList();
       return RsData.of("S-1", "성공", new ArticlesResponse(articles));
   }

24-03-27

Next.js + spring boot 프로젝트 시작

application.yml

spring:
  profiles:
    active: dev  # 기본적으로는 application-dev.yml 이 로딩된다는 의미
    include: secret # active 되는 설정파일 (application-dev.yml) 다음에 application-secret.yml 이 로딩된다는 의미
  jpa:
    properties:
      hibernate:
        default_batch_fetch_size: 100 # Lazy 로딩이 될 때 한번에 DB에서 가져오는 데이터의 수
        show_sql: true # SQL 로그를 보기 좋게 포맷팅
        format_sql: true # SQL 로그에 하이라이트
        use_sql_comments: true # SQL 로그에 코멘트
  logging:
    level:
      # SQL에 사용된 실제 파라미터, SQL의 결과도 출력
      org.hibernate.SQL: DEBUG
      org.hibernate.orm.jdbc.bind: TRACE
      org.hibernate.orm.jdbc.extract: TRACE
      org.springframework.transaction.interceptor: TRACE

application-dev.yml

server:
  port: 8010
spring:
  thymeleaf:
    cache: false
    prefix: file:src/main/resources/templates/
  devtools:
    livereload:
      enabled: true
    restart:
      enabled: true
  datasource:
    driver-class-name: org.mariadb.jdbc.Driver
    url: jdbc:mariadb://127.0.0.1:3306/blog_dev
    username: root
    password:
  jpa:
    hibernate:
      ddl-auto: update # DB 스키마 자동생성, 앱이 재실행되어도 데이터는 유지된다.

application-secret.yml.default

spring:
 mail:
   password: NEED_TO_INPUT

node 버전확인

node -v

설치

npx create-next-app@latest

실행

npm run dev

Rest Api

-> rest full 하게 개발한다
-> 원래 get 같은 요청의 의도대로 만든다

GET
다건 / 단건
url.com/products (복수형태)
url.com/products/1 (id값)

POST
url.com/products

PACTH / PUT
url.com/products/1

DELETE
url.com/products/1

jason 안에서 나중에
id 값 뿐만아니라
성공 요청 메세지나
따로 코드를 보내는 작업까지 할 예정

게시판 다건,단건 컨트롤러

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/v1/articles")
public class ApiV1ArticleController {

    @GetMapping("")
    public List<Article> getArticles() {
        List<Article> articles = new ArrayList<>();
        articles.add(new Article((1L)));
        articles.add(new Article((2L)));
        articles.add(new Article((3L)));
        return articles;
    }

    @GetMapping("/{id}")
    public Article getArticle(@PathVariable("id") Long id) {
        Article article = new Article((id));
        return article;
    }

@RequestMapping("/api/v1/articles")
요청에 v1을 넣는 이유는 api로 사용할때
다른 사람들이 v1을 이용하다 v2로 바꿧을때
v1을 이용하던 사람들이 강제로 v2로 사용하지 않고
구분해서 버전을 나누는것 팀원과 상의 하거나
작업이 완료 되고 필요가 없으면 v1같은 버전을 삭제해도 무관

postman 설치

-> (백엔드 개발시 프론트가 개발 안됐을때 테스트툴)
https://www.postman.com/downloads/

프로그램 실행루 로그인해서 새로 파일 하나 만들고

요청을 보낼사항을 add request로 추가해서 만들어준다

http://localhost:8090/api/vi/articles
요청주소를 넣어주고 GET , POST , PATCH 같은 요청을 선택후
보내면 아래와 같이 출력 된다.

영상 포스팅

rest api
cors 각각 포스팅 하기

24-03-26

React 라우터 처리
CSR => single 페이지 SPA
SPA => SPRING
모바일 앱처럼 구동하고싶다 - > React

Next.js + Spring boot 설정
SSR => server side rendering
SPRING + SSR => 브라우저

npm i react-router-dom 리액트라우터 설치

React 문법에 맞춰서 구조를 만들어야 할때
(Freagment 태그)
상위에 <></> 태그로 감싸줘서 구조를 맞춰줄때 사용

컴포넌트시
. => 현재 디렉토리
.. => 상위 디렉토리

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Home />}></Route>
        <Route path="/todos" element={<TodoList />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

*기획 없는 글은 좋을 수 가 없다.
0.레퍼런스 최소 5개이상 참고
1.메인 주제 선정
2.섹션 주제(4~5개) 선정
3.섹션 주제에 맞춰서 200~300자 내외 작성
4. 다 쓴 후 참삭 => 최소 3번 이상

참삭 루튼
1. 단문쓰기
2. 주장과 근거가 구성에 잘 되었는지
3. 주제에 벗어난 내용이나 빼도 상관 없는 불필요한 문장 제거
4. 글을 말로 읽어보기(어색한 문장 구어체로 수정)

24-03-22

3/26 - SEMI FINAL 팀프로젝트 면담
4/1 - 프로젝트 영상 제출

컴포넌트화 (블럭화)
-> 부모 블럭 > 자식 블럭 -> props

react
state => useState, useEffect, uesRef

props => state 컴포넌트 간에 통신할 때 씀

githup 푸쉬한걸 새로 시작할땐
npm install 로 실행해주고
npm start 해줘야한다

24-03-21

npx create-react-app my-todo
리액트 설치 - > 폴더에 가서 깃배쉬로
npx create-react-app 입력하고 my-todo 라는 폴더에 만듬
설치가 완료된후
이후 cd my-todo 로 들어가서
code . 입력하면 자동으로 vscode로 해당 파일 실행해줌

자식으로 내리는것 props
컴포넌트 state

const let

24-03-20

https://nodejs.org/en nodejs 설치
git bash -> 설치 확인
node -v
npm -v
둘다 버전이 존재 하면 설치 완료
vscode 실행 뉴 터미널에서 git bash 실행
node -v
npm -v 로 버전 확인 똑같이 가능
npm install npm -g 전역적으로 사용가능하게 설정
npm create-react-app . 현재 파일에 설치
npm create-react-app test
cd tset 로 파일 이동후
npm start

package.jon --> 인텔리제이 gradle 과 같은 역할

https://dummyjson.com/ 더미 joson

24-02-14

쇼핑몰 ( 구매자 / 판매자 , 관리자 )
이커머스 ( 구매자 , 판매자 , 관리자 )

https://dbdiagram.io/home

이커머스 erd 만들기

24-02-13

• 업무관리 툴
  마이크로소프트 To Do

• 산출물 정리

• 쇼핑몰 기능정의

24-01-29

프로젝트 셋팅
-소셜 로그인
-이메일 발송
-파일 업로드

secret.yml

Security 에서

.oauth2Login(
                        oauth2Login -> oauth2Login
                                .loginPage("/member/login")
                )

처리 해주고

Security >> CustomOAuth2UserService 새로 생성

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
public class CustomOAuth2UserService extends DefaultOAuth2UserService {
  private final MemberService memberService;

  // 카카오톡 로그인이 성공할 때 마다 이 함수가 실행된다.
  @Override
  @Transactional
  public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
      OAuth2User oAuth2User = super.loadUser(userRequest);

      String oauthId = oAuth2User.getName();
      Map<String, Object> attributes = oAuth2User.getAttributes();

      Map attributesProperties = (Map) attributes.get("properties");
      String nickname = (String) attributesProperties.get("nickname");

      String providerTypeCode = userRequest.getClientRegistration().getRegistrationId().toUpperCase();

      String username = providerTypeCode + "__%s".formatted(oauthId);

      Member member = memberService.whenSocialLogin(providerTypeCode, username, nickname);

      List<GrantedAuthority> authorityList = new ArrayList<>();

      return new CustomOAuth2User(member.getUsername(), member.getPassword(), authorityList);
  }
}

class CustomOAuth2User extends User implements OAuth2User {

  public CustomOAuth2User(String username, String password, Collection<? extends GrantedAuthority> authorities) {
      super(username, password, authorities);
  }

  @Override
  public Map<String, Object> getAttributes() {
      return null;
  }

  @Override
  public String getName() {
      return getUsername();
  }
}

MemberService 에서

 @Transactional
    public Member whenSocialLogin(String providerTypeCode, String username, String nickname) {
        Optional<Member> opMember = findByUsername(username);

        if (opMember.isPresent()) return opMember.get();

        // 소셜 로그인를 통한 가입시 비번은 없다.
        return join(username, "", nickname, ""); // 최초 로그인 시 딱 한번 실행
    }

    private Optional<Member> findByUsername(String username) {
        return memberRepository.findByusername(username);

로 처리하고 나머지는 CustomOAuth2UserService로 넘어감

   카카오  <div>
    <a href="/oauth2/authorization/kakao">카카오 로그인</a>
</div> 버튼

24-01-19

팀 프로젝트 기획 발표

• 발표자: 한선님
• 서포트: 오빈님

팀 주제 변경

• 커뮤니티 -> MBTI

역할 다시 재정비

24-01-18

TDD -> 테스트 주도 개발 (Test Driven Develop)

application-prod.yml

CI/CD

gitignore

수정에서 tobuilder 를 쓰는 경우도 있음

24-01-17

https://learngitbranching.js.org/?locale=ko
(github 초보 교보재 github 익숙해지기)

git flow
->서비스 안전성에서는 최고, 개발 입장에서는 번거로움
안정성을 검증을 계속 하면서 머지하는 방법

gitlab flow

github flow
-> Pull Request (PR)

git branch ###
 
git checkout ###

git checkout -b ###

git branch -a (전체보기)

git merge main 

git fetch --prune (머지 하고 로컬 파일 삭제)

application.properties
-똑같은 명칭이 반복해서 사용됨
-내용이 많아지면 보기 힘듦

application.yml
-계층형 구조로 이루어짐

application.yml -> 개발환경

24-01-16

팀매칭 (주저선정)

자격증 커뮤니티
팀 - 김정배 , 전오빈 , 김대호

팀 레포티지 [깃헙]
-erd 클라우드
-설계
-발표 ppt( 1.19 금 발표)

24-01-15

2차 테스트 -> 결과

16일
-> 팀 구성
-> 팀구성 - 주제선정 - 아이디어(기획)발표 - 중간 발표 - 최종발표
-> 프론트 + 타임리프 정리
-> 팀프로젝트에서 해야하는 기반 소스
-> cs 지식 (정리)

24-01-12

https://lightsail.aws.amazon.com/ls/webapp/home/instances

AWS 라이트 세일

->AWS 라이트세일은 아마존에서 운영하는 웹 서비스에 특화된 클라우드 서비스이다.
첫 3달은 무료이며 그 이후에는 매달 5달러씩 사용료를 지불한다.

무료 기간만 사용하고 삭제한다면 추가 요금은 발생하지 않는다. 
만약 AWS 라이트세일을 삭제하고 싶다면 위키독스 페이지 
https://wikidocs.net/163575에서 삭제 방법을 알아 보자.

플랫폼은 설치할 OS 시스템으로 리눅스 또는 윈도우를 선택할 수 있다. 
여기서 블루프린트는 선택한 OS의 배포본과 버전을 의미한다.
우분투는 18.04, 20.04, 22.04 버전이 있는데 우리는 최신 버전인 22.04를 선택.

리눅스에서 배포
Git Bash

ls -l 세로로 보기
cd 들어가기

$ ssh -i 저장위치/.pem ubuntu@주소
$ pwd // 위치 확인
$ git clone 주소
$ sudo apt update
$ sudo apt install openjdk-19 -jdk   //19버전 다운로드
$ chmod +x gradlew  // 실행권한 추가
$ ./gradlew build   // 실행
$ cd build
$ ls -l
$ cd libs
$ java -jar sbb-0.0.2.jar
$ nohup java -jar sbb-0.0.2.jar & // 백그라운드 실행
$ ps -ef  //목록 보는 명령어
$ kill -9 [id값] // 종료

https://termius.com/download/windows
터미너스 (Git bash에서의 수고스러움을 해결) 다운로드
https://new-pow.tistory.com/19
터미너스 연결 방법 링크

쉘 스크립트
vi start.sh

#!/bin/bash

JAR=sbb-0.0.1-SNAPSHOT.jar
LOG=/home/ubuntu/sbb/sbb.log

nohup java -jar $JAR > $LOG 2>&1 &

수정 -> i 누르고
:wq 로 빠져나오기

24-01-11

yml

server:
  port: 8040 (포트값)
spring:
  datasource:
    url: jdbc:mariadb://localhost:3306/request(db)
    username: root
    password:
    driver-class-name: org.mariadb.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: create
    show-sql: true
  output:
    ansi:
      enabled: always
logging:
  level:
    org.hibernate.orm.jdbc.bind: TRACE
    org.hibernate.orm.jdbc.extract: TRACE

도메인 위주의 분류

Compact Middel Packges 해제 하면
패키지 하나만 있어도 분류 가능

HttpServletRequest
->http servlet 요청

jsp -> javaservletpage

스프링 시큐리티
=> 로그인,로그아웃
타임리프

금
-> 시큐리티

24-01-10

목 / 금
=> 인증 / 인가 (쿠키,세션)
=> 개념위주

월 -> 2차 테스트 (2시간30분)
팀 매칭 1주
2~3주 중간 발표
4~5주 발표

1.최신코드 반영
2.작업에 효율(baseCode)
3.builder통해서 setter 안쓰고
4.프론트 css 레이아웃 수업

24-01-08

3장 - 검색기능 추가
2~3장 다시
화요일 -> 능력단위 평가 , 2차테스트 모의
수요일 -> 2차 테스트

phind >> 개발자를 위한 검색 AI

24-01-05

개발자 커뮤니티 : 서핏, OKKY, 인프런(교육사이트+커뮤+스터디), 미디엄(외국 사이트)

javja weekly (이메일 입력하면 매일 매일 업데이트 내용 등 보내줌)
프론트 = 편의 기능 -> 프론트에서 막아줬다고 백엔드에서 안하면 안됌
백엔드에서 방어를 제대로 해줘야함

수정 방식
1. 등록 폼, 수정 폼 따로 만들고
등록폼-> 등록 메서드
수정폼-> 수정 메서드로 보내는 방법

2. 등록 폼을 같이쓰는 대신 -> 등록,수정 따로 요청
   HTTP get 요청을 보낼때 action 경로가 없으면 현재 url로 보낸다

https://www.scode.gg/p/13144 (34강 참조 flex)
css 3대요소
display:
inline-block; vs block;
flex
position

앵커 기능
마크 다운 기능

24-01-04

스프링 1차 테스트 (개별 통보)
점프투 스프링 로그인기능 구현

24-01-03

https://www.scode.gg/p/13305 테스트 요구사항
https://www.scode.gg/p/13198 해설 페이지

start spring - 6개 항목추가해서 (DB는 Mysql , maria 상관 X) generate

순서

1. readme 파일 작성 -> 깃헙 연결,푸쉬 -> DB 연결후 시작
2. article 패키지, controller 만들고 화면 띄우기
3. article entity 만들기 (요구사항에 맞게)
4. article list 페이지에 등록 버튼 만들고 form에서 등록 화면 구현하기
5. controller에서 post로 받아서 service 의존성 주입 set으로 받아주고 save
6. db저장하고 리다이렉트 list로 보내기
7. controller에서 list에 service.findall로 데이터 받아오고
8. Model 객체 선언하고
9. list.html에서 each문으로 제목 부터 받아오기
10. 타임리프 문 으로 a태그를 th:로 @{|/article/detail/${article.id}|}로 감싸기
11. controller에 getmapping으로 /detail/{id} 받아주기
12. service에 getArticle 만들고 예외처리 해주기
13. article_detail 페이지 만들기
14. 상세페이지에서 목록으로 가는 버튼 만들면 끝
15. UI 노출하기(선택사항)
 -1 레이아웃 따로 만들기
 -2 그래들에 layout 추가
 -3 cdn -> head에 추가
 -4 body에 <th:block layout:fragment="content"></th:block>
 -5 다른 html들에 layout 연결하기 
16. 부트스트랩 작업
부트스트랩5
https://getbootstrap.kr/docs/5.0/getting-started/introduction/
 -1 원하는 스타일 가져오기
 -2 반복문 tr에 넣기
 -3 첫번쨰 td에 count 출력
 -4 #temporals.format.format(article.createDate, 'yyy-MM-dd HH:mm')
     데이터 타입 년 월 일 시간 순으로 원하는대로 재설정

교재 페이지 54강 까지 완료

55강 이후부터 예습 가능하도록 페이지 오픈해둠

24-01-02

db - 22강 mariadb 복사 붙여넣기
port 변경
database 이름 변경
readme 파일 만들고 작성하면서 하기
github 연결 - 푸쉬
homecontroller 만들기
패키지 - article 등 만들기

https://www.tinkercad.com/things/gaaq9AVsgSK-magnificent-wolt/editel?tenant=circuits
팅커캐드 (아두이노 시뮬레이션)
능력단위 평가 제출(완료)

1.필수영상 정리 페이지

• 영상 선택해서 시청

2.알고리즘 대비 시험 준비

01.04 텍스트 게시판 1차 테스트

23-12-29

get = 파라미터
post = 리퀘스트

1.1 휴일 그다음 수업 텍스트 게시판 1차 시험
1차 요구사항 , 제출요구사항
리드미

23-12-28

https://flukeout.github.io/#

부트스트랩5
https://getbootstrap.kr/docs/5.0/getting-started/introduction/

스타일

• 다운로드
• cdn 서버 이용

1월 첫주 후반에 시험
1차 요구사항 구현,
readme 작성

23-12-27

https://docs.google.com/spreadsheets/d/1gXUKgUfuX45r98DYOwr4CjfHQCJV2MmU2IsN9BFHiJM/edit?pli=1#gid=0
알고리즘 매일 풀었는지 체크

23-12-26

스프링부트
-> 자바로만들어진 프레임워크(웹)
-> 웹 : HTTP 통신규약 위에서 주고받는 데이터 서비스

https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko&pli=1

23-12-22

점프 투 스프링부트 (2강~ 3강 위주)
미리 예습 해보기 (크리스마스 기간 25일(월) 학원 휴무)
css 기초지식 필요

https://start.spring.io/

23-12-20

금요일 오전까지
발표영상 제출
트러블 슈팅
고민 포인트 + 해결 3가지

컨트롤러
=> 다른 명령어 입력 커맨드
=> 데이터를 가지고 오는 용도 해당 도메인에 service

23-12-15

발표 자료

• 구글독스 => 기능 정의서 url
• 구글 프레젠테이션 => 발표 ppt url
• 깃헙 저장소 주소 => url
• erd 클라우드 => url

윈도우 cmd

• netstat -ano | findstr 8080
• taskkill /f /pid [아이디넘버]

400번대 에러 = c(클라이언트) 문제
500번대 에러 = s(서버) 문제

https://wikidocs.net/161165
점프투스프링

스프링
ORM
JPA
자바 객체 > 하이버네이트(SQL) > DB

git bash > touch local.mv.db

QNA 질문응답 게시판
@GeneratedValue(strategy = GenerationType.IDENTITY)
-> auto increment 기능

23-12-14

select * from article

insert int article
set title = ""

insert 는 변수 영역을 잡아서 넣어줘야함

https://www.erdcloud.com/

윈도우에 cmd 호출해서 입력

• netstat -ano | findstr 8080
• taskkill /f /pid [아이디넘버]

23-12-13

controller -> service
데이터 관련된것 옮겨주기
service -> repository

데이터 베이스 연결하기

디비버 코드 -> db sqp 파일 에 옮겨주기
*협업할때 팀원들이 바로 보고 할수 있도록

데이터 베이스 구조
관계형 구조
author -> 고유id

DB연결하기
App () {

    DBConnection.DB_NAME = "a9"; 
    DBConnection.DB_PORT = 3306;
    DBConnection.DB_USER = "root";
    DBConnection.DB_PASSWORD = "";

    DBConnection dbConnection = new DBConnection();
    dbConnection.connect();

selectRows(여러개 데이터)
게시글 전체 조회 후 출력
멤버 전체 조회 후 출력
selectRow(단건)
게시글 id =2 출력
멤버 id =1 출력

23-12-12

@RequiredArgsConstructor 생성자 함수 만드는 기능
private final

~ 금요일
텍스트 게시판 주제 정하기,
텍스트 게시판 설계

23-12-11

1.텍스트 게시판 CRUD
C reate
R ead
U pdate
D elete

2.회원기능

3.lombok

23-12-08

https://mvnrepository.com/
접속해서 lombok 검색
https://mvnrepository.com/artifact/org.projectlombok/lombok
최신버전 들어가서
Gradle(short) 항목 복사 그림처럼 붙여넣기

텍스트 게시판 미션 제출 22일 날 까지

1.명언앱 8 단계

2.명언앱 8 단계 리펙토링 버전

3.2단계 + 회원기능 추가

4.3단계 + DB 연결

프론트
html, css

display: block vs inline-block

display: flex, grid

position: absolute, relative

23-12-07

MVC 패턴
model - > DB or DATA 관련 // 주방
View -> 클라이언트 접점 //호출벨
controller -> 컨트롤러 //서빙직원

테이블
고유 id -> PK / id in unsigned not null auto_increment
참조 id -> 해당 테이블 명 + id deptid => iny unsig not null

부서
고유 id -> PK / id int unsigned not null auto_increment

23-12-06

JOIN INNER , LEFT,RIGHT 확인하기

23-12-05

명언앱 14강부터 시작
Request 새로 클래스 만들고 App 클래스에서
if문 switch 문으로 만들고 Request에 리팩토링

ORDER BY [컬럼명] DESC 또는 ASC limit 3;

WHERE nickname LIKE "%길동"
// 홍길동 , 김길동 , 박길동
WHERE nickname LIKE "길동%"
// 길동홍 , 길동김 , 길동박

23-12-04

gitignore
https://www.toptal.com/developers/gitignore
Intellij Java 선택해서 복사 >> gitignore에 붙여넣기 (불필요한 메시지 막음)

main => 진입점
App
Wisesaying

1단계. 명령) 아무입력 가능 >> 종료 입력하면 종료
2단계. "종료" , "종료 " 띄어쓰기 까지 받기 = String command = sc.nextLine().trim();
trim() 추가
3단계. 그냥출력
4단계. while문안에 쓰면 계속 초기화, 그래서 while 밖에 int lastId;
5단계. wisesaying 새로 클래스 만들고, get 만들기
향상된 for문 사용
for(단건 타입 단건 변수명 : 배열) {

}

for (WiseSaying ws : wiseSaying.List){
sout(ws)
}
6단계. app 패키지 나누기 wiseSaying , systemcontroller

7단계.스캐너 Container 에 정리해서 나머지 깔끔하게 sc 정리

String[] commandList = command.split("\?",2)
startsWith

구축 / 관리 == 관리가 좋은 코드
clean 코드를 짜야함(처음에 구축을 많이 하다보면 관리,유지보수 관점이 보임)

• mvc패턴
  DB페이지 https://www.scode.gg/p/13251
  수업 https://www.scode.gg/p/13241 명언앱 13강까지 완료 복습하기

23-11-30

구상클래스 (ex class 사람 {})

-> 무조건 구형 해야함 (구상)

추상클래스 (ex abstract class 사람 {})

-> 구현 안해도 된다.

인터페이스 (ex interpace 사람 {})

-> 무조건 100% 추상 키워드가 들어간다 ,다중상속 가능, implments로 상속
-> ex)
interpcae 리모콘 {
void 전원끄기()
void 전원켜기()
}

class S리모콘 implments 리모콘,스피커 {

}

private -> 외부로 공개되지 않음.

getter

setter

class Main {
public static void main(String[] args) {
사람 a사람 = new 사람();
a사람.setId(20);
// -> setter 입력

    System.out.println("제 번호는 " + a사람.getId() + " 입니다.");
    // 출력 : 제 번호는 20 입니다. 출력에서 getter 입력
}

}

class 사람 {
// private => 외부로 공개되지 않는다., 리모콘에 노출되지 않는다.
private int id;

int getId () {
    return this.id; 
}  // void getId 에서 리턴 int 로 바꿔주고 get + id의 경우 붙여쓸때 대문자로 바꿔준다

void setId (int id) {
    this.id = id;
}

}

예외처리

try {
//로직
} catch (Exception e) {
// catch를 여러개를 쓸수있다, 명확하게 구체적 조건 명시
}

예외타입을 알려주는 두가지

throws 메서드 안의 모든 모든 로직 예외처리
void 더하다 () throws 예외타입 {}

throw 특정 상황에서 예외처리
void 더하다 () {
new throw 예외타입();
}

char 타입

char c = 'a'; or char c = '가';

ArrayList => 사용자가 원하는만큼 배열을 만들어주는것

List<객체> 변수명 = ArrayList<>();

list<명언>

class 명언 {
private int id;
private String 명언;
private String 작가;

HashMap => 특정해서 값을 가져올때

Map<String,String> hm = new HashMap<>();

hm.put("키1","안녕");
hm.get("키1");

수업페이지 - 텍스트게시판 (명언앱) 5단계 까지

자바 입문 다 풀어보기

자바 수업 62강 (arraylist 까지 해보기)

필수영상 4개

23-11-29

공부 순서

생성자 => super()

인터페이스 => 추상화 클래스(100%)

접근제한자 private getter setter (파트 ~ 8)

예외처리 (파트 9 ~ 10)

관계형 데이터베이스

• DMBS
  mysql

• 자바로 간단한 텍스트 게시판 만들기 (배운 지식들 활용)
  3인조 구성

23-11-28

상속

extends -> ex) 검은고양이(자식) extends 고양이(부모)

   ㄴ 상속은 부모 자식에서 끝내는게 좋다 (중복 안좋음 조상구조x)

오버라이딩

부모 => 자식

부모 메서드를 자식에서 재정의 하는것

오버로딩

같은 이름의 함수지만 매개변수 혹은 리턴타입 다른 경우

다른 함수 취급한다.

class 사람 {

void 달리다(){}

void 달리다(String name){}

void 달리다(int speed){}

}

구성 => 객체 내부에 객체를 받는것

class Car {

	int a;
	Skill skill;
    }

형변환

자동형변환 - > 작은것을 큰것안으로 자동으로 형변환

ex ) short s =1 ;

			int i = (int)s;   -> (int)가 자동으로 

수동형변환

ex ) float f = 1.5;

			int i = (int)f;  -> (int)를 수동으로 입력해줘야하고 데이터 손실있음
            

매개변수

```js

var a = function (x) {
console.log(x)
}
a(3)

```js

```java

추상화

키워드 : abstract

생성자 -> 생성할때 실행되는 함수

1.객체 이름이랑 함수명 동일

2.객체가 생성 될때 자동으로 실행 된다.

3.객체가 만들어질 때 넣어야하는 데이터를 넣을수있다.

23-11-27

static => 정적

 ㄴ ex ) 통신사 본사 중앙관리 데이터
 

dynamic => 동적

 ㄴex ) 대리점 관리 데이터
 

프로그래머스 자바 입문 파트 1~5

ㄴ 타이머로 시간 30분부터 클리어해보기

다음시간 객체 상속 추상 등 미리 예습

23-11-24

JAVA

기본형 8종 - 시작이 소문자 => 데이터 1개를 담는다

• boolean b = true;
• char c = 'a'
• byte bt = 1;
• shjort s = 2;
• int i = 3;
• long l = 4L;
• float = 5.5f;
• double = 5.5;

참조형 - 기본형을 제외한 모든 형,

- 가변형으로 들어오는것. => 데이터 여러개를 담는다

int[] arr = {1,2,3}

int[] arr = new int[3]; 위와 두개가 같다

• arr[0] = 1;
• arr[1] = 2;
• arr[2] = 3;

class 클래스{ //사용자가 정의하는 참조형 데이터

int a;

string b;

boolean c;

}

해야할것

• 프로그래머스 Js 기초 제외사항 빼고 20분 타이머

• 프로그래머스 Java 입문 파트 5 까지 예/복습 하기

• 필수영상 - 공부하기 싫어 몸서리쳐질 때 '이것'부터 해보세요. 효과가 좋습니다

• 필수영상 - “이래도 효과 없으면 따지러 오세요” 황농문 교수가 추천하는 '현실적인' 몰입 훈련-법

• 필수영상 - [고정댓글 필독] HTML, CSS, JavaScript가 뭔가요?

23-11-23

배열

var a = [1,2,3]

console.log(a[0])

객체 = 객체를 변수 외부에 만든다, 그리고 주소값을 리턴(반환,변신)한다.

사람.이름 = 123

사람[이름] = 123 두개 같은동작

JAVA

println ("한줄 띄운다");

print ("그냥 출력");

printf ("%d 에 입력 받을수있다" , 10); [문자 %s, 숫자 %d]

23-11-22

유튜브 공부 Log 올리기

ex) 23-11-22, 공부 LOG, 1st

하루 30분 씩 (유예기간 이후 하루 1시간)

유튜브,깃헙,벨로그 등 프로필 수정해두기(ex 사진)

반복문 while

초기화

while (조건) {

//실행로직(증감) }

i = i+1; , i+=1; , i++

ㄴ 3개 같은 방식 (1씩 증가)

전역변수

지역변수

for 문과 while문 차이점

for (초기화;조건;증감) {

ㄴ지역변수}

초기화

A <- 전역변수

while (B) {

C }

function 함수명 (x) {

console.log(x)

return;

}

복습 해야하것 (수업하면서 어려웠던 것)

for 이중반복,삼중

함수 - 매개변수 , 리턴

문제 - 특정 언어로 인사를 여러번 하는 함수를 만들어주세요.

문제 - 4칙연산 함수를 만들고 실행해주세요.

다시 복습

23-11-21

• 가입해야할 사이트 진행

https://chat.openai.com/

챗gpt 이용 > 비서처럼 사용

ex ) 코드 복붙 X

ex ) 반복문 알려줘 -> 초등학생 수준으로 알려줘

조건문 if 문제

if (조건) {

//실행로직 }

&& -> A and B (A,B 둘다)

|| -> A or B (A 또는 B)