문제 상황총 4개의 테이블과 관련 있는 데이터를 뽑아야 하는 상황이다.JPA만을 이용해서 14건의 쿼리가 나가던 것을 MyBatis로 직접 JOIN 쿼리를 작성해서 2건으로 줄였다. 문제 원인 Blog main 화면에 게시글(post) 정보를 나타내야 하는데, 여러 가지 이유로 post_tag와 tag 엔티티를 나눠놨고, member 테이블의 데이터를 하나의 DTO에 담아야 하는 상황이다. DB 설계에 문제가 있을 수도 있고, 비즈니스 요구사항과 정규화를 위해 어쩔 수 없는 것일 수도 있다.이 프로젝트 설계할 당시에는 관련 지식이 거의 없었고, 감으로 설계했다...MongoDB 도입처음엔 쿼리가 너무 많이 나가서, 해당 DTO 조회만을 위한 데이터를 테이블로 빼서 MongoDB Document로 저장..
포트(Port)Port는 운영체제 통신에서의 네트워크 연결이 시작되고 끝나는 논리적인 접속 지점을 말한다. 보통 http://192.168.1.1:8080과 같이 프로토콜/호스트/포트로 구분되어 도메인이 정의된다. 여기서 192.168.1.1와 같은 IP 주소가 컴퓨터 또는 네트워크 장치 등을 식별하는 것이라면, 포트 번호는 해당 컴퓨터 내의 특정 응용 프로그램을 식별한다.데이터를 송수신할 때, DataLink 계층에서 호스트의 NIC(Network Interface Card, LAN 카드)로 MAC 주소를 판별하고,Network 계층에서 IP 주소로 목적지를 판별한다.MAC 주소와 IP 주소로 목적지 호스트까지 도달한 뒤에는 어떤 응용프로그램 또는 프로세스로 접근할지를 알아야 하는데, 이때 쓰이는 것이..
방화벽이란?방화벽(Firewall)은 네트워크 보안 시스템이다. 미리 정의된 보안 규칙에 따라 들어오고 나가는 네트워크 트래픽을 모니터링하고 제어하는 장치 또는 소프트웨어이다. 불법 접근, 악의적 접근, 트래픽 낭비 등을 방지하기 위해 사용된다. 방화벽은 트래픽 필터링, 네트워크 세분화, 감시 및 로깅, 인증, 프라이버시 보호 등의 여러 가지 기능을 한다.이중 인바운드 규칙, 아웃바운드 규칙은 트래픽 필터링 기능에 포함된다. 트래픽 필터링(접근 제어)트래픽 필터링이란 방화벽이 네트워크를 통해 주고받는 데이터 패킷을 검사하고 제어하는 것을 말한다.방화벽이 허용한 트래픽만 네트워크로 들어오거나 나갈 수 있도록 한다.트래픽 필터링 방식 중 패킷 필터링 방식은 데이터 패킷의 헤더 정보를 분석하여 트래픽을 허용/..
Nuxt.js는 Vue.js를 이용한 프론트엔드 개발을 더욱 편리해주는 프레임워크이다.(프레임워크 위에서 동작하는 프레임워크)저는 Nuxt.js : Vue.js = Spring Boot : SpringFramework 와 비슷하다고 느꼈습니다. Nuxt 프로젝트를 처음 생성하면 기본적으로 여러 패키지들이 자동으로 생성되는데, 이는 Nuxt에서 사용하는 규칙과 같은 것으로, 각 패키지의 역할이 정해져 있다. 각 패키지에 대해 알아보자. Nuxt 기본 프로젝트 구조.nuxtBuild 결과물assetscss, image, font 당 웹 정적 리소스componentsVue 컴포넌트layouts레이아웃 컴포넌트 (상단, 하단 탭과 같이 모든 페이지에 동일하게 적용되는 레이아웃)들이 위치한다.화면을 띄울 때 가장..
개발환경 세팅개발환경 구성ChromeVSCodeVue.js DevTools (크롬 extention)Node.jsnpmVSCODE extentions파일 아이콘 테마 : Material Icon Theme뷰 확장 플러그인 : Vetur뷰 코드 스니펫 : Vue VSCode Snippets문법 검사 : ESLint, Prettier, ES6 String HTML실습 환경 보조 : Live Server프로젝트 생성원하는 위치에 폴더 하나 만들고, VSCode로 열어서 터미널을 켜주고 아래 명령어를 입력한다.npm init nuxt-app@latest axios 설치npm i axios
CSRFCSRF(Cross Site Request Forgery, 크로스 사이트 요청 위조)는 웹 보안 취약점 중 하나로, 인증된 사용자가 자신의 의지와는 무관하게 웹 애플리케이션에 공격자가 의도한 특정 요청을 보내도록 유도하는 것을 말한다. 제품 구입, 자금 이체, 비밀번호 변경, 기록 삭제 등의 요청을 악의적으로 보내는 것이다. CSRF 공격 예제CSRF 공격을 이해하기 위해 Spring Docs에 좋은 예제가 있어서 가져왔다.https://docs.spring.io/spring-security/reference/features/exploits/csrf.html#csrf(실제로는 여러 가지 보안 제한사항이 있겠지만, 그런 게 없다고 가정하자.) 정상적인 요청 은행 웹 사이트에 로그인 사용자가 다른 계..
위와 같은 에러를 만나본 적이 있을 것이다. 아무런 설정 없이 프론트엔드 서버에서 백엔드 API 서버로 요청을 보냈을 때 발생 할 수 있다. 여기서 "has been blocked by CORS policy"라는 문장이 눈에 띈다. CORS 정책에 의해 blocked 되었고, Access-Control-Allow-Origin header가 없으니까 체크해 보라고 한다.CORS 정책이 무엇이고, 왜 이런 에러가 발생했는지 알아보자. CORS란?CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 한마디로 서버와 동일한 도메인이 아닌, 다른 도메인에서 자원에 접근할 수 있도록 허용하는 것을 말한다.기본적으로 웹 브라우저는 SOP(Same-Origin Policy, 동일 ..
