전체적인 틀 개발 기능 구현전에 대략적으로 UI를 개발한다. 디렉토리 구조 디렉토리는 아래와 pages와 components로 구성한다. pages는 화면 단위로 jsx 파일 생성 components에는 화면을 구성하는 component를 단위로하여 jsx 파일 생성 현재는 하나의 페이지만 있어도 되지만, 추후에 여러개의 페이지가 생길 수도 있으니 pages 디렉토리를 따로 만들었다. 개발할 페이지와 컴포넌트 리스트업 Pages Home: 첫 화면 (ToDo List를 보여줌) Components ToDo Item 입력을 받을 수 있는 컴포넌트 ToDo Item 리스트 컴포넌트 (ToDo Item 컴포넌트들을 포함) ToDo Item 컴포넌트 개발 시작 jsx 파일 생성 아래와 같이 components와..

구현할 기능 기획 ToDo List인 만큼 CRUD는 필수적으로 들어가야함 기본 기능 ToDo Item 추가 ToDo Item 수정 ToDo Item 삭제 ToDo Item 할 일 완료 체크 / 체크 해제 할 일 완료한 전체 목록 보기 (히스토리) 아래 기능은 나중에 추가하면 좋을거 같다 기한 설정 기능 장소 입력 기능 Item을 여러개의 step으로 나눌 수 있는 기능 '알고리즘 정렬 공부하기'는 '오전에 삽입정렬', '오후에 병합정렬 공부하기'로 2step으로 나눠짐 데이터를 DB로 관리 화면 구성 기획 우선은 기본 기능만 생각하고 화면을 기획했다. 아래 기능들을 모두 구현했을때, 버전 v1.0.0으로 한다. 맨 위에 할 일을 추가할 수 있는 입력창과 버튼이 존재 그 아래에는 ToDo Item 목록이..

목표 프로젝트를 생성 prettier와 eslint를 설정 프로젝트 생성 react-create-app으로 프로젝트를 생성한다. 아래 명령어 수행 $ yarn create react-app todo-app 생성 후 실행 확인해보자. 아래 명령어 수행 후 localhost:3000으로 접속 $ cd todo-app $ yarn start (리액트 로고가 뱅글뱅글 돌아가는 화면이 나온다) vscode에서 prettier와 eslint 설정 본 프로젝트는 vscode를 이용해서 개발할 예정이므로, vscode 환경에서 본 글을 작성한다. prettier와 eslint의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 ..

registry 설정과 마찬가지로 사내에서 개발하다보면 proxy를 설정해야하는 상황이 발생하기도 한다. proxy 설정을 할때는 npm config set 또는 yarn config set을 이용한다. 프록시 설정 본 글에서는 npm과 yarn을 사용해서 프록시 설정하는 방법을 모두 소개한다. using npm > npm config set proxy http://username:password@host:port > npm config set https-proxy http://username:password@host:port using yarn > yarn config set proxy http://username:password@host:port > yarn config set https-proxy ..

혼자서 개발할때는 필요없는 설정이지만, 인터넷이 막혀있는 사내에서 개발할때는 필요할 수 있다. 사내 넥서스 설정 기본적으로는 https://registry.yarnpkg.com 을 바로보게 되어있다 아래 명령어를 통해 확인 가능 > yarn config list registry의 값을 사내 저장소의 url로 바꿔주면 된다. 바꾸는 방법은 아래 명령어를 이용한다. > yarn config set registry https://your.company.registry.com 그리고, 다시 yarn config list 명령어로 제대로 바뀌었는지 확인해 본다. 만약에 잘못 설정했다면 yarn config delete registry 명령어를 이용하면 된다.

Nodejs 설치 아래 사이트에서 설치 파일 다운로드 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2021.07.08 기준으로 LTS 버전은 14.17.3이다. 본 글에서는 14.17.3을 다운로드 받는다. 설치가 끝나면 cmd 창에서 node -version 명령어를 입력해본다 > node --version v14.17.3 위와같이 버전이 나오면 설치 성공 Yarn 설치 (필수 아님) node 모듈을 다운로드 받을때 npm 을 이용해도 되지만, npm 보다 빠르고 의존성까지 한번에 받아주는 yarn 사용하면 편하다. 필수는 아니기 때문에 설치하..

@RequestBody @RequestBody 는 JSON 형태의 데이터를 Java 객체에 매핑할때 사용하는 어노테이션이다. 예를 들어 아래와 같이 '공지 사항'과 관련된 글쓰기 API를 만들었다고 했을때, 비즈니스 로직은 생략 (입력받은 값 그대로 반환하도록 함) NoticeVo.java @Getter @Setter @Builder @NoArgsConstructor @AllArgsConstructor public class NoticeVo { private int id; // ID private String title; // 제목 private String contents; // 컨텐츠 private LocalDateTime registeredAt; // 등록일 } ApiNoticeController...

@Controller 어노테이션을 이용하면 기본적으로 view 페이지를 찾아서 띄어주는 역할을 한다. 하지만 REST API를 개발해야하는 상황이라면 각 메소드마다 @ResponseBody를 붙여서 데이터를 그대로 반환하도록 할 수 있다. (아래 글 참고) 2021.05.17 - [Spring] - @ResponseBody를 이용하여 데이터 반환 @ResponseBody를 이용하여 데이터 반환 보통은 @Controller 어노테이션을 이용하여 Controller 를 생성했을때, (ViewResolver에 의해) return 값으로 반환하는 문자열 이름의 view 페이지를 띄어준다. (아래 예시 코드 참고) 더보기 HelloCotroller.java.. memostack.tistory.com 하지만, 위 ..

보통은 @Controller 어노테이션을 이용하여 Controller를 생성했을때, (ViewResolver에 의해) return 값으로 반환하는 문자열 이름의 view 페이지를 띄어준다. (아래 예시 코드 참고) 더보기 HelloCotroller.java import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; @Controller public..

목표 Mac OSX에 Maria DB 를 설치 초기 비밀번호 설정 DB 접근 Homebrew 설치 아래 사이트 참고 brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh Maria DB 설치 $ brew install mariadb 정상적으로 설치되면 아래 명령어로 server를 실행할 수 있다 $ mysql.server start Starting MariaDB 210509 20:08:27 mysqld_safe Logging to '/usr/local/var/mysql/A202105003-02.local.err'. 210509 20:08:27 mysqld_safe Starting mariadbd daemon ..