🔍React란? 리액트(React)는 웹 프레임워크로 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. facebook에서 제공해주는 프론트앤드 라이브러리라고 볼 수 있다. 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 토대로 사용될 수 있다. 결론: 현재 많이 활용되고 있는 웹&앱의 View를 개발하는 데에 도움을 주는 인기있는 라이브러리! 🔍React 특징 1. Data Flow : 데이터가 단방향 흐름을 가짐. 2. Component 기반 구조 : 독립적인 단위의 소프트웨어 모듈. React는 하나의 UI를 여러 컴포넌트를 쪼개어 만듦. 3. Virtual Dom 4. Props and State 5. JSX 🔍Real Dom vs Virtual Dom Real ..

🔍스프링 시큐리티와 스프링 시큐리티 Oauth2 클라이언트? 많은 서비스에서 구글, 페이스북 등 소셜 로그인 기능을 사용하는 추세. 그 이유는 직접 구현하는 것보다 OAuth를 써서 구현하는 것이 더 간단하기 때문이다. 로그인 시 보안, 비밀번호 변경&찾기 등등 모든 서비스를 소셜 서비스에 맡기고 그외의 개발에 집중할 수 있다. 🤍구글 서비스 등록 1. 구글 서비스 등록 구글 클라우드 플랫폼 으로 이동해서 프로젝트를 만든다. API 및 서비스로 이동해서 사용자 인증 정보를 만든다. 먼저 동의화면을 구성해준 다음 OAuth 클라이언트 ID를 만들어준다. 스프링 부트2 버전의 시큐리티에서는 기본적으로 {도메인}/login/oauth2/code/{소셜서비스코드} 리다이렉트 URL을 지원하고 있다. 사용자가 별..

🤍Auth 기능의 필요성 홈페이지에는 로그인이 필요한 기능이 있고 필요하지 않은 기능이 있다. 페이지 이동 혹은 게시판 글을 쓰거나 지울 때 로그인이 되어 있는지, 관리자인지 or 유저인지 등을 체크하기 위해 필요하다. 지난번 로그인 시 생성한 토큰을 서버에서는 DB에, 클라이언트는 Cookie에 토큰을 넣어두었다. 먼저 클라이언트에서 쿠키에 담겨있는 토큰을 서버에 전달한다. ㄴ 이 토큰은 인코드 되어있으므로 디코드시킨 다음 USER ID로 보낸다. 해당 USER ID 토큰이 DB에 있을 경우 인증 완료. 없을 경우 글쓰기 권한을 부여하지 않음. 1. Auth 라우트 만들기 2. 미들웨어 auth.js 만들기 인증처리를 하는 곳 클라이언트 쿠키에서 토큰을 가져온다. 토큰을 복호화한 다음 유저를 찾는다. ..

지난번에 만든 회원가입에서는 데이터베이스에 비밀번호가 그대로 저장됐다. 이번에는 DB에 비밀번호를 더 안전하게 저장하기 위해 bscrypt 를 이용해 비밀번호를 암호화한 다음 DB에 저장해 보도록 한다. 🤍비밀번호 암호화하여 DB 저장하기 1. bscrypt 설치 npm install bscrypt --save 2. npm 사이트 참고하여 User.js에 코드 작성 user 모델을 저장하기 전에 암호화를 하겠다. 그런데 매번 암호화를 하는 것은 번거로우므로, 비밀번호 변경 시에만 암호화되고 email 변경 시에는 비밀번호 암호화가 반복되지 않도록 조건을 걸어준다. next라는 파라미터를 넣어주고 next 호출 사용자의 비밀번호가 변경되었을 때에만 salt를 생성시켜준다는 문법의 genSalt 사용하여 에..

🤍nodemon이란? node monitor의 약자 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작하는 확장 모듈임. 개발 중인 노드 애플리케이션 소스코드를 수정할 때마다 새로 시작할 필요가 없어져서 매우 편리하다. 🤍nodemon 설치 방법 npm install nodemon --save-dev dev를 붙이는 이유는 development는 로컬에서 그냥 테스트로서 사용하겠다는 의미. 🤍npm 개념 재확인하기 npm은 node.js에서 사용 가능한 모듈들을 패키지화시켜 모아놓은 것. npm = "Node Package Modules" 웹에서 필요로하는 특정 기능들을 일일이 개발하지 않아도 이미 누군가 만들어놓은 모듈을 다운받기만 하면 되므로 개..

🤍게시판 글 목록 조회 1. index.mustache UI 변경 {{#posts}} : posts라는 List를 순회하겠다, 자바의 for문과 동일함. {{id}} 등의 {{변수명}} : List에서 뽑아낸 객체의 필드를 사용하겠다. 2. PostsRepository 인터페이스에 쿼리 추가 SpringDataJpa에서 제공하지 않는 메소드는 @Query를 사용하여 작성 가능함, 기본 메소드만으로 해결이 가능하지만 @Query가 훨씬 가독성이 좋다. @Query : 타입 안정성이 보장됨 / 국내 많은 회사(쿠팡, 배민 등 JPA를 적극적으로 사용하는 회사)에서 사용 중 / 래퍼런스가 많음.(많은 회사, 개발자들이 사용하는 만큼 국내 자료가 많음.) @Query("SELECT p FROM Posts p O..

지난번 포스팅에서 머스테치를 사용하여 첫 페이지까지 만들었다. 이제 만들어둔 머스테치에 URL을 매핑해야 한다. 1. IndexController 클래스 작성 머스테치 스타터 덕분에 컨트로러에서 문자열 반환 시 앞의 경로와 뒤의 파일 확장자는 자동으로 지정됨. 앞의 경로는 src/main/resources/templates , 확장자는 .mustache 로 전환되어 View Resolver가 처리하게 됨. 2. IndexControllerTest 클래스 작성 테스트 통과 🤍게시판 글 등록 화면 만들기 :: 부트스트랩 활용 1.레이아웃 파일 만들기 header.mustache footer.mustache 페이지 로딩 속도를 높이기 위해 css는 header, js는 footer에 위치함. HTML은 위에서..

🤍서버 템플릿 엔진이란? 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기함. JSP, Freemarker - 서버 템플릿 엔진 / 리액트, 뷰 - 클라이언트 템플릿 엔진 서버 템플릿 엔진은 서버에서 구동됨. 서버 템플릿 엔진을 이용한 화면 생성은 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달함. 반대로 자바스크립트는 브라우저 위에서 작동하기 때문에 뷰,리액트를 이용한 SPA는 브라우저에서 화면을 생성함. 서버에서는 Json, Xml 형식의 데이터만 전달하고 클라이언트에서 조립합. 🤍머스테치란? 머스테치는 루비, 자바스크립트, 파이썬, PHP, 자바 등 현존하는 대부분 언어를 지원하는 가장 심플한 템플릿 엔진임..