yooputer's devlog

Meta ESG 프로젝트에서 에디터 내 이미지 삽입 요건이 있었다.에디터는 SmartEditor2를 사용하였고, SmartEditor2에 구현되어있던 이미지 모듈에 이미지를 클라우드에 업로드하고 이미지 경로를 반환하는 api를 사용해 구현하였다.스마트 에디터2 설치공식 문서를 참고해 스마트 에디터2를 설치하였다.https://naver.github.io/smarteditor2/user_guide/2_install/setting.html 2.0 버전 설치 · GitBookNo results matching ""naver.github.io사진 플러그인 추가아래 문서를 참고해 사진 플러그인을 추가했다.https://naver.github.io/smarteditor2/user_guide/4_photoupload..

Project/Meta ESG 2024. 1. 18. 08:51

Meta ESG 프로젝트 요건 중 특정 textarea에서 현재 작성한 글자수를 보여주는 기능이 있었다. 나는 onkeyup 이벤트 핸들러를 사용해 구현하였다. HTML 0 / 500 등록 JS $('.check-input-length').keyup(function (e) { let content = $(this).find('textarea').val(); $(this).find('.typing-num').text(content.length); });

Project/Meta ESG 2024. 1. 16. 08:30

개요 Meta ESG 프로젝트 요건 중 자동저장 기능이 있었다. 백엔드 코드는 수정하지 않고 프론트에서 타이머를 사용해 백엔드로 저장을 요청하여 구현했다. HTML 타이머를 보여줄 div와 타이머 on/off를 저장할 input이 필요하다 input에 onclick 메서드를 달았다. 자동저장 5:00 JS let min = 5, sec = 0; let timer; // init $(function(){ if($('#autoSaveToggle').is(':checked')){ startTimer(); } }); // 자동저장 타이머 시작 function startTimer() { timer = setInterval(countTimer, 1000); } // 자동저장 타이머 종료 function stopTi..

Project/Meta ESG 2024. 1. 16. 08:18

Medication 엔티티에 여러개의 약복용시간을 저장해야 했다. 엔티티를 생성해서 일대다로 관리할까 고민했는데 @ElementCollection이라는 기능?을 발견해서 한번 사용해보기로 했다. ElementCollection이란 엔티티에 List나 Set과 같은 Collection 타입을 저장할 수 있도록 한다. 아래와 같이 @ElementCollection 어노테이션을 붙여서 정의한다 @Entity @Getter @Setter @NoArgsConstructor @AllArgsConstructor public class Medication { @Id @Column(name = "medication_id") @GeneratedValue(strategy = GenerationType.IDENTITY) pr..

Project/WithParents 2023. 2. 13. 10:31

이번 포스팅에서는 testuser를 생성하고 testLogin api를 구현해 jwt토큰 생성 및 인증이 잘 작동하는지 확인해보겠다 테스트 유저 생성 users 테이블에 다음과 같이 testuser를 insert한다 insert into users(email, nickname, password, authority) values('test@test.com', 'testuser', 'password', 'ROLE_USER'); AuthController, AuthService 생성 controller 패키지 아래에 AuthController 클래스를 생성한다 service패키지 아래에 AuthService클래스를 생성한다 findByEmail 메서드 구현 다음과같이 UserRepository에서 Email을..

Project/WithParents 2023. 1. 16. 17:10

이번 포스팅에서는 UserDetails를 구현한 User 엔티티를 구현하고 헤더에 들은 jwt token을 분석해 사용자를 인증하는 필터를 구현해보도록 하겠다 User 엔티티 생성 entity 패키지 아래에 User 클래스를 생성한다 다음과 같이 User 클래스를 구현한다 MySQL에서 테이블명이 user이면 오류가 나서 테이블명은 users로 바꿔주었다 family 정보를 저장하는 코드는 아직 demo에서 코드를 옮기지 않아서 코드를 모두 옮긴 후 주석을 해제할 예정이다 @Entity @Getter @NoArgsConstructor @AllArgsConstructor @Table(name = "users") public class User implements UserDetails { @Id @Colum..

Project/WithParents 2023. 1. 16. 15:47

SpringSecurity를 사용하면 기본적으로 모든 페이지에서 로그인을 해야한다 페이지마다 접근권한을 다르게 하기 위해 SpringSecurityConfig를 작성한다 SpringSecurityConfig 작성 config라는 패키지를 새로 생성하고 config패키지 아래에 SpringSecurityConfig라는 클래스를 생성한다 WebSecurityConfigurerAdapter을 상속하고 http관련 설정과 web 관련 설정을 해준다 (참고로 WebSecurityConfigurerAdapter는 스프링부트 3.0.1버전에서 사용할 수 없어서 버전을 2.7.5로 내렸다....) 다음과 같이 설정하면 "/" 경로와 "/api/auth/testLogin" 경로는 로그인이 없어도 접근할 수 있다 @Ena..

Project/WithParents 2023. 1. 16. 14:52

이번 포스팅에서는 SpringSecurity를 적용해보도록 하겠다. 기존 데모에 SpringSecurity 의존성을 추가하는 것이 아닌 새로운 프로젝트를 팔 것이다. 프로젝트 생성 인텔리제이의 Spring Initializr 기능을 이용해 스프링부트 프로젝트를 생성할 것이다 빌드툴은 gradle, 자바는 17, 패키징방식은 Jar을 사용한다 디펜던시는 다음과 같이 선택하고 프로젝트를 생성한다 빌드가 완료된 후 프로젝트를 실행해보면 오류가 뜬다 데이터베이스가 연동되지 않았기 때문이다 application.properties에 다음과 같이 작성한다. 데이터베이스를 연동한 후 실행해보면 아래와 같이 로그인화면이 뜨는 것을 확인할 수 있다 username은 user, password는 아래와 같이 빌드될 때 나..

Project/WithParents 2023. 1. 13. 16:12