Frontend40 [React] React 반응형 웹 Introduction React에서 반응형 웹을 만드는 방법을 알아보려 한다. ① react-responsive 설치 React 라이브러리인 react-responsive를 설치하고 useMediaQuery를 import 한다. npm install react-responsive import { useMediaQuery } from 'react-responsive'; ② 컴포넌트 별로 나누기 HomePC 에는 (1024px ~), HomeMobile 에는 (~ 1024px) 의 반응형 쿼리를 만들었다. //HomePC const HomePC = () => { const isPC = useMediaQuery({ query: "(min-width:1024px)" }); return ( {isPC && ~ .. 2023. 2. 23. [JavaScript] 클릭한 태그 찾기 Introduction다음과 같이 onClick 시 실행될 함수가 모두 같은 태그들이 있을 때, 어떤 태그가 클릭해서 함수가 실행됐는지 어떻게 알 수 있을지 알아보려고 한다. ● event.currentTarget 사용방법은 간단한데, getInfo 함수 내에서 event.currentTarget를 콘솔에 찍어보면다음과 같이 클릭한 태그의 속성들이 뜬다.여기서 span 태그 안의 div 태그의 innerText에 접근하고 싶다면event.currentTarget.children[1].innerTextchilder의 배열을 사용한다.결론적으로, 클릭한 태그에 대한 속성을 알고 싶으면 event.currentTarget을 사용하고자식 태그를 활용하고 싶다면 childeren을 이용한다. 2023. 2. 23. [JavaScript] javascript 주요 개념 간단 정리 Introductionjavascript 복습 겸 주요 개념을 아주 간단히 정리해보았다.브라우저 렌더링 과정HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.두 Tree를 결합하여 Rendering Tree를 만든다.Rendering Tree에서 각 노드의 위치와 트리를 계산한다.계산된 값을 이용해 각 노드를 화면 상의 실제 픽셀로 변환하고, 레이어를 만든다.레이어를 합성하여 실제 화면에 나타낸다.브라우저 동작 원리클라이언트가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시한다.데이터 타입원시 타입: number, string, boolean, null, undefined, symbol객체 타입: object연산자산술 연산자, 문자열 연결 연산자, 할당 연산자,.. 2023. 2. 22. [React] 로그인 Refresh Token 처리 Introduction 로그인에서 활용하는 refresh token에 대해 알아보고, 서버로부터 받은 refresh token과 access token의 처리 과정을 알아보려 한다. Refresh Token이란? 기존 JWT를 이용한 방식은 보안에 취약하다. token 값만 탈취하면 충분히 악용가능하므로 이러한 단점을 보완하기 위해 refresh token이 등장하였다. access token(JWT) 만 존재했던 기존의 방식과 다르게, access token + refresh token 두 가지 토큰을 이용하여 접근 권한을 따진다. access token은 refresh token보다 짧은 유효기간을 가진다. 위 그림의 형태로 access token과 refresh token을 활용한다. 먼저 로그인을.. 2023. 2. 22. [React] ReactPortal 이용하여 modal 창 생성 Introduction ReactDOM 에서 제공하는 createPortal 메소드를 사용하여 모달창을 생성하는 법을 알아보려 한다. Portals란? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다. 즉, cildren 이 부모 컴포넌트의 DOM 계층 구조에 종속되지 않도록 컴포넌트를 렌더링 할 수 있다는 것이다. 이런 특성을 이용하여 독립적인 모달창을 생성할 수 있다. 기본 형태 ReactDOM.createPortal(child, container) 1. 첫 번째 인자 렌더링하려는 children 2. 두 번째 인자 이동시키려는 DOM 구현 방법 ① 모달 창이 구현될 부분에 태그를 작성한다. ② Portal을 생성해주고, 그 안에 해당 컴포넌트를 .. 2023. 2. 19. [html & css] 드래그 방지 -webkit- : 크롬, 사파리 -moz- : 파이어폭스 -ms- : 익스플로러 -o- : 오페라 /* 드래그 방지 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 2023. 2. 19. 이전 1 2 3 4 5 6 7 다음
