반응형 언어공부102 [React]Material-kit-react-main 활용 프로젝트 만들기 src폴더 App.js 파일 다음과 같은 코드로 theme과 style을 받아옴 Theme의 경우 { ThemeProvider } from '@material-ui/core'; 를 import 하여 사용 index.js 파일 App 컴포넌트 import 하여 사용함 해당 파일을 public폴더의 index.html 파일의 div id="root" 에서 사용 더보기 route.js 파일에 경로 정보 작성되어있음 경로에 따라 DashboardLayout과 MainLayout으로 레이아웃 구성이 달라짐 BrowserRouter 사용 => 경로, 라우팅 관련 추후 추가 공부할 것 (같은 경로 내 routes.js, serviceWorker.js 파일 추후 추가 공부할 것) src/theme 폴더 index.js.. 2021. 6. 9. package-lock.json 이란, 필요한 이유 package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일입니다. 이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있습니다. PACKAGE-LOCK.JSON이 필요한 이유 package.json 파일의 의존성 선언에는 version range가 사용됩니다. version range란 특정 버전이 아니라 버전의 범위를 의미합니다. 가장 흔한 예로 npm install express를 실행하게 되면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가됩니다. 저 package.json 파일로 npm install을 실행하면 현재는 4.16.3 버.. 2021. 6. 9. [React 문서] State and Lifecycle, 이벤트 처리 함수에서 클래스로 변환하기 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); 함수에서 클래스로 변환하기 다섯 단계로 상기의 Clock과 같은 함수 컴포넌트를 클래스로 변환할 수 있습니다. React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 pro.. 2021. 6. 3. [JavaScript] setTimeout과 setInterval, var 와 let 과 const의 차이점 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 두 가지가 있습니다. setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다. *setTimeout function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); *setInterval // 2초 간격으로 메시지를 보여줌 let timerId = setInterval(() .. 2021. 6. 2. [React 문서] JSX, 엘리멘트 렌더링, Component와 Props (주요 개념 1~4) 가장 단순한 React 예시 ReactDOM.render( Hello, world!, document.getElementById('root') ); JSX 소개 const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. JSX란? React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는.. 2021. 6. 2. [React 생활코딩] 1. 소개 및 개발환경 리액트의 장점 가독성 재사용성 유지보수 컴포넌트를 중심으로 현대적인 웹애플리케이션 UI를 만들 수 있다. Coding -> Run -> Deploy 의 순서로 배울 것 React 공식문서 홈페이지 활용하기 https://reactjs.org 실습을 위한 개발환경 셋팅 1. Nodejs 설치파일 다운로드 후 실행 https://nodejs.org/ko/ 2. npm 이용하여 Create React App 설치 cmd창에서 npm -v 입력 후 버전확인 npm install -g create-react-app 입력하여 설치 후 create-react-app -v 입력하여 버전확인 3. react-app 디렉토리 설정 및 실행 react-app 디렉토리 생성 cd C:\react-app 입력하여 해당 디렉토리.. 2021. 6. 2. Entity, DTO와 VO의 차이 예전에 했던 자바 콘솔 프로그램을 복습하면서 포트폴리오를 만들고있다. 스프링에서는 VO라고 쓰는 클래스를 자바에서 콘솔만으로 프로그램을 만들때는 DTO라고 썼었다. 당시 강사님께 뭐가 다른건지 질문을 했었지만 명확한 답변은 듣지 못했거나 기억이 나지 않고, 비슷하게 사용한다고만 이해하고 넘어갔었다. 갑자기 궁금해서 Entity는 무엇인지, DTO와 VO의 차이점에 대해 검색해보았다. Entity Entity 클래스는 DB의 테이블내에 존재하는 컬럼만을 속성(필드)으로 가지는 클래스를 말합니다. 엔티티 클래스는 상속을 받거나 구현체여서는 안되며, 테이블내에 존재하지 않는 컬럼을 가져서도 안됩니다. RDB(Relational DataBase, 관계형 데이터베이스)에서의 Entity(개체)란, 현실세계에서의 .. 2021. 3. 9. AWS EC2 ubuntu카카오맵, 지메일 GMAIL SMTP 발송 문제 해결 localhost에서 잘돌아가던 스프링 프로젝트의 카카오맵과 지메일이 우분투 ec2에서 돌리니 안되는 문제가 있었다. 1. 카카오맵 오류 해결 1) 도메인 확인하기 : 이걸 너무 오래전에 해놔가지고...ㅋㅋㅋ 도메인을 등록해야 하는 것을 까먹었다... 이것저것 뒤지다가 설마? 하고 카카오맵 개발자사이트에 들어가서 확인해보니 localhost만 등록이 되어있었다...ㅋㅋㅋ 새로운 도메인을 등록하니 잘 되었다. (애꿏은 포트만 쥐잡듯이 잡았네... 포트둥절) 2) 스크립트의 위치 확인 그렇게 잘 하다가 css쪽 인식이 안되는게 많길래 스크립트 부분 위치를 모두 바로 위쪽으로 일괄조정하였다. 그 뒤로 갑자기 또 카카오맵이 안되기 시작. 아래와 같은 카카오 스크립트만 head로 옮겼더니 잘 동작했다. 3) 앱 .. 2021. 2. 26. AWS EC2 도메인 https로 연결하기 (SSL/TLS 인증서, 로드 밸런서, 443 포트) 폰트 적용 안될때 갑자기 http https로 설정하는거에 꽂혀서 꼬박 하루가 걸렸다... 우선 AWS의 AWS Certificate Manager에서 인증서를 받아 나의 도메인과 연결된 ROUTE53에 등록하고 EC2의 로드밸런서에 내 인증서를 등록하고 80포트, 443포트를 연결했다. 그 후 80포트(http)로 들어오는 요청을 https로 리다이렉트 했다. 이제 http://mydomain.com 으로 들어오는 요청은 https://mydomain.com 으로 자동으로 연결된다. 하지만 왜인지 http://www.mydomain.com 으로 들어오는 요청은 https로 넘어가지 않는다. 그리고 https에서는 내가 적용해놓은 예쁜폰트들이 다 기본폰트로 보인다ㅠㅠ 내가 프로젝트 내에서 폰트를 import 할때 http.. 2021. 2. 25. tomcat localhost:80 포트를 8080 또는 9090 포트로 연결하기 (apt-get 에러) AWS EC2 우분투로 스프링 웹사이트를 배포하는 중이다. 나의 경우 localhost:9090 으로 톰캣서버를 연결해 놓았는데 도메인을 구매하여 설정하고나니 domain.com:9090 으로 접속해야만 연결이 된다. 그래서 80포트로 들어오면 바로 9090포트로 연결할 수 있도록 아래와 같이 조치하였다. sudo iptables -t nat -I PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 9090 sudo iptables -t nat -I OUTPUT -p tcp --dport 80 -j REDIRECT --to-ports 9090 sudo iptables -A INPUT -i eth0 -p tcp --dport 9090 -j ACCEPT 이렇게 하면 .. 2021. 2. 24. 이전 1 2 3 4 5 6 ··· 11 다음 반응형
