분류 전체보기
-
[react] useStatereact+vue 2022. 9. 21. 14:20
버튼을 누르면 변수가 1씩 증가하는 화면을 구현해보자 아래의 코드는 변수는 1씩 증가하지만 화면에 반영되지 않는다. function App(){ let number = 1;//상태 값이 아니라 그냥 변수 const add = ()=>{ number++; console.log('add',number); }; //랜더링 시점 = 상태 값 변경 return( 숫자:{number} 더하기 ); } number가 상태 변수가 아닌 그냥 변수이기때문에 UI가 변경되지 않는다. react는 상태 변수의 변화는 감지하지만 일반 변수의 변화는 감지하지 않는다. hooks라이브러리의 useState function App(){ //let number = 1; const [number,setNumber] = useState..
-
javascript 배열 함수 (concat, filter, map, slice, spread)react+vue 2022. 9. 21. 14:11
리액트에서 배열을 다루는 것 리액트에서는 UI의 각 요소를 컴포넌트화 하여 화면을 만든다. 컴포넌트화 한 화면의 요소를 배열에 저장하여 배열을 가공하는 것이 중요하다. 아래에서 배열을 가공할 수 있는 함수와 전개 연산자의 활용법을 작성하겠다. 배열 const a = [1,2,3]; concat 새로운 배열을 만들어서 추가하기 const a = [1,2,3]; const b = a.concat(4); console.log(a);//[1,2,3] console.log(b);//[1,2,3,4] const c = [...a,4];//concat과 같다 filter 걸러내기 bool을 return 받고, true만 걸러낸다. 보통 배열의 요소를 삭제할 때 쓴다. const a = [1,2,3]; const b ..
-
react 개념react+vue 2022. 9. 20. 16:43
리액트 개념 데이터 변경을 감지하여 UI를 자동으로 변경해주는 엔진 daemon 데이터 변경 감지를 위한 프로세스 항상 돌아가야 한다. → 서버가 필요(node.js) npm 라이브러리 설치 및 빌드 도구 자바로 치면 maven npmjs.com -라이브러리 모음 node.js 리액트를 실행하기위한 서버 npx 라이브러리 설치 및 빌드 도구 npx는 글로벌 라이브러리를 재사용한다.npm은 프로젝트와 글로벌로 나누어 관리한다. 라이브러리의 새 버전을 설치할 때 구 버전을 삭제해 주어야 한다. 또한 라이브러리 실행 후 삭제도 자동으로 지원한다. 실행과정 package.json react-scripts start → index.js를 실행시킨다. index.js render 함수 index.js의 App함수의..
-
react 설치react+vue 2022. 9. 20. 16:40
설치할 항목 node.js react visual studio : 이미 설치되어 있어 설명은 생략하겠다. visual studio 마켓 prettier eslint node.js 설치하기 https://nodejs.org/ko/download/ 위 주소에서 LTS버전을 다운받으면 된다. VScode 세팅 파일 탐색기를 열어 workspace를 만들어준다.나는 reactWork라는 이름의 폴더를 생성했다. 나는 reactWork라는 이름의 폴더를 생성했다. VSCode 세팅하기 좌측 상단의 파일을 클릭 폴더열기에서 만들어둔 workspace를 열어준다 terminal 열기 workspace를 우클릭하여 통합 터미널 열기를 클릭해준다. terminal에서 node.js가 설치 되었는지 확인한다. node -..
-
우분투에 SpringBoot프로젝트 배포 그 후(1)교환일기 2022. 9. 18. 19:45
절대주소 오류 RestFull API를 사용하여 Controller에서 뷰로 넘어갈 때 ViewName에 절대주소를 적었다. 이클립스에서 구동했을 때는 문제없었지만 우분투 환경에 배포하니 슬래시’/’가 하나 더 들어가는 현상이 발생하였다. 위 처럼 주소의 맨 앞에 /슬래시를 붙여주었다. 알고보니 SpringBoot에서 ViewName의 기본 경로가 “templete/”이라 templete//diary/writeMyDiary로 전송이 된 것이었다. 슬래시를 빼주고 다시 배포했더니 정상 작동했다. Redirect는? RestFull API를 쓰고 있기 때문에 Redirect를 할때 ViewName에 redirect:주소로 작성했다. 그래서 ViewName을 수정할 때 절대주소인 redirect주소에 슬래시를..
-
정동진 당일치기일상 2022. 9. 16. 19:47
엄마랑 정동진 당일치기로 갔다. 한시에 도착해서 칼국수도 먹고 이스트씨네도 갔다왔다. 날씨가 흐림이라 걱정했는데 내려보니 화창해서 쨍한 파란색 바다를 볼 수 있었다. 멋있는 바위와 바다 점심으로 대게 칼국수를 먹고 이스트씨네로 갔다. 영화관련 책을 파는 서점겸 카페다. 영화로 만들어진 원작 소설을 팔기도하고, 감독과 작가의 인터뷰를 엮은 책들 등등이 있다. 영화관 의자들이 놓여 있고, 커다란 스크린이 벽에 채워져있다. 파도가 담긴 영상이 틀어져있었다. 오션뷰… 마지막으로 바다를 한번 더 봤다 그네 의자가 있었는데 명당이었다. 날씨는 흐려졌지만 잊지 못 할 풍경이다. 감상하느라 사진은 못 찍었다. 엄마 옛날 얘기를 들은 적이 별로 없는데 엄마 학창 시절 부터 결혼 하고 나서의 얘기가 무척 흥미로웠다. 당일..
-
우분투에 SpringBoot 프로젝트 배포하기교환일기 2022. 9. 15. 20:05
AWS 배포 실패… ec2에 톰캣 설치 후 war파일로 배포도 해보고, maven으로 배포도 해봤으나… war, jar파일을 export할 때 문제가 있었던 건지 main실행파일을 못찾는 에러로 실패하였다. 미리 빌드된 jar파일만 있으면 jdk로 실행시킬 수 있다는 것이 생각났다. 이클립스에서 미리 maven build를 실행하고 생긴 jar파일을 파일질라로 ec2에 옮겨 실행시키니 성공했다. maven build 이클립스에서 프로젝트 우클릭 후 Run As → Maven build 빌드 되면 콘솔 창에 build seccess라는 메세지와 jar파일이 생긴다. 이 diary-0.0.1-SNAPSHOT.jar파일을 우분투에서 실행시킬 것이다. 나 같은 경우는 jar파일 외에도 모든 프로젝트 파일을 ec..