Don’t worry about failures

next.js는 초기 렌더링만 서버가 담당 ( SSR ) 이후 CSR로 동작을 한다. 첫 화면 로딩시에는 SSR로 렌더링하면서 오류가 발생하지 않지만, CSR로 렌더링하면서, 서버에서 클래스명과 클라이언트에서 클래스명이 달려져서 생기는 오류이다. 같은 Header를 home 쪽에서 ssr로 렌더링하고 다른 페이지 이동후 새로고침하면 기존에 있는 header( ssr로 내려온 header ) 와 페이지 이동된 후 header (csr로 그려준 header )의 클래스 해쉬 값이 달라 위와 같은 에러 해결방법 babel-plugin 설치 npm i babel-plugin-styled-components 프로젝트 루트 경로에 .babelrc 파일 생성 이미 존재하면 해당 값 기입 { "presets": ["n..

router.push router.push는 window.location과 같이 동작한다. 이 말은 태그를 생성시키지 않는다는 말이고, SEO에 대한 고려를 한다면 이는 옳지 않은 방식이다. crawler네 발견되지 않을 것이다. 반면, 태그는 를 생성시킨다. 이는 SEO에 적합하다는 의미이다. 또한 Enduser는 페이지를 리로딩 없이 페이지 경험을 쌓을 것이다. ( SPA 동작을 초래한다. ) a태그는 next/link import없이 standard hiperlink를 생성한다.

문제 레파지토리 브랜치를 추가 하기 위해 해당 repository branch와 연결을 해줘야한다. 하지만 select box value 중 연동하고자 하는 repository가 존재하지 않는다. 해결 1. 계정 셋팅 2. amplify 권한 설정 3. 권한 주기

개발자라면 가장 많이 사용하는 것 중 하나가 chrome 개발자 도구이다. 개인적으로 개발자도구의 활용도에 따라 개발의 효율, 웹 페이지의 성능까지 큰 차이를 보일 것이라고 생각한다. 그래서 이 글을 준비했고, 글을 준비하는 동안 정말 많은 기능이 있다는 것을 알게 되었다. 이제까지 단순 debugger 만 찍고, value 값만 확인하는 용도로만 사용했다는 것에 아쉬움을 표하고 싶다. 가장 기본적인 기능에 대해서는 생략하고, 처음 접해본 기능 혹은 중요한 기능이라고 판단하는 것을 기준으로 글을 작성할 것이다. ( 모든 내용을 다루기엔 내용이 너무 많다고 생각이 든다. ) INDEX 1. Element 2. Console 3. Sources 4. Network 5. Performance 6. Memory..

xss 공격 종류 1. 저장 XSS - 웹 어플리케이션 취약점이 있는 웹 서버에 악성 스크립트를 영구적으로 저장해 놓은 방법. => 사용자가 사이트를 방문하여 저장되어 있는 페이지에 정보를 요청할 때, 서버는 악성 스크립트를 사용자에게 전달하여 사용자 브라우저에서 스크립트가 실행되면서 공격. 2. 반사 XSS - 검색, input 등 서버가 외부에서 입력받은 값을 받아 브라우저에게 응답할 때 전송하는 과정에서 입력되는 변수의 위험한 문자를 사용자에게 그대로 돌려주면서 발생. 3. DOM 기반 XSS - 피해자의 브라우저가 HTML 페이지를 구문 분석할 때마다 공격 스크립트가 DOM 생성의 일부로 실행되면서 공격. 페이지 자체는 변하지 않으나, 페이지에 포함되어 있는 브라우저측 코드가 DOM 환경에서 악성..

원시 타입 ( primitive type ) - 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을 보관. - number, boolean, null, undefined 원시 타입의 경우 변수의 값을 새로 할당하게되면, 새롭게 메모리에 할당이 되며, 완전한 복제가 이루어진다. 기존의 주소를 변경해주는 것이 아닌 새로운 메모리에 복사되어 할당을 해준다. 참조 타입 ( reference type ) - 크기 정해져 있지 않음. - 변수에 할당될 때 값이 직접 저장X - 변수에는 데이터에 대한 참조만 저장. ( 주소를 저장 ) - 객체, 배열, 함수 변수의 크기가 동적으로 변함. 변수에 할당 시 데이터에 대한 주소가 저장되기 때문에 자바스크립트 엔진이 변수에 가지고 있는 메모리..

es5 - 2009 출시 es6 - 2015 출시 가장 많은 변화를 가져온 es5와 es6의 차이를 알아보자. 디테일한 부분은 별도의 글로 남길 예정이고, 이 글에서는 단순 차이에 대해서 살펴보고자 한다. 1. var VS let, const 변수 선언 키워드의 변화. var의 경우 변수 선언에 있어 엄청난 자유로움을 제공해주고 있다. 하지만, 이러한 자유로움은 찾아내기 어려운 먼 암흑을 제공해주기도한다. 재할당, 동일한 네이밍 등 큰 제약 없이 모든 것이 가능하다. 이에 따라 컴파일링 과정에서 문제가 되지 않고, 코드가 완성 후 실제 테스트를 해보면서 문제가 생기는 것을 파악할 수 있다. 이는 소 잃고 외양간 고치기 식으로 버그를 찾아나서야 하고 고쳐야한다. 이러한 문제를 방지하고자 let, const..

리스트와 Key 리액트에서 엘리먼트를 배열로 만들어 렌더링을 할 수 있습니다. 여기서 map()을 통해 렌더링을 돕는다. 예제는 위와 같다. 여기서 컴포넌트, 즉 함수로 따로 빼서 할 수도 있지만 인라인으로써 다음과 같이 map을 사용할 수 있다. 리액트에서 반복문을 통해 렌더링 하는 방법이다. 여기서 주의해야할 점은 바로 key이다. key 값을 제공하지 않으면 콘솔에서 경고를 뿜어낸다. key를 통해 항복을 변경, 추가, 삭제 등의 작업을 하기 위한 식별자로 사용되기 때문이다. 동일한 엘리먼트가 반복되는 만큼 이를 식별하는 것은 렌더링에 있어 필수로 잡는 것이다. key 값으로 할당하는 값은 보통 id 값으로 할당을 하지만, 어쩔 수 없는 경우 index 값으로 할당하게 된다. index로 할당할 경..