맨 땅에 프론트엔드 개발자 되기

BEM CSS 는 Cascading Style Sheet 의 약자다. Cascading 의 뜻을 검색해보면 '폭포수처럼 흘러내리는' 이라는 뜻이 나온다. 이것은 CSS가 부모에서부터 자식으로 폭포수처럼 상속되어 적용된다는 뜻을 가지고 있다. 그래서 CSS를 작성할 때는 이 상속관계에 대해서 잘 알고있어야 현재 Element에서 어떤 속성이 적용되고 있는지 알 수 있다. 이러한 CSS 작성 규칙을 예측 가능하게 잘 해보자는 의미에서 나온 방법론이 바로 BEM 이다. BEM은 CSS 작성을 할 때 필요한 Class 명을 어떻게 지을 것인가에 대한 방법론이다. Depth가 별로 깊지 않은 프로젝트에서라면 아무렇게나 클래스 명을 지어도 상관없지만 프로젝트의 규모가 커지고 Depth가 깊어질 수록 클래스 명을 중..

JavaScript 에서 new Date() 내장 함수로 월(getMonth)이나 일(getDate)을 가져올 경우, 한 자리 수 날짜는 한 자리로, 두 자리 수 날짜는 두 자리 수로 표기된다. 두 자리 수 표기로 통일하는 방법은 아래와 같다. // 월 2자리 표시 (“0” + (this.getMonth() + 1)).slice(-2); // 날짜 2자리 표시 (“0” + this.getDate()).slice(-2); slice(-2)를 하면 끝에 두 자리를 가져오므로 해석해보자면, - 한 자리일 경우 "0" + "1" = "01" => 끝 두 자리 "01" - 두 자리일 경우 "0" + "12" = "012" => 끝 두 자리 "12"

이러한 메뉴 혹은 모달, 그리고 커스텀 셀렉트박스를 만들 때, 외부 영역을 클릭하면 닫히게 만들고 싶을 경우, 사용하는 방법은 크게 두 가지가 있다.useState 활용하기import React, { useState } from "react"; const Sample = () => { const [isDropMenuOpen, setDropMenuOpen] = useState(false); const toggleDropMenu = (e: React.MouseEvent) => { e.stopPropagation(); // 이벤트 캡쳐링 방지 setDropMenuOpen(prevState => !prevState); } return ( setDropMenuOpen(false)} > print download ..

웹브라우저에서 내가 만든 웹페이지의 글 내용을 드래그 못 하게 하는 방법. 간단하게 CSS로 처리할 수 있다. body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 브라우저 별로 다 막아준다. 일부 영역에서는 드래그를 허용하고 싶으면, 위의 코드를 body 영역에 기본으로 넣어주고, 원하는 영역에 아래 코드를 적용한다. .allow-to-drag { -webkit-user-select:all; -moz-user-select:all; -ms-user-select:all; user-select:all } 텍스트만 드래그를 허용하고 싶을 때, .allow-to-drag-text { -webk..

모바일 앱 개발에 있어서 기기 사이즈, 노치 크기 등이 다 다르므로, react-native-safe-area-context 라이브러리를 사용하면, iOS 와 안드로이드에서 모두 Safe Area(기기 사이즈, 노치 크기 등으로 가려지지 않는 안전지대)를 확보할 수 있다. 에러 해결 react-native-safe-area-context 라이브러리를 설치했는데도 불구하고 위와 같은 에러 메시지가 나온다면, 아래 커맨드를 실행한다. $ npx pod-install ios 그리고 나서 다시 Metro를 실행해주면, 에러가 해결된다.

라이브러리 설치 $ npm install react-native-vector-icons // for TypeScript $ npm install --save-dev @types/react-native-vector-icons 라이브러리 연결 React Native 0.59 버전 이하에서는 아래 명령어로 바로 연결을 해줄 수 있었으나, $ react-native link react-native-vector-icons 0.60 버전 이상부터는 수동으로 연결을 해주어야 한다. - iOS react-native CLI로 프로젝트를 시작했다는 가정하에 진행한다. (Expo CLI로 시작했을 경우, Expo 패키지에 기본적으로 포함되어 있다.) react-native CLI로 프로젝트를 시작하려면, 기본적으로 Xco..