본문 바로가기

분류 전체보기407

백엔드1-2. JSP-1: JSP기초와 예제(이클립스에서 웹 프로젝트 생성) 프로젝트 생성 NEW > Dynamic Web Project > Project name: webJSP > Finish -> webJSP 프로젝트 생성! > webapp에 index.jsp 생성! 웹 애플리케이션의 기본 디렉터리 구조 C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\webJSP 경로 안에 WEB-INF 폴더가 있음 webapps 웹 애플리케이션의 루트 디렉터리, 다른 웹 애플리케이션 이름과 중복을 허용하지 않고, 여기에는 JSP HTML 파일이 저장된다. WEB-INF 웹 애플리케이션에 관한 정보가 저장되는 곳으로 이 디렉터리는 외부에서 접근할 수 없다. classes 웹 애플리케이션이 수행하는 서블릿과 다른 일반 클래스들이 .. 2022. 3. 3.
백엔드1-1. WAS(Web Application Server)과 Web Server 정적 웹 페이지(Static Web Page) 와 동적 웹 페이지(Dynamic Web Page) 정적 웹 페이지 동적 웹 페이지 언제 접속해도 같은 응답을 보내주는 페이지 브라우저에게 요청을 받은 후 서버가 추가적인 처리 과정을 거친 후 클라이언트에게 응답을 보낸다. 서버에 저장된 HTML, CSS, JS등의 파일이 변경되지 않으면 매번 같은 웹페이지를 볼 수 있다. 매번 같은 페이지를 보여주지 않을 수 있다. (날씨나, 게시판, 쇼핑몰등) HTML로는 동적인 구현이 불가능해서 JSP, PHP, ASP 이렇게 Java등의 프로그래밍 언어로 동적인 데이터를 정립한 뒤 -> HTML문서로 재조립해서 -> 웹 브라우저에게 리턴 Web Server(웹 서버) 웹 브라우저에서 요청받은 html, css, js .. 2022. 3. 2.
프론트엔드7-8.[React] hook *Hook은 React 버전 16.8부터 React의 요소로 추가되었다.* Hook: 기존 Class 없이 React의 기능을 사용할 수 있게 해준다. hook은 데이터를 유동적으로 바꿀 수 있다. userState 함수는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. hook은 React의 useState 훅을 사용하면 함수의 데이터 상태를 추적할 수 있다. Hook을 사용하기 위해서는 밑의 구문을 import 해줘야 한다. import React, {useState} from 'react'; 1. hook을 사용(버튼을 누르면 색과 성별이 변경된다. ) import React, {useState} from 'react'; function App() { // hook을 셋팅 co.. 2022. 2. 22.
프론트엔드7-7.[React] 함수 예제, props, 이벤트 처리 렌더링(Rendering) html 요소(element), 또는 React 요소 등의 코드가 눈에 볼 수 있도록 그려지는 것 1. JSON 으로 스타일 적용하기 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style1 = { background : 'pink', padding : '20px', color : '#fff', marginTop : '10px', textAlign : 'center' }; return( Json 스타일 적용하기 ); } export default App; 2. 함수예제 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style = { marginLeft : '10px' }; return( {1+1.. 2022. 2. 22.
프론트엔드7-6.[React] JSX를 이용하는 방법과 이용하지 않는 방법 JSX: react에서 HTML을 쉽게 작성할 수 있도록 하는 방법 2가지 1. JSX를 이용하는 태그 사용법 function App() { // JSX를 이용하는 태그 사용방법 const element1 = HTML은 문자열로 처리해야 한다.; // 변수안에 여러 값을 생성해서 넣을 수 있다. const element2 = ( 사과 딸기 ); // 내용을 감쌀 때 빈태그도 가능하다. const element3 = ( 해바라기 코스모스 ); return ( {element1} {element2} {element3} ); } export default App; 2. JSX를 사용하지 않는 태그 사용법 1. React 라이브러리에서 import하기 React의 라이브러리에서 React클래스를 가져다 쓴다는 .. 2022. 2. 21.
프론트엔드 7-5. [React] port 번호 변경하기 react 프로젝트를 실행할 때, 기본적으로 3000번 포트번호로 실행된다. 만약 다른 포트 번호로 변경하고 싶다면? -> React 프로젝트 폴더에 "package.json" 파일에 있는 script를 수정한다. -> React 앱을 실행시킨다. ex) npm start나 npm run start "start" : "react-scripts start", -> "start" : "set port=원하는 폰트번호 && react-scripts start", 로 변경한다. 2022. 2. 19.

티스토리툴바