분류 전체보기

✅ JWT(JSON Web Token)란?인증에 필요한 정보들을 암호화 시킨 JSON토큰따라서 JWT를 이용한 인증은 유저를 인증하고 식별하기 위한 Token 기반 인증이다.JWT 구성요소JWT는 헤더(header), 페이로드(payload), 서명(signature) 세 파트로 나뉘며 아래와 같은 형태로 구성 헤더 (Header)어떤 종류의 토큰인지, 어떤 알고리즘으로 Sign할지 정의하는 부분.alg : 서명 암호화 알고리즘typ : 토큰 유형정보 (Payload)서버에서 활용할 수 있는 사용자의 정보가 담겨 있다.사용자 정보나 접근 권한에 대한 내용을 담을 수 있다.단순 인코딩된 값이 담기기 때문에 민감한 정보는 담지 않도록 주의해야 한다 서명 (Signature) JWT 구조에서 가장 중요한 Si..

XML Sitemap이란?사이트맵은 사이트의 페이지, 동영상 및 기타 파일들에 대한 정보를 제공하는 파일누구한테 제공하냐면 사이트를 읽고 검색 엔진에 보여주는 크롤러에게 제공!사이트맵을 만드는 이유는 크롤러가 내 사이트를 크롤링하기 전에 어떤 페이지와 어떤 컨텐츠가 있는지 요약 정보를 제공해 줌으로써 좀 더 효율적인 크롤링을 가능하게 해 주기 때문구글 공식 문서에 따른 사이트맵이 필요한 경우**사이트의 규모가 큰 경우만든지 얼마 안 됐거나 외부 링크가 적은 경우페이지 간 연결이 잘 안 되어있거나 개별적으로 존재하는 페이지가 많은 경우비디오나 이미지처럼 미디어 컨텐츠가 많거나 구글 뉴스에 나온 경우사이트맵이 잘 작성되어 있는 경우 크롤링이나 검색 순위에도 영향이 있다고 하니 검색 노출이 중요한 웹사이트라면..

추가하고자 하는 기능전환 추적 코드 삽입전환 추적 코드란? https://www.daangn.com/wv/faqs/10916 에러 상황웹 사이트에 전환 추적 코드의 웹 스크립트를 삽입하려 하니 다음과 같은 에러가 발생했다.  오류 원인Next.js에서는 최고의 퍼포먼스를 위해 태그 대신 next/head의 태그 사용하라고 한다.해당 태그는 1. 렌더링을 차단하는 리소스를 피하고2. 브라우저 기능을 활용하며3. 스크립트가 효율적으로 로드되도록 보장한다.이를 따르지 않으면 로딩 시강니 느려지고 프레임워크의 성능 이점이 사라질 수 있기 때문.그냥 를 사용하게 되면 소스를 로드하는 동안 HTML파싱이 중지되기 때문에 사용자 경험이 저하된다.  오류 해결 방법next/script의 태그를 사용했다.또한 js파일을..

사이트 간 요청 위조사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)을 특정 웹사이트에 요청하게 하는 공격 방식CSRF 전제 조건사용자가 보안이 취약한 서버로부터 이미 인증을 받은 상태쿠키 기반으로 서버 세션 정보를 획득할 수 있어야함공격자는 서버를 공격하기 위한 요청 방법에 대해 미리 파악하고 있어야 함. 예상치 못한 파라미터가 있으면 불가능CSRF 공격 과정사용자는 보안이 취약한 서버에 로그인.로그인 이후 서버에 저장된 세션 정보를 사용할 수 있는 sessionID가 사용자 브라우저 쿠키에 저장됨.공격자는 서버에 인증된 브라우저의 사용자가 악성 스크립트 페이지를 누르도록 유도.해당 악성 스크립트가 담긴 페이지를 클릭하도록 유도하는 방법은 다양한 것 같으나 몇 가지 유형을..

웹 해킹 공격 방법 중 하나게시판이나 웹 메일 등에 자바스크립트와 같은 악성 스크립트 코드를 삽입 해 개발자가 고려하지 않은 기능이 작동하게 하는 공격클라이언트, 사용자를 대상으로 한 공격이 취약점은 웹 어플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타남이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅Reflected XSS , Stored XSS , DOM based XSS 3가지 종류Reflected XSS(반사형 XSS)악의적인 사용자가 악성 스크립트가 담긴 URL을 만들어 일반 사용자에게 전달하는 경우악의적인 사용자가 보안이..

