SPA(Single Page Application)
2021. 3. 2. 20:40
프로그래밍/React
SPA란? 단일 페이지 애플리케이션 기존의 전통적인 새로고침 방식의 웹과는 달리 필요한 정적파일을 한번에(나눠서도 가능) 모두 다운로드 받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 동적(비동기)으로 받게하여 트래픽의 총량을 줄이고, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있는 어플리케이션 형태 첫 페이지 요청시 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 이후로는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있음 👉 만약 데이터가 전혀 필요 없다고 한다면 서버와 통신할 일 없음 SPA 방식은 Angular, React,..
[Spring Boot 실행 오류]The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured.
2021. 3. 1. 20:31
프로그래밍/Spring Boot
The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured 에러가 뜬 경우 cmd창을 켜서 포트 번호에 해당하는 프로세스를 중단시키고 재실행 해야 함 👉 netstat -ano | findstr 8080 8080에서 사용중인 프로세스 번호를 확인 👉 taskkill /f /pid (맨 오른쪽에 뜨는 번호 입력) taskkill 을 이용하여 프로세스를 중단함
컴포넌트란
2021. 2. 26. 23:06
프로그래밍/프로그래밍 용어 정리
컴포넌트 개념의 유래 많은 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어짐 이 제품들은 회사 상관없이 서로 조합하여 하나의 제품이 만들어짐 이러한 제품들의 부품은 문제가 발생했을 시, 해당 부품만 다른 부품으로 바꾸어도 제품은 문제없이 작동함 컴퓨터와 스마트폰과 같은 제품들을 상상해보면 금방 이해가 갈 것임 반면 소프트웨는 상황이 다름 소프트웨어를 독립적으로 개발하지 않을뿐더러, 독립적으로 개발되어도 다른 모듈과의 호환을 생각하지 않고 개발함 이는 결국 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 됨 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술임 컴포넌트는 독립적인 단위모듈 하드웨어처럼 독립적인 기능을 수행하고 추후에 교환될..
Postman이란?
2021. 2. 25. 21:49
프로그래밍/관련 정보
❓ 사용 이유 API 기능 검증을 위해 사용 API 호출 Test하는 tool ❓ 사용 방법 1️⃣ Postman 설치 2️⃣ Capture requests and cookies 패널 클릭 3️⃣ Source 정보에서 Interceptor 선택 4️⃣ Capture Requests 정보에서 On 선택하여 Request Intercepting 기능 활성화 & interceptor bridge install 5️⃣ chrome 확장 프로그램 Postman Interceptor 추가 6️⃣ chrome 에서 interceptor 클릭하여 Request Capture정보를 on으로 변경하여 캡쳐를 활성화 7️⃣ 브라우저에서 크롤링을 원하는 페이지 불러옴 8️⃣ Postman History 탭에 캡쳐한 페이지 주..
state 활용하기
2021. 2. 23. 20:25
프로그래밍/React
state활용해 5초 후에 내용 바꾸기 예제 Loading → Finish(5초 후) import React from 'react'; class App extends React.Component{ state = { isLoading: true }; componentDidMount() { setTimeout(() => { this.setState({ isLoading: false }); }, 5000); }; render() { const { isLoading } = this.state; return {this.state.isLoading ? "Loading" : "Finish"}; }; } export default App;
Component Life Cycle
2021. 2. 22. 20:55
프로그래밍/React
Component Life Cycle // 맨 처음에 실행 constructor(props) { super(props); console.log("hello"); }; // 랜더링시 실행 render(){ console.log("I'm rendering"); return ( The number is: {this.state.count} Add Minus ); } // 랜더링 완료 후 실행 componentDidMount() { console.log("component rendered"); }; // 변경 후 랜더링 이후 실행 componentDidUpdate() { console.log("I just updated"); }; // 페이지 이동이나 연결 종료시 실행 componentWillUnmount() {..
component 예제
2021. 2. 19. 20:08
프로그래밍/React
component 사용하기1 import React from 'react'; function Food({ name, picture, rating }) { return ( I like {name} {rating}/5.0 ); }; const foodILike = [ { id: 1, name: "pasta", image: "https://assets.bonappetit.com/photos/5de7e495b79e20000879d72a/1:1/w_2560%2Cc_limit/Amiel-Lobster-Pasta-Lede-1.jpg", rating: 5 }, { id: 2, name: "chicken", image: "https://crcf.cookatmarket.com/product/images/2019/10/lo..
create-react-app 설치
2021. 2. 17. 21:24
프로그래밍/React
create-react-app 설치 리액트 사용을 위해 webpack, babel등 설치 했던 것을 하나의 명령을 실행하여 React Web App을 Set up함 원하는 위치에서 create-react-app 설치하기 npx create-react-app movie_app(원하는 폴더명) 설치 완료🎉 👉 터미널에 npm start 명령어를 통해 실행 확인 npm 오류 🚫 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. node.js, npm, npx 모두 설치 되어있는데 위의 오류 뜨는 경우 VSCode 다시 실행시켜보기!