DH의 개발 공부로그 DH의 개발 공부로그

템플릿 문법Vue의 템플릿 문법이란 데이터를 렌더링 된 DOM에 바인딩하여 화면을 조작하는 방법을 말합니다.템플릿 문법은 크게 데이터 바인딩과 디렉티브 두가지로 나누어 볼 수 있습니다.먼저 데이터 바인딩과 관련 된 부분 먼저 살펴보면 아래와 같습니다.1. 데이더 바인딩텍스트 보간법텍스트 보간법은 뷰의 데이터 바인딩으로 사용되는 가장 기본적인 방법으로 "Mustache"(이중 중괄호) 문법을 사용하는 방법입니다메시지: {{ message }}해당 부분에서 이중 중괄호 안의 message는 컴포넌트의 message 데이터 값으로 대체가 됩니다.예를 들어보면 message값이 안녕하세요!라면 실질적으로는 아래와 같은 코드가 됩니다.메시지: 안녕하세요!그리고 message 값이 변경 될 때마다 변경된 값으로 업..

Vue.js Vue.js는 사용자 인터페이스 개발을 위한 자바스크립트 기반의 프로그레시브 프레임워크(Progressive Framework)입니다. 여기서 말하는 프로그레시브는 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해서 개발하는 것을 뜻하며, 한마디로 뷰는 웹과 앱의 장점을 모두 수용하여 진화된 웹앱을 개발할 수 있는 프레임워크 입니다. 또한 뷰는 프레임워크이기 때문에 라이브러리인 리액트와 다른 차이점도 있습니다. Vue.js의 장점 직관적이고 배우기 쉽다. 컴포넌트 기반의 프레임워크로 코드 재사용을 높이고, 양질의 코드를 개발할 수 있다. 앵귤러(Angular)의 장점(데이터 바인딩), 리액트(React)의 장점(가상 돔)을 다 가지고 있다. Vue.js 특징 1. MVVM 패턴 M..

리액트 절대경로 Vite와 타입스크립트 상황에서의 절대경로 설정을 하는 방법은 정리를 했었는데 create-react-app로 리액트 프로젝트를 생성을 했을 때 절대경로 설정 하는 방법을 알아보겠습니다. [Vite, TypeScript] Vite + 타입스크립트 환경에서 절대 경로 설정하기! jsconfig.json 우선 package.json 과 같은 위치에 jsconfig.json 파일을 생성해줍니다. 그리고 json 파일 내부에 아래와 같이 작성한다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그 후 다시 서버를 실행해주면, 기존의 방식인 상대경로가 아닌 절대경로로 설정할 수 있게 됩니다. // 상대경로 import Title ..

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`..

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

드롭다운 메뉴 이번에는 위의 이미지에서 보이는 펼침/닫힘만 되는 간단한 드롭다운 메뉴를 작업해 보았습니다. 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 파일..

React-icons React-icons은 리액트 프로젝트 작업을 할 때 아이콘을 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 오늘은 이 React-icons을 적용해서 사용하는 방법을 알아보겠습니다. React-icons 설치 $ npm install react-icons --save 또는 $ yarn add react-icons사용 방법 1. 좌측 아이콘 목록 위의 이미지에서 보이듯이 리액트 아이콘 좌측 목록에서 원하는 아이콘이 있는 패키지를 고르거나, 직접 검색을 하면 됩니다. 2. 아이콘 선택 원하는 아이콘을 찾아서 클릭을 하면 자동으로 해당 아이콘의 이름이 복사가 됩니다. 3. import 아이콘 import { 아이콘이름 } from "react-icons/아이콘주소"; 복사한 아이콘..