회사에서 Next.js로 새 프로젝트를 진행하게 되었다.아토믹 디자인(Atomic Design)을 적용하여 개발하게 되었는데 그에 따른 컬러, 사이즈 등 원자 단위의 요소들을 설정해야 했다.  Next.js에서 제공하는 스타일링 방식을 하나씩 따져보고 프로젝트에 무엇이 더 적합한지 정하고자 한다.  Styling 방식들Next.js에서는 아래 4가지 방식의 스타일링 방식을 제공한다.  CSS Modules(feat. scss)CSS모듈은 말 그대로 CSS를 모듈화해서 관리하는 방식이다.정의한 CSS클래스마다 자동으로 고유한 class name을 생성해서 해당 class를 로컬 스코프로 제한함으로서 중복 naming 충돌을 방지해준다. 따라서 모듈 간에 동일한 class name으로 중복될 걱정이 없고, ..

프론트엔드 개발자로서 면접보러 다닐 때 자주 들었던 질문들이 있다. 1. 해당 프로젝트에서 사용한 디자인 패턴이 있으신가요? 2. 지금까지 사용했었던 아키텍처 구조에 대해서 설명해주세요. 질문 방향성은 조금씩 달랐지만 요약하자면 저 2가지 였다. 여기서 궁금한 점은 디자인 패턴과 아키텍처 구조란 도대체 무엇인가? 둘이 비슷하면서도 다른 것 같은데 용어 정의가 확실하지 않았다. 그래서 지금 확실히 정리하고 넘어가려고 한다! 정의 아키텍처 패턴이란? - 소프트웨어 시스템의 설계와 구조를 패턴화 한 것 - 이러한 패턴은 다양한 문제를 해결하기 위한 재사용 가능한 해결책 - 시스템을 효율적으로 설계하고 관리하는데 도움이 됨 ex) MVC (Model-View-Controller), MVVM (Model-View..

구현하려는 기능 위치 정보를 담은 배열값이 들어오면 해당 position들을 카카오맵에 마커로 찍어 표시하기 에러 상황 카카오맵 지도 화면에 렌더링은 되었지만(200) 흰 화면만 노출함 문제 해결 과정 1. 혹시 잘못 적은 코드가 있을 까 documentaion만 100번 본 듯...하지만 문제 없었음. 2. 좌표 값이 해외면 카카오 지도가 흰 화면을 노출한다는 글을 읽고 전 부 위도, 경도 값 위치를 조회함 3. 어이없게도 해외는 아닌, 아예 잘못된 위도 경도 값이 들어가 있어서 발생한 문제 였음....프론트 코드를 고칠 일도 아니었음! 해결 방안 1. 잘못된 위도,경도 값을 가진 data를 db에서 삭제 2. 프론트 쪽에도 위도, 경도 값이 정상인지 체크하는 함수를 만들어 정상인 값만 마커를 찍도록 ..

이번 2차 프로젝트를 진행하면서 유의했던 점은 바로바로바로......휴먼에러..즉 오타였다. 불편했던 점 react-router-dom에서 path입력시 평소에는 수동으로 string값을 입력했었다. path="/login" 이런식으로! function App() { return ( ); } 하지만 다른 팀원들과 같이 협업해서 작업하다보니 실수하는 경우가 생겼다. 어떤분은 mypage를 myPage라고 쓰는 경우가 있고,,, 또 path이름을 변경 시 이에 관련된 다른 코드들 (ex, navigate)에 쓰여진 path들도 일일이 찾아 변경해줘야 한다는 점이다. 이 path 문제 외에도 react-query key라던지, recooil의 key들도 수동으로 쓰이고 있어 추후 문제가 될 여지가 보였다. 특..

https://dana-dev.tistory.com/entry/%EB%AA%B0%EB%9E%90%EB%8D%98-useEffect%EC%9D%98-%EC%8B%A4%ED%96%89%EC%88%9C%EC%84%9Cfeat-%EC%9C%A0%EC%A0%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EB%AC%B4-%ED%8C%90%EB%8B%A8 몰랐던 useEffect의 실행순서(feat 유저 로그인 유무 판단) 현재 로직 import { useCallback, useEffect, useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import { useCheckLoginQuery } from '../p..