Jaeilit

nginx를 프론트 코드와 함께 도커 이미지로 만들어서 이미지 런으로 테스트를 했었는데 nginx.conf를 고칠때마다 이미지를 다시 빌드하고 런해야하는 시간낭비를 겪었다. (+스트레스) 처음에는 이미지를 띄우고 리눅스 명령어로 nginx.confi 를 수정하고 curl 로 접근하거나 nginx 명령어로 해볼까 생각했는데 굳이 이미지를 만들어서 하는 것 보다 로컬에서 하는 방법이 없을까 하고 생각해봄 로컬에서 하는방법은 생각보다 간단했다. 1) conf 파일 찾기 find / -name nginx.conf nginx.conf 파일의 경로를 찾아준다. 현재 위치는 /usr/local/etc/nginx/nginx.conf 2) conf 파일 수정 confi 경로로 이동하여 nginx.conf 가 있는지 확인..

1 ) https://jaeilit.tistory.com/90 콘텐츠 보안정책(CSP) Content Security Policy (CSP) XSS (교차 사이트 스크립팅) 및 클릭재킹 데이터 삽입 공격을 비롯한 특정 유형의 공격을 감지하고 완화하는데 도움이 되는 추가 보안계층 CSP를 활성화 하려면 HTTP 헤더를 jaeilit.tistory.com 1번글에서 CSP 와 XSS 를 간단하게 알아봤습니다. CSP 를 설정하는 이유 ) 콘텐츠 보안 정책은 XSS 공격, 데이터 인잭션 등을 막기 위한 클라이언트의 수단입니다. html 의 태그 안에서 태그로 정의 할 수 있지만, meta 태그는 cdn 이 적용이 안되는 점과 HTTP 헤더에만 적용이 가능한 frame-ancestors 등의 문제가 있기 때문에..

Content Security Policy (CSP) XSS (교차 사이트 스크립팅) 및 클릭재킹 데이터 삽입 공격을 비롯한 특정 유형의 공격을 감지하고 완화하는데 도움이 되는 추가 보안계층 CSP를 활성화 하려면 HTTP 헤더를 반환하도록 웹 서버를 구성해야함, 이전 버전에서는 헤더에 X-Content-Security-Policy 가 있었지만 이는 더이상 볼 수 없음, HTTP 헤더 또는 meta 태그를 이용하여 정책을 구성 할 수 있음, HTTP 헤더 사용 Content-Security-Policy: default-src https: html 사이에 작성 XSS 교차사이트 스크립팅이란?? 자바스크립트에 악성 스크립트를 삽입하여 쿠키, 세션등 민감한 정보를 탈취하거나 비정상적인 기능을 수행하게 한다. ..

메타태그를 입력했다해서 무조건 된다고 생각하는 사람도 있겠지만, 저처럼 눈으로 봐야 믿는 스타일은 직접 봐야하는데 메타태그를 테스트할때마다 배포를 하는건 엄청난 리소스 낭비와 실수다 로컬에서 테스트 하는 방법 https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com ngrok 설치 후 cmd 에서 ngrok http port 입력하면 외부에 접속가능한 도메인을 준다. https://dd23-218-39-165-81.jp.ngrok.io React App dd23-218-39-165-81.jp.ngrok.io

SVG vs PNG 정적 페이지를 만들면서 이미지를 어떤 파일을 써야 할지 생각을 하다가 예전에 문득 png 3배율이나 svg 를 사용하라는 말이 떠올라서 왜지? 라는 생각에 조금 찾아봤다. 이미지 파일에는 무손실/무압축으로 jpg, png, svg 등등 나뉘긴 하지만 svg 와 png 만 살펴보기로 함 특징 1. 이미지가 깨지지 않음. 2. 상대적으로 용량이 적고 렌더링이 빠름 4. HTML 코드로 스타일링을 할 수 있음 SVG 의 V 는 vector 로 좌표 값들이 이어져서 만들어져있기 때문에 확대, 축소해도 이미지가 깨지지 않음 PNG 와 JPG 는 비트맵, bit를 를 가지고 표현하기 때문에 확대, 축소에 이미지가 깨진다. 렌더링 차이 SVG 는 용량도 상대적으로 작기 때문에 브라우저 로딩 속도가..

position sticky 를 사용하면 top 또는 left bottom 등 설정해놓은 포지션 값에 도달했을 때 fixed랑은 다른 느낌으로 엘리먼트가 그 위치에 걸려 있는 느낌이 들게 한다. 보통 엘리먼트가 view height 보다 작은 경우는 아무 에러가 없지만 view height 보다 커서 스크롤이 생긴 엘리먼트의 경우 top 0 을 기준으로 sticky를 사용 할 경우 스크롤이 있는 부분은 잘려서 안보이게 된다. 이 경우 top 0, 어디시점을 기준으로 걸어놓을 건지를 계산해줘야한다. window.addEventListener("scroll", function () { let windowHeight = window.innerHeight; let sticky = stickyRef?.curren..

가상선택자 bofore와 atfer 1. before 와 atfer 는 말 그대로 그 해당 엘리먼트(노드)가 만들어지고 난 뒤에 before(앞) 과 after(뒤)에 content가 작성 됨 1) 간단한 활용법 var_style See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen. 2) 다른 활용법 동적으로 css 함수를 넣어서 사용 할 수도 있음 content : attr() (동적인 css 텍스트) content : conuter() (숫자를 세어주는 css 함수) See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen. 3) 크로스 브라우징 이슈 크롬, firefox, oprea, safari 모든 가..

https://www.jaeilnet.shop/ 재일이의 넥스트js 넥스트 연습 desc og www.jaeilnet.shop 1넥스트와 리액트의 차이 1. 빈 html (seo) 리액트는 일반적으로 csr 으로써 빈 html 을 서버로부터 받고 js 와 css 를 입혀서 페이지를 구성한다. 여기서 빈 html 이 핵심인데 html 이 비어 있기 때문에 검색엔진 크롤러봇들이 내 사이트의 정보를 읽을 수가 없다. 물론 라이브러리를 이용하면 어느정도 대응이 가능하다. 2. 초기 렌더링 (코드 스플리팅) 또 초기 접근시에 빈 html 을 가져오기 때문에 거기에 입혀야 할 페이지의 모든 js 와 css 를 한번에 받아 오기 때문에 초기에는 성능적으로 사이트가 무거울수록 로딩이 느리다고 느낄 수 있지만 한번에 다..

특징 pre-rendering SSR + SSG 지원 간편한 라우팅 코드 스플리팅 Hot Code Reloading 1. pre rendering 사전렌더링 이 개념은 카테고리와 같이 큰 틀로 방식이라는 단어로 접근을 해야 이해하기 쉽다. 사전렌더링이 무엇이냐? 각 페이지마다 html을 미리 그려놓고(생성) 렌더 시에 최소한의 자바스크립트(스플리팅) 된 코드만 실행되어 페이지를 반응성 interactive, 인터랙티브) 있게 한다. 이런 과정을 hydration 이라고 함 쉽게 이야기해서 그려 둔, 또는 그려진 html 을 클라이언트로 내려준다. 리액트의 기본개념 spa, csr의 html 빈 걸 내려주고 거기에 js,css 를 입힌다는 개념과 상반됨. next js 에서는 pre-rendering 의 ..

window.scroll({top:0, behavior:"smoth"}) 스무스하게 원하는 위치로 가기