본문 바로가기
반응형

Library & Framework20

성격 검사 페이지 구현 회고 2 - 리액트에서 동적 비디오 로딩화면 구현하기 (복병 IOS혼내주기) 로딩화면? 성격 검사에 모두 응답을 하고 결과를 계산하기 위해 서버와 통신하는 사이 귀여운 캐릭터가 빙글빙글 도는 영상을 제공하려고 하였다. 기존에는 컴포넌트를 한 개씩 순서대로 보여주며 결과를 서버로부터 내려받을 때까지 로딩 애니메이션을 보여주다가 서버와 통신을 마치면 결과에 해당하는 캐릭터로 변신하는 애니메이션을 보여주고 끝나면 폭죽을 터트리며 결과화면으로 이어지는 하나의 애니메이션처럼 보이도록 단순하게 만들었다. 근데 단순히 컴포넌트를 변경하는 방법으로 구현했을 경우 네트워크 속도에 따라서 아직 영상 메타데이터들 조차 다운로드 되지 않아 빈화면으로 바뀌었다가 다시 변신 영상이 로드되는 모습이 보이게 되어 매끄럽지 않고 중간에 한번 끊기는 모습을 보여주었다. 또한 로딩 애니메이션이 끝난 뒤에 변신 애.. 2023. 6. 16.
성격 검사 페이지 구현 회고 1 - github pages에서 react 배포하기 https://16ssss.github.io/ Sixteens. site 16ssss.github.io 해당 페이지를 만들고 배포하면서 겪었던 문제들을 회고하기 위해서 이 글을 작성하게 되었다. 구현하게 된 계기 현재 진행하고 있는 프로젝트에서 웹을 다룰 줄 아는 팀원이 없었다... 그나마 내가 리액트를 접해본 적이 있었기에 내가 담당하게 되었다. (백엔드에서 어느 정도 성장을 이루면 프런트엔드도 맛보리라 생각했기에 이 기회에 맛을 봐보자라고 생각했었음) 그렇게 나만 믿으라며 의기양양하게 시작하게 된 리액트... 하지만 시작부터 순조롭지 않았다. gh-pages 리액트를 깃허브 페이지에 배포하기 위해서는 빌드한 파일을 레파지토리에 올리고 github pages 설정을 해주어야 한다. 이걸 직접 했었는데 .. 2023. 6. 14.
[Spring boot] 설정 정보(application.yml / properties) 분리시키기 - spring profiles 사용 이유 현재 진행 중인 프로젝트에서 오라클 클라우드 프리티어를 이용해서 배포 테스트를 진행하게 되었다 현재 application.yml을 서브 모듈 ( https://teching.tistory.com/144 )을 사용해서 관리하고 있는 상황이었다. spring boot 설정 정보 외부에서 관리하기 2 - submodule https://teching.tistory.com/143 [spring boot 설정 정보 외부에서 관리하기 Spring boot 설정 정보 관리하기 서버를 github를 사용해서 형상관리를 할 생각인데 레파지토리를 public으로 열어두려고 한다... 공개 teching.tistory.com 오라클 클라우드의 DB는 특이하게 지갑을 이용해서 접속해야 하는데 그 경로를 지정해주어야.. 2023. 6. 12.
[Spring boot] 설정 정보 외부에서 관리하기 2 - submodule https://teching.tistory.com/143 Spring boot 설정 정보 외부에서 관리하기 1 - 개요 Spring boot 설정 정보 관리하기 서버를 github를 사용해서 형상관리를 할 생각인데 레파지토리를 public으로 열어두려고 한다... 공개하게 되면 spring boot의 application.yml파일에는 아래와 같이 DB 접속 정 teching.tistory.com 지난번에 설정정보를 관리하는 여러 방법을 알아본 후 그중 Submodule을 사용해서 설정정보를 관리해 보려고 한다. 이를 위해서 submodule에 대한 공부가 필요한 것 같아 가볍게 알아보는 시간을 가져보려고 한다. 서브 모듈 서브 모듈이란? 서브 모듈이란, 프로젝트 내부에 다른 프로젝트를 사용해야 하는 경.. 2023. 3. 21.
[Spring boot] 설정 정보 외부에서 관리하기 1 - 개요 Spring boot 설정 정보 관리하기 서버를 github를 사용해서 형상관리를 할 생각인데 레파지토리를 public으로 열어두려고 한다... 공개하게 되면 spring boot의 application.yml파일에는 아래와 같이 DB 접속 정보, API 키와 같은 공개되면 안 되는 민감정보가 포함되어 있어 위험할 수 있다고 생각이 들었다. 이것을 그대로 public 레파지토리 올리면 무수한 해킹 요청이 있을 것만 같았다. server: port: 9999 spring: datasource: url: jdbc:mysql://localhost/mydb username: root password: secret 그래서 설정 정보를 갖고있는 파일을 레파지토리에 포함하지 않고 따로 관리하기 위해서는 어떤 방법이 .. 2023. 3. 20.
스프링에 대해서 2000년 초반 자바당 정파 기술 EJB(Enterprise Java Beans)를 표준기술로 사용함. 금융권에서도 잘 사용하고 기술영업도 이것으로 함. 이론적인 것은 매우 좋음(분산기술, 원하는 계층만 더 추가하기도 편함) 하지만 개발비용이 너무 비싸고 구현하기에 너무 어렵고 속도도 느렸다. 또한 EJB인터페이스에 의존하여 코드를 구현해야 했음. 그래서 POJO(Plan Old Java Object) 오래된 순수한 자바로 돌아가자는 의견도 있었음. 이렇게 어렵고 힘들게 개발하다가 로드 존슨이 2002년 Expert One-on-One J2EE Design and Development 출간 EJB 컨테이너를 대체할 수 있고 단순함 후에 Spring으로 발전 또한 개빈 킹이 Hibernate(하이버네이트).. 2022. 2. 24.
자바 스프링입문5 - 회원 관리 예제 만들기 1 비즈니스 요구사항 정리 회원 도메인과 리포지토리 만들기 회원 리포지토리 테스트 케이스 작성 회원 서비스 개발 회원 서비스 테스트 비즈니스 요구 사항 정리 데이터 : 회원ID, dlfma 기능 : 회원 등록, 조회 아직 데이터 저장소가 선정되지 않음(가상의 시나리오) 일반적인 웹 애플리케이션 계층 구조 회원 도메인과 리포지토리 만들기 hello.hellospring 패키지 아래 두 개의 패키지 domain, repository 생성 domain Member 클래스 생성 package hello.hellospring.domain; public class Member { private Long id; private String name; public Long getId() { return id; } publi.. 2022. 2. 7.
자바 스프링입문4 - 정적컨텐츠, mvc, api 서버 동작 방식 1. 정적 콘텐츠 : 서버에서 뭔가 동작하지 않고 페이지를 보여주는 방식 2. 동적 컨텐츠 : 템플릿 엔진 : 서버에서 프로그래밍 후 동적으로 템플릿 엔진을 통해 html을 뿌려주는 방식 모델 1 방식! mvc개념이 생기기 전까지 view에서 처리를 다했었음!! 그래서 view의 코드가 엄청나게 길어짐 mvc : model - view - controller를 통해 html을 동적으로 관리해주는 방식 controller에서 처리를 해서 model에 담아 view를 렌더링! 3. api : 안드로이드, ios와 같이 json데이터 포맷을 이용해 클라이언트에게 전달하는 방식 서버끼리 통신할때도 사용함! 스프링 부트 정적컨텐츠 api https://docs.spring.io/spring-boo.. 2022. 1. 26.
자바 스프링입문3 - View환경설정, 빌드&실행 Welcome 페이지 만들기!!(정적 페이지) 스프링 부트에서 제공하는 Welcome Page 기능이 있다. "static/index.html"을 만들어두면 자동으로 제공된다! ( https://docs.spring.io/spring-boot/docs/2.3.1.RELEASE/reference/html/spring-boot-features.html#boot-features-spring-mvc-welcome-page 해당 페이지에서 자세한 정보 확인 가능!!! ) Spring Boot Features Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and w.. 2022. 1. 25.
반응형