개발 일지

글에 내용을 한눈에 볼 수 있는 목차가 우측에 있었으면 해서 알아보던 중에 괜찮은 라이브러리가 있어서 오늘은 티스토리에 자동으로 목차를 띄우게 해 보려고 합니다. + 티스트리를 커스텀하기 위해서는  HTML 코드와 CSS 코드를 수정해야 합니다. 코드를 수정하는 방법은 `블로그 관리 > 스킨 편집 > html 편집`으로 들어가면 됩니다 0. 사용할 라이브러리https://github.com/tscanlin/tocbothttps://tscanlin.github.io/tocbot/ TocbotTocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or lo..

Spring Security 인증 동작 과정(2) - Filter저번 글에서 Spring Security가 무엇이고 인증에 대한 기본 동작에 대해서 살펴보았다.Spring Security는 필터를 기반으로 동작한다고 했었는데, 이번글에서는 이 Filer에 대해 알아보고 실재 코드를 보면jueun275.tistory.com 이전글에서 Spring Security와 Filter에 대해 간단하게 정리를 한 번 했었는데요. 이전글은 springsecurityfilter 체인에 대에 초점을 맞추었다면 이번글에서는 잠깐 다루었던 DelegatingFilterProxy에 대해 정리해 보려고 합니다. 스프링 컨테이너에서 동작하는 spring security에 등록된 필터가 어떻게 http 요청을 가로채서 처리하는 필터..

테스트 코드를 작성하다 보면 똑같은 어노테이션 @Test @DisplayName을 사용하여 테스트 코드를 작성하게 됩니다.항상 똑같은 구조이기 때문에 뭔가 구조화를 시켜둘 수 있지 않을까 라는 생각이 들어서 찾아봤더니 intellij에서는 Live Temlete 이란 이름으로 제공하고 있었고 자주 사용하는 cout, main 같은 단축어 들도 여기에 정의되어 있다는 걸 알게 되었습니다. 이번 글에서는  Live Temlete을 어떻게 설정하는지에 대해서 정리해 보도록 하겠습니다Live Temlete 이란 Live Template IntelliJ에서 제공해주는 기능 반복적으로 사용하는 코드 패턴을 저장해 두고,  간단한 단축어나 텍스트로 자동으로 코드를 생성할 수 있게 해주는 기능이를 통해 반복적인 코딩 ..

이번 글에서는 테스트에 대한 인프런 강의를 바탕으로 테스트 코드란 무엇이고 테스트 코드가 왜 중요한지, 더 좋은 테스트 코드를 작성하기 위한 방법은 뭔지 등을 정리해 보겠습니다.  Practical Testing: 실용적인 테스트 가이드 | 박우빈 - 인프런박우빈 | 이 강의를 통해 실무에서 개발하는 방식 그대로, 깔끔하고 명료한 테스트 코드를 작성할 수 있게 됩니다. 테스트 코드가 왜 필요한지, 좋은 테스트 코드란 무엇인지 궁금하신 모든 분을www.inflearn.com  테스트 코드 강의를 듣게 된 배경친구와 프런트엔드-백엔드 역할을 나눠 간단한 토이 프로젝트를 진행하면서 ec2에 배포를 먼저 해두고 개발을 했었습니다. ( 전에는 먼저 개발 후 나중에 배포를 했었습니다)CI/CD를 구현했음에도 불구하..

이번 글에서는 테스트 환경을 통합하여 테스트 시간을 단축하는 내용을 작성해 보려고 합니다. 흔히 통합 테스트 코드를 작성할 때 각 테스트 클래스마다 `@SpringBootTest` 어노테이션을 사용합니다.그러나 이런 방식은 각 테스트 클래스가 독립적으로 애플리케이션 컨텍스트를 생성하게 되어 테스트 실행 시마다 서버를 다시 시작하고 컨텍스트를 로딩해야 합니다.  이로 인해 테스트 실행 시간이 길어지고 리소스가 낭비되는 문제가 발생할 수 있습니다. 해결 방안 @SpringBootTest의 남용을 피하는 방법은 간단합니다. 각 테스트 클래스마다 @SpringBootTest를 사용하는 대신,@SpringBootTest 어노테이션을 붙인 추상 클래스(abstract)를 생성하고 다른 클래스에서 이를 상속받아 애플..

