초보개발자 개발일지

48일차(3)/React(14) : SPA(Single Page Application) 예제(2) - React로 Single Page App 만들기. - 대표적인 SPA 사이트는 gmail 이 있다. SPA는 한번 로딩되면 틀은 그대로이고 내용 창만 바뀔 뿐이다. - gmail은 같은 페이지안의 주소를 # 로 표시한다. - 이런 방식은 웹페이지가 아니라 앱을 사용하는 것 같은 느낌을 준다. - 이런 방식으로 만들려면 반드시 프레임워크의 도움을 받아야 한다.(Vue, React, Angular, ...) - 순수 js로 만들려면 미쳐버린다... 코딩의 자유도도 너무 높아서 유지보수가 어렵다. - 반면 gmarket 등 일반 웹페이지는 다른 링크를 누르면 전체 페이지가 새로고침 된다. - 여기서 페이지 소..

47일차(1)/React(12) : jsp 웹페이지 React 로 재작성하기 (회원가입 폼) - signup_form.jsp React App으로 작성해보기 - App.js 전체 코드 import React from "react"; //class 속성값을 편하게 제어하기 위한 모듈(install 후 사용할 수 있다 import cn from 'classnames'; function App(){ //입력한 id, pwd, email 유효성여부를 상태값으로 관리(object) const [valid, setValid] = React.useState({ isIdValid:false, isPwdValid:false, isEmailValid:false }); //현재 입력된 id, pwd, email을 상태값으로..

46일차(3)/React(11) : React 에서 만든 결과물 배포하기(build) [ React에서 만든 결과물을 얻어내서 tomcat 서버에서 사용해 보기 ] 1. tomcat에서 일부 페이지에서만 사용하는 경우 ← 이쪽을 실습해볼 예정 2. tomcat에서 모든 기능을 react를 활용해서 구현하는 경우(SPA) (이건... 규모가 너무 커짐) - 이번에는 npm start / npm run build 를 해볼 것! my_app 생성 import puff from './images/puff1.png'; import './css/custom.css'; import React from 'react'; function App() { //margin-left를 상태값으로 관리하도록 하고 초기값 100을 ..

46일차(1)/React(9) : 함수형 컴포넌트 작성 / ajax 요청으로 DB 데이터 출력 - 지금까지는 클래스 기반으로 component를 만들었는데, 이번부터는 함수 기반으로 만드는 방법을 익혀볼 예정! * 클래스 기반 - component 를 상속해서 클래스를 정의하고, render 메소드를 사용해 javascript 객체를 기본으로 화면 구성 - App이라는 클래스를 export해주면 클래스가 리턴해주는 js가 화면을 구성해주는 것 * 함수 기반 - App이라는 함수 안에서 화면 구성. jsx를 사용해서 작성하고 함수 안에 있는 내용으로 화면이 구성된다. - 마지막에는 함수명으로 export 해준다. 이것을 함수 기반 컴포넌트라고 한다. App07.js //App07.js import Reac..

45일차(2)/React(8) : 모듈화된 CSS 적용하기 / form 요소 활용 App05.js - CSS 적용 //App05.js import { Component } from "react"; //css/custom.css로딩하기 import "./css/custom.css"; /* [ 모듈화된 css를 사용하는 방법 ] 1.css 파일의 이름에 .module.를 추가한다 2.from과 함께 import 해서 사용한다. */ import styles from "./css/custom.module.css"; class App extends Component{ state={ obj:{ color:"blue", border: "1px solid red", backgroundColor:"yellow" }, ..

45일차(1)/React(7) : React 실습예제 / CSS import해서 적용하기 App04_ex2.js (최종) - 체크하면 아래 선택한 목록이 추가되도록 하기! //App04_ex2.js import { Component } from "react"; class App extends Component{ state={ selectedList:[] } //선택한 메뉴를 출력할 데이터를 담을 배열 (처음엔 선택한게 없어서 비어 있다) selected=[]; render(){ let menu=[ {id:1, name:"김밥"}, {id:2, name:"라면"}, {id:3, name:"떡볶이"}, {id:4, name:"만두"}, {id:5, name:"우동"} ]; //data 를 이용해서 UI를 만..

44일차(2)/React(6) : jsx 객체 활용, setState 함수 실습 App04.js //App04.js import { Component } from "react"; class App extends Component{ state={ isRun:false } render(){ const myName="kim"; const myP= p2입니다.; let isRun=false; return( jsx 객체 활용하기 {"kim"} {myName} p1입니다. {myP} 아래가 달려요 인지 달리지 않아요 인지 확인! { true ? 달려요 : 달리지 않아요 } 아래가 달려요 인지 달리지 않아요 인지 확인! { isRun ? 달려요 : 달리지 않아요 } state 값 활용 달리려면 체크 { this.st..

43일차(3)/React(4) : filter 함수 / 자식 component 활용 예제 - 자식 component 연결하여 배열 불러오기 - 자식 component 에서 만든 버튼에 이벤트가 발생하면 부모 component 에서 함수 호출하기 App03_ex3 - 자식 component 활용하기 //App03_ex3.js import FriendComponent from "./components/friendComponent"; import { Component } from "react"; class App extends Component{ render(){ let friends=["바나나", "딸기", "복숭아"]; return( 자식 component 사용 예제 ); } } export default..

43일차(2)/React(3) : map, concat 함수 / 이벤트 처리 예제 - 매번 새 프로젝트를 생성하려면 시간이 오래 걸리므로... App00.js 를 만든 후 해당 파일을 브라우저에 출력하도록 바꾸는 방식으로 실습 App02.js //App02.js import { Component } from "react"; class App02 extends Component{ //상태값(state) 정의하기 state={ info:"x:0, y:0", info2:"x:0, y:0" }; render(){ //요소에 적용할 인라인 css를 object로 정의하고 적용할 수 있다. const boxStyle={ width:"300px", height:"300px", border:"1px solid red"..

43일차(1)/React(2) : React App 생성, React 기초 * React JS 홈페이지 : https://ko.reactjs.org/ - 어떤 동작을 하는 유저 인터페이스를 만들려면 javascript 가 필요하다. - React는 이 javascript를 좀더 체계적으로 쉽게, 그리고 대규모로 만들더라도 체계적인 구성으로 만들 수 있도록 도와주는 라이브러리! - React 와 비교되는 비슷한 js 라이브러리: Angular, Vue, React 등 - 자주 쓰이는 순서는 react > vue > angular - 클래스 : 객체 생성을 위한 설계도. 상속받아서 사용 가능. 안에 메소드가 있음 (java에서의 클래스와의 공통점) - jsx의 구조를 보면 javascript임에도 java같..