For Programmer

스프링은 전자정부 표준 프레임워크를 스프링 프레임워크와 스프링MVC를 이용해서 공공 프로젝트에서 표준으로 사용하고 있고 일반적으로 스프링 프레임워크를 이용한다는 의미는 스프링MVC 프로젝트인 경우가 대부분입니다. 따라서 스프링MVC 프로젝트를 이용하여 스프링 프로젝트를 만들어 보도록 하겠습니다.(책: 코드로 배우는 웹프로젝트 개정판 을 기준으로 게시글을 작성할 예정입니다.) 전체적인 구성은 다음과 같습니다. Part1 : 스프링 개발 환경 구축 Part2 : 스프링 MVC 설정 Part3 : 기본적인 웹 게시물 관리 Part4 : Rest방식과 Ajax를 이용하는 댓글 처리 Part5: AOP와 트랜잭션 Part6:파일 업로드 처리 Part7:Spring Web Security를 이용한 로그인처리 Par..

1.리덕스란? 2. 리덕스 설치 (4가지 다운로드) 2-1. 다운로드해야할 모듈 *리덕스 스토어는 객체형식으로밖에 데이터를 받지 못한다. 하지만 Promise,Function 형태로 데이터를 전달할 수 도있는데 이를 위해서 redux-thunk(함수를 받는방법제공),redux-promise(promise를 받는방법제공) 을 다운받는것이다. 2-2.리덕스를 편하게 사용하기위한 데브툴 추가(크롬 확장프로그램) 2-3.데브툴을 추가하는코드 및 리덕스 세팅코드 src-index.js src-_reducers-index.js *redux에 대한 더 자세한 정보는 다음 블로그를 참고해 주시기 바랍니다. https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8..

1. antd 모듈 다운로드(https://ant.design/) 2.antd import후 사용하기 * antd 홈페이지 - Components 접속하면 다양한 css들을 제공하고 있다. *예를들어 위와 같이 primary Button버튼을 사용하기 위해서 무엇을 import해야하며 어떠한 코드를 사용해야하는지 자세하게 나와있으며 코드 위쪽 밑줄친 곳을 보면 codesandbox 등 실제로 다양한 코드를제공하는 사이트와 연결되어 바로 코드와 css 확인도 가능하다. 동영상강의

1.서버에서 concurrently 모듈 다운로드하기 2.package.json에서 스크립트 등록 * 서버에서 npm run dev로 실행 동영상강의

1. 서버와 클라이언트간의 데이터통신할때 쓰는 모듈중 하나인 Axios 모듈 다운받기 * Jquery에서는 Ajax통신을 많이 사용한다. 2. 서버와 클라이언트의 포트번호가 다를경우 Cors정책에 위배되기 때문에 Request를 보낼 수없다. 3.다음을 해결하기 위해 Proxy 사용(https://create-react-app.dev/docs/proxying-api-requests-in-development/) const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhos..

1. 리액트 라우터 모듈 다운로드하기 2. 웹사이트에서 제공하는 코드 사용하기(https://reacttraining.com/react-router/web/example/basic) 3. 우리앱에 맞게 수정하기 동영상 강의

* 리액트앱을 설치하게 될 경우 초기 기본적인 폴더 구조 *public - index.html 파일 내부를 보면 body 태그안에 라고 되어 있다. src - index.js내부에 가보면 초기 생성시 리액트는 이 엘리먼트를 사용하고 있으며 이러한 엘리먼트를 root돔이라고 한다. * 해당 boiler-plate 에서 사용하게 될 폴더 구조 *hoc폴더에 대한 설명 * 즉, 간단히 말해서 해당 페이지가 로그인한 사람만들어갈 수있는지, 로그인안해도 들어갈 수있는지 , 로그인하게되면 못들어가는지(로그인페이지,회원가입페이지) 등등을 판별 해주는 역할이다. 백엔드에서 Auth라는 미들웨어를 만들었었는데 이를 활용하여 axios통신으로 서버와 통신하여 로그인여부를 판별 할 것이다. 동영상강의

*리액트란? * 간단히 말하면 Facebook에서 개발한 자바스크립트기반의 새로운 프론트엔드 라이브러리 이며 실제DOM과 가상DOM을 가지고 있는데 JSX문법을 이용하여 화면에 보여줄 view 부분을 코딩한다. 이러한 view 부분을 실제DOM에 담아놓는데 만약 변경사항이 있을 경우 가상DOM에 변경사항을 담아 실제DOM과 비교 후 다른부분만 실제DOM에 적용시켜주는 방식이다. 1.리액트 설치하기(npm vs npx) * npm: node package manager -> npm을 사용하게되면 locally 로 다운을 받게된다.(해당 프로젝트 폴더내 node_module에저장) 만약 npm install -g create-react-app 으로 실제 컴퓨터내부에있는 폴더 global 디렉토리에 다운을 받..