일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- BFS
- k8s
- TypeScript
- es6
- docker
- kubernetes
- 이더리움
- react
- node.js
- 가상화
- CSS
- 파이썬
- 클라우드
- HTML
- 백준
- 이슈
- 백엔드
- JavaScript
- 타입스크립트
- 프론트엔드
- 자바스크립트
- AWS
- 컴퓨터공학
- 리액트
- next.js
- 웹
- 알고리즘
- 쿠버네티스
- 블록체인
- 솔리디티
- Today
- Total
목록프론트엔드 (24)
즐겁게, 코드
토스의 첫 개발 컨퍼런스, SLASH21이 막을 올렸습니다! 저는 이런 컨퍼런스 홍보 페이지를 보면 항상 개발자 도구에 먼저 손이 가곤 하는데, 이번에는 특이하게도 페이지가 리액트로 제작되어 있어 컴포넌트를 구경하던 중 처음 보는 forwardRef 성분에 대해 궁금증을 갖게 되었습니다. 🤔 🛠 HTML 노드를 커스텀 컴포넌트로 교체하기 import { useEffect, useRef } from "react"; import Input from "./components/Input"; function App() { const nameRef = useRef(null); const submitRef = useRef(null); useEffect(() => { alert("페이지 로딩됨"); nameRef.cu..
웹 어플리케이션 특성상 로드와 동시에 서버로부터 데이터를 불러와야 하는 경우가 자주 있습니다. 아마 대부분의 경우 useEffect 또는 useLayoutEffect 훅을 활용해 렌더링이 끝난 후 데이터를 불러올 텐데요, 한번 샘플 코드를 보겠습니다. const getGroupList = async () => { await axios .get(`${GROUP_ENDPOINT}?func=getAllGroup`) .then((res) => setGroupList(res.data)); }; useEffect(getGroupList, []); 컴포넌트 렌더링을 마친 후 useEffect 훅으로 getGroupList 함수를 호출해 그룹 리스트 상태값을 초기화해주고 있습니다. 그런데 이렇게 짜면 절대로 안됩니다!..
사용자는 주로 클릭이나 스크롤 등의 이벤트를 통해 웹과 상호작용하는데요, 특정 상황에서는 이런 이벤트를 비활성화해야할 때가 있습니다. 버튼의 경우에는 disabled 속성 등을 활용할 수 있지만, 일반적인 div 등의 태그에서는 어떻게 이벤트 실행을 방지할까요? 🖱 pointer-events 활용하기 물론 자바스크립트를 통해 이벤트 수행을 제어할 수도 있겠지만 훨씬 더 간단한 방법이 있습니다. 바로 CSS의 pointer-events라는 속성을 활용하는 것인데요, pointer-events 속성을 none 으로 지정하면 마우스 커서가 이벤트를 발생시킬 수 없게 됩니다. 당연히 리액트의 스타일 객체에서도 사용할 수 있으며, pointer-events 대신 pointerEvents 라는 속성명으로 사용하면 ..
태그를 활용할 때 새 창에서 페이지를 이동하기 위해서는 target="_blank" 라는 속성을 활용합니다. 네이버로 이동! 그런데, 이 속성에 보안 문제가 숨어있다는 사실을 알고 계신가요? Tabnabbing 공격 window.opener 라는 전역 객체는 현재 창을 열었던 이전 창의 참조를 반환합니다. 그런데 해커들이 기가 막힌 방법을 고안해냈는데요, 이 window.opener의 location을 피싱 사이트의 주소로 바꿔치기하는 것입니다. 그러면 원래 사이트는 피싱 사이트로 변하게 되고 사용자는 별 의심 없이 정보를 건네주게 되는 것이죠. 간단 시연 _blank 속성으로 새 탭에서 네이버에 들어간 뒤, 네이버에서 window.opener.location 속성을 조작해 이전 탭을 피싱 사이트로 바꿔..
넥스트(Next.js)는 기본적으로 모든 페이지를 미리 렌더링합니다. 미리 렌더링을 해두면 SEO에도 유리하고 더 나은 성능을 얻을 수 있는데요, 넥스트에는 두 가지 사전 렌더링 방법이 존재합니다. 1. 정적 생성 - HTML 페이지를 미리 렌더링해두고 요청에 따라 제공합니다. 2. 서버 사이드 렌더링 - 페이지가 요청되는 시점에 서버에서 렌더링을 수행하고 결과물을 제공합니다. 별도의 외부 데이터가 필요하지 않다면 정적 생성 방식으로 미리 렌더링된 페이지를 제공합니다. 그러나 외부 데이터를 필요로 하는 경우에는 서버 사이드 렌더링을 통해 페이지를 제공하는데요, 오늘은 넥스트에서 어떻게 외부 데이터를 다룰 수 있는지 알아보도록 하겠습니다. getServerSideProps getServerSideProps..
최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다. 리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있어 저도 이미지를 저장해서 보고 있습니다. 😁 그런데 이상하게도, LayoutEffects라는 낯선 이름이 하나 보이네요. 오늘은 useLayoutEffect 라는 생소한 훅을 소개해 보겠습니다. useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) useLayoutEffect를 인텔리센스가 자동으로 완성한 모습입니다. 그런데 어디서 많이 본 형태 아닌가요? useEffect(() => { effect return () => { cleanup } }, [input]) 맞습니다! u..
혹시 페이스북을 사용해 보신 적 있으신가요? 페이스북을 사용해 보신 분들이라면 들어갈 때마다 로그인을 수행하는 대신 항상 로그인 상태가 유지되고 있는 것을 알고 계실 것입니다. 바로 이런 기능이 "쿠키" 를 활용해 구현된 기능인데요, 오늘은 쿠키를 활용하는 방법에 대해 알아보겠습니다. 쿠키(Cookie)란? 쿠키는 키 - 값 쌍으로 이루어진 작은 데이터입니다. 서버는 브라우저에 쿠키를 전달하고, 브라우저는 쿠키를 저장해 두었다가 다음 번 요청부터 보관하고 있던 쿠키를 서버에 전달합니다. 쿠키는 주로 세션 관리나 트래킹 등 용도로 사용되는데요, 트래킹의 예시로 현재 창에서 개발자 도구를 열고 document.cookie 를 입력해 보면 카카오 애드핏과 구글 애널리틱스 등 트래킹 도구에서 여러분의 접속 정보..