Dev21 ReactJS로 영화 웹 서비스 만들기 #4 - 실전 예제 TO DO LIST 기본 To Do List를 만들어보자. input을 입력하면, 아래 List로 해당 내용이 추가되는 형태다. 위와 같이 입력을 받는 input, button을 받았다. 해당 input과 button은 form 태그로 감쌌는데, form 태그는 안에 하나의 버튼만 있다면 해당 버튼을 누를 시 form의 submit이벤트를 발생시킨다. 위와 같은 상황에서, 기본 event를 멈추게 하려면 event.preventDefault() 메서드로 멈추게 할 수 있다. To Dos Array 추가 및 완성 이 때, state를 직접적으로 조작하는 일은 하지 않는다. 모두 setState을 통해 조작한다. ...arr ...arr 은 array의 기존 값을 의미한다. 만약 array = [1,2,3.. 2022. 5. 11. ReactJS로 영화 웹 서비스 만들기 #3 - useEffect 도입 create-react-app Node 설치 후, npx create-react-app my-app 명령어를 통해 react-app을 생성해보자. index.js에서 현재 단계에서 필요 없는 것들을 지워주자. App.js, index.js 말고는 다 지워주자. 첫 Test Button.js App.js Prop-types 설치 npm i prop-types CSS 적용하기 방법 1. style.css 생성 button{ color: white; background-color: tomato; } index.js 에서 import import "./style.css" 그러나 이 방법으로 스타일을 적용시키면 모든 style에 적용되므로, 지양하는 것이 좋다. 방법 2. 속성에 css작성 function .. 2022. 5. 11. ReactJS로 영화 웹 서비스 만들기 #2 - State & Props State state 이 코드에서 시작을 해보자. 코드는 간단하다. button을 누르면 counter += 1 증가되는 코드이다. 그런데 기대와는 다르게 click을 눌러도 counter가 증가하지 않는다. 그런데 console에 counter 값을 찍어보면 증가한 것을 볼 수 있다. 이는 현재코드에서 렌더링을 딱 1번만 하기 때문이다. ReactDOM.render(,root) 그렇다면 다음과 같이 counter를 증가시키는 함수 안에 ReactDOM.render 코드를 넣어서 렌더링을 그때 마다 해주면 되지 않을까? 맞다. 위와 같이 함수 안에 ReactDOM.render 함수를 넣어주니 원했던 대로 동작한다. 그러나 이는 언뜻 생각해봐도 좋은 방법이 아니다. 매 함수마다 render 함수를 호출해야.. 2022. 5. 10. ReactJS로 영화 웹 서비스 만들기 #1 - 도입 도입 순수 HTML 버튼을 클릭하면 숫자가 1씩 증가하는 기능을 만들어보자. 다음과 같은 로직이 필요하다. HTML을 생성한다. JS에서 HTML 태그를 찾아온다. eventListener를 생성한다. eventListener에 함수를 등록한다. 위의 로직에 따라 아래와 같은 코드가 생성된다. 위의 코드를 react 스럽게 바꿔보자. 그러려면 react library를 다운받아야 한다. body 태그 밑에 추가해주자. React React JS가 HTML을 생성해준다. 하지만 그렇게 하려면 React DOM을 생성해야 한다. React JS는 Application이 interative 하게 만들어주는 Library이다. React DOM은 모든 React Element들을 HTML body에 둘 수 있도.. 2022. 5. 10. 상속 상황에서 Lombok @Builder 사용하기 상황 Spring에서 응답처리를 해줄 때의 상황이다. 위와 같은 상속 관계를 갖고 있다. 위 같은 상속 상황에서 @Builder를 통해 해당 인스턴스를 생성하려고 하면 에러가 생긴다. 그래서 각 @Builder마다 builderMethodName 속성을 통해 이름을 지정해줌으로써 @Builder 패턴을 사용할 수 있다. 코드는 아래와 같다. 🔖) BaseReponseBody는 statusCode만 return 할 때, AdvancedResponseBody는 data까지 return 할 때, PaginationResponseBody는 Pagination까지 붙여서 return 할 때 사용했다. BaseResponseBody AdvancedReponseBody PaginationResponseBody REF.. 2022. 5. 6. Spring에서 Pageable 을 이용하여 간단하게 페이징 처리 하기 도입 Spring에서는 Pageable interface를 제공한다. Pageable interface를 이용하면 페이징 처리를 쉽게 할 수 있다. 테스트를 위해 아래 순서대로 코드를 작성해보자. User Entity 생성 UserRepository 생성 CommandLiner 2022. 5. 5. [ssayeon] jenkins 배포시 jenkins내 docker daemon이 실행되지 않는 문제 현 상황 jenkins를 통해서 clone과 front build는 문제없이 된다. 문제는 docker쪽과 gradle문제 글을 쓰면서 gradle쪽 문제도 해결이 됐다. gradle 버전 문제였다. 6.7 -> 7.3으로 upgrade하니까 서버쪽은 됐다. shell script credentialsId 는 보안상 이 글에서는 비워두웠다. shell script는 위와 같다. stage 에서 clean, deploy가 모두 먹지 않는다. clean, deploy에서 docker관련 명령어가 먹히지 않기 때문이다. > 위의 shell에는 clean이 없다. 그 이유는 clean 에서 에러가 생기면 다음 과정으로 진행이 안되기 때문이다. 그래서 shell script에서 clean 부분을 제외하고 jen.. 2022. 5. 4. Docker Jenkins 를 통한 CI/CD 자동화(React, Spring, Gitlab) 환경설정 환경 및 목표 Jenkins와 Docker를 이용해서 배포 자동화 설정을 해준다. 해당 프로젝트의 프론트는 React, 서버는 Spring을 이용해서 구축하였다. 폴더구조 . ├── backend │ ├── Dockerfile │ ├── bin │ ├── build │ ├── build.gradle │ ├── gradle │ ├── gradlew │ ├── gradlew.bat │ ├── settings.gradle │ └── src ├── docker-compose.yml └── frontend ├── Dockerfile ├── README.md ├── nginx ├── node_modules ├── package-lock.json ├── package.json ├── public └── sr.. 2022. 5. 3. 이전 1 2 3 다음
