분류 전체보기(126)
-
React 활용 - 2 : React-router-dom(네비게이션) 특정 페이지에서 숨기기
이전 글에서는 리액트에서 페이지 공통 영역인 header를 생성하는 방법을 알아보았다. 이번에는 로그인 페이지 등에서 공통 영역(header, footer 등)을 숨기는 방법에 대해 알아보겠다. 우선 지난시간에 작성한 코드 중 Link 영역을 따로 분리하여 아래와 같이 Header.js 파일로 만들어준다. import React from 'react'; import { Link } from 'react-router-dom'; function Header() { return ( FirstScreen ); } export default Header; App.js에서는 해당 header를 임포트하여 추가한다. import React from 'react'; import FirstScreen from './Sc..
2022.09.29 -
React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기
리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 만드는 페이지로, FirstScreen.js를 생성한다. import React from 'react'; function FirstScreen() { return ( first ); } export default FirstScreen; 이제 App.js를 열어 아래와 같이 수정한다. import React from 'react'; import FirstScreen from './Screens/FirstScreen' import { BrowserRouter as..
2022.09.10 -
SVN - JENKINS 로 배포하기 3 - tomcat 설정 및 배포하기
tomcat 설정을 위해 tomcat 폴더의 config 폴더 아래에 있는 tomcat-users.xml 파일을 열어준다. 해당 파일에 위 코드를 아래와 같이 입력한다. 그 후 아래 Add를 클릭하여 계정을 등록한다. 계정은 해당 줄에 있는 username과 password를 사용한다. 모두 적은 후 저장을 클릭하면 프로젝트가 생성된다. 모든 세팅 완료 후 tomcat 폴더의 bin폴더에서 startup.bat 파일을 실행시켜 서버를 재시작한다. 그 후 해당 생성된 프로젝트로 들어가서 Build Now를 누르면 빌드가 시작된다. 좌측 하단에 Build History가 나오는데 진행중인 빌드에서 Console output을 클릭하면 빌드 및 배포가 된다. 아래와 같이 초록색 표시와 날씨의 상태로 빌드 성공..
2021.08.13 -
SVN - JENKINS 로 배포하기 2 - SVN 프로젝트 생성하기
지난장에서는 젠킨스의 설정을 마무리 하였다. 이번에는 SVN에 있는 프로젝트를 젠킨스에 생성 및 설정하는 방법에 대해서 알아보자. 먼저 젠킨스 메인에서 새로운 Item을 클릭한다. 그 후 프로젝트 이름 입력 후 Maven project를 클릭 후 OK 버튼을 클릭한다. (다른 형식의 프로젝트라면 그에 맞는 프로젝트를 선택한다.) 먼저 SVN 의 프로젝트를 받기 위해 아래와 같이 선택을 하여 SVN 프로젝트의 URL을 입력한다. 그 후 Add를 눌러 SVN 계정을 입력한다. SVN에 접속하기 위한 계정정보를 입력 후 ADD를 클릭한다. 추가 후 아래와 같이 계정 선택이 가능해진다. 그 후 해당 프로젝트의 pom.xml 파일의 경로를 아래와 같이 입력한다. 만약 pom.xml 파일이 svn 경로 아래에 바로..
2021.08.13 -
SVN - JENKINS 로 배포하기 1 - 젠킨스 설치 및 기초세팅
젠킨스 설치를 위해 아래 사이트에 접속을 하여 war 파일을 받아준다. https://www.jenkins.io/download/ Jenkins download and deployment Jenkins download and deployment The Jenkins project produces two release lines: Stable (LTS) and regular (Weekly). Depending on your organization's needs, one may be preferred over the other. See the links below for more information and recommendations abo www.jenkins.io 다운받은 war 파일을 현재 사용중인 ..
2021.08.13 -
React - 파일 데이터 전송하기(파일 업로드, 파일 미리보기)
리액트에서 파일 업로드를 하는 방법은 기존 ajax를 사용하는 방법과 크게 다르지 않다. 스테이트에 파일 데이터를 넣는 방법이 다른 부분이 있어서 해당 부분부터 처리를 해야한다. 먼저 아래와 같이 두개의 스테이트를 생성한다. const [imgBase64, setImgBase64] = useState([]); // 파일 base64 const [imgFile, setImgFile] = useState(null);//파일 imgFile은 이미지 파일 그 자체를 받을 스테이트이고, imgBase64는 미리보기를 구현하기 위해서 이미지 데이터를 받을 스테이트이다. 아래와 같이 input을 만들어준다. 위 input에 파일을 등록하면 handleChangeFile 함수가 실행한다. const handleChan..
2021.05.27