code를 헤엄치는 인어공쭈

Angular - 뒤로 가기 방지 관련 이슈 및 해결 방법 (history)

문제 개요기존 코드에서 발생한 문제는 다음과 같다:모달이 열려 있을 때 뒤로 가기 버튼을 누르면 페이지가 이동되는 문제사용자가 뒤로 가기 버튼을 누르면 모달이 닫히기만 하고 페이지가 이동되지 않도록 해야 한다.Angular ngOnDestroy가 호출되지 않음모달을 단순히 CSS로 보이고 숨기는 방식으로 구현해 Angular 컴포넌트가 DOM에서 완전히 제거되지 않기 때문에, 리소스 해제를 위한 ngOnDestroy 호출이 이루어지지 않음.해결 접근 방식모달 열림 시 history.pushState로 히스토리 추가모달이 열릴 때마다 history.pushState로 현재 페이지를 히스토리에 추가해 히스토리 스택을 쌓음. 이렇게 하면 뒤로 가기 버튼을 누를 때 페이지 이동 없이 popstate 이벤트가 발..

오늘은 Coursera에서 제공하는 Technical Support Fundamentals 코스에 대해 소개하려고 한다.이 코스는 IT 지원 업무에 필요한 기초 지식을 제공하는 입문 과정으로, 구글이 주관하는 IT 지원 전문가 자격증 프로그램의 첫 번째 과정이다. 이 과정은 IT 기술자로서의 첫걸음을 떼는 데 필요한 핵심 개념들을 다루고 있다.아래 주소에서 강의를 직접 확인할 수 있다. 자 한번 배운것을 정리해보자~! https://www.coursera.org/professional-certificates/google-it-support?action=enroll Google IT 지원Google에서 제공합니다. IT 분야에서 빠르게 커리어를 쌓으세요. 이 자격증 프로그램에서는 수요가 많은 기술을 배우고..

프론트 개발자로써 웹사이트 보안에 있어서 어떤걸 방지하고 미리 대응하면 좋을까?대부분 이슈는 서버나 백엔드쪽에서 보안유지를 하고 있는데 프론트에선 어떤걸 사전 방지 하면 좋을지 생각해보았다.  1. 입력값 검증 (Input Validation) 예시 문제: 사용자가 웹 사이트의 입력 필드(검색, 회원가입 등)에 악의적인 코드를 입력할 경우, 예상치 못한 동작이나 페이지가 깨지는 현상이 발생할 수 있다.해결 방법: 사용자가 입력한 데이터가 문자열이 맞는지, 특정 길이를 초과하지 않는지, 특수문자가 포함되지 않는지 등을 검증하는 로직을 추가한다. 2. XSS (Cross-Site Scripting) 방지예시 문제: 사용자가 작성한 댓글에 같은 코드를 입력하면, 그 페이지에 접속한 다른 사용자에게 악성 스크..

최근에 Next 프로젝트를 회사에서 설치를 했었는데 에러가 계속 떠서 새로 만들기를 몇번을 반복했었다. 그러다가 결국 찾은 문제는 Node 관련된 문제였던거 같다. 따라서 이번에는 관련된 NODE_OPTIONS 을 한번 살펴보려고 한다. Node.js를 사용하다 보면 간혹 기존 환경에서 잘 동작하던 코드가 새로운 Node.js 버전에서 갑자기 오류를 일으키는 경우가 있다. 이는 대부분 Node.js가 내부적으로 사용하는 라이브러리의 버전 변경이나 보안 정책의 강화로 인해 발생하는 문제이다. 이때 개발자가 이러한 변경 사항에 대응하기 위해 알아두어야 할 환경 변수 중 하나가 바로 NODE_OPTIONS이다.NODE_OPTIONS는 Node.js의 다양한 옵션을 환경 변수로 설정하여 프로세스 전체에 적용할 ..

이번 글에서는 타입스크립트의 고급 기능들과 중요한 개념들을 소개하고, 다양한 키워드와 기능들이 실제로 어떻게 사용되는지 알아보자. 한정된 다형성한정된 다형성(Constrained Polymorphism)은 타입스크립트에서 제네릭을 사용할 때 특정 타입만 허용하는 기능을 말한다. 예를 들어, T extends U와 같은 형태로 작성하여, 제네릭 타입 T가 반드시 U 타입의 하위 타입이어야 함을 나타낼 수 있다. 이를 통해 제네릭을 사용하는 코드의 유연성과 안전성을 동시에 보장할 수 있으며, 특정 조건을 만족하는 타입만을 받도록 제한함으로써, 잘못된 타입 사용으로 인한 오류를 방지할 수 있다.function identity(value: T): T { return value;} 위 코드에서 identit..

