토이 프로젝트 : 책 제목을 검색하면 책 정보 및 빨간 책방 방송 중 해당 책을 다루었던 방송 URL을 반환 시킨다

1. springboot로 백엔드
2. react로 프론트엔드

웹브라우저 상의 JavaScript에서 다른 도메인의 사이트를 html 크롤링하기 위해 fetch를 실행하게 되면 크로스 도메인 이슈가 발생한다 header에 no-cors 옵션을 주고 요청할 경우 응답에서 body의 값이 제한된다
chrome 개발자 툴의 network 상에서 response에서 정상적인 html을 볼수 있으나 JavaScript에서는 null이 찍힌다

웹브라우저 상에서 크롤링 하기위해서는 cors 이슈가 있음으로 서버측에서 크롤링 하기로 결정

복기할겸 예전에 해봤던 springboot + h2 DB + JPA로 우선 rest api로 제공 하는 것으로 결정

toString : JSON 스타일로 프린트 할때 아래와 같이 정의한다
라이브러리 추가

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.4</version>
</dependency>

public String toString() {
       return ToStringBuilder.reflectionToString(this, ToStringStyle.JSON_STYLE);
   }

방송 회차 정보 추출 표현식 활용

String broadcastingNumber =
                    tds.eq(0).text()
                            .replace("회", "")
                            .replace("\b", "")
                            .replaceAll("\\[(.*?)\\]","")
                            .trim();

h2 database 와 JPS 연결 설정
application.properites 파일에 설정 추가

spring.datasource.url=jdbc:h2:mem:minigear;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql = true

spring.mustache.expose-session-attributes=true

h2 db consle 접속 jvm에 임베디드로 기동됨으로 intelliJ에서 바로 접속할수 없다
http://localhost:8080/h2-console/

하지만 다른 방법도 존재한다 http://jojoldu.tistory.com/234

JPA 에서 LIKE JPA repository interface 선언시 findByFirstnameLike method를 추가해주면 된다

Spring Data JPA - Reference Documentation

복기

1. component를 만들었을 때 include하는 css의 파일 경로를 제대로 설정하지 않으면 component가 export되지 않아 사용하는 측에서 찾을 수 없다고 에러를 발생 시킨다
2. stx에서 img 태그를 줄때는 alt를 설정해 줘야 한다 경고 발생한다
3. component에서 넘겨받은 값의 type을 체크할 때 prop-types를 사용한다
   propTypes 사용
   설치 $ npm install –save prop-types

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

1. state 사용하기
2. componentDidMount
3. fetch
4. dummy component: parameter를 넘길 때 {}객체화 시켜서 넘겨야 한다

러닝 리액트 도서를 읽고 정리

3장 자바스크립트를 활용한 함수형 프로그래밍

함수형이란: JavaScript에서 함수는 1급시민이다

first-class citizens의 조건

• 변수나 데이터 구조안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값(return value)으로 사용할 수 있다.
• 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.
• 동적으로 프로퍼티 할당이 가능하다.

명령형 프로그램과 선언적 프로그램 비교

선언적 프로그램밍은 필요한 것을 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지 기술하는 데 방점을 두고 애플리케이션 구조를 세워나가는 프로그래밍 스타일이다

선언적 프로그래밍의 코드 구문은 어떤 일이 발생해야하는 지 기술하고, 실제로 그 작업을 처리하는 방법은 추상 화로 아랫단에 감춘다

개인적 생각 객체지향 프로그래밍에서 객체들의 레고블록 조합으로 프로그래밍 한다. 함수형은 일련의 함수 동작으로 프로그래밍 한다. 하나의 데이터를 함수에 넣고 함수에서는 입력받은 데이터를 복제하여 작업을 하고 복제본을 리턴한다. data의 변환만 있고 객체지향처럼 상태정보와 행동을 묶지 않는다. 함수형 프로그 래밍이나 객체지향이나 개념이 나온지는 수십년이 지났으나 왜 지금 이슈화 될까 ? 컴퓨터의 성능이 좋아지고 프로그램의 크기가 커지며 그것을 작성하는 사람들의 이해도를 높여 생산성을 높이는데 촛점이 맞춰지며 이슈화 되고 있다고 생각한다. 실제코드는 컴파일 되어 기계어 코드로 돌아간다

함수형 프로그래밍의 개념

1. 불변성 : data를 변화시키지 않고 data의 복사본을 가지고 작업한다
   함수형 프로그래밍의 immutable 속성으로 인한 장점 예시: 멀티 스레드 프로그래밍에서 공유자원에 대한 lock을 잡아 발생하는 문제점을 함수형 프로그램에서는 생모든 data가 불변임으로 안전하게 프로그래밍 할수 있다

2. 순수 함수(pure function) : paramter에 의해서만 반환값을 결정하는 함수를 뜻한다
   • 순수 함수는 파라미터를 최소 하나 이상 받아야 한다
   • 순수 함수는 값이나 다른 함수를 반환해야 한다
   • 순수 함수는 인자나 함수 밖에 있는 다른 변수를 변경하거나 입출력을 수행해서는 안된다
3. 데이터 변환
   • array.join : 배열을 문자열로 변환
   • array.filter : 참거짓를 인자로 받음
   • array.map : 변환함수를 인자로 받음 배열의 모든 원소에 적용한 값으로 이루어진 새배열을 반환한다
   • array.reduce : 왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 줄인다
4. 고차함수(High Order Function) 고차함수는 다른 함수를 인자로 받거나 함수를 반환할 수도 있다
   커링 : 어떤 연산을 수행할 때 필요한 값 중 일부를 저장하고 나중에 나머지 값을 전달받는 기법이다. B함수를 리턴하는 함수A를 정의할 때 일부 값을 받아 A함수를 생성하고 이후에 리턴받는 함수B에서 함수A에서 받은 값을 사용할 수 있도록 한것이다.

복기

1. Dump Component에 props 넘길 때 객체로 묶어서 넘김
2. fetch사용시 then에서 화살표 함수를 사용하게 되면 {}를 묶지 않아야 자동으로 return 한다
3. yarn add prop-types
4. Dummy.propTypes= {param: PropTypes.dataType.isRequired}
5. 잊지말고 css import 하기

문제: github에 pages를 사용하여 블로를 만들었을 때 custom domain으로 연결하였을 시 ssl 적용 방법

해결: github 페이지의 설정으로 가서 custom domain을 삭제후 저장 다시 custom domain을 입력 후 저장 후 조금 있으면 ssl 적용 페이지 옵션이 선택 가능하게 바뀐다

추가: 아래 참조사이트에서 처럼 dns 설정에서 a type으로 하여 github의 ip 주소를 설정하지 않고 cname type으로 설정하여도 정상적으로 ssl이 적용된다. sub domain으로 블로그주소를 설정하여서 그런지 a type으로 설정 시 github에서 cname type으로 변경하라고 경고 메일이 발송된다

참조: 개발자스럽다