전체 글

들어가며프로젝트를 진행하면서 리스트 순서를 바꾸는 기능이 필요했다. 리스트 순서를 변경하는 라이브러리는 react-beautiful-dnd 와 react-dnd 두 가지가 있었다.처음에는 react-beautiful-dnd 를 사용해서 테스트를 해보다가 곧 종료된다는 이야기가 있어서, 주말간에 react-dnd 를 새로 설치해 테스트 해보았다!react-beautiful-dnd 를 적용했을 때 애니메이션이 미리 정의되어 있어서 좀 더 유연한 느낌이지만 용량이 react-dnd 보다 크다.반면에 react-dnd 는 hover 중일 때 순서가 변경되는 애니메이션이나 위치 변경을 직접 정의해야해 처음 적용시킬 때 살짝 어려운 편이다. 설치하기# react-dnd를 사용하기 위해 필요한 라이브러리 instal..

들어가며 프론트단을 개발하면서 데이터를 post 해야하는 상황이 항상 생긴다. 이번에는 유저가 파일과 텍스트를 올렸을 때 그 안의 내용을 post 하는 상황이었다. formData를 처음 써보는거라 많은 고민을 했다. 그리고 백앤드 개발자 분에게 전송이 제대로 되었는지 계속 물어봐야해서 좀 미안하기도 했다.. 아무튼, formData로 데이터 post 하는법을 알아보자~! 본문 먼저 폼을 만들어준다. 나는 유저가 설명을 입력하고 파일을 업로드하도록 만들었다. 제출! 여기서 textarea에 받은 value 값과 input을 이용해 올린 파일이 데이터로 전송될 것이다. 처음에는 리액트쿼리를 이용하지 않고 짰다가 리액트 쿼리를 이용하면 좀 더 간편하게 보여진다고 해서 리액트 쿼리를 이용했다. 리액트 쿼리를 ..

들어가며, 회사에서 디자인 시안에 따라 개발을 하던 중, 탭 메뉴를 눌렀을 때 background-image를 다르게 보여줘야 했다. 컴포넌트에 배경이미지를 적용하면 컴포넌트 내, 즉 컴포넌트 크기만큼만 사용할 수 있기 때문에 전체너비를 다 차지하지 못한다. 어떻게 해야할 지 고민을 하던 와중, 탭을 눌렀을 때 변하는 상태에 따라서 배경이미지 css를 조절하면 어떨까라는 생각에 도달했다. 본문 먼저 가장 부모 컴포넌트를 만들어준다. 가장 바깥 부모에서 상태관리를 해준 이유는 가장 바깥 컴포넌트에 배경이미지를 적용해야하기 때문이다. 위에서 말했듯이, 전체 너비에 배경이미지를 적용하기 위해선 만들어낸 컴포넌트가 아닌 가장 바깥 컴포넌트에 적용한다. // App.jsx import React, { useSta..

들어가며, react-responsive 라이브러리를 사용해 반응형 웹을 만들며 여러가지 테스트를 해봤다. 타입스크립트를 사용했기 때문에 타입 지정을 해줘야 했다. 타입을 지정하는 방법 중에 interface와 type이 있는데 두 가지의 정확한 차이점을 알고 정리해놓으려고 한다. 본론 function Pc({ children }) { const isPc = useMediaQuery({ query: '(min-width: 768px)', }); return {isPc && children}; } react-responsive 라이브러리 내 useMediaQuery를 사용했다. PC 버전과 Mobile 버전일 때를 나눠 만드려고 했으며, children을 통해 값을 받아오도록 코드를 짰다. return {..

들어가며, 리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다. 본론 일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다. 1. CRA + typescript 설치하기 npx create-react-app --template typescript 이렇게 프로젝트를 만들어주면 루트에 tsconfig.json 파일이 생긴다. 이때, "baseUrl" : "./src" 코드를 추가해준다. 추가해주는 이유는 기본 절대 경로를 사전에 설정해 추후 ..

들어가며, react로 반응형 웹을 만들어 보려고 cra를 이용해 리액트 프로젝트를 시작했다. 타입스크립트와 기본적인 것들을 설치했는데 이런 경고가 장황하게 떴다. 대충 바벨에 관련해서 말하는 것 같았다. 경고문구 발생 해당 경고 문구! One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already..

1. 웹 성능 최적화란? 웹 프론트 환경에서는 각종 리소스들을 화면에 띄우고 업데이트 하는 과정에서 지속적으로 비용을 소모한다. 따라서, 웹 프론트엔드 성능 개선을 위해서 개발자는 최소한의 데이터로 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 상품 관리자, 프로덕트 매니저에게 웹 페이지가 얼마나 빨리 로딩되는지가 서비스 사용자 경험(UX, User Experience)에 영향을 주며 매출 및 수익에 영향을 줄 수 있으므로 웹 성능 최적화를 대략적으로 이해하는 것이 중요하다. 결과적으로, 웹 프론트엔드 개발자의 웹 성능 최적화 작업으로서 사용자에게 좋은 사용자 경험을 제공할 수 있고 비즈니스의 성공과도 직결될 수 있다. 2. 최적화를 왜 해야할까? · 비즈니스 관점 웹 성능 최적..

해시(Hash) 해시는 저장, 검색 등 자주 활용되는 자료구조이다. 또한 입력 데이터를 고정된 길이의 데이터로 변환한 값을 말한다. 데이터의 key값이 해시 함수를 통해 변환된 간단한 정수이며 정수로 변환된 해시는 배열의 인덱스, 위치, 데이터 값을 저장하거나 검색할 때 활용된다. 해시 함수 (Hash Function) 유일한 값(반복되지 않는 값)을 저장하기 위한 자료구조이며, Dictionary(Map) 자료구조와 같이 key, value 의 쌍 형태로 저장된다. 모든 데이터가 유일한 키값을 가져 해시 자료들은 특정한 값을 아주 빠르게 찾아낸다. 1. 직접 주소 테이블 (Direct Address Table) 유일한 키가 있다면 그냥 인덱스로 쓰면 되지 않을까? 즉, 입력받은 value가 곧 key가..

이분 탐색 알고리즘은 정렬되어 있는 리스트에서 탐색 범위를 반씩 좁혀가며 데이터를 탐색하는 방법이다. 또한, 배열 내부의 데이터가 정렬되어 있어야만 사용할 수 있는 알고리즘이다. 변수 3개 (start, mid, end)를 사용해 탐색하며, 찾으려는 데이터와 중간점에 위치한 데이터를 반복적으로 비교해 원하는 데이터를 찾는다. 단순한 배열 순회(O(N))보다 시간복잡도에서 이점을 가진다. 입출력 예시 let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2); console.log(output); function binarySearch(arr, target){ let [start, end] = [1, Math.max(...arr)]; while(start

CSRF(Cross Site Request Forgery) 공격 웹 어플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지와 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격. - CSRF를 통해 해커는 희생자(사용자)의 권한을 도용해 중요 기능 실행하는게 가능해짐 - 해커가 사용자의 컴퓨터를 감염시키거나 서버를 해킹해서 이뤄지는 공격은 아님 [조건] 1. 위조 요청을 전송하는 서비스(페북)에 희생자가 로그인 상태 2. 희생자가 해커가 만든 피싱 사이트 접속 요즘 유명 사이트는 보통 PC에서 자동 로그인을 해놓는 경우가 많고 피싱 사이트는 피싱 메일 등을 통해 접속될 수 있음. 또한 희생자가 해커가 만든 피싱 사이트를 이용하지 않아도 해커가 XSS 공격을 ..