풀스택은 존재하지 않는다.

TDD 란?

풀스택개발자 — Tue, 23 Nov 2021 15:35:09 +0900

TDD란 Test Driven Development의 약자로 '테스트 주도 개발'이라고 한다.

출처 : 패스트캠퍼스

TDD 개발 주기

Red : 단계에서는 실패하는 테스트 코드를 먼저 작성한다.
Green : 단계에서는 테스트 코드를 성공시키기 위한 실제 코드를 작성한다.
Yellow : 단계에서는 중복 코드 제거, 일반화 등의 리팩토링을 수행한다

TDD 예시

예시 코드를 보는 것이 가장 이해가 빠를 것이다.

for (String a : list) {
    this.create(a),
    this.read(a),
    this.update(a),
    this.delete(a)
}

예를들어 위 처럼 하나의 for 문에 여러 메서드가 삽입 되어 있는 경우 for문을 동작시켜 테스트를 할 수 있지만,

여러 메서드가 묶여 있어 디버깅 과정이 까다로울 것이다.

for문 안에, System.out.println()을 사용하여 테스트 하거나 디버깅 모드 사용하여 디버깅을 하는 것이 대부분일 것이다.

하지만, for문 안에 각각의 메서드 마다의 기능 단위가 커지면 커질 수록 디버깅이 어려워 질 것이다.

TDD 예시 코드 적용

위의 코드 뭉치에 TDD를 적용 시켜보자.

@Test
public void create테스트(){
	String a = a;
	this.create(a);
}

@Test
public void read테스트(){
	String a = a;
	this.read(a);
}

위처럼 기능 단위로 각각의 메서드를 바로바로 실행 시켜 볼 수 있다. 한 기능을 만들때 들어가는 메서드들을 각각 위와 같이 테스트 하며 개발하는 것을 TDD라고 한다.

TDD 적용 방법

업로드 예정

TDD 장 단점

장점
- 기능 단위의 빠른 피드백을 받을 수 있다.
- 작성한 코드가 가지는 불안정성을 개선 할 수 있다.
- 보다 튼튼한 객체 지향적인 코드 생산이 가능하다.
- 재설계 시간이 단축된다.
- 사전의 많은 버그를 발견할 수 있다.
단점
- 생산성의 저하(개발 속도 저하)

TDD는 필수?

출처 : 패스트캠퍼스

TDD를 꾸준히 적용한다면, 시간 대비 비용이 더 커지지 않고 일정하게 유지된다.

초기 비용은 더 많이 들 수 있으나 전체적으로 봤을때 비용이 점진적으로 늘어나지 않는다.

TDD를 사용하는 편이 장기적으로는 효과적이라고 할 수 있다.

org.springframework.dao.DataIntegrityViolationException:

풀스택개발자 — Mon, 22 Nov 2021 14:02:13 +0900

### Error updating database.  Cause: com.mysql.jdbc.MysqlDataTruncation: 
Data truncation: Incorrect datetime value: '\xAC\xED\x00\x05sr\x00\x0Djava.time.Ser\x95]\x84\xBA\x1B"H\xB2\x0C\x00\x00xpw\x15\x06\x00\x00\x07\xE5\x0B\x16\x044.\x0E\x0E\x11x' for column 'CREA_DT' at row 1

insert하려는 Date 타입과 DB에 선언 되어 있는 Date 타입이 달라 충돌 나는 에러입니다.

해결 방법

Insert 하려는 Date 타입과 DB Date 컬럼의 Type을 맞춰 주어야 합니다.

DB마다 호환되는 Date 타입이 다르니 사용하는 DB의 Date 호환 타입을 찾아 맞춰 주어야합니다.

React 기초 공부하기(1)

풀스택개발자 — Mon, 22 Nov 2021 13:55:35 +0900

공부하기 앞서 React가 어떤 프레임워크인지 모르는 분들은 참고하시면 됩니다.

