제 14회 한국 자바 개발자 컨퍼런스의 커뮤니티 세션에서 공유한 `overview of spring4` 의 발표 자료
스프링 프레임워크는 2004년에 출시된 이후 지금까지 많은 변화를 겪어왔습니다. 기억에 남아 있는 굴직한 변화를 더듬어 보면 버전 2.0은 XML 네임스페이스와 AspectJ 지원, 버전 2.5부터 애노테이션을 활용한 프로그래밍 기능이 추가되었습니다. 그리고 버전 3.0으로 올라가며 Java 5+ 기반으로 코드 구조가 바뀌고 자바 코드 기반 설정 기능이 추가되었습니다. 2013년 12월 13일에 버전 4.0 발표이 발표되었습니다. 주목할 변화는 바로 Java 8 지원과 제거 대상(@Deprecated)으로 선언되었던 많은 클래스와 메소드들이 삭제되었다는 것입니다. 이 외에도 많은 변화가 있습니다. 이번 시간에는 조금 높은 곳에서 내려다보는 느낌으로 무엇이 추가되었고, 어떤게 바뀌었는지 살펴보려고 합니다.
예제코드 : https://github.com/arawn/overview-of-spring4
The document discusses different types of frameworks for building custom JavaScript applications. It compares libraries like JQuery, YUI and Jindo to more full-featured model-view-whatever (MV*) frameworks like Backbone.js, AngularJS, Ember.js, KnockoutJS, Dojo, CanJS, Polymer and Vue.js. It also discusses React, which uses a virtual DOM for improved performance compared to directly manipulating the real DOM.
This document discusses React and Redux. It begins with an introduction of the presenter Lars Thorup. It then provides an overview of an MVP architecture using React, Redux, and other technologies. It includes diagrams of the React and Redux architectures. It discusses React components, virtual DOM, and using D3 with React. It also covers the motivations and overview of Redux, including examples of state shape and auth reducers. It concludes with a discussion of Redux design patterns and testability and introduces the create-react-app tool.
Breaking the Server-Client Divide with Node.js and ReactDejan Glozic
Rendering Web applications server or client side has been a war for years, with server side proponents citing 'speed to glass' and SEO, and client side boasting speed of transitions after the upfront cost, and desktop-like application feel. For a while it was necessary to pick sides, that is until React. In this talk, I will show a stack we are using in IBM Cloud Data Services that uses Node.js and React to bring the best of both worlds in isomorphic apps. Server or client? Yes!
Nodifying the Enterprise - Prince Soni, TO THE NEWNodejsFoundation
Node has transcended from being the cool tech stack for fledgling start ups to the darling of enterprise CIOs and CTOs.
It is no longer just the rapid development language for moving ideas to production fast. It is now very much the responsible mature technology that large enterprises need to solve their myriad problems of scale, user engagement, faster go-live cycles, security, performance and more and how this is achieved by Node is what we will be talking about in this presentation.
1. The JavaScript landscape and why it is the language of the next decade.
2. Evolution of Node and apps built on it
3. Solving the problems of scale, high uptime, multi channel and secure applications with Node
4. Node toolkit (various frameworks and supporting technologies)
5. Pitfalls to guard against
The document discusses React, Redux, and ES6/7 features. It begins with an overview of React lifecycles and class components. It then provides a brief introduction to Redux, including core concepts like actions, reducers, and unidirectional data flow. The document also includes an example to demonstrate how React and Redux can work together, with Redux managing application state in the store and React components interacting via container components.
The document contains a collection of links to Flickr photos and one quote about learning Spring by teaching others. There are no other words or context provided.
This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include:
- Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components.
- Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component.
- By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.
JSP 프로그래밍 #02 서블릿과 JSP 시작하기
2.1 톰캣 애플리케이션 만들기 (온라인 강의: https://youtu.be/04LIGWKCFjY)
2.2 간단한 서블릿 만들기 (온라인 강의: https://youtu.be/4ajw5EsxYE8)
2.3 간단한 JSP 만들기 (온라인 강의: https://youtu.be/6h-qH8pGdT8)
2.4 간단한 자바빈즈 만들기 (온라인 강의: https://youtu.be/TlgXkAWi1sc)
Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
탑크리에듀교육센터(www.topcredu.co.kr)제공
15번째 스프링프레임워크 & 마이바티스(Spring Framework, MyBatis)자료입니다.
Spring JDBC에서 DB 접근하는 방법, Spring JDBC에서 DB 접근하는 방법 – jdbcTemplate, Maven, Gradle에서 오라클 설정에 대해 설명한 자료이니 많은 참고 바랍니다.
6. 코드를 받아오자(업뎃함)
• GIT이 있건 없건!!
https://github.com/kimxogus/React-web-tutorial 들어갑니다.
Star를 누릅니다. (프리미엄 A/S 서비스)
Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓)
HeXA - 기초부2 ReactJS Tutorial
7. 코드를 받아오자(업뎃함)
• GIT이 있건 없건!!
https://github.com/kimxogus/React-web-tutorial 들어갑니다.
Star를 누릅니다. (프리미엄 A/S 서비스)
Fork를 누릅니다. (다운로드가 빨라집니다. 똑같은 것 같다면 기분탓)
Download ZIP을 클릭하여 zip파일을 다운
압축 풀기!
HeXA - 기초부2 ReactJS Tutorial
8. props & state
props state
상위 요소에게서 상속
(기본값은 자신이 정할 수 있다.)
스스로 가지고 있는 값, 상태
값이 바뀌면 Component가 업데이트 된다.
(자세한건 Lifecycle 참고)
하위요소로 값을 전달할 수 있다.
(props 형태로 전달)
HeXA - 기초부2 ReactJS Tutorial
9. React Component Specification
displayName : Component 이름(JSX를 쓴다면 신경X)
mixins : Addon
statics : Static 값 또는 함수
getDefaultProps : props의 기본값
propTypes : props의 타입 정의
getInitialState : state 기본값 정의
render : 렌더링 함수 (필수!)
HeXA - 기초부2 ReactJS Tutorial
18. React Lifecycle
• Mounting
componentWillMount : 컴포넌트 생성 전
componentDidMount : 컴포넌트 생성 후
• Updating
componentWillReceiveProps : 새로운 props 받기 전
shouldComponentUpdate : 컴포넌트 업데이트 여부
componentWillUpdate : 컴포넌트 업데이트 전
componentDidUpdate : 컴포넌트 업데이트 후
• Unmounting
componentWillUnmount : 컴포넌트 소멸 전
HeXA - 기초부2 ReactJS Tutorial
22. React 컴파일
• Babel: 적용된 preset에 맞게 문법 변환을 해준다.
• Webpack: 문법 변환 뿐 아니라 라이브러리까지 통합된
하나의 js파일로 만들어주며(bundle) 설정을 통한 Uglify(minify),
Common chunk 등의 optimization도 지원
• Browserify: Webpack같은 js 번들 라이브러리
HeXA - 기초부2 ReactJS Tutorial
23. 준비작업
NPM (Node Package Manager) 를 이용해
라이브러리 다운로드 받기
: npm install
babel, webpack 다운받기(Global Toolkit)
: npm install –g babel-cli webpack
HeXA - 기초부2 ReactJS Tutorial
24. Babel 컴파일
babel --presets react js/src/babel --out-dir js/out
: --presets react > React 프리셋 적용
: js/src/babel > js/src/babel에 있는 js파일을 컴파일
: --out-dir js/out > 컴파일된 js파일을 js/out로 보냄
--watch 추가하면 파일이 변경될 때 마다 자동으로 컴파일!
package.json의 scripts에 미리 선언 되어있다.
npm run-script babel 입력하면 실행가능
HeXA - 기초부2 ReactJS Tutorial
26. Webpack 컴파일
webpack.config.js 파일에 설정 후 webpack 커맨드 실행
webpack --progress --colors
: --progress > progress를 터미널에 출력
: --colors > 출력 결과에 색을 입혀 이쁘게 출력
--watch 추가하면 파일 변경시 자동 컴파일
마찬가지로 package.json scripts에 추가되어있음
npm run-script webpack
HeXA - 기초부2 ReactJS Tutorial