rexondex's blog

이 프로젝트는 스프링부트를 활용하여 웹소켓을 통해 실시간 채팅 기능을 구현한 간단한 단일 HTML 페이지입니다. 프로젝트의 주요 기능 및 기술 스택은 이렇습니다:웹소켓을 이용한 실시간 채팅: 클라이언트와 서버 간의 실시간 데이터 전송을 위해 웹소켓을 사용하여 사용자가 입력한 메시지를 즉시 다른 사용자에게 전달할 수 있습니다.스프링부트: 백엔드 프레임워크로 스프링부트를 사용하여 서버를 구성하고 웹소켓 핸들러를 설정했습니다.OAuth를 통한 로그인 및 보안 연결: 사용자 인증을 위해 OAuth를 구현하였으며, 안전한 데이터 전송을 위해 SSL 인증서를 적용하였습니다.포트 설정 및 SSL 구성: SSL 연결을 위해 포트 8443을 사용하고, 키 저장소 및 암호와 같은 SSL 관련 설정을 포함하여 HTTPS 연..

스프링부트 프로젝트 내부에 리액트를 설치하는 방법을 순서대로 정리해 보겠습니다 !  1) 스프링부트 프로젝트를 생성합니다.( 또는 기존의 스프링부트 프로젝트를 사용합니다 )​https://start.spring.io/ 2) Node.js 를 다운받아 설치합니다.​Node.js — Download Node.js® (nodejs.org)   3) 스프링 프로젝트의 ' src/main ' 경로에서 React 프로젝트를 생성합니다.// npx create-react-app (설치할 프로젝트 이름)npx create-react-app frontend​스프링부트 프로젝트의 src/main 폴더로 들어간 다음 폴더 바탕 여백에 우클릭하여'터미널에서 열기' 또는 '여기에 PowerShell 열기' 를 눌러 파워쉘을 켭..

REST란 무엇인가? REST 아키텍처 스타일을 따르는 웹 API(또는 웹 서비스)를 REST API (또는 RESTful API) 라고 합니다. https://restfulapi.net/   REST는 REpresentaitional State Transfer의 약자이며 분산형 하이퍼미디어 시스템을 위한 아키텍처 스타일입니다. 웹 기반 API를 구축하는 데 가장 널리 사용되는 접근 방식 중 하나입니다.​REST는 '프로토콜'이나 '표준'이 아니라 '아키텍처 스타일'입니다. 개발 단계에서 API 개발자는 다양한 방식으로 REST를 구현할 수 있습니다.​다른 아키텍처 스타일과 마찬가지로 REST에도 지침 원칙과 제약이 있습니다. 서비스 인터페이스를 RESTful 이라고 부르려면 이러한 원칙을 충족해야 합니..

​스프링의 REST 컨트롤러를 데이터 교류를 위한 인터페이스로 삼고서버로부터 반환받은 데이터를 리액트에서 렌더링하여 최종 사용자에게 보여주는 방법을 선택했습니다.​1) REST로 구현된 스프링 서버가 필요하며,2) 리액트를 스프링 내부에 설치하고,3) 최종 사용자에게 어떻게 보여줄지 생각해봅니다.  :: SSR에서 CSR 방식으로 전환한 이유 ::​이전까지는 서버에서 웹에 표현할 정보와 요소들을 모두 처리하려고 했으나 어려움을 겪었습니다.​화면 하나하나와 기능을 모두 서버에서 웹으로 성공적으로 넘기기만 하면 수월하게 작동할 줄 알았으나비동기 방식으로 간단히 처리할 수 있는 기능임에도 SSR방식을 택하면 복잡하게 선언된 변수와 데이터 교환을 위한 DTO 클래스를 상황에 따라 많이 생성해야만 했습니다.​이 ..

​'좋아요' 기능이란 게시물의 '하트 버튼'을 클릭하면 숫자가 카운트로 +1 되며 게시물 속성인 'LIKE_COUNT' 숫자를 누적시키는 기능입니다.​유저당 게시물 1개에 1개의 좋아요를 줄 수 있으며 이미 누른 게시물은 채워진 하트, 누르지 않은 게시물은 채워지지 않은 하트로 보이게 하는게 조건입니다.​​​ 행( 레코드 )이 2개 저장되어 있기 때문에 웹에서 보이는 게시물도 2개입니다.​'POST_ID = 82' 를 가진 게시물의 경우 하트를 누르면 LIKE_COUNT가 1 증가하며 테이블에 반영됩니다.​한번 더 누르면 LIKE_COUNT가 1 감소하며 테이블에 반영됩니다.​​​Caused by: org.hibernate.NonUniqueResultException: Query did not retur..

두 테이블과 엔터티를 비교해 보면 추상 클래스인 BaseTimeEntity를 제외하고 정확히 테이블만큼의 엔터티를 생성했습니다. ( BaseTimeEntity 는 엔터티 클래스의 createAt , updateAt 속성 데이터를 생성하기 위한 추상 클래스입니다 )​( Post / PostTag / Tag ) 에서 PostTag 테이블을 연결고리로 다대다 관계를 설정하였으므로 이 세 테이블을 중심으로 살펴보겠습니다.​​​@NoArgsConstructor@Data@Entity@Table(name = "post")public class Post { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long postId; @C..

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 로 하기로 했습니다. 페이지의 색상들은 머티리얼 ..