https://iwannafullstack.tistory.com/6

React란?

리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로서 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이

iwannafullstack.tistory.com

React Demo Project

https://github.com/ruanyf/react-demos

GitHub - ruanyf/react-demos: a collection of simple demos of React.js

a collection of simple demos of React.js. Contribute to ruanyf/react-demos development by creating an account on GitHub.

github.com

React의 기초를 단계별로 잘 정리한 Demo Project 입니다.

데모 프로젝트를 바탕으로 기본적인 내용을 정리 해보겠습니다. 자세한 코드는 위의 코드를 참고하시면 됩니다.

Demo01 : Render JSX

<body>
  <div id="example"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
  </script>
</body>

React의 템플릿 구문을 JSX라고 합니다. JSX에서는 HTML 태그를 JavaScript 코드에 직접 넣을 수 있습니다. ReactDOM.render()는 JSX를 HTML로 변환하고 지정된 DOM 노드로 렌더링하는 메소드입니다.

실행결과

Demo02 : Use JavaScript in JSX

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

JSX에서 JavaScript를 사용할 수도 있습니다. HTML 구문의 시작으로 꺾쇠 괄호( < )를 사용하고

JavaScript 구문의 시작으로 중괄호( { )를 사용합니다.

실행결과

Dem03 : Use array in JSX

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

JavaScript 변수가 배열인 경우 JSX는 암시적으로 배열의 모든 구성원을 연결합니다.

실행결과

Dem04 : Use array in JSX

class HelloMessage extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

Class에는 속성이 있으며 this.props.[속성]을 사용하여 HelloMessage name='John'의 this.props.name이 /인 것처럼 구성 요소에 액세스할 수 있습니다.

Class 이름의 첫 글자는 대문자여야 한다는 점을 기억하세요. 그렇지 않으면 React에서 오류가 발생합니다. 예를 들어 컴포넌트의 이름으로 HelloMessage는 괜찮지만 helloMessage는 허용되지 않습니다. 그리고 React 컴포넌트에는 최상위 자식 노드가 하나만 있어야 합니다.

실행결과

Dem05 : this.props.children

class NotesList extends React.Component {
  render() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
}

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.getElementById('example')
);

React는 컴포넌트의 자식 노드에 접근하기 위해 this.props.children을 사용합니다.

this.props.children의 값에는 세 가지 가능성이 있습니다.

1. 구성 요소에 자식 노드가 없으면 값이 정의되지 않습니다.

2. 단일 자식 노드인 경우 개체입니다.

3. 자식 노드가 여러 개인 경우 배열입니다.

React는 this.props.children의 불투명한 데이터 구조를 처리하기 위해 React.Children 유틸리티를 제공했습니다. React.Children.map은 데이터 유형이 정의 되지 않으면 객체가 생성 되지 않고 반복할 수 있습니다.

실행결과

Dem06 : PropTypes

class MyTitle extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
  }
  render() {
    return <h1> {this.props.title} </h1>;
  }
}

컴포넌트에는 React에서 props라고 하는 많은 특정 속성이 있으며 모든 유형이 될 수 있습니다.
props를 검증하는 방법이 필요합니다. 사용자가 구성 요소에 아무 것도 입력할 수 있는 자유를 원하지 않습니다.
이를 PropTypes라고 합니다. 위의 코드에서 PropTypes는 제목이 필수이고 값이 문자열이어야 한다고 React에 알려줍니다.

실행결과

Dem07 : 업데이트 중

구글 트렌드 차트 사용법

풀스택개발자 — Sat, 20 Nov 2021 20:11:08 +0900

구글은 전세계의 동향을 사용자가 보고 싶은 형태로 보여줄 수 있는 트렌드 차트를 제공한다.

간단 사용법

위의 그림처럼 자신이 관심이 있어하는 여러분야를 비교해볼수 있다.

