초보개발자 개발일지

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

47일차(2)/React(13) : SPA(Single Page Application) 예제 - react-router-dom 기능 사용하기 (NavLink, Route, withRouter) - 컴포넌트의 property 로 제공되는 location, match, history 사용하기 - queryString 기능 사용하기 - React로 웹페이지 전체를 만들면(SPA) 응답 방식도 전부 바뀐다. 전체 페이지가 달라지지 않으므로(페이지 이동 X) json으로만 응답하게 된다. - spa_app 새 리액트 앱 생성 (.css 등 필요없는 파일은 지우기) App.js import { NavLink, Route, withRouter } from "react-router-dom"; import { Home,..

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일차(2)/React(10) : import, export 활용 예제(module) App09.js //App09.js //import import React from "react"; //util은 object이다. import util from "./my_modules/util"; import {num, name, isMan, myLongInformation as info} from './my_modules/member' /* import Home from './your_modules/Home'; import Game from './your_modules/Game'; import Study from './your_modules/Study'; */ //폴더명으로 import해서 사용하면 index.j..

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

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..

44일차(1)/React(5) : React 저장소 clone하기 / React 코드 리뷰 - 어떤 어플리케이션이 항상 GUI가 있는 것은 아니다. - 화면상에 나타나진 않지만 백그라운드에서 동작하고 있는 프로그램도 많다. - gui가 없는 프로그램들은 보통 명령프롬프트에서 실행된다. - 명령 프롬프트에서 사용하는 cd 도 사실 응용프로그램이다. 기본으로 어디서나 접근 가능한 프로그램! - React 작업을 위한 기본 라이브러리들이 들어있는 패키지들 - 이건 어디에 설치되어 있는지? → 글로벌이 아니라 basic 폴더 안에만 있다. - json파일에는 어떤 패키지가 필요한지에 대한 목록만 들어있는 것이다. - 실제로 저 파일들이 설치된 폴더는 node_modules! (해당내용은 깃허브 push시에는 배..

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..