FE를 향해↗↗

이전부터 Webpack을 이용해 만들어두고 싶었던 React 보일러플레이트를 만들어봤다. 여러 레퍼런스를 참고하며 만들어봤는데 플러그인 부터 로더, 설정 내용까지 하나하나 차근차근 기록하며 살펴보자. 회사에 내가만든 보일러플레이트, 라이브러리 등등이 점점 쌓여가는 걸 보며 힘들지만 뿌듯한 요즘이다..⭐️ Webpack 이란? 웹팩은 단순히 말하자면 모듈 번들러이다. 모듈 : 웹팩에서의 모듈은 각종 .js .css .png 등 웹 애플리케이션을 구성하는 자원을 말한다. 번들러 : 자원을 조합해서 빌드 결과물을 만드는 역할 ES2015부터 모듈 이라는 문법을 지원하게 되었고 이 모듈을 사용하는 이유는 다른 사람의 코드나 내가 만든 코드들을 재사용하고 싶을 때 사용한다. 기존에는 태그를 통해 코드를 불러오고 ..

회사에서 AWS R&D를 진행하며 보안그룹 설정 시 부족한 부분을 느끼고 다시 정리해보는 IP IP (Internet Protocol) IP는 인터넷이 통하는 네트워크에서 정보를 수신하고 송신하는 통신에 대한 규약이다. IP 주소는 각 통신을 위한 고유 번호이다. IPv4와 IPv6로 버전이 나누어 지며 일반적인 웹 통신은 IPv4를 이용한다. 가장 큰 이유는 보안적인 측면이다. 현재 구축된 보안시스템들은 모두 IPv4를 기준으로 잡고 있어 호환이 어렵다한다. IPv6가 나온 이유가 IPv4 주소 형식의 고갈 때문이며 실제로 IPv4의 주소는 모두 소진되어 주소 할당을 하지 않고 있다. 그럼에도 AWS같은 서비스에서 IPv4 형식의 주소를 발급할 수 있는건, 클라우드 회사들은 IPv4를 소유하고 있고 새..

요즘 Next.js를 사용하며 CSS-IN-JS 대응이 안되는 문제로 Tailwind CSS를 자주 사용하고 있다. VScode 에서 Tailwind CSS IntelliSense 라는 확장 프로그램을 제공해 Tailwind에서 정해진 포맷을 보여주지만 약간의 불편함이 있다. 설정을 통해 해결해보자! Tailwind Tailwind는 CSS 프레임워크로 엄청나게 많은 utility class로 이루어진 프레임워크다. 만들어져 있는 utility class를 class에 넣어주기만 하면 해당 스타일링이 적용된다. 사용법 설치방법은 공식페이지를 참고하자. 공식페이지를 따라 설치했다면 사용법은 별거 없다. function App() { return ( ); } export default App; 정해진 uti..

회사에서 4deps의 카테고리 기능을 만들어야 했는데 재귀 컴포넌트를 활용해 반복 코드를 줄일 수 있었습니다. 4deps를 기준으로 잡았지만 재귀를 사용하면 몇 deps든 보여줄 수 있죠! 성능적인 문제는 별개지만 브라우저의 성능이 발달하면서 이정도는 문제가 없다 판단했습니다. 재귀 알고리즘 재귀는 알고리즘의 하나로 주로 코딩테스트 문제를 풀 때 많이 접할 수 있는데, 가장 대표적인 재귀 알고리즘을 사용한 사례로는 피보나치 수열이 있다. const fibonacci = (num: number) => { if (num < 2) { return num; } return fibonacci(num - 1) + fibonacci(num - 2); }; 간단하게 설명하자면 "자기 자신을 호출하는 함수"를 재귀 함수..

XSS (크로스 사이트 스크립팅) 이번 면접에서 XSS가 무엇인지 설명해 달라는 질문을 받고 보안적 이슈라고만 알고 있었던 부분에 반성하며 기록해본다.😅 XSS란 ? 웹 상에서 가장 기초적인 취약점 공격 방법이다. 악의적인 사용자가 공격하려는 사이트에 스크립트를 넣는 기법을 말하며 공격에 성공하게 될 경우 사이트에 접속한 사용자는 삽입된 코드를 실행하게 되고, 의도치 않은 행동을 수행시키거나 쿠키, 세션 토큰 등의 정보를 탈취한다. 공격 방법 ⚔️ Stored XSS (저장형 크로스 사이트 스크립팅) Stored Xss 공격은 보안이 취약한 서버에 악성스크립트를 저장하여 발생시킨다. 서버에 악성 스크립트를 저장하는 방법은 여러가지가 있겠지만 대표적인 방법은 게시판, 사용자 프로필, 댓글 등을 통해 서버에..

debnounce란 ? - debounce는 여러 개의 순차적 이벤트 호출을 마지막(또는 처음) 하나의 호출만 하도록 하는 프로그래밍 기법 - 주로 검색, 스크롤 같은 반복적인 이벤트가 일어날 때 사용하며 유명한 라이브러리인 lodash를 설치하면 간단하게 사용할 수 있다. - 만약 회원가입에서 이메일의 중복확인을 onChange 이벤트로 체크한다고 했을 경우 사용자의 입력마다 API 호출을 하게 되는데 이러면 끔직한 서버 비용폭탄을 맞을 수 있다. debouncing 예제 useEffect(() => { console.log(`http 요청 ${formData.email}`); }, [formData.email]); useEffect를 이용해 email input이 서버에 같은 아이디가 있는지 중복확인..

useState ⭐️ React의 state는 컴포넌트 내부의 변경 가능 한 값이다. 함수형 컴포넌트에서 useState 훅을 사용해 상태를 변경한다. import React, { useState } from 'react'; function App() { const [number, setNumber] = useState(0); return ( {number} ); } export default App; React 패키지에서 useState를 불러와 import 후 사용할 수 있다. useState의 인자에는 초기값을 할당한다. (불리언이나 배열, 객체도 할당 가능) useState는 배열을 반환하는데 이때 첫번째 number는 원소의 현재 상태, 두번째 원소는 Setter함수를 반환한다. setState..

개인 프로젝트 개인 프로젝트 HODU샵을 진행하던 중 유효성검사 부분에서 input값이 1개씩 밀리는 현상이 나왔다. 회원가입 input값들을 저장하고 있는 values 객체생성 values에서 구조분해할당한 username, password를 유효성검사 로직에 넣어주고 이런식으로 onChange를 감지하며 변경해 주었는데 문제는 유효성 test 정규표현식을 만든 변수에 직접 state값을 넣으니 발생한 문제였다. 원인은 onChange함수에 if문으로 userNameRegExp, passwordRegExp 를 넣을때의 state는 setState로 변경되지 않은 값이 적용되기 때문이고 이건 setState가 비동기로 작동하기 때문이다. 해결 target과 targetName을 매개변수로 받는 isVal..