비교 추가 라인에 비교하고 싶은항목을 자유롭게 추가할 수있다.

지역별, 시간별 등등의 다양한시각에서 데이터의 트렌드 차트를 보여준다.

활용법

요즘 투자 열풍인 만큼 자신이 관심 있는 주식이나, 코인들을 비교해볼 수도 있고 기업의 관심도도 비교해볼 수 있다.

구글 트렌드 차트를 잘 활용하면 나에게 많은 도움을 줄 수 있을 것이다.

React란?

풀스택개발자 — Sat, 20 Nov 2021 19:51:15 +0900

리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로서 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다.

2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램에 적용 되었다고 한다. 2013년 5월 JSConf US에서 오픈 소스화되었다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수 된다.

React 장점

HTML과 JavaScript를 결합한 구문을 사용하여 간단한 JS 디자인을 제공하므로 배우기 쉽다.
React의 Virtual DOM 구현 및 렌더링 최적화로 인해 빠르다.
특히 create-react-app템플릿 생성기 와 함께 최고 수준의 PWA (Progressive Web App) 지원 .
React는 재사용 가능한 코드를 허용하는 구성 요소로 함수형 프로그래밍을 구현하여 모듈화 된 디자인을 만든다. 이를 통해 앱을보다 쉽게 유지 관리하고 구축 할 수 있으므로 복잡한 인프라를보다 쉽게 개발하고 확장 할 수 있다.

React 단점

아직 React는 지속적으로 문서가 업데이트 되고 있다.
React에 포함되어 있는 JSX 및 ES6은 입문자가 학습하기에 어렵다.

구글 트렌드 차트로 보는 전세계 자바스크립트 프레임워크 순위

출처 : https://trends.google.co.kr/

React는 아직까지 전세계에서 가장 인기가 많은 프레임워크라는 걸 볼 수 있다.

실제로 현재 국내에서 IT정상급 기업들은 React 개발자를 선호한다. 당근, 비바리퍼블리카, 우아한형제들 등등...

React를 공부 해야 하는 이유

React의 세계적인 관심도 중요하다. 협업은 개발자의 숙명과도 같다. 백엔드 개발자일지라도 프론트엔드 기술셋을 이해하는 것이 중요하다고 생각한다.

@Resource 어노테이션 이란?

풀스택개발자 — Fri, 19 Nov 2021 16:32:34 +0900

@Resource과 @Autowired의 차이점을 설명하면 Resource 어노테이션의 의미를 이해하기 쉽다.

@Autowired와 @Resource의 차이점

1. @Autowired : 타입(클래스)로 Bean을 지정한다.(생성자/필드/메서드에 모두 적용 가능)

2. @Resource : Name으로 Bean을 지정한다.(필드/메서드에만 적용 가능)

@Autowired 어노테이션이 타입을 이용해서 의존성을 주입한다면, @Resource 어노테이션은 빈 이름을 이용해서 의존성을 주입한다.

예시 코드

@Repository
public class CommonDao {
    @Autowired
    private SqlSessionTemplate sqlSession;
}

위와 같이 Autowired를 사용한다면, sqlSession은 SqlSessionTemplate 클래스에 의존성을 가지게 된다.

@Repository
public class TestDao {
    @Resource(name="BlueSqlSessionTemplate")
    private SqlSessionTemplate sqlSession;
 }

위와 같이 Resource를 사용한다면, sqlSession은 BlueSqlSessionTemplate의 이름을 가진 Bean 객체에 의존성을 가지게 된다.

name 속성을 생략하면, @Resource 어노테이션이 적용된 필드나 설정 메서드의 타입을 사용한다.

@Resource 어노테이션의 적용 순서

1. name 속성에 지정한 빈 객체를 찾는다.

2. name 속성이 없을 경우, 동일한 타입을 갖는 빈 객체를 찾는다.

3. name 속성이 없고 동일한 타입을 갖는 빈 객체가 두 개 이상일 경우, 같은 이름을 가진 빈 객체를 찾는다.

