DH의 개발 공부로그

반복문 반복문 중에서 for 또는 forEach 말고 사용은 해봤지만 자주 사용하지 않아서 헷갈리는 for...in과 for...of를 정리하고 이 둘의 차이점을 알아보겠습니다. for...in문 for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)라고 MDN 사이트에 정리가 되어있습니다. 한마디로 for...in문은 객체의 속성들을 순환하면서 작업을 수행하는 것입니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } // output //..

DOM 조작을 위한 ref 전달 리액트에서 ref를 가장 많이 사용하는 경우는 바로 DOM 엘리먼트를 참조하는 것입니다. 하지만 이 ref를 prop를 전달하는 경우, 일반적인 방법으로 되지 않습니다. import React, { useRef } from "react"; const MyInput = ({ ref }) => { return } const MyApp = () => { const inputref = useRef(null) return ( ) } export default MyApp 위의 코드처럼 ref를 전달하게 되면 경고 메시지가 뜨게 됩니다. Warning: Input: `ref` is not a prop. Trying to access it will result in `undefined`..

배포 후 새로고침 리액트 작업을 버셀로 배포 후 정상적으로 작동이 되는데, 라우트 이동 후 중간에 새로고침을 하면 404에러가 나는 것을 발견하였습니다. 이를 해결하기 위해 구글에 서치를 해보았고 해결 방법을 찾았습니다. vercel.json 우선 vercel.json 파일을 만들고 아래의 코드를 입력해주면 아주 간단하게 문제를 해결합니다. 버셀에서 새로고침이 되면 알아서 해당 위치의 라우트로 이동을 시켜줍니다. { "rewrites": [ {"source": "/(.*)", "destination": "/"} ] } 결론 문제를 해결하는 것에 급급하여 코드의 정확한 의미 파악을 하지 못하고 사용을 한 것 같아서 공부가 더 필요하다고 느꼈습니다. 역시 개발 분야는 다양한 문제를 만나봐야...더욱 성장을 ..

비밀번호 보기/숨기기 로그인 페이지에서 이제는 필수가 되어버린 기능인 입력하는 비밀번호를 보거나 숨기는 기능을 아주 간단하게 구현을 해보았습니다. 리액트로 작업을 했기 때문에 약간의 차이만 있을 뿐 자바스크립트 코드를 기반으로 하기 때문에 자바스크립트 환경에서도 구현이 가능합니다. 코드 구현 마크업 아래의 코드를 이용하여 위의 이미지처럼 작업을 하였고, 스타일은 module을 이용하여 작업을 했습니다. 해당 스타일 코드는 지금 상황에서 중요한 부분이 아니기 때문에 생략하겠습니다. function app () { const [userIdInput, setUserIdInput] = useState('') const [userPwInput, setUserPwInput] = useState(&#3..

Script 태그 HTML 파싱 ▶️ JavaScript 파일 다운로드 후 실행 아마 대부분의 경우에 제일 많이 위치하여 사용하는 방법일 겁니다. 자바스크립트 파일을 다운로드하기 전 HTML 코드를 모두 파싱 하기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다는 장점이 있습니다. 하지만 HTML 코드가 자바스크립트 의존적인 웹사이트라면 사용자가 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다는 단점이 있습니다. 3. async 속성을 추가해 head 태그 안으로 넣기 HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱 async 속성을 추가하는 경우에는..

애니메이션 웹사이트에서 메뉴바, 사이드바를 보면 위의 이미지 처럼 밑에 또는 뒤에 바가 애니메이션이 것을 많이 보셨을 겁니다. 그리하여 이번에는 CSS 애니메이션을 공부하고 정리할 겸 위의 이미지에 보이는 메뉴바 애니메이션을 만들어 보았습니다. HTML 메뉴를 만드는 방법은 여러가지의 방법과 다양한 태그로 만들 수 있지만 이번에 중요한 부분은 CSS이기 때문에 간단하게 nav와 div 그리고 애니메이션을 위한 span으로 구성을 하였습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 CSS 메뉴바 애니메이션에서 가장 중요한 부분이 바로 CSS입니다. 우선 메뉴들을 옆으로 나열해주기 위해서 flex를 사용하였습니다. nav { position: relative; // 애니메이션을 위한 기준 display: fle..

드롭다운 메뉴 이번에는 위의 이미지에서 보이는 펼침/닫힘만 되는 간단한 드롭다운 메뉴를 작업해 보았습니다. onClick 이벤트와 useState를 활용하면 간단하고 쉽게 작업을 할 수 있습니다. 하지만 여기서 중요한 부분은 드롭다운 메뉴가 오픈 상태에서 다른 공간 또는 메뉴를 클릭하면 드롭다운이 닫혀야 한다는 것 입니다. 그러기 위해서는 onBlur 이벤트를 활용해야합니다. onBlur onBlur 이벤트는 엘리먼트 또는 자식 엘리먼트에서 포커스가 사라졌을 때 호출됩니다. console.log('blur!!')} 예를 들면 위의 input 바깥의 영역을 클릭해서 포커스카 아웃이 되면 콘솔 창에 'blur!!!'가 찍히게 됩니다. 코드구성 Container.jsx const ..

SVG 사용하기 리액트에서 SVG 파일을 사용하는 방법은 여러가지가 존재합니다. 가장 익숙한 방법으로는 img 태그 src 속성에 SVG 파일을 추가하는 방법이 있지만, 이 경우에는 SVG 파일의 장점을 십분 발휘하지 못합니다. img 태그로 불러오면 색깔이나 크기가 조금 다른 아이콘을 사용하기 위해서는 또 새로운 SVG 파일을 갖고 있어야 하기 때문입니다. 그렇다면 어떤 방법을 이용하여 SVG 파일을 불러오는 것을 추천하는 지는 아래에서 설명 드리겠습니다. SVG를 React 컴포넌트로 import하기 이 방법은 Create-React-App에서 가능한 방법이며, 위에 이미지처럼 img 태그를 사용하기 보다는 SVG 파일 자체를 컴포넌트로 사용하길 추천드립니다. 이 방법을 사용하면, 하나의 SVG 파일..