ENN

gcp 인스턴스 생성 및 도커 컨테이너 실행까지 마쳤는데 설정된 백엔드 포트(8080)에 연결이 되지 않는 문제가 발생 tcping 명령어로 확인해보니 아무런 응답이 오지 않음 -> 요청이 filtering된 것으로 예상 따라서 port를 open | closed로 설정해야함 먼저 google cloud platform console 접속 -> vpc 네트워크 -> 방화벽 실행 들어가면 default-allow-... 이런식으로 기본적인 내용들만 작성이 되어있기 때문에 우리가 원하는 포트로 접근할 수 있도록 방화벽을 구성하는 규칙을 만들어야함 방화벽 규칙 만들기에 들어가서 이름 작성 후 아래의 사진과 같이 규칙 세팅 위와 같이 동일한 설정을 한 뒤 포트 번호는 자신이 요청하고자 하는 번호를 입력, 만들기..

Single Page Application(SPA) 싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 매번 불러오지 않고, 현재의 페이지를 동적으로 작동하게 함으로써 사용자에게 웹사이트를 제공하는 것을 말한다. Multi Page Application(MPA) 웹사이트의 인터렉션이 발생할 때마다 서버로부터 새로운 페이지를 불러와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹사이트 제공 방식을 말한다. - 전통적인 MPA는 새로운 페이지 요청 시마다 리소스를 다운로드하고, 전체 페이지를 다시 렌더링하기 때문에 비효율적이다. 그렇기 때문에 최근에는 리렌더링이 필요하지 않고 효율적인 SPA를 많이 사용한다. SPA는 웹사이트에 필요한 모든 정적 요소를 처음 불러올때 한번만 다운로드한다. ..

JWT(JSON Web Token)란 인증에 필요한 정보들을 암호화시킨 JSON 토큰을 의미한다. 그리고 JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식이다 JwtFilter.java @RequiredArgsConstructor public class JwtFilter extends OncePerRequestFilter { public static final String AUTHORIZATION_HEADER = "Authorization"; public static final String BEARER_PREFIX = "Bearer"; private final TokenProvider tokenProvider; private String r..

Web Server란? client-web server-WAS-database 이때 Nginx가 web server에 해당 web server : 단순히 정적 파일을 응답 WAS : 클라이언트 요청에 대해 동적인 처리가 이뤄진 후 응답 웹서버를 별도로 운영하는 이유? WAS의 부담을 줄여주기 위해 Nginx의 장점 빠르다 reverse proxy로 사용 가능 load balancing 기능 caching server 기능 보안 효과 SSL 지원 (https://) 웹페이지 접근 인증 압축 비동기 처리 Nginx 사용하기 기본 설정 및 커맨드 $ sudo apt-get update $ sudo apt-get upgrade -y $ sudo apt-get install nginx $ sudo service ..

ENN 블로그 포스팅 중에 Docker에 대한 간단한 설명을 담은 포스팅이 이미 존재한다. 따라서 기존 글과 차별화될 수 있도록 해당 글에서는 Docker를 전혀 모르는 이들도 이해하고 사용할 수 있도록 원론적인 설명부터, 코드 중심의 실용적인 내용까지 폭넓게 담았다. 기본 용어 정리 이미지 특정 프로세스를 실행하기위해 필요한 모든 설정값들은 포함한 캡쳐본 같은 존재 서비스 운영에 필요한 서버 프로그램, 코드, 라이브러리, 컴파일된 실행 파일 등을 모두 포함한다. 컨테이너 이미지를 실행한 상태 응용 프로그램의 종속성과 함께 응용프로그램 자체를 패키징, 캡슐화 하여 격리된 공간에서 프로세스를 동작시키는 기술 가상컴퓨팅과 docker의 차이 가상컴퓨팅은 한 물리적 컴퓨터 안에서 물리적 자원을 나눠서 쓴다. ..

useSelector는 useEffect내에서 사용할 수 없다. 다음과 같은 오류가 발생할 것이다. "useSelector" cannot be called inside a callback. 그러나 useSelector로 택한 값으로 초기 설정을 하고 싶은 경우가 발생한다. 이럴 때는 어떻게 해야 할까? const selectorData = useSelector(...); const [data, setData] = useState(selectorData); useEffect(() => { setData(selectorData) }, [selectorData]) 위와 같이 useState를 사용하면 간단히 해결된다. 하지만 이렇게 해도 해결되지 않는 경우가 생긴다. 'selectorData'가 'data'의..

useState로 상태를 관리하면, 렌더링이 계속 발생하므로, 비효율적이고 코드를 짜기가 어려워진다. useRef를 사용하면, 현재 저장하고 싶은 값을 re-rendering없이 저장할 수 있다. const refOject=useRef(initialValue); useRef란? .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다. useRef를 언제 사용하는지? 1. 특정 DOM 선택하기 - 리액트에서는 DOM을 선택할 때 ref를 사용합니다. 함수형 컴포넌트에서 ref를 사용할 때는 u..

포트 번호란? 인터넷의 전송 제어 프로토콜(TCP)이나 사용자 데이터그램 프로토콜(UDP)에서 애플리케이션이 상호 통신을 위해 사용하는 번호이다. ex) http : 80 https : 443 mysql : 3306 oracle : 1521 / 8080 tomcat : 8080 (오라클과의 포트 충돌로 인해 8090 등으로 자주 변경하여 사용한다.) 프로젝트를 실행하면 현재의 port number를 확인할 수 있다. 톰캣으로 인해 8080 포트를 사용하고 있다. Spring의 서버 포트는 src/main/resources 폴더 아래의 application.properties 파일에서 관리한다. 서버의 포트를 변경하려면 application.properties에 설정을 추가하면 된다. server.port..