이번에 새로운 프로젝트를 하면서 Back 은 이클립스로 Front 는 리액해서 프로젝트를 진행하고있다. 리액트는 생각보다 어렵다. return 문제가 되는 부분 자 여기서 보면 어디서 문제가 되는지 전혀 찾아 볼 수가 없다. 근데 ? 페이지가 안뜬다. return 바꿔주는 부분 다음 부분에 return 소괄호의 위치가 문제가 되는것이다..... 아주 잘 작동되는 것을 확인해 볼 수가 있다. return 소괄호 위치 잘 맞춰주자.... To be continue..

yarn yarn 이 npm 의 조금 더 개선된 버전이라고 생각하면된다. 그치만 yarn보다 npm이 익숙하다면, npm 사용해도 좋다. 사실 굳이 큰 차이는 잘 못느끼겟다 아직. To be continue..

바로 시작! State 사용 선언 State문법을 사용해주기 위해서 다음과 같은 선언을 해주어야한다. State문법 사용 이게 바로 state문법이다. modal 은 변수, setModal은 함수 이다. useState 디폴트 상태는 false (디폴트 값이 false면 기본으로 작동하지 않는 상태를 유지한다 라고 나는 이해했다) Modal 만들기 내가 쓰고 있는 프레임워크는 인텔리제이여서 작동 중이면 초록불이 들어온다. 스프링도 비슷한 지원하는게 있을 수 있으니 찾아보길 권장, 그치만 리액트는 인텔리제이로 하는게 맞지않나 싶다. 다음과 같이 잘 모달 창을 만들어준다. 화면 호출 ⭐⭐⭐⭐⭐ 자 여기가 진짜 중요한 설명이다. 집중! 버튼은 상세보기를 클릭 했을 때 모달창이 On/Off 된다. 그 이유는 s..

리엑트로 버튼 클릭시 간단한 모달창이 뜨게 만들어보자 결과 모달창 여닫기 클릭을 누르면 다음과 같은 모달이 등장 다시 클릭하면 없애지는 결과이다. 부트스트랩 모달만 쓰다가 이렇게 직접 만들어 보니까 좀 새롭다. App.js function App() { let [modal, setModal] = useState(false); return ( { setModal(!modal) } }>모달창 여닫기 {modal === true ? : null} ); function Modal() { return ( 제목 날짜 상세내용 ) } 간단한 코드 내용을 설명해보자면, let [modal, setModal ] = useState(false); modal 은 변수명 / setModal은 함수 명이다. : 버튼이 클릭되었..

useState를 사용하는 이유는 페이징이 새로고침이 되지 않아도 알아서 원하는 데이터를 바뀐다는것이 가장 큰 장점이다. 중요한건 무조건 useState로 만들어서 사용해야좋다. App.js import React, { useState } from 'react'; 맨위에 이거한줄 넣어준다. (useState) 사용하겠다는 선언. let [a,b] = useState('남자 코트 추천', '여자 청바지 추천' ); // ES6 destructuring 문법 = var [a,b] = [10, 100]; a[0] = '남자 코트 추천' a[1] = '여자 청바지 추천' 이라는 의미이다. return ( 개발 BLOG { a } 2월 17일 발행 ); } { a } 보면 확인 해 볼 수 있다. 나오게 된다. 만..

이번에 맡게 될 프로젝트에서 리엑트만 사용한다고 들었다. 그래서 리엑트 공부를 시작한다. 세팅 이클립스 마켓 -> React 검색 React Install 하고 Restart 까지 해준다. Other 클릭해서 React Project를 생성 프로젝트 이름을 정해주고 Finish 클릭 프로젝트 우클릭 -> Show in -> Terminal npm install 입력 완료 node_modules 라는 폴더가 생긴다. 그리고 터미널에 > create-react-app 실행 서버 키고 모르겠으면 더블클릭해서 Run check 하면 자동으로 할당된다. Run 체크해주면 작동한다. 서버 켜주는것 잊지말자. 기본포트는 http://localhost:3000/index/ 이다. To be continue..