본문 바로가기

분류 전체보기374

[Spring] 개발 환경 구축 [Spring] DI ( Dependency Injection )[Spring] Maven Project 생성[Spring] Spring의 이해Spring Framework (스프링 프레임워크) 란 ? 프레임워크(Framework)  프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹hong-study.tistory.com1. 이클립스 STS 설치 Spring | Tools spring.io스프링 공홈에서 다운로드 받으면 된다.단, STS가 스프링 부트로 변경되었기 때문에 이전 STS3를 선택해서 다운로드 받으면 된다.1. 재시작 후에 Perspective 항목에 Spring이 추가된 것을 확인2. Open 을 킬릭한다.설치 완료 화면분리.. 2024. 5. 15.
[Spring] DI ( Dependency Injection ) [Spring] Maven Project 생성[Spring] Spring의 이해Spring Framework (스프링 프레임워크) 란 ? 프레임워크(Framework)  프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹은 작업 구조라는 뜻과hong-study.tistory.comSpring  IoC / DIJava의 Class 상속 / Interface 를 이용한 추상화를 기반으로 하는 개발 방법Spring은 아래 IOC / DI를 강력하게 지원하는 프레임 워크이다.IoC : Inversion of Control프로그램을 제어하는 패턴 중 하나DI는 IoC 패턴의 구현 방법 중 하나DI에 따라 프로그램의 흐름이 완전히 변경된다.DI : .. 2024. 5. 15.
[Spring] Maven Project 생성 [Spring] Spring의 이해Spring Framework (스프링 프레임워크) 란 ? 프레임워크(Framework)  프레임워크(Framework) 라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어입니다. 일 구조, 혹은 작업 구조라는 뜻과 같이 프레임워크hong-study.tistory.comMaven 프로젝트 생성Maven필요한 라이브러리를 특정 문서(pom.xml)에 정의하면 네트워크를 통해 라이브러리들을 자동으로 다운받는다.pom.xml에는 다음과 같이 기술외부에 존재하는 Spring 라이브러리를 메이븐으로 다운로드 하는 코드pom.xml 작성폴더와 pom.xml 파일에 대한 이해JAVA 폴더 ( lec03Pjt001/src/main/java )의 경우 특별한 것은 없고, .. 2024. 5. 15.
[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.
반응형

티스토리툴바