전체 글 썸네일형 리스트형 target="_blank"를 아무생각 없이 쓰면 안되는 이유 HTML 마크업을 작성하다 보면 새창 열기 기능을 위해서 다음과 같이 작성하는 경우가 많습니다. 겉보기에는 새창도 잘 열리고 아무 문제가 없는 것 같지만, 이렇게 작성하면 tabnabbing 피싱 공격에 노출됩니다. 이런 문제가 있기 때문에 MDN에서도 target을 사용할 때, rel="noreferrer noopener"를 추가해 window.opener API의 악의적인 공격을 방지하라고 권고하는 내용을 찾아볼 수 있습니다. Tabnabbing이란 target="_blank"에 의해 열린 새 페이지에서 window.opener.location을 변경하여, 기존 페이지를 피싱 페이지로 변경해 사용자 정보를 탈취하는 것입니다. 이러한 피싱이 가능한 이유는 기본적으로 새 탭을 열면 현재 탭을 열었던 탭의.. 더보기 바닐라 자바스크립트와 리액트 훅으로 디바운스(Debounce) 구현하기 디바운스란 어떤 함수를 연속적으로 호출할 때, 실제 호출되기 전까지 지연 시간을 두어 마지막 함수만 호출되도록 하는 방법입니다. 짧은 시간 안에 너무 많은 함수 호출이 발생하면 성능에 영향을 미칠 수 있기 때문에, 이러한 방법을 이용하여 함수가 호출되는 속도를 제한할 필요가 있습니다. 이번 글에서는 디바운스를 구현하는 두 가지 사례를 알아보겠습니다. 첫 번째로 바닐라 자바스크립트를 이용해서 디바운스 함수를 작성해보겠습니다. 다음으로는 리액트 훅으로 디바운스를 구현해보겠습니다. Debouncing width JavaScript 예를 들어 검색어를 입력하면 검색 결과가 자동으로 화면에 출력되는 기능이 있다고 하겠습니다. 간단하게 생각하면 입력 이벤트가 발생할 때마다 서버로 검색 조건에 맞는 데이터를 요청하고.. 더보기 자바스크립트 expression(식)과 statement(문) 자바스크립트의 코드는 식과 문으로 나누어 볼 수 있습니다. 두 용어의 차이점에 대해서 알아보겠습니다. expression 식(expression)이란 값을 만들어내는 코드 단위입니다. 무엇이든 하나의 값(value)를 반환하는 것은 식입니다. 아래 코드는 모두 식에 해당합니다. 자바스크립트는 다음과 같은 코드들을 해석해서 값을 돌려줍니다. 10; // 숫자 리터럴 "Hi"; // 문자 리터럴 true; // 불린 리터럴 1 + 4; // 산술식 10 < 100; // 논리식 "Hello" + "World"; // 문자식 this // 특정 object를 가리키는 키워드 functionCall(); // 어떤 값을 return하는 함수 abc = 77; // 할당식 하나의 식(expression)을 여러개.. 더보기 우아한테크러닝 React&TypeScript 1회차 프론트엔드 개발을 시작하고 나서 항상 갖고 있는 고민은 "이걸 이렇게 하는 게 잘하고 있는 건가?"입니다. 동작을 잘해도 "이걸 이렇게 구현하는 게 맞는가?"라는 생각을 항상 계속하게 됩니다. 이런 고민들 하던 중에 우아한형제들에서 주니어 프론트 개발자를 대상으로 리액트와 타입스크립트 교육을 진행한다는 공고를 보고 지원하게 되었습니다. 운이 좋게도 교육생 선발이 되어서 우아한테크러닝 3기에 참여할 수 있게 되었습니다. 앞으로 매 회차 교육에 참여하면서 그 날 다루어졌던 내용 중 정리하고 싶은 내용에 대해 학습하여 블로그에 기록할 계획입니다. 명시적인 코드를 작성하자 암묵적인 코드와 비교할 때 명시적인 코드가 더 많은 정보를 파악할 수 있기 때문입니다. 가독성이 좋은 코드가 좋은 코드라는 흐름에도 부합하는.. 더보기 Object.fromEntries 메서드를 이용하여 query string을 간단히 파싱하는 방법 쿼리스트링을 파싱해서 object 형태로 변환해서 사용하면 편리합니다. 이런 작업을 해주는 대표적인 라이브러리로 qs가 있습니다. Object.fromEntries 메서드를 이용하면 라이브러리를 사용하지 않아도 간단하게 쿼리 스트링을 파싱할 수 있습니다. 이 메서드는 key-value 쌍으로 이루어진 이터러블(Array, Map)을 받아서 Object로 바꿔줍니다. 이를 이용해서 문자열 "?foo=unicorn&ilike=pizza"을 객체로 만들어 보겠습니다. const qs = (string) => { const arr = string.slice(1).split("&"); const list = arr.map(item => item.split("=")); const obj = Object.fromEn.. 더보기 [Styled components] 외부 컴포넌트를 감쌌더니 "Warning: Unknown props" 경고 메시지가 출력된다면 Material UI와 Styled-components를 사용해서 작업을 진행하던 중에 다음과 같은 Warning을 마주했습니다. 경고 메시지 내용은 대략 다음과 같습니다. "네가 나한테 뭔지 모를 prop을 넘겨줘서 살펴봤는데, 이건 DOM의 attribute은 아니니까 커스텀 attribute으로 넣고 싶으면 소문자로 쓰고 잘못 넣은 거면 지우도록 하자" 스타일드 컴포넌트는 props를 어떻게 다루나 경고 메시지가 나타난 이유는 styled Component가 props를 처리하는 방식 때문입니다. styled component는 모든 props를 DOM 노드까지 전달하는 방식으로 props를 다루고 있습니다. 공식 문서에서는 passed props라는 키워드로 해당 내용을 설명하고 있습니다. 다음과.. 더보기 [JS] 자바스크립트 fetch API 사용하기 자바스크립트 fetch API를 이용하여 비동기 HTTP 요청을 보낼 수 있습니다. API를 호출하고 데이터를 받는 방법을 알아보겠습니다. 요약 - fetch함수를 사용하면 리소스를 비동기로 요청할 수 있습니다. - fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환합니다. 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 되어 Response 객체가 반환됩니다. (404, 500 같은 경우와 같은 응답 코드를 받은 경우는 에러를 일으키지 않습니다.) - HTTP 요청이 완료되지 못한 상태라면 Promise가 rejected 됩니다. 이 경우 catch 메서드를 사용하여 에러를 처리할 수 있습니다. (네트워크 문제 및 존재하지 않는 사이트에 대한 요청에 해당합니다.. 더보기 [React.js] 컴포넌트 라이프사이클과 주요 메서드 호출 순서 컴포넌트 라이프사이클이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트는 Lifecycle을 갖습니다. Lifecycle은 세 가지 카테고리로 나누어지며, 개괄적인 그림은 다음과 같습니다. Mounting: 컴포넌트가 화면에 나타남 Updating: 컴포넌트가 업데이트됨 Unmounting: 컴포넌트가 화면에서 사라짐 또한 컴포넌트는 Lifecyle마다 메서드를 가지고 있습니다. 이 메서드를 이용해서 특정 시점에 원하는 동작을 하도록 만들 수 있습니다. 메서드에 대해서 더 자세히 알아보겠습니다. Lifecycle 메서드 알아보기 에러 처리 메서드를 제외하면 Lifecycle 메서드는 총 8가지입니다. 자주 사용되는 Lifecycle 주.. 더보기 이전 1 2 3 4 ··· 17 다음
