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

웹페이지 작업을 하다보면 말줄임(...)이 필요한 상황이 있습니다, 말줄임을 통해서 해당 길이 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다. 이번에는 CSS를 이용해서 텍스트의 말줄임 표시를 하는 방법을 알아보겠습니다. 1. 한 줄에서 텍스트 말 줄이기 우선 말 줄임을 적용하려면 블록 요소여야 합니다. 인라인 요소는 가로 너비를 가질 수 없기 때문에 말 줄임을 적용을 하려면 블록 요소로 바꿔줘야 합니다. 또한 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 합니다. 해당 속성이 없으면 띄어쓰기가 있을 때 너비를 넘으면 자동으로 글자가 넘어가기 때문에 이러한 상황을 방지하기 위해 white-space: nowrap 적용해주어야 합니다. 다음 아..

이벤트 버블링(Bubbling) 이벤트 버블링이란 이벤트가 발생했을 때 해당 요소에 할당된 핸들러가 동작하고, 또 상위 요소에 해당 이벤트가 전달이 되어 핸들러가 동작을 하는 현상을 의미합니다. 예시를 보면 훨씬 이해가기가 쉽기 때문에 바로 확인해보겠습니다. div1 div2 div3 이런 구조에서 가장 아래에 위치한 div3을 클릭해서 이벤트가 발생을 하면 상위 요소에게 해당이벤트가 전달이 되면서 핸들러가 작동이 되는 흐름이 바로 이벤트 버블링입니다. 그렇기 때문에 결과는 이렇습니다. ※거의 모든 이벤트는 버블링 됩니다. 여기에서 중요한 키워드는 ‘거의’ 입니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있으며, 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 됩니다. 버블링 막기 가끔 버블..

Children Props? 리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 예를 들면, function App() { return Hello world! } 이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다. function Welcome(props) { return {props.children}; } Children Props Type 타입스크립트에서는 Children Props를 전달을 할 때 타입을 지정을 해주어야 합니다. 그렇다면 어떤 타입으로 지정을 해주어야 하는지 알아보겠습니다. 1. JSX.Element..

FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다. React.FC 사용 타입스크립트를 이용해서 리액트로 작업을 하다보면 아래의 형태로 작업을 하는 경우가 많습니다. import React from 'react'; type GreetingsProps = { name: string; }; const Greetings: React.FC = ({ name }) => ( Hello, {name} ); export default Greetings; React.FC를 사용하는 경우에는 다음과 같이 props의 타입을 Generics으로 넣어서 사..

서론 가격표를 표시 할 때는 10000원 보다는 10,000원 식으로 표시해야 가독성이 좋습니다. 하지만 숫자 데이터를 표시하면 콤마 없이 표시되기 때문에 이번에는 자바스크립트를 이용해서 콤마를 찍어주는 방법을 정리해보겠습니다. 1. 정규 표현식 사용하기 첫 번째 방법은 replace() 메서드에 정규 표현식을 사용하여 콤마로 변환하는 방법 입니다. const num = 123456789 console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")) // 123,456,789 ※ 정규표현식에 대해서는 글이 길어지기 떄문에 다음에 정리하겠습니다. 2. toLocaleString() 두 번째로는 toLocaleString() 메서드를 이용하여 콤마를 찍..

상대 경로로 파일 import 우선 절대 경로를 설정하기 이전에 상대 경로로 import 했을 때의 방식은 다음과 같습니다. import Home from './pages/Home' import Detail from './pages/Detail' import ToDoLIst from '../components/ToDoLIst';위의 경우와 같이 ./ 또는 ../을 이용하여 경로를 찾아가서 import 해야 합니다. 지금의 같은 경우는 어렵지 않게 찾아가기도 하고, 크게 가독성을 떨어뜨리지는 않는다고 볼 수 있지만, 뎁스가 깊어지고, 폴더가 다양해지면 나중에는 ../../../../파일명의 형태처럼 복잡하고 가독성이 떨어지게 됩니다. 그래서 이 문제를 해결하기 위..

원시 값과 참조 값 알아보기 자바스크립트에는 원시 값과 참조 값 두가지의 값이 있습니다. 원시 값과 참조 값에 대해서 알고 싶으신 분들은 [JavaScript] 자바스크립트 원시 값과 참조 값!을 확인해주시면 되겠습니다. 원시 값과 참조 값의 복사 원시 값을 복사할 때에 그 값은 또 다른 독립적인 메모리 공간에 할당하고 있기 때문에, 원시 값을 복사 한 후 그 값 수정을 하여도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 하지만 참조 값은 원시 값과는 다르게 변수가 객체의 주소를 가리키는 값이기 때문에 복사를 하면 복사된 값(주소)이 같은 값을 가리키고 있어서 수정시에는 서로에게 영향을 줄 수 밖에 없는 것 입니다. 한마디로 하나의 주소를 참조해서 원본과 복사한 변수에서 가르키고 있다는 것 입..

FormData FormData는 form필드와 그 값을 쉽게 보내고 생성할 수 있도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다. 생성자는 다음과 같습니다. let formData = new FormData(폼); FormData 메서드 1. formData.append() append 메서드는 두가지 방식의 버전이 있습니다. 매개변수를 2가지를 가지고 있는 버전과 3가지를 갖는 버전이 있습니다. 하나하나 알아보자면 다음과 같습니다. 매개변수가 2개인 버전 formData.append(name, value) // name과 value를 가진 폼 필드를 추가 매개변수가 3개인 버전 formData.append(name, blob, fileName..