전체 글

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 위와같은 react 자습서를 기반으로 작성하였습니다. 1. 함수 호출 function formatName(user){ return user.firstName +' ' + user.lastName; } const user = { firstName:'Harry', lastName:'Potter' } const element = ( Hello, {formatName(user)}; } formatName에서 user을 받아와, user.firstName 과 l..

여러가지 글을 찾아보면서, 다양한 방법이 있다는걸 알았다. 1) tomcat 설치 1. homebrew install tomcat https://wonkang.tistory.com/111 [Mac] 톰캣(Tomcat) 설치 및 실행 작업 환경 M1 Mac homebrew terminal 톰캣(Tomcat) 설치 요약 // homebrew 최신화 % brew update // 설치 가능 버전 검색 % brew search tomcat // 설치 % brew install tomcat(원하는 버전) homebrew 최신화 업데이트 % brew update 설 wonkang.tistory.com 2. tomcat .tar 파일을 다운로드 받은 후, sudo (관리자 권한)으로 파일 이동 및 권한 설정 3. t..

1. 소프트웨어 생명 주기(SDLC. Software Development Life Cycle) (1) 폭포수 모형 (Waterfall Model) - 가장 오래되고 가장 폭넓게 사용된 고전적 생명 주기 모형 - 한 단계가 끝나야만 다음 단계로 넘어가는 선형 순처적 모형 - 단계별 정의 및 산출물이 명확 - 개발 중간에 요구사항의 변경이 용이하지 않음 - 타당성 검토 -> 계획 -> 요구 분석 -> 설계 -> 구현(코딩) -> 테스트(검사) -> 유지보수 (2 ) 프로토타입 모형 (Prototype Model, 원형 모델) - 견본(시제)품을 만들어 최종 결과물을 예측하는 모형 - 인터페이스 중점을 두어 개발 - 개발 중간에 요구사항의 변경이 용이 (3) 나선형 모형 (Spiral Model, 점진적 모..

1. Component : 작은 컴포넌트들이 모여 큰 컴포넌트를 만들고, 큰 컴포넌트들이 페이지들을 만든다. React component : function으로 생각하면 된다. (Props) 속성들을 입력 받아, 그에 맞는 react element를 만든다. 2. Props (Property: 속성) : React component의 속성을 의미한다. 붕어빵틀에서 들어가는 재료 -> 컴포넌트에 전달할 다양한 정보를 담고 있는 js 객체 네개의 틀이 비슷하고, 형태가 비슷하지만 각각 다른 이미지와 텍스트를 사용한걸 보면, 각각의 props를 사용한 걸로 알 수 있다. 3. Property 특징 및 적용 특징: Read only -> 값을 변경 할 수 없다 //Pure Code function sum(a,b..

1. React의 Elements의 정의 -> Elements are the smallest building blocks of Reack apps. (리액트 앱을 구성하는 가장 작은 블록들) 리액트의 element는 dom element의 가상 형태를 의미한다 -> react elements는 javascript 객체 형태로 존재한다. //html component로 들어가있는 code { type: 'button', props:{ className: 'bg-green', children:{ type: 'b', props:{ children: 'Hello, element!' } } } } html 태그 이름이 문자열로 들어가는 경우, element는 해당 태그 이름을 가진 DOM노드를 나타내고, prop..

사용자 interface를 위한, React : javascript library - library : 제어권한이 개발자들한테 있다. JSX: A Syntex Exentansion of JavaScript const element = Hello, world js + html 코드가 합쳐져있는 jsx 코드이다. -> XML & HTML 코드를 javascript 로 바꾸는 과정에서 JSX를 사용한다. //JSX 사용한 코드 const element = { kakao Cloud School } //JSX 사용하지 않은 코드 const elemnet = React.createElement( 'h1', { className : 'kakao'}, 'kakao Cloud School' ) react element ..

2024.01.29 - [WEB COMPUTING/JSP] - [JSP.01] JSP 기본 WEB Programming(1) [JSP.01] JSP 기본 WEB Programming(1) 01. JSP 구성 기본 코드 () 입니다. 02. JSP 기본 구성 요소 - 디렉티브 Directive - Script(스크립트트릿Scriptlet, 표현식Expression,선언부Declaration) - 표현 언어 - 기본 객체 - 정적인 data - 표준 액션 태그 (Action mink02-study-recording.tistory.com 05. Request 기본 객체 - Client 와 관련된 정보 읽기 기능 - 서버와 관련된 정보 읽기 기능 - 클라이언트가 전송한 요청 파라미터 읽기 기능 - 클라이언트가 ..

01. JSP 구성 기본 코드 () 입니다. 02. JSP 기본 구성 요소 - 디렉티브 Directive - Script(스크립트트릿Scriptlet, 표현식Expression,선언부Declaration) - 표현 언어 - 기본 객체 - 정적인 data - 표준 액션 태그 (Action tag) - 커스텀 태그 (Custom tag) / 표준 태그 라이브러리 (JSTL) 으로 구성 되어 있다. (1) 디렉티브 -> JSP 페이지에 대한 설정 정보를 지정할 떄 사용. - 으로 선언 맺음 - Directive_name 이 page 이름이 된다. 01 기본 코드 에서 는 page 라는 페이지 이름을 가지고, content 속성은 text / html; charset = utf -8 이 된다. page: 정보 ..

1. 객체의 정의 JS에는 8가지 자료형이 있다. 이중에 7가지는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형(primitive type)이라 부른다. 다른 1가지는 다양한 데이터를 담을 수 있다. 이를 객체형이라 부른다. 객체형? 키로 구분된 데이터 집합/ 복잡한 개체 (entity)를 저장할 수 있다. 중괄호를 이용해 만들 수 있고, 중괄호 안에 key: value 쌍으로 구성된 property를 여러개 넣을 수 있다. {key(문자형): value(모든 자료형),....,key:value} 2. 객체의 선언 let user = new Object(); // java에서 사용하던 객체 생성자 문법 let user = {}; // 객체 리터럴 문법 {중괄호}를 이용해 객체 선언 -> ..

1. 스크립트 후 language 속성 type 속성 외부 스크립트 - 외부 자바스크립트 파일을 가져올 수 있건, 외부 URL을 속성으로 가져올 수 있다. ! 복수의 스크립트를 삽입 할 수 있다 2. 변수 let const - java와 동일하게 한번 값 할당 시, 바꿀 수 없는 상수를 정의 var 등을 이용하여 선언할 수 있다. 3. browser과의 상호작용을 위한 함수 (1) alert() : 확인(OK)를 누를 때까지 메시지를 보여주는 창을 출력한다. (2) prompt(): 브라우저에서 제공하는 prompt 함수는 두개의 인수를 받는다. -> 함수 실행시 텍스트 메세지와 입력필드, 확인 및 취소 버튼이 있는 모달 창을 출력 let age = prompt('나이를 입력해주세요.',[default]..