Web (45) 썸네일형 리스트형 [nextjs] Nextjs에서 Redux 사용 Next.js에서 Redux사용하기 (Redux wrapper) (1/2) (velog.io) Next.js에서 Redux사용하기 (Redux wrapper) (1/2) 컴포넌트에서 공통적으로 쓰이는 데이타가 흩어져있기 때문에 부모 컴포넌트에서 데이타를 받아서 자식 컴포넌트에게 각각 보내줘야한다컴포넌트끼리 데이타를 전달하는 과정도 매우 복잡하 velog.io [html] <a> 태그에서 target = _blank 사용 해당 이슈의 원인은 Tabnabbing 피싱 공격에 노출될 수 있기 때문이라고 한다 Tabnabbing 피싱 공격이란 target="_blank"인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격 예를 들어 A 사이트에서 사용자가 blank 태그를 이용해 B 사이트로 이동 후에 다시 A사이트로 돌아왔을때 실제 A페이지가 아닌 A페이지처럼 보이는 피싱 사이트로 이동하는 것이다 target=”_blank” 와 rel=”noopener noreferrer”을 같이 적용해서 문제를 해결했다 rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 .. [nextjs] 기본 규칙 - next는 프론트엔드 서버이다 - next에서 구상하는 page는 pages 폴더에 만들어야 한다, page에 만들 파일들을 파일명에 대하여 endpoint 생기고 자동으로 next에서 code splitting을 해준다 - 폴더를 만들고 그 안에 파일을 만들면 주소 구성을 자동으로 해준다. pages안에 "./first/second.js"로 만들었을 경우 endpoint는 domain/first/second가 된다 - 페이지 이동 시 a 태그가 아닌 Link 태그로 a 태그를 감싸고 Link 태그에 href 속성을 적용하여 endpoint를 적어줘야 함 - 프론트서버와 백엔드서버의 주소가 다르기 때문에 cors 설정을 해줘야 데이터를 주고 받을 수 있다 - _app.js는 모든 페이지의 공통적인 부.. [Typescript] as TypeScript as 다운 캐스팅 사용 예제 (tistory.com) TypeScript as 다운 캐스팅 사용 예제 타입스크립트 as 다운 캐스팅 as 다운 캐스팅 TypeScript 문법으로 as를 사용하여 다운캐스팅를 할 수 있습니다. 다운 캐스팅는 안전한 방법은 아니지만 가끔 TypeScript로 작성하다보면 필요한 경우도 ponyozzang.tistory.com [CSS] transition CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성 – CODING FACTORY CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성 transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transit www.codingfactory.net [html] input HTML - input태그와 그 속성 type, value, name - 입력태그 (1) (tistory.com) HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name 입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하. yangbari.tistory.com [Javascript] 자바스크립트 개발자가 알아야 하는 33가지 개념 1. Call stack 자바스크립트 호출 스택(Call Stack) 이해하기 (tistory.com) 자바스크립트 호출 스택(Call Stack) 이해하기 시작하기에 앞서 자바스크립트를 심도 있게 이해하기 위해 "모든 자바스크립트 개발자가 알아야할 33가지 개념(https://github.com/yjs03057/33-js-concepts)"의 항목들과 링크되어있는 블로그 글들을 정리 new93helloworld.tistory.com 2. 원시 자료형 자바스크립트 개발자라면 알아야 할 33가지 개념 #2 자바스크립트의 원시 타입(Primitive Type) (번역) (velog.io) 자바스크립트 개발자라면 알아야 할 33가지 개념 #2 자바스크립트의 원시 타입(Primitive Type) (번역) 들어.. [React] 비 효율적인 Render 막기 비 효율적인 렌더링을 막는 방법 1. 컴포넌트들을 분리해라 2. 말단 컴포넌트들은 memo로 감싸라 3. 연산이 많은 함수의 경우 useMemo로 cashing되도록 해라. memo : 부모 컴포넌트들이 리렌더링 될때 memo를 자식에 감싸면 props가 바뀌지 않는 한 렌더링되지 않는다. useMemo : hooks안에서 개별 값을 cashing하고 싶다면 사용, cashing을 갱신해야되는 데이터의 경우 deps에 넣어라. [React] 유용한 API 및 라이브러리 날짜 커스텀 momentjs date-fns dayjs luxon 스크롤바 커스텀 react-custom-scrollbars 사용자 해시태그 mention [Javascript] optional chaining .? ?.는 3가지 형태가 있다. obj?.prop는 obj가 존재한다면, obj.prop 존재하지 않으면 undefined obj?.[prop]는 obj가 존재한다면, obj.prop 존재하지 않으면 undefined obj.method?.()는 obj.method가 존재한다면, obj.method() 존재하지 않으면 undefined ?.는 직관적이고 사용하기 쉽다. ?.는 깊숙한 곳에 있는 프로퍼티에 안전하게 접근할 수 있도록 도와준다. ?.는 꼭 없을 수도 있는 변수에만 사용해야 한다. 프로그래밍적으로 발생하는 에러를 가려버리기 때문에 잘못 사용했을 때는 되려 디버깅하기 어려워질 수 있다. 이전 1 2 3 4 5 다음