code를 헤엄치는 인어공쭈

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

브라우저가 웹 페이지를 표시하는 과정은 네트워크 관점과 렌더링 관점에서 나눠서 설명할 수 있다.  네트워크 관점에서는 브라우저가 서버로부터 필요한 리소스를 요청하고 다운로드하는 과정렌더링 관점에서는 다운로드한 리소스를 사용해 브라우저가 화면에 웹 페이지를 그리는 과정 네트워크 관점웹 페이지를 로드하는 과정은 브라우저가 서버로부터 필요한 리소스를 다운로드하는 네트워크 통신 단계입니다. 주요 단계는 다음과 같습니다:1) URL 입력 및 DNS 조회사용자가 웹 브라우저 주소창에 URL을 입력하면, 브라우저는 먼저 DNS 조회를 통해 해당 URL의 도메인 이름을 IP 주소로 변환합니다. 이 IP 주소는 웹 서버가 위치한 곳을 나타냅니다.2) TCP 연결 및 SSL 핸드셰이크브라우저는 서버와 TCP 연결을 맺습니..

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..

Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, JavaScript 애플리케이션의 품질을 유지하고 개선하는 데 도움이 된다. 자 이제 한번 사용방법을 알아보자. 1. Jest 설치npm install --save-dev jest 2. 테스트 파일 생성Jest 테스트 파일은 일반적으로 .test.js 또는 .spec.js 확장자를 사용// example.test.jstest('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3);}); 3. 테스트 실행npx jest 4. 테스트 작성test('2와 2는 같아야 합니다', () => { expect(2).toBe(2);});test('3과 5는 같지 않아야 합니다', () => {..

1. 클래스 필드 - 속성/메소드 앞에 '#'을 붙이면 private filed가 된다. - static 메소드를 가질 수 있다. 2. in 을 사용한 프라이빗 필드 체크 3. 정규식 플래그 d 4. await 호출하기 - async함수가 없어도 await를 사용할 수 있게 됨 5. .at() 매서드 추가 - at()안의 숫자로도 접근할 수 있게 됨 - 마이너스로 뒤에서부터 요소를 조회할 수 있음 6. Object.hasOwn() 추가 - 기존 오브젝트뿐만 아니라 다른 프로퍼티에서도 사용가능 7. Error.prototype.cause - 에러의 더 상세한 원인을 기술할 수 있음 자세한 특징 설명은 아래 참조 https://yozm.wishket.com/magazine/detail/1570/