Amplify는 사용자에게 빠른 개발 및 배포 프로세스를 제공하지만 AWS WAF가 직접 통합되지 않기 때문에 AWS Amplify에서 호스팅하는 많은 웹 애플리케이션에는 방화벽이 연결되어 있지 않다. 웹 방화벽(WAf: Web Application Firewall) 웹 애플리케이션으로 이동하는 악의적인 HTTP/S 트래픽을 필터링, 모니터링 및 ...

❗ 문제 상황 어느날 갑자기 로그인 후 메인 페이지로 넘어가는데 계속 로딩이 뜨더니 에러가 발생하였다. 처음에 에러로 예상한 부분은 두가지였다. 로그인 기능 문제 호스팅 서비스 문제 먼저 1의 로그인 기능을 확인해 보았다. 로그인 기능은 AWS의 Congnito 서비스를 이용하였고 확인 결과 토큰이 쿠키에 잘 저장되어...

자바스크립트는 동적으로 타입을 결정하는 언어로, 변수를 선언할 때 타입을 명시하지 않는다. 이러한 특성 때문에 자바스크립트는 원시타입과 참조타입 두 가지 종류의 데이터 타입을 제공한다. 원시, 참조 타입 1. 원시 타입(Primitive Type) 1. 원시 타입 종류 숫자(number) 문자열(stri...

Javascript와 Proptotype JavaScript 객체 지향 언어이다. 객체지향언어로는 java, python, rudy등이 있는데 객체지향에서 빠질 수 없는 개념은 class다. Class를 통해 상속받아 코드를 재활용할 수 있다. 하지만 javascript에는 클래스 개념이 존재하지 않아 prototype을 기반으로 상...

자료구조란 컴퓨터가 데이터를 효율적으로 구성, 저장하고, 처리, 조작을 하기 위한 방법을 의미한다. 예를 들어, 만약에 우리가 숫자를 컴퓨터에 저장하려고 한다면, 자료구조를 사용해서 이 숫자를 어떤 방식으로 저장하고 처리할지를 정할 수 있다. 자료구조의 종류에는 대표적으로 배열(Array), 링크드 리스트(Linked List), 스택(Stack)...

Next.js 프레임워크의 동작원리에서 Hydrate는 중요한 개념이다. Next.js는 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 오픈 소스 웹 개발 프레임워크로 React(CSR)의 단점을 보안하기 위해 같이 사용되곤 한다. Hydrate를 이해하기 위해 먼저 React(CSR)와 Nex...

Report 페이지 기능 1. 선택한 파일에서 진행한 분석 종류를 select로 선택할 수 있다. 초기값 = Preprocess 2. select에서 선택한 분석 종류의 결과지를 보여준다. 분석 종류가 변경될 때마다 각 분석에 해당하는 결과지를 가져와야 한다. 🖥️ 적용 화면 Report 페이...

예전에는 프론트엔드가 복잡하지 않아 프론트엔드 테스트를 잘 진행하지 않았다. 그러나 프론트엔드의 중요성이 강조되고, 백엔드의 다양한 기능들이 프론트엔드로 옮겨오면서 프론트엔드가 점점 더 중요해지고, 프론트엔드를 관리 할 필요성이 생기기 시작했다. 이렇게 프론트엔드 관리와, 프론트엔드 코드의 퀄리티의 중요성이 대두 되면서 프론트엔드 테스팅도 같이 주...