code를 헤엄치는 인어공쭈

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

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

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

https://angular-maps.com/ Angular Google Maps Components angular-maps.com위에서 많은 참고 바람 네이버 지도를 사용하다가 해외 지도가 필요해서 구글맵도 사용하게되었다.네이버 지도 사용방법은 다음시간에 한번 다뤄보겠다. 네이버 지도는 해외 지도를 제공안한다고 한다. 처음엔 뭔가 되는것 같아 보였는데 버그가 하도 많아서 됐다 안됐다 하는거 보고 찾아보고 문의도 해보니깐 지원을 안한다는 날벼락 같은 소리..! 왜 그걸 못봤지...  구글맵은 이전에도 사용해본 경험이 있어서 적용하는데 크게 어렵진 않았다. 사실 apiKey 만 발급받으면 거의 끝!https://developers.google.com/maps/documentation/javascript/g..

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위에서 많은 참고 바람 이번에 내가 프로젝트에서 사용한 방법은 가장 나에게 익숙한 CDN link 삽입 방법으로 진행했다.install 하는건 버전 때문에 웬만하면 거부감이 드는 맘..위에 사이트에 친절하게 다 나와있긴한데 DOCS 에 대한 부담이 있을수 있으니 간단히 사용법 부터 설명해보겠다. 사용법1) Use Swiper from CDN (주로 index.h..

문제설명)코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 착용한 경우에는 서로 다른 방법으로 옷을 착용한 것으로 계산합니다.코니는 하루에 최소 한 개의 의상은 입습니다. 문제풀이)저번에 풀었던 문제와 비슷하게 느껴져서 map.set 을 사용하면 좋을거 같다고 생각이 들었다.데이터를 처음에 맵에 넣어두고 이렇게 저렇게 다양한 시도를 해본 끝에 탄생먼저 데이터를 담을 맵을 생성옷갯수대로 포문을 돌리고 카테고리 중복 체크를 하기위해 +1 를 더한다그럼 맵안에 {옷 : 2, 모자 :1} 이런식으로 세팅이 된다따라서 맵을 다시 포문..

예전에 이커머스 면접을 봤었는데 어딘지는 비밀이지만 60명 규모의 10년차이상된 나름 탄탄한 기업이었다.이전에도 한두번 면접 본적이 있는데 크게 다르지 않았다. 면접 보다 보면 다 거기서 거기임. 그래서 몇번 해보면 감 잡을듯? 참고로 본인은 N년차 경력직 고인물임. 1. 1분 자기 소개(필수)이건 안하는곳이 없는듯? 자연스럽게 1분 안쪽으로 얘기해라 1분 가까이 하거나 넘지말것 루즈해짐 노잼임자기의 강점과 경험 경력 위주로 설명하는게 좋음. 2. 최근에 해결한 기술적인 문제경력직이면 무조건임, 이것도 안하는곳 딱 1군데봄. 기술적으로 해결한거 두가지정도 준비해가면 좋을듯?어줍잖은거 얘기하지말기! (ex. 버그해결 같은거 그건 당연하거임)  3. 호이스팅과 const, let var 기술면접의 기초, 호..

메타 태그에서 og:description과 description은 각각 Open Graph 프로토콜과 일반적인 웹 페이지 메타 데이터에 사용되는 태그들이다. 예시를 통해서 한번 알아보자 이거 제대로 작성안해서 네이버 검색엔진에서 빠꾸당한 기억이... og:description 만 적고 아 설명 적었지 하면서 name: description은 안적은 것이다. 그래도 바로 체크해서 반영했다. (바보같았던 그날...) 1) og:description (Open Graph Protocol) 목적: 주로 소셜 미디어 플랫폼에서 공유될 때 사용되는 메타 데이터를 정의한다. 활용: 페이스북, 트위터 등 소셜 미디어에서 링크를 공유할 때 미리보기에 표시되는 설명을 제공. 예시 2) description (일반적인 메타..

방법론 비교와 장단점 1. DevOps (Development + Operations) DevOps는 소프트웨어 개발과 IT 운영 간의 협력과 자동화를 강조하는 문화, 철학, 방법론입니다. 개발과 운영 간의 경계를 허물고 지속적인 통합, 배포, 자동화 등을 통해 소프트웨어 제공 과정을 최적화하는 것이 목표. 장점) 빠른 제공: 지속적인 통합과 배포를 통해 빠른 제품 출시 가능. 안정성 향상: 자동화된 테스트와 배포로 안정성을 유지. 단점) 문화 변화 필요: 조직 내에서 협력과 자동화에 대한 새로운 문화를 수용해야 함. 기술적 도전: 기존 시스템과의 통합이나 기술적인 도전에 대한 대응이 필요. 예시) Jenkins, GitLab CI/CD 등의 도구를 활용하여 지속적 통합 및 배포 파이프라인을 구성. In..

Cypress 소개 Cypress는 강력한 엔드 투 엔드(E2E) 테스트 도구로, 사용자 경험을 시뮬레이트하고 테스트하는 데 특히 용이합니다. 다양한 기능과 직관적인 사용자 인터페이스로 프론트엔드 테스트를 쉽게 작성하고 유지보수할 수 있습니다. npm install --save-dev cypress 테스트 작성 // 예시 테스트 파일 (cypress/integration/sample.spec.js) describe('테스트 예제', () => { it('홈페이지 방문', () => { cy.visit('/'); cy.contains('환영합니다!'); // 페이지에 '환영합니다!' 텍스트가 있는지 확인 }); it('로그인', () => { cy.visit('/login'); cy.get('input[n..

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..