개발자 지망생의 블로그

[React] 여러 개의 input의 onChange 한 번에 관리하기 로그인, 회원가입 페이지를 구현하면 여러 개의 input을 관리해야 한다. 회원가입 페이지에서 아이디, 비밀번호, 비밀번호 확인, 닉네임, ... 등등 여러 개의 input을 입력받는다고 생각할 때, 이를 모두 다른 state로 관리하는 것은 생각만 해도 코드가 지저분하다. // BEFORE function App() { const [id, setId] = useState(''); const [pw1, setPw1] = useState(''); const [pw2, setPw2] = useState(''); const [nickname, setNickname] = useState(''); const handleIdChange = (e..

[오픈소스] MDN 번역 기여하는 법 | 나도 이제 MDN Contributor! 🥳 MDN 문서 중 한국어 번역이 없는 페이지를 번역해서 Pull Request를 올렸는데, Merge 되어 해당 페이지의 한국어 페이지가 생겼다! 🙂👏 MDN 번역은 처음 해봤는데 가이드를 읽어봐도 좀 어려웠다. 까먹을 것 같아서 기록할 겸, 번역을 하고 싶은 다른 분들께 도움도 드릴 겸 포스팅으로 남겨둔다. 공식적인 가이드 링크는 다음과 같다. 1. https://github.com/mdn/translated-content/blob/main/docs/ko/guides/translation-guide.md 2. https://github.com/mdn/translated-content/issues/827 나는 거의 2번 ..

[React] useNavigate 슬래시 유무에 따른 차이 (React Router v6) 개인 프로젝트를 하다가 발견한 useNavigate 슬래시 유무에 따른 차이를 기록해보려 한다. 로그인 페이지에서 '회원가입' 버튼을 누르면 회원가입 페이지로 이동하도록 구현해야 했다. 로그인 페이지는 /login, 회원가입 페이지는 /join에 존재했다. function LoginPage() { const navigate = useNavigate(); return ( ... navigate('join')} /> {/* 1 */} navigate('/join')} /> {/* 2 */} ); } 1번과 같이 설정할 경우 도메인 뒤에 '/join'이 추가로 붙는다. 2번과 같이 설정할 경우 도메인 뒤에 있던 fil..

[React] GitHub Pages 배포 시 빈 화면만 뜨는 에러 | BrowserRouter, HashRouter - React Router renders a blank page - GitHub pages show blank page - BrowserRouter blank page 일주일 넘게 나를 괴롭힌 에러에 대해 기록해보려고 한다. 이 에러는 제목에 서술돼 있듯 React 프로젝트를 GitHub Pages로 배포할 때 겪은 에러이다. 나는 React 프로젝트를 처음 구축할 때 create-react-app을 사용하지 않고 babel, webpack 등을 직접 설치하여 프로젝트를 구성했다. 또한, GitHub Pages 배포 자동화를 적용해 GitHub에 push 할 때마다 배포가 자동으로 이루어..

[JS] 객체 프로퍼티 접근법과 식별자 네이밍 규칙 객체 프로퍼티 접근법과 식별자 네이밍 규칙에 대해 정리하려고 한다. 객체object는 프로퍼티와 메서드로 구성된 집합체이다. 프로퍼티property란 객체의 상태를 나타내는 값(data)이고, 메서드method는 프로퍼티를 참조 및 조작할 수 있는 동작(behavior)이다. 메서드도 결국 프로퍼티인데, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메서드라고 일컫는다. 객체 프로퍼티에 접근하는 방법은 크게 두 가지가 있다. 1. 마침표 표기법dot notation : 마침표 프로퍼티 접근 연산자(.) 사용 2. 대괄호 표기법bracket notation : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용 오늘은 이 중 대괄호 표기법에 대해 ..

[CSS] 스크롤바 커스텀 | 스크롤바에 padding, margin 넣기 CSS로 웹페이지의 스크롤바를 커스텀하는 방법에 대해 알아보자. 사실 스크롤바에 padding, margin을 넣는 방법은 존재하지 않는다. 하지만 border를 사용해 padding, margin을 넣은 것처럼 보이게 만들 수 있다. 일단, 스크롤바는 위 같이 크게 막대와 배경 두 개의 요소로 이루어져 있다. 막대 부분은 thumb, 배경 부분은 track이다. 요소마다 스크롤바 디자인을 다르게 설정할 수 있다. -webkit-scrollbar, -webkit-scrollbar-track, -webkit-scrollbar-thumb의 3가지 가상 요소를 이용하면 해당 요소의 스크롤바를 스타일링할 수 있다. 3가지 가상 요소 이외..

[JS] 이벤트 객체의 target, currentTarget 차이 자바스크립트 Event 객체의 프로퍼티인 target, currentTarget의 차이에 대해 알아보자. target은 이벤트가 처음 발생한 DOM 요소, currentTarget은 발생한 이벤트가 등록된(이벤트 핸들러가 바인딩된) DOM 요소를 가리킨다. 가장 쉬운 click 이벤트를 예로 들면, target은 클릭이 일어난 바로 그 요소를 가리키며 currentTarget은 클릭이 일어난 요소부터 상위로 올라가며 이벤트 핸들러가 등록된 요소를 찾아 가리킨다. 이해를 돕기 위해 간단한 HTML 문서를 작성해보았다. 실행 화면과 코드는 다음과 같다. item1 item2two item3 ul { background-color: pink;..

[JS] 얕은 복사, 깊은 복사 차이 쉽게 이해하기 자바스크립트의 얕은 복사(shallow copy), 깊은 복사(deep copy)에 대해 쉽게 이해해보자. 이에 대해 이해하려면 먼저 자바스크립트의 원시 타입(primitive type)과 객체 타입(object/reference type)에 대해 이해해야 한다. 자바스크립트에서 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다. 원시 타입에는 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7개의 타입이 있고, 그 외 모든 데이터는 객체 타입이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 반면에, 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값..

[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상 React로 나만의 이력서 & 포트폴리오 페이지를 만들던 중 작은 오류가 발생했다. p 태그 안에 들어갈 텍스트에 개행을 넣기 위해 stirng을 백틱으로 감싸고 줄바꿈을 입력했는데 페이지에 적용되지 않았다. const aboutme = { EN: `Hi, I'm blahblah. I started learning software development with interest in mobile application development. Now I'm trying to progress as an agile and systematic front-end developer.`, KO: '안녕하세요, 앱 개발에 흥미를 느껴 개발을 시작했으며 민첩하고 체..

[자바스크립트] 이벤트 위임을 활용한 Event Listener 중복 해결 드림코딩에서 '프론트엔드 필수 브라우저 101' 강의를 듣다가, 쇼핑 리스트 만들기 실습 문제를 풀어보았다. input 창에 내용을 입력하고 추가 버튼을 누르거나 엔터 키를 누르면 목록에 아이템이 추가되고, 추가된 목록에서 오른쪽 삭제 버튼을 누르면 해당 아이템이 삭제되는 간단한 웹사이트이다. 추가/삭제 기능은 원하는 대로 이루어지지만, 위와 같이 삭제 버튼에 Event Listener가 여러 개 쌓이는 문제가 있었다. 이는 아이템을 추가할 때마다 document에서 삭제 버튼을 모두 찾고, 찾은 모든 삭제 버튼에 Event Listener를 각각 추가해주도록 구현했기 때문이다. 겉보기에는 문제가 없어보이지만, 현재 프로그램의 경..