본문 바로가기

웹 개발94

검색 카테고리 여러 개 동시 선택 검색 조건을 여러개 동시에 선택을 할 때 배열에 선택된 속성들을 추가한 후 보내줘야 합니다. 만약 회원 상태라는 검색 조건을 여러개 검색하고 싶은 경우 아래 코드처럼 ref로 배열을 만들고 검색 조건들을 입력합니다. 그리고 vue3에서는 v-model로 각 요소들을 연결해주면 각 조건을 체크하면 설정한 v-model에 true, false가 입력됩니다. const accountStatusList = ref([ { model: isTest1Status, id: 'test1', label: '회원상태1' }, { model: isTest2Status, id: 'test2', label: '회원상태2' }, { model: isTest3Status, id: 'test3', label: '회원상태3' },.. 2024. 6. 15.
Vue3 조직도 만들기 Vue3로 조직도를 보여주는 화면을 만들어보았습니다.조금씩 Vue에 익숙해지는 느낌이 들뻔했습니다...아직도 라이프사이클 순서가 어렵습니다...     처음에는 부서를 누르면 백엔드에서 사용자를 받아와서 표시를 해줬지만요구사항에 부서를 누르면 아래 자식 부서들도 모두 체크가 되야한다는 사항때문에 한번에 부서 정보와 사용자 정보를 가져와서 재귀함수로 트리를 만들었습니다.  아래는 pinia를 이용하여 한 곳에서 트리를 만드는 코드입니다. 직접 props로 넘기기에는 복잡하고 잘 이해가 안가서 그냥 pinia를 사용했습니다.  코드는 민감한 정보가 있을 수 있어서 그냥 핵심 함수들만 가져왔습니다. 그리고 변수 이름도 다 수정해서 이대로 실행하면 동작하지는 않습니다.  useInitOrgChartStore.j.. 2024. 6. 6.
Vue excel editor 사용법 vue에서 excel기능을 사용할 일이 생겨서 vue-excel-editor를 사용해봤습니다. 아쉬운 부분이 많지만 시간이 없기에 나중에 여유가 생기면 다시 도전하려고 합니다.   필요기능1. 이메일 중복 시 -> 유효성 통과 X2. 모든 입력칸 미입력시 -> 유효성 통과 X3. 유효하지 않은 이메일, 이름, 휴대폰 번호 형식 -> 유효성 통과 X4. 입력한 총 건수 표시     프론트는 아직 익숙치 않아서 어려웠던 것 같습니다. 사용법 코드 예시는 아래와 같습니다. 필요한 부분만 가져왔는데 옵션 값들은 모두 제거하고 쓰면 되고 필요한 경우 커스터마이징 할 수 있습니다.    헤더... 내용 ... .. 2024. 6. 1.
스프링 시큐리티 개념 스프링 시큐리티 스터디를 시작하게 되었는데 다음주 발표라서 급하게 만듭니다. 단어, 그림 위주로 넣고 발표할 때 자세히 설명할거임 -> 사유: 꽤바쁨     1. 교재   2. 스프링 시큐리티란?스프링 시큐리티는 Spring 기반의 애플리케이션에서 보안 기능을 제공합니다. 인증 : 사용자의 신원 확인인가: 사용자의 권한 확인 추가적으로 CSRF, XSS, 세션 변조 등 여러가지 웹해킹 공격을 방지해주는 기능을 제공합니다.   3. 왜 스프링 시큐리티를 사용하는가? 그냥 JWT 토큰만 사용하는거랑 무슨 차이가 있을까? 1. 직접 설정하기 귀찮다.-> JWT 코드@Slf4j@Service@RequiredArgsConstructorpublic class JwtService { public static f.. 2024. 5. 19.
jira, redis, kafka가 뭘까? 다우기술에 입사를 하고 온보딩 교육을 받고 있는데 사용 안해본 기술들이 등장하는데 아직 뭐가 뭔지 모르겠다. 팀에 들어가면 뭐 알려주겠지만 대충 개념을 잡아본다. jira -> 이슈 추적 및 프로젝트 관리를 위한 협업 도구라고 한다. 버그가 발생하거나 각자 어떤 작업을 했는지 파악할 때 유용한 협업 도구인 것 같다. redis -> 데이터를 메모리에 저장하여 빠르게 읽고 쓰는 오픈소스라고 한다. 속도가 중요할 때 사용하는 캐싱 기능을 제공하는 오픈소스라고 이해하면 될 것 같다. kafka -> 데이터를 임시로 보관할 때 실시간으로 대용량 데이터 스트림을 처리하는 오픈소스라고 한다. 2024. 2. 14.
스프링 데이터 JPA - @EntityGraph 사용 및 Page로 받아오기 @Query("SELECT p FROM Post p JOIN FETCH p.writer WHERE (:search IS NULL OR p.title LIKE %:search%) AND (:writer IS NULL OR p.writer.uid = :writer)") List findAllWithFetchJoin(String search, String writer, Pageable pageable); long count(); @Query("SELECT COUNT(p) FROM Post p WHERE :search IS NULL OR p.title LIKE %:search%") long countBySearch(String search); 조금씩 레포지토리에 조건이 추가되다 보니깐 점점 복잡해지는 느낌이 든.. 2023. 11. 19.
패치 조인, 인덱싱, 캐싱 적용 및 성능 실험 public List getPostService(String search) { List findPosts = (search == null) ? postDataRepository.findAll() : postDataRepository.findAllByTitleContaining(search); List postList = new ArrayList(); for (Post e : findPosts) { AllPostsResponseDto allPostsResponseDto = AllPostsResponseDto.builder() .postId(e.getId()) .title(e.getTitle()) .writer(e.getWriter().getUid()) .createDate(e.getCreateDate()).. 2023. 9. 6.
이팩티브 자바 따라하기 요즘 여유가 생겨서 한달 전에 사놨던 이펙티브 자바를 읽기 시작했다. 책에는 아이템이 90개 정도 있는데 1번 부터 순서대로 읽어보고 내 블로그 만들기 프로젝트에 적절한 내용이면 아이템들을 적용하는 방식으로 공부하려고 한다. 하루에 아이템 3개씩 하면 괜찮지 않을까 예상해본다. 일반 자바 책보다 내용이 깊고 생각해야할 부분이 많아서 아이템 3개도 많다. 유지만 하면 30일 만에 책 한권을 끝낸다는 목표이다. 아이템 1. 생성자 대신 정적 팩터리 메서드를 고려하라 -> 이미 전부다 빌더 패턴을 사용하고 있어서 생성자는 사용하고 있지 않다. -> 기본 생성자는 사용하지 않는 경우 protected로 설정해서 사람들이 해당 클래스는 생성할 수 없다는 것을 인식하도록 하자. 아이템 2. 생성자에 매개변수가 많다.. 2023. 8. 11.
Jest 테스트 작성법 테스트 설계 및 방향 Controller -> Service -> Repository 현재 KLUB 프로젝트는 설계 방향은 위와 같이 Controller에서 Service를 호출하고 다시 Service에서 Repository를 호출하는 방향으로 설계되어 있습니다. Jest로 테스트를 진행할 부분은 Controller와 Service 파일인데 Controller를 테스트하는 경우 Controller 자체의 기능에 집중하기 위해서 Service를 모킹하고 Service를 테스트하는 경우 Repository를 모킹함으로써 격리된 환경에서 테스트를 진행할 수 있습니다. klub 프로젝트는 프론트에서 e2e 테스트를 진행해주기 때문에 백엔드에서는 통합 테스트를 보다는 단위 테스트를 먼저 진행합니다. Jest로 진.. 2023. 7. 27.

티스토리툴바