rexondex's blog

OAuth 2.0 (Open Authorization 2.0)은 인증을 위한 개방형 표준 프로토콜입니다.이 프로토콜은 제3자 프로그램이 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임받는 방식을 제공합니다. 곧 구현하려는 기능은 소셜 로그인을 통해 현재 진행중인 프로젝트에 로그인 기능을 구현하는 것입니다.  1. 사용자가 웹에 접근했을 때2. 로그인이 필요한 곳이나 특정 페이지에서 로그인화면으로 이동(구글 로그인 등)3. 소셜 로그인 인증 후 다시 원래 접근했던 곳이나 로그인이 필요했던 기능으로 리다이렉트 를 구현하는 것이 목표입니다.​​  gradle에서 oauth2 관련 의존성을 추가하고,config 패키지와 oauth 패키지를 생성하여 클래스들을 구성하였습니다. de..

현재 상황은 물리적 스키마가 불안정하다는 것과JPA Repository 가 동작하는 구조를 잘 모르고 있다는 점,그리고 Entity 클래스와 DTO 클래스의 활용에 있어서 혼동하고 있었습니다.​​​ 현재 데이터베이스의 POST 테이블은 이렇게 정의되어 있습니다.​-- POST_ID 게시물 고유 ID ( 1씩 증가하는 순차 시퀀스 )-- POST_TITLE 게시물 제목-- POST_CONTENT 게시물 내용-- MEMBER_NAME 작성자 닉네임-- TAG_NAME 태그 이름-- CREATED_AT 생성일자-- UPDATED_AT 수정일자​정규화 규칙을 위반한 상태입니다.​MEMBER_NAME 과TAG_NAME 으로 인해함수종속이 없어야 함을 해결하지 못했습니다.​JPA Repository 인터페이스를 다..

게시물 하나하나를 모서리가 깎인 네모로 표현하였습니다헤더는 왼쪽, 중간, 오른쪽 3부분으로 나누어 로고텍스트, 검색아이콘, 글쓰기/프로필 아이콘을 배치하였고전체 폰트는 구글 폰트의 고딕 A1을 사용했습니다https://fonts.google.com/?subset=korean 헤더에서 왼쪽 로고 텍스트에 쓴 폰트는 구글 폰트의 도현체를 사용했습니다. 검색 아이콘, 글쓰기/프로필 아이콘이나 하트 아이콘 같은 현재 쓰인 아이콘들도 머티리얼 심볼&아이콘을 html 임베드 방식으로 사용했습니다Embed code 방식은 아이콘이나 글꼴을 로컬( 현재 PC )에 저장하지 않고 웹 페이지를 실행할 때 글꼴,아이콘 파일을 불러와서 적용시키는 방식입니다   https://fonts.google.com/icons Mater..

지난번의 경험으로 얻은 뷰포트 메타 태그와 미디어쿼리를 다음과 같이 적용했습니다.   모바일은 320,375,425px ( S/M/L ) 3가지로 분리했습니다.  이렇게 적용한 뼈대와 미디어쿼리를 검사모드로 확인해보면,768px 미만이 되면 추가 컨텐츠를 표시하려던 오른쪽 컨테이너가 화면에서 보이지 않게 됩니다. 미디어쿼리에 모바일 화면 크기가 걸리면,display: none; 을 하도록 해서 요소가 완전히 가려지도록 설정했습니다.     여분의 가로 스크롤 없이 부드럽고 깔끔한 세로 스크롤임을 확인해볼 수 있었습니다.또 핀치줌아웃을 하면 브라우저의 현재 열려있는 화면 멀티태스크 창으로 쉽게 이동할 수 있었습니다. 웹 어플리케이션 이름은 Nefandesu 로 하기로 했습니다. 페이지의 색상들은 머티리얼 ..

이전의 질문에서 발견한 몇가지 키워드는 미디어쿼리와 뷰포트입니다. /* 모바일 화면에 대한 스타일 */@media screen and (max-width: 768px) {/* 여기에 모바일 화면에 적용할 스타일 작성 */}  여기서 최소 너비 min-width가 768px일때는 768px이상인 경우 스타일을 적용한다는 의미입니다.일반적으로 태블릿 화면과 PC화면을 지원하는 스타일의 경우를 떠올릴 수 있습니다. 최대 넓이 max-width가 768px일때는 768px 이하의 화면인 경우 스타일을 적용한다는 의미입니다.모바일 화면을 지원하는 스타일을 적용할 수 있습니다. 이때 max-width 가 768px일인 경우 전체 페이지의 요소 너비도 768px일 이여야 모바일에서 한 화면안에 온전히 표현할 수 있습..