4. name 속성이 없고 동일한 타입을 갖는 빈 객체가 두 개 이상이고 같은 이름을 가진 빈 객체가 없는 경우 @Qualifier를 이용해서 주입할 빈 객체를 찾는다.

org.springframework.jdbc.BadSqlGrammarException:

풀스택개발자 — Thu, 18 Nov 2021 16:38:29 +0900

### Error querying database.  Cause: java.sql.SQLException: Subquery returns more than 1 row
### The error may exist in file [ query 파일 위치 ]
### The error may involve UserSql.selectUserAccountInfoByUserId-Inline
### The error occurred while setting parameters

서브쿼리가 1개 이상의 Row를 리턴할때 발생하는 에러 입니다.

해결 방법

public UserInfoModel selectUserId(UserModel reqModel) {
   return selectOne("UserSql.selectUserInfoByUserId", reqModel);
}

따라서, 위와 같이 selectOne으로 단일 Row를 리턴 받도록 코드를 짯다면, selectOne을 selectList로 변경 하여 다중 Row를 리턴 받도록 수정 하거나 단일 Row만 리턴 할 수 있도록 쿼리를 변경합니다.

@RequiredArgsConstructor과 @Autowired 차이점

풀스택개발자 — Thu, 18 Nov 2021 13:57:37 +0900

의존성 주입할때 @Autowired라는 어노테이션을 대게 많이 사용한다.

의존성이란?

class HiWorld {
   private SayHi sayHi;

   public HelloWorld() {
      this.sayHi = new SayHi();
   }

   public startHelloWorld() {
      this.sayHi.hello();
   }
}

HiWorld 클래스에서 hello함수가 호출되기 위해서는 SayHi 클래스가 필요하다.

HiWorld 클래스는 SayHi 클래스의 의존성을 가진다고 말한다.

@Autowired 예시

@Service
public class UseService {

   @Autowired
   private UseDao dao;
   
   @Autowired
   private UseResourceService resource;

@Autowired를 활용한 의존성 주입을 필드 주입이라고 한다.

하지만 이 방식은 인텔리제이나, 스프링 팀에서 권장하지 않는다.

@RequiredArgsConstructor 권장

@Service
@RequiredArgsConstructor
public class UseService {

   private final UseDao dao;
  
   private final UseResourceService resource;

Lombok에서 지원하는 @RequiredArgsConstructor 어노테이션을 사용하여 의존성을 주입 하는 것을 생성자 주입이라고 한다.

스프링 팀은 생성자 주입을 사용할 것을 권장한다.

생성자 주입을 사용할 경우 아래와 같은 장점이 있다.

① 순환 참조 방지

② 테스트 코드 작성 용이

③ 코드 악취 제거

④ 객체 변이 방지 (final 가능)

@SuppressWarnings 어노테이션 이란?

풀스택개발자 — Thu, 18 Nov 2021 11:18:49 +0900

컴파일러가 경고하는 내용 중 "이 내용은 경고하지마"하고 제외 할때 사용 합니다.

@SuppressWarnings("unchecked")

위 처럼 ()안에 옵션을 줄 수 있습니다.

1. all : 모든 경고를 억제
2. cast : 캐스트 연산자 관련 경고 억제
3. dep-ann : 사용하지 말아야 할 주석 관련 경고 억제
4. deprecation : 사용하지 말아야 할 메소드 관련 경고 억제
5. fallthrough : switch문에서의 break 누락 관련 경고 억제
6. finally : 반환하지 않는 finally 블럭 관련 경고 억제
7. null : null 분석 관련 경고 억제
8. rawtypes : 제네릭을 사용하는 클래스 매개 변수가 불특정일 때의 경고 억제
9. unchecked : 검증되지 않은 연산자 관련 경고 억제
10. unused : 사용하지 않는 코드 관련 경고 억제