Study-Note

2. JSX JSX : 자바스크립트 내애서 HTML코드를 자유롭게 작성할 수 있다 var a = ( Welcome to React CodeLab ); "use strict"; var a = React.createElement( "div", null, "Welcome to ", React.createElement( "b", null, "React.js CodeLab" ) ); - XML-like syntax 를 native JavaScript 로 변경해준다. - " " 로 감싸지 않는다. - ( ) 를 사용하지 않아도 오류는 발생 하지 않지만 가독성을 위하여 사용하기 - 모든 JSX는 컨테이너 앨리먼트 안에 포함시켜야 한다. /* 에러 발생 코드 */ render() { return ( Hi I am Er..

1. React.js 기초 참고: React & Express 를 이용한 웹 어플리케이션 개발하기 Redux(리덕스): 클라이언트 앱의 복잡성을 제어하기 위한 하나의 state제어 수단이다. Webpack: 자바스크립트 모듈과 관련 리소스들을 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러 Express.js: 노드 상에서 동작하는 웹 개발 프레임워크 MongoDB: NoSql Database Mongoose: Node.js에서 MongoDB를 사용하기 쉽도록 하는 것 * react.js 프레임워크가 아닌 라이브러리! 프레임워크와 라이브러리의 차이 프레임워크 - 틀. 필요한 기능이 이미 만들어져 있는 것. 때문에 이 틀에서 벗어나기 어렵다. - 단 한가지 프레임워크만 사용 가능하다. 다른 ..

1. 터미널을 실행시킨 후 불러올 sql 파일이 있는 위치로 이동한다.2. 아래와 같이 명령어 실행/usr/local/mysql/bin/mysql -u connectuser -p connectdb < examples.sql(/usr/local/mysql/bin/mysql -u 유저명 -p DB명 < 파일명.sql) connectdb에 examples.sql 파일을 불러올 수 있다.

css 파일을 만들고 로 css 파일을 적용시켰으나, 이후 main.css 변경 내용이 적용 되지 않았다. 이와 같은 CSS, JS 문제는 브라우저의 캐시와 관련되어 발생하는 문제이다.여러가지 해결 방법을 찾아보았는데, 1. 윈도우: ctrl + f5맥: shift + command + r서버에서 파일을 다시 새로 불러와서 모두 적용된다. 2.크롬에서 개발자 콘솔을 연 다음 새로고침 버튼 길게 눌러 강제 새로고침을 실행한다. 3.서버를 재시작하고 시크릿창으로 진행한다. 4.href="...../style.css?ver=1"처럼 뒤에 ver=1을 추가한다. 네 번째 방법은 파일을 수정할 때 마다 버전을 올려야 변경 사항이 적용 되어 자주 파일을 수정하는 단계에서는 매우 번거롭고 불편했다. 따라서 첫 번째 ..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * @SessionAttributes / @ModelAttribute@SessionAttributes 파라미터로 지정된 이름과 같은 이름이 @ModelAttribute에 지정되어 있을 경우 메소드가 반환되는 값은 세션에 저장된다. - 세션에 값을 초기화하기@SessionAttributes("user") public class LoginController { @ModelAttribute("user") public User setUpUserForm() { return new User(); } } @SessionAttributes의 파라미터와 같은 이름이 @ModelAttribute에 있을 ..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web /guess로 요청을 하면 컴퓨터가 1부터 100 사이의 임의의 값 중의 하나를 맞추는 메시지 출력 (해당 값은 세션에 저장)사용자는 1부터 100 사이의 값을 입력 입력한 값이 세션 값보다 작으면, 입력한 값이 작다고 출력입력한 값이 세션 값보다 크면, 입력한 값이 크다고 출력입력한 값이 세션 값과 같다면 몇 번째에 맞췄다고 출력 GuessNumberController1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253package kr.or.connect.gues..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * 세션클라이언트 별로 서버에 저장되는 정보 웹 클라이언트가 서버측에 요청을 보내게 되면 서버는 클라이언트를 식별하는 session id를 생성한다.서버는 session id를 이용해서 key와 value를 이용한 저장소인 HttpSession을 생성한다.서버는 session id를 저장하고 있는 쿠키를 생성하여 클라이언트에 전송한다.클라이언트는 서버측에 요청을 보낼때 session id를 가지고 있는 쿠키를 전송한다.서버는 쿠키에 있는 session id를 이용해서 그 전 요청에서 생성한 HttpSession을 찾고 사용한다. - 세션 생성 및 얻기HttpSession session ..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394package kr.or.connect.guestbook.controller; import java.util.ArrayList;import java.util.List; import javax.servlet.http.Cookie;import javax.servlet.http..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * 쿠키클라이언트 단에 저장되는 작은 정보의 단위클라이언트에서 생성하고 저장될 수 있고, 서버 단에서 전송한 쿠키가 클라이언트에 저장될 수 있다. 서버에서 클라이언트의 브라우저로 전송되어 사용자의 컴퓨터에 저장한다.저장된 쿠키는 다시 해당하는 웹 페이지에 접속할 때, 브라우저에서 서버로 쿠키를 전송한다.쿠키는 이름(name)과 값(value) 쌍으로 정보를 저장한다. - 이름-값 쌍 외에도 도메인(Domain), 경로(Path), 유효기간(Max-Age, Expires), 보안(Secure), HttpOnly 속성을 저장할 수 있다. - 쿠키는 그 수와 크기에 제한이 존재브라우저별로 제..

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web * 웹에서의 상태 유지 기술HTTP프로토콜은 상태 유지가 안되는 프로토콜이다. - 이전에 무엇을 했고, 지금 무엇을 했는지에 대한 정보를 갖고 있지 않음 - 웹 브라우저(클라이언트)의 요청에 대한 응답을 하고 나면 해당 클라이언트와의 연결을 지속하지 않는다. * 쿠키(Cookie)와 세션(Session) 쿠키 - 사용자 컴퓨터에 저장 - 저장된 정보를 다른 사람 또는 시스템이 볼 수 있는 단점 - 유효시간이 지나면 사라짐 세션 - 서버에 저장 - 서버가 종료되거나 유효시간이 지나면 사라진다. 쿠키(Cookie) 동작 이해 1/2 => 쿠키는 이름과 값으로 구성이 되어있다. 유지시간 등의..