메인 화면을 구성하는 뼈대는 768px 밑으로 내려가도 화면 요소들의 가로 너비는 더이상 줄어들지 않습니다.만약 768px 보다 큰 가로 화면에서 이 메인페이지를 보게 된다면 left__container 라고 적힌 부분의 너비가 늘어납니다.오른쪽 ___all right reserved___ 라고 적힌 부분의 너비는 고정 너비이다. 768px보다 큰 가로 너비 화면에서 이 페이지를 바라본다고 해도 오른쪽 컨테이너의 너비는 변하지 않습니다.   초록색 칠한 헤더와 아래 두 컨테이너 모두 768px에 도달하면 더이상 너비는 줄어들지 않고 브라우저가 그냥 가리게 됩니다. 768px보다 커지는 경우는 헤더도 브라우저의 너비에 따라 넓어지고, left__container(왼쪽사각형-하늘색)부분도 브라우저의 너비에 ..

여기서 findAll() 메소드를 사용할 예정입니다  postsRepository의 findAll() 메소드를 호출하는 getAllPosts() 메소드가 정의되어 있습니다   GET 메소드 /posts 경로로 요청이 들어오면Service 레이어의 postsService.getAllPosts() 메소드를 실행하고, 이 메소드는JpaRepository를 상속하는 PostRepository의 findAll() 메소드를 호출합니다.  findAll() 메소드는 오라클 DB에 접근하여POST 테이블의 값을 읽어들이고 List 타입으로 반환합니다. 그리고 Model 객체의 "allPosts" 라는 속성에 서비스 로직으로부터 반환된 List타입 allPosts 객체를 담습니다. 그리고 return "test"; 미리..

컨트롤러의 getAllPosts(), 호출되면 매개인자 없이 모든 게시물을 읽는 기능을 수행하는 메서드입니다.지금은 return "test"; 를 하게 되어 있는데, templates/test.html 을 반환하는 것입니다.    GET 메서드로 /posts 에 요청을 보내면, 컨트롤러가 test.html을 반환하게 되어있었으므로호출용 test 페이지 를 반환한 것을 볼 수 있어요. test 페이지는 임의로 제가 작성한 것입니다.    그리고 아무 경로를 설정하지 않고, 기본 주소로 GET 요청을 보내면스프링부트는 index.html 을 반환하게 되어있으므로 index.html을 반환한 것을 확인할 수 있습니다.        PostsRepository는 JpaRepository를 상속하는 인터페이스입니..

오라클에서 DB 기본 세팅했습니다.테스트 예제 쿼리를 날리면 정상 작동합니다.     일단 처음에는 크게 3가지 항목으로 나눠봤습니다.   # 클라이언트 - 요청 : '최근 10개의 게시물이 있는 메인 화면을 보여줘.' 사용자가 처음 사이트에 접속했다면, 게시물이 있는 메인 화면이 처음 나와야 합니다.[최근 10개의 게시물이 있는 메인 화면을 보여줘] 의 기능을 맡는 메서드의 주소를 호출하면,서버는 이 기능을 맡는 메서드의 작업을 수행한 후 [최근 10개의 게시물이 있는 '메인 화면']을 반환해야 합니다.   # 스프링부트(서버) - 요청에 대해서 : READ 읽기 작업을 맡는 메서드를 수행 Controller 레이어 : 클라이언트의 요청을 받아 해당하는 '읽기' 메서드를 호출해야 합니다. [ 한 건만 ..

[ AWS 배포를 위해 밟은 절차 ] 1. 스프링부트 프로젝트를 .jar 파일로 만든다.2. AWS EC2 인스턴스를 우분투로 생성 및 연결한다.3. AWS RDS를 mySql로 생성하여 로컬에서 실행할때와 같은 구조로 테이블과 제약조건을 구성한다. 4. AWS의 우분투 환경에 FileZilla로 연결하여 .jar 파일을 업로드한다.5. 우분투 콘솔에서 .jar 파일을 실행시킨다.( 프로젝트에서 사용하는 자바 버전을 처음 한번은 명령어를 통해 설치해줘야 한다. ) 6. 로컬 콘솔에서 봤던 것처럼 로그를 통해 스프링부트가 제대로 실행되는지 확인한다. 7. [... Started ... :8080 ...] 등 로그가 확인되면 "ec2-...-...com" 형식의 퍼블릭주소에 포트 :8080 을 붙여 접속한다..