본문 바로가기

전체 글178

Next.js getServerSideProps 에서 페이지 이동 방법 문제 상황 회원가입시 약관동의 이후 회원 정보 입력 페이지 이동하는 상황에서 약관동의 없이는 회원정보 입력페이지에 접속시 약관동의 페이지로 이동시키려 했다. getServerSideProps 는 페이지가 구성되기전 서버쪽에서 작업을 해주는 함수이므로 기존 클라이언트에서 사용되는 DOM 관련 메서드 나 routing 할 수 있는 메서드 등등 활용 할 수 없다. 만약 페이지 요청시에 들어온 쿼리정보를 토대로 적절여부를 따진 후에 지정된 페이지로 이동시키는 로직을 만들고자 할 때 getServerSideProps 페이지 이동은 제한적이다. (만약 페이지가 로드되고 쿼리정보를 확인해서 넘긴다면 어렵지 않겠지만 비효율적인 방법으로 보인다.) 구글링해서 답을 찾지 못하여 혹시나 해서 chatGPT 에게 답을 구해보.. 2023. 3. 31.
7. HTTP 헤더 - 2 인증 Authorization: 클라이언트 인증 정보를 서버에 전달 WWW-Authenticate: 리소스 접근시 필요한 인증 방법 정의 Authorization 클라이언트 인증 정보를 서버에 전달 Authorization: Basic xxxxxxxxxxxxxxxx WWW-Authenticate 리소스 접근시 필요한 인증 방법 정의 리소스 접근시 필요한 인증 방법 정의 일종의 가이드라인 401 Unauthorized 응답과 함께 사용 WWW-Authenticate: Newauth realm="apps", type=1, title="Login to \"apps\"", Basic realm="simple" 쿠키 Set-Cookie: 서버에서 클라이언트로 쿠키 전달(응답) Cookie: 클라이언트가 서버에서 .. 2023. 3. 23.
6. HTTP 헤더 - 1 HTTP 헤더 header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용) HTTP 전송에 필요한 모든 부가정보 예) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보... 표준 헤더가 많다 필요시 임의의 헤더 추가 가능 HTTP 헤더 RFC2616(과거) 헤더 General 헤더: 메시지 전체에 적용되는 정보, 예) Connection: close Request 헤더: 요청 정보, 예) User-Agent: Mozilla/5.0 (Macintosh; ..) Response 헤더: 응답 정보, 예) Server: Apache Entity 헤더: 엔티티 바디 정보, 예) Content-Type: te.. 2023. 3. 23.
5. HTTP 상태코드 HTTP 상태코드 상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational): 요청이 수신되어 처리중 2xx (Successful): 요청 정상 처리 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 클라이언트가 인식할 수 없는 상태코드를 서버가 반환하면 상위 상태코드로 해석해서 처리함으로써 미래에 새로운 상태 코드가 추가되어도 클라이언트를 변경하지 않아도 되는 장점이 있다. 1xx (Informational) 요청이 수신되어 처리중 ※ 거의 사용하지 않음.. 2023. 3. 22.
4. HTTP 메서드 좋은 URI 설계 가장 중요한 것은 리소스 식별 리소스와 해당 리소스를 대상으로 하는 행위을 분리 리소스: 회원 행위: 조회, 등록, 삭제, 변경 HTTP 메서드 종류 주요메서드 GET: 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT: 리소스를 대체, 해당 리소스가 없으면 생성 PATCH: 리소스 부분 변경 DELETE: 리소스 삭제 기타메서드 HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환 OPTIONS: 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용) CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정 TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 GET 리소스 조회 서버에 전달하고.. 2023. 3. 22.
3. HTTP 란 무엇인가? HTTP HyperText Transfer Protocol 주요내용 모든 것이 HTTP HTTP 역사 기반 프로토콜 HTTP 특징 클라이언트 서버 구조 Stateful, Stateless 비 연결성(connectionless) HTTP 메시지 모든 것이 HTTP HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 HTTP 역사 HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X HTTP/1.0 1996년: 메서드, 헤더 추가 HTTP/1.1 1997년: 가장 많이 사용, 현재 기반이 되는 내용이 많은 가장 중요한 버전 RFC2068 (1997) -> RFC2616 (19.. 2023. 3. 17.
2. URI 와 웹 브라우저 요청 흐름 URI와 웹 브라우저 요청 흐름 주요내용 URI 웹 브라우저 요청 흐름 URI 통합 자원 식별자 (Uniform Resource Identifier) Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URI 로 식별할 수 있는 모든 것(제한 없음) Identifier : 다른 항목과 구분하는데 필요한 정보 "URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다 URL (Uniform Resource Locator) Locator : 리소스가 있는 위치를 지정 URN (Uniform Resource Name) Name : 리소스에 이름을 부여 잘안씀 위치는 변할 수 있지만, 이름은 변하지 않는다. ex) urn:isbn:8960777331 (어떤 책.. 2023. 3. 17.
1. 인터넷 네트워크 인터넷 네트워크 주요내용 인터넷 통신 IP(Internet Protocol) TCP, UDP PORT DNS 인터넷 통신 인터넷 망에 수많은 노드(위성, 해저광케이블, 기타 통신서버 및 장비)들을 거쳐 통신하는 과정 인터넷 프로토콜 스택의 4계층 애플리케이션 계층 - HTTP, FTP 전송 계층 - TCP, UDP 인터넷 계층 - IP 네트워크 인터페이스 계층 프로토콜 계층 IP 인터넷 프로토콜 역할 지정한 IP 주소(IP Address) 에 데이터 전달 패킷(Packet) 이라는 통신 단위로 데이터 전달 IP 패킷정보 출발지 IP, 목적지 IP, 기타... 클라이언트 패킷 전달 서버 패킷 전달 IP 프로토콜의 한계 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 비신뢰성 패킷 소실 .. 2023. 3. 15.
JS DocumentFragment documentFragment DocumentFragment 메모리상에만 존재하는 경량화된 DOM 이다 1. DocumentFragment 를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가됩니다. 2. DocumentFragment 를 DOM 에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리상에 존재하지 않습니다. 주의사항 DocumentFragment 를 appendChild 와 같은 함수로 DOM 에 추가하고 난 후 DocumentFragment 의 자식노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않습니다. 만약 이를 유지 시키고 싶다면 cloneNode 를 통해 복제하는 방법이 있습니다. 참고 https.. 2023. 3. 14.
JS 이벤트 위임 이벤트 위임 (delegate) 이벤트 흐름을 활용하여 이벤트를 발생시키고 싶은 요소를 이벤트 리스너가 설치된 부모 요소의 자식으로 배치하여 단일 이벤트 리스너가 여러개의 이벤트 대상을 처리할 수 있게 하는 프로그래밍을 이벤트 위임이라 한다. 이벤트 리스너의 event 객체에는 돔에서 일어나는 이벤트의 정보가 들어있다 event.currentTarget : 이벤트가 등록된 요소를 의미 this : 이벤트 리스너안의 this 는 event.currentTarget 가 참조하는 대상과 같다 event.target : 이벤트가 최초에 발생한 요소를 의미 generate item initial item 참고 https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B.. 2023. 3. 14.
JS 이벤트 흐름 이벤트 흐름 예시 1. 브라우저 화면에서 이벤트가 발생 2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾아냄 이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아봅니다. 3. 캡처링 단계 최상위 window 객체부터 타겟요소까지 캡처링 단계 의 이벤트 리스너가 등록이 되어 있는지 확인하고 있다면 이벤트를 실행 후 자식요소로 이동 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치 한 요소의 이벤트 리스너를 실행 4. 버블링 단계 캡처링이 끝나고, 최초에 이벤트가 발생했던 타겟요소부터 window 객체까지 버블링 이벤트 리스너가 있다면 실행 후 다음 직계 부모 요소로 이동 참고 https://www.inflearn.com/cou.. 2023. 3. 14.
JS reflow & repaint reflow & repaint Reflow ( 레이아웃 다시 구성 ) 생성된 DOM 노드의 레이아웃 변경 시 영향을 받는 모든 노드(부모, 자식)의 수치를 다시 계산하여 레이아웃 트리(렌더 트리)를 재생성하는 작업을 말합니다 Reflow 를 발생하게 하는 속성 width, height, padding, margin, float, position 등등 … 레이아웃에 영향을 주는 모든 속성 Repaint ( 화면 다시 그리기 ) Reflow 과정이 끝나고 재생성된 레이아웃 트리(렌더 트리) 를 다시 레이어에 그리는 작업 Repaint 를 발생하게 하는 속성 color, border-radius, background, box-shadow 등등 … 시각적으로 보여지는 모든 속성 reflow & repaint 와.. 2023. 3. 14.

티스토리툴바