티스토리의 디자인을 하나씩 바꾸는 것에 재미가 들어서 여러 부분을 자잘하게 수정했었는데, CSS나 HTML의 어디를 잘못 건드렸는지 홈 화면의 블로그 스킨이 깨져서 결국 스킨을 초기화를 하였습니다... 그러고 나서 다시 세팅을 하려고 했는데 어떤 것을 어떻게 수정했는지 기록해 놓지 않아 다시 적용하는 데 많은 시간이 소요되었습니다. 앞으로는 스킨을 수정하면서 변경 사항을 여기에 정리해 두려고 합니다.   들어가기 전에한번 날리면서 깨달은 팁은 스타일을 적용시킬 범위를 잘 선정해야 한다는 것이다.스타일을 바꾸고 싶은 범위를 확실하게 선정해서 범위를 최소한으로 하자 Ex) h2 태그를 변경하고 싶을 경우 잘못된 예h2 { font-size: 40px;}범위가 너무 넓기 때문에 본문밖에 요소들까지 변경되어 깨..

이전 글에서 티스토리의 인라인코드를 기본 모드에서도 쉽게 사용할 수 있도록 바꾸었습니다. 하지만 인라인 코드 자체가 노션에 비해 너무 밋밋한 느낌이 있어서 이번 글에서는 인라인 코드의 스타일을 커스텀하여 노션의 인라인 코드와 비슷한 느낌으로 바꿔보겠습니다. 적용하기이번에도 방법은 아주 간단합니다. 인라인 코드는 태그를 사용하기 때문에 태그에 대한 CSS값을 설정해 주면 됩니다! 블로그 관리> 스킨 편집에 들어가서 html편집으로 들어갑니다.  CSS 설정을 추가할 것이기 때문에 CSS창으로 가서 Ctrl + F를 이용해 code 태그를 찾아줍니다.  저는 code태그가 다른 태그들과 함께 있는데 code에 스타일만 바꿔줄 것이기 때문에 여기에서 code를 지우고 아래와 같이 밑에다가 새로 정의해 줍니..

기본적으로 티스토리에서 인라인 코드를 사용하는 방법은 두 가지입니다마크다운 모드에서 백틱(`)으로 감싸기HTML 모드에서 로 감싸기이 둘 다 모드를 바꾼 뒤에 수정해야 하는 불편함이 있습니다. 좀 더 쉽게 사용할 수 있는 방법이 있을까 해서 찾아보다가 모드의 변환 없이 기본모드에서도 백틱(')을 활용한 인라인 코드를 사용하는 방법이 있어서 정리해 보도록 하겠습니다. 적용하기방법은 아주 간단합니다 블로그 관리> 스킨 편집에 들어가서 HTML 편집으로 들어간 후 아래 자바스크립트 코드를 복사하여    태그를 찾고(Ctrl + F)  바로 위에 복사한 코드를 붙여 넣어준 후 저장해 주면 끝입니다.  여기까지 완료하고 저장하면 인라인 코드를 기본모드에서도 `백틱`을 사용해서 적용할 수 있습니다!코드 내용 자세히..

AWS EC2에 HTTPS 적용하기(1)친구와 간단한 프로젝트를 마치고 배포까지 완료하고 연동을 확인해 보던 중 문제 발생했습니다.크롬 개발자 모드 콘솔에 찍여있는 오류인데 react는 서버는 https이고 백엔드 서버인 ec2서버는 httjueun275.tistory.com 앞에서 도메인 구매, 도메인 인증, 인증서 발급 및 적용을 완료했습니다.2편에서는 로드 밸런서 설정을 완료한 후에 HTTPS 요청이 내부적으로 어떻게 처리되는지 까지 알아보겠습니다. 순서1. 도메인 구매2. 도메인 인증 3. 인증서 발급 및 적용4. 타겟 그룹 설정5. 로드 밸런서 설정 6. 번외) HTTPS 요청 흐름 들어가기 전에 1 (로드 밸런서란)로드 밸런서와 타겟 그룹에 대해 간단하게 정리하고 가겠습니다. 로드 밸런서란 로..

친구와 간단한 프로젝트를 마치고 배포까지 완료하고 연동을 확인해 보던 중 문제 발생했습니다.크롬 개발자 모드 콘솔에 찍여있는 오류인데 react는 서버는 https이고 백엔드 서버인 ec2서버는 http라서 발생하는 문제인 거 같아 보입니다. 이 문제를 해결하기 위해서는  ec2 서버에도 https를 적용시켜야 합니다.  http와 https에 대해서는 다른 글에서 따로 정리하겠습니다.  https 연결 Flowhttps 연결을 위한 flow입니다 로드밸런서를 이용한 방식으로 클라이언트가 https로 로드밸런서와 통신을 하고  로드밸런서와 api를 제공하는 주체는 http로 통신하는 방법입니다. 준비물 및 순서ec2 서버와 도메인이 필요합니다.(4번과 5번은 2편에서 정리할 예정입니다) 1. 도메인 구매..