나는 모든 프로젝트를 타입스크립트를 기반으로 개발을 하고 있다.따라서 이번엔 타입스크립트에서 대해서 알아보도록 하자.!!  타입스크립트의 개념타입스크립트(TypeScript)는 마이크로소프트가 개발한 자바스크립트의 상위 확장 언어이다. 주된 특징은 정적 타입(Static Type) 검사와 최신 자바스크립트 기능을 사용할 수 있게 해주는 것이다. 자바스크립트의 단점을 보완하고, 대규모 애플리케이션을 개발할 때 코드의 가독성과 안정성을 높이기 위해 등장하였다.타입스크립트가 등장하게 된 배경자바스크립트는 웹 개발에서 널리 사용되는 언어로, 유연성과 쉬운 사용성 덕분에 인기를 얻었다. 하지만 프로젝트의 규모가 커질수록 코드의 복잡도가 증가하고, 타입 검사와 같은 기본적인 기능이 부재하여 런타임 에러가 발생할 확..

프로그래밍의 3대 원칙은 효율적이고 유지보수하기 쉬운 코드를 작성하는 데 도움이 되는 중요한 개념이다. 여기에는 YAGNI, KISS, DRY 원칙이 포함되며, 각각은 개발자가 복잡성을 줄이고, 유지보수성을 높이며, 불필요한 코드를 제거하는 데 중점을 둔다.1. YAGNI (You Aren't Gonna Need It) 원칙YAGNI 원칙은 "현재 필요하지 않은 기능을 미리 구현하지 말라"는 의미를 담고 있다. 개발자는 미래의 요구사항을 예측하여 미리 기능을 추가하려는 경향이 있을 수 있지만, YAGNI 원칙은 현재 필요하지 않은 기능을 구현하는 것이 시간 낭비가 될 수 있음을 강조한다. 미래에 필요할지 여부를 확신할 수 없는 상황에서 코드를 미리 작성하는 것은 불필요하게 복잡도를 높일 뿐만 아니라, 코..

프레임워크의 정의란 무엇일까?프레임워크(Framework)는 소프트웨어 개발에서 일종의 뼈대 또는 기본 구조를 제공하는 소프트웨어 플랫폼이다. 프레임워크는 특정한 문제를 해결하기 위한 구조와 패턴을 미리 정의해 두어 개발자가 효율적으로 코드를 작성할 수 있도록 돕는다. 이를 통해 코드 재사용성과 유지보수성을 높일 수 있으며, 개발자는 특정 기능을 구현하는 데 집중할 수 있다. 대표적인 예로는 Angular, Next, Spring 등이 있다.프레임워크는 일반적으로 제어 역전(Inversion of Control, IoC) 원칙을 따르며, 개발자가 프레임워크 안에서 제공하는 규칙에 따라 코드를 작성한다. 즉, 프레임워크가 코드의 흐름을 결정하며, 개발자는 필요한 부분을 확장하거나 수정하는 방식이다.라이브러..

디자인 패턴이란?디자인 패턴(Design Pattern)은 소프트웨어 설계에서 자주 발생하는 문제들을 해결하기 위한 일반적인 해결책이다. 즉, 특정 문제 상황에서 재사용할 수 있는 코드 구조나 설계 방법을 말한다. 디자인 패턴은 코드를 구조화하고 유지보수를 쉽게 하며, 프로그램의 확장성을 높이는 데 도움을 준다. 자주 사용되는 해결책들을 패턴화하여, 개발자가 비슷한 상황에 직면했을 때 효율적으로 문제를 해결할 수 있게 도와준다. 디자인 패턴의 종류:생성 패턴: 객체 생성과 관련된 패턴구조 패턴: 클래스와 객체 사이의 관계를 정의하는 패턴행위 패턴: 객체 간의 상호작용을 정의하는 패턴 디자인 패턴은 어떤 상황에 사용될까?디자인 패턴은 반복적인 문제나 유사한 설계 요구가 있을 때 적용된다. 예를 들어, 효율..

자바스크립트는 객체지향적 성격과 함수형 프로그래밍의 요소를 모두 담고 있는 언어다. 이러한 특징을 이해하려면 자바스크립트의 객체, 프로토타입 기반 상속, 클래스, 그리고 비동기 처리의 작동 방식을 잘 알아야 한다. 이 포스트에서는 객체, 프로토타입, 클래스 기반 객체지향 프로그래밍, 비동기 처리, 이터러블, 이벤트의 핵심 개념들을 통합적으로 설명해보겠다. 객체와 인스턴스: 객체지향의 출발점객체는 자바스크립트에서 데이터와 함수의 집합으로, 프로퍼티(속성)와 메서드(동작)를 포함하는 독립적인 엔티티다. 객체는 단순한 키-값 쌍으로 표현될 수 있으며, 함수처럼 더 복잡한 구조를 가질 수도 있다. 객체가 생성자 함수나 클래스를 통해 만들어진 경우, 그 결과로 생성된 개별 객체를 인스턴스라고 부른다.   프로토타..