본문 바로가기

Programming206

[Spring] Spring의 이해 Spring Framework (스프링 프레임워크) 란 ? 프레임워크(Framework)  프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹은 작업 구조라는 뜻과 같이 프레임워크는 어떠한 일을 처리하기 위한 구조를 제공합니다.프레임워크 위에서 개발을 하면 우리는 일을 하기위한 전체 구조와 동작방식을 만들지 않습니다. 프레임워크로 개발 할 경우 전체 동작방식은 프레임워크가 제공하고 우리는 프레임워크의 일정 부분만 개발한다.스프링 프레임워크의 주요 기능은 ▷ DI, AOP, MVC, JDBC 등을 제공한다. Spring Framework의 특징POJO(Plain Old Java Object) 기반의 프레임워크● 자바 오프젝트 기반 프레임 워.. 2024. 5. 15.
[REACT] Firebase에 배포하기 [REACT] ContextAPI[REACT] Ajax로 외부 데이터 통신하기Ajax 란? AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다,웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가hong-study.tistory.com배포의 단계개발(develop) - 테스트(test) - 빌드(build) - 배포(deploy)웹앱을 무료로 배포하는 방법은 아래와 같이 다양하다.깃허브 페이지구글 firebaseAWS S3카페 24기타 등등리액트 빌드하기1. 프로젝트 최상위 루트에서 실행한다.npm run build2. 위와 같이 실행하면 build 폴더가 생성3. build 폴더 내부에는 개단 단계에서 복잡한 코드를 경량화.. 2024. 5. 15.
[REACT] ContextAPI [REACT] Ajax로 외부 데이터 통신하기Ajax 란? AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다,웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 된hong-study.tistory.com데이터 전역 관리 Context API or ReduxAPI 문서https://ko.reactjs.org/docs/context.htmlReact를 하다보면 여러 컴포넌트를 거쳐 자료를 전달하거나, 동시에 같은 자료를 사용해야 하는 경우가 생긴다.● Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능이다.● 주로 Context는 전역적으로 필요한 값을 다룰 때 사.. 2024. 5. 14.
[REACT] Ajax로 외부 데이터 통신하기 Ajax 란? AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술이다,웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 된다.이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 된다,비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 된다.react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있다.ES6의 fetch를 이용한 리액트 데이터 처리Promise = fetch(요청주소)1. 이벤트 클릭시 처리하기 데이터를 가져와서 useState()에 저장하는 작업이다.극단적으로 표현해.. 2024. 5. 14.
[REACT] React 라우터 [REACT] React에 CSS 적용하기[REACT] 훅. Hook[REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다hong-study.tistory.comSPA ( Single Page Application ) 이란?하나의 페이지로 만들어진 애플리케이션을 의미한다.전통적인 웹 애플리케이션 vs SPASPA는 html 파일을 브라우저 측에서 로드, 필요한 데이터는 API와 Ajax 통신을 이용해 처리한다.브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리멀티플랫폼 An.. 2024. 5. 14.
[REACT] React에 CSS 적용하기 [REACT] 훅. Hook[REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크hong-study.tistory.comReact 스타일링태그에 직접 지정하기일반 css 파일로 적용하기css 모듈로 적용하기public 폴더에 css 디자인css 파일 이름 규칙컴포넌트의 이름을 반드시 포함해서 만든다.예를 들면App.js 일 경우의 css 는 App.css 로 만든다.1. 태그에 직접 지정하기태그에 직접 디자인을 적용할 때는 { }로 묶어준다.CSS 속성 중 - 은 카멜표기법으.. 2024. 5. 14.
[REACT] 훅. Hook [REACT] 컴포넌트 반복[REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직hong-study.tistory.com훅(Hook) 이란?리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다.리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부릅니다. (useState, userEffect 등)리액트 훅은 함수형 컴포넌.. 2024. 5. 14.
[REACT] 컴포넌트 반복 [REACT] React Event[REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하hong-study.tistory.com 컴포넌트 반복목록 요소들을 반복처리 할 때는 MAP함수를 이용한다.반복 컴포넌트에는 반드시 Key Props를 전달해야 한다.※ map -  실행한 결과를 가지고 새로운 배열을 만들 때 사용array.map(callbackFunction(currentValue, index, array), thisArg)currenValue : 현재 값index : 현재 인덱스array : .. 2024. 5. 14.
[REACT] React Event [REACT] STATE[REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브hong-study.tistory.comReact Event이벤트 규칙이벤트의 이름은 전부 카멜 표기법으로 표현된다. onkeyup → onKeyUp이벤트를 전달할 때는 { 함수 } 형태로 사용한다.Input 값 핸드링 하기Input의 값이 변화되는 이벤트 onChange 연결이벤트 내부 첫 번째 매개변수에서 event 객체 활용하기e.target.속성값setter를 이용해 state 변경value 속성을 이용해 state 동기화 처리va.. 2024. 5. 14.
[REACT] STATE [REACT] 컴포넌트(Components)와 Props[REACT] 코드 살펴보기[REACT] REACT 란REACT리액트는 자바스크립트 라이브러리이다. 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리이다.SPA란Single Page Applicationhong-study.tistory.comSTATE 란1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.2. state 가 체인지가 되면 변화를 감지하여 리렌더링을 수행한다.3. 클래스와 함수형 컴포넌트의 사용 방법은 각 각 다르다.4. 함수형 컴포넌트에서는 훅(Hook) 개념을 이용해서 더욱 쉽게 사용 가능하다.useStateuseState는 배열 반환 함수이다.첫 번째 배열의 요.. 2024. 5. 14.
반응형

티스토리툴바