스페이스 루미

어쩌다보니 써야 할 일이 생겨서 기록으로 남긴다. 물론 리액트 공식문서에도 사용법이 잘 나와있다. https://ko.reactjs.org/docs/react-without-jsx.html JSX 없이 사용하는 React – React A JavaScript library for building user interfaces ko.reactjs.org 코드 샘플 e('header', {className: 'custom-header'}, '타이틀'), e('article', {className:'custom-article'}, e('div', {className:'custom-div'}, e('span', {className:'custom-span'}, '샘플') )); e는 React.createEleme..

마크업 1 2 3 4 5 6 7 8 9 10 스타일 (SCSS) section { padding-bottom: 30px; background-color:#fafafa; } .dashboard-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, 200px); /* 200px짜리 영역을 갯수만큼 만듬 */ grid-auto-rows: 200px; /* 줄바꿈 될때마다 자동으로 200px 로우 생성 */ &__card { /* 카드의 크기는 각 grid 영역으로 잡음 */ width: 100%; height: 100%; background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, ..

공용으로 사용할 커스텀 버튼 컴포넌트를 만들어보자. CustomButton.tsx (컴포넌트) import React from 'react'; type ButtonTypes = React.DetailedHTMLProps; export interface ButtonProps extends ButtonTypes { onClick: () => void; children: React.ReactNode; } const CustomButton = React.forwardRef( ({ onClick, className, children, ...props }, ref?: React.Ref) => { const classNames = [className, 'custom-btn'].filter(v => Boolean(v)..

피그마 커뮤니티 피그마 커뮤니티에는 많은 공유 자료들이 있다. 자료가 풍부하여 이를 잘 활용하면 더 나은 디자인을 할수있기때문에 많은 디자이너들이 커뮤니티를 애용하고 있을것이다. 아마도. 인기있는 플러그인이나 디자인, UI kit를 빠르게 찾을수있는 방법을 알아보자. 우선 커뮤니티에 들어간다. https://www.figma.com/community Explore에는 메인화면처럼 전체적인 항목들을 보여준다. 피그마 커뮤니티 플러그인 인기순 테이블 Installs 헤더를 클릭하면, 다운로드가 가장 많이된 플러그인 순으로 소팅해준다. 첫 진입 화면에서 소팅 아이콘 표시(화살표)가 없기 때문에 클리커블한 영역인지 모를수도있는데, 테이블 UI의 암묵적인 요소이니 알아두면 좋다. (아이콘을 노출시키는곳도 많다) ..

XHTML XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다. XML문서로 HTML을 정의하는 W3C(World Wide Web Consortium) 표준이다. 1. 페이지의 요소가 잘 구성되었음을 보장. 모든 브라우저에서 일관되게 보인다. XHTML을 사용하면 페이지가 접근성 표준을 보다 쉽게 준수한다. Boiler Plate(기본 틀) 재사용 가능하며 같은형태를 띄는 코드를 보일러플레이트 코드라고 한다. 아래는 이메일 형식의 보일러플레이트이다. Row 1 1 2 Row 3 이메일 HTML 작업을 할때 알아둬야할 점 - XHTML이므로 meta태그에 Content-Type을 설정해..

target="_blank" 윈도우를 새창(tab)으로 열고싶으면 태그에 target을 _blank로 적어주면 된다. target의 기본값은 "_self"이며, 현재 프레임에서 오픈한다. 이동하기 rel="noopener noreferer" * 이때 rel 속성에 noopener,noreferer를 반드시 적용해줘야 한다. 그래야 Tabnabbing 피싱(새창을 띄웠을때 기존 사이트를 가짜사이트로 바꿔치기해서 정보를 탈취하는 피싱방법)을 막을 수 있다. noopener : window.opener 객체를 생성하지 않는다. noreferer :window.opener 조작하지 못하게 한다. (참조자 정보 없음)

SEO 설정은 중요하다. 특히 한국인은 네이버에서 주로 검색을 많이하기 때문에 네이버 SEO 설정할겸 방법에 대해서 기록해볼까 한다. 개발자들은 구글검색을 많이 하므로 구글 SEO 등록도 다룰 예정이다. 나는 티스토리 블로그를 사용하므로, 티스토리에서 네이버 SEO 설정을 하는법으로 설명한다. 만약 닷홈이나 워드프레스 등을 사용하고 있다면 HTML 업로드 방식을 더 권장한다. (뒤에 나오는 업로드 방식) 네이버 서치 어드바이저 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 서치 어드바이저에 들어가서 스크롤을 조금 내리면 웹 마스터 도구 사용하기가 나온다. 여기에서 네이..

JS 데이터에는 원시자료형(primitive type), 참조 자료형(reference type) 타입이 있다. 변수에는 하나의 값이나 주소만 저장할수있다. 원시 자료형 (primitive type) 원시 자료형이 할당될 때, 변수에 할당할 때 값(value)을 저장하며, 하나의 데이터를 담는다. number, string, boolean, undefined, null(엄밀하게는 객체다), symbol 등이 있다. const stringA = 'a'; const number123 = 123; const boolSample = true; 참조 자료형 (reference type) 원시 자료형이 아닌 모든 타입. 원시 자료형 데이터들의 집합이며, 변수에 할당할때 메모리 주소를 저장한다. 배열, 객체, 함수 ..

DOM에서 상위 클래스 선택 하고, 하위노드를 출력한다. HtmlCollection은 Array가 아니므로 Array로 바꿔준다. map돌려서 textContent로 정규식을 이용해 콤마를 제거한다. 스타일 변경 기존의 Tag영역을 Chip 형태로 바꾸고싶어서 일단 스타일을 변경하기로 했다. 심플한 검정색 칩으로 할거라 스타일을 수정했다. /* Tag 태그 */ .box-tag .title-sidebar{ margin-bottom:20px; } .area-aside .box-tag a{ background-color:#242424; color:white; padding:4px 12px; border-radius:50px; } .area-aside .box-tag a:hover{ cursor:pointer..

[정의] Nullish coalescing operator -ish 접미사는 '~와 같은 성질을 지닌', '~같은' 이라는 뜻이다. Null-ish니깐 Null과같은 성질을 가진~~~ 쯤으로 해석해면 되겠다. Nullish : 확실히 null이거나 undefined 이거나 coalescing : 통합과 집약, ~를 병합한다. null, undefined 여부를 체크하여 맞다면 (??) 오른쪽에 있는 값을 리턴한다. const testObj = { key1: null, key2: undefined, key3: "rumi", key4: true, key5: false, } console.log(testObj.key1 ?? '-') // return '-' console.log(testObj.key2 ?? '..

for 단순 반복실행 요소와 index 값을 사용하여, 증가 혹은 감소하면서 순차적 실행한다. 원하는 결과가 나오면 break; 로 중단할수 있다. const forArray = [1, 3, 5, 7]; const forNewArray = []; for (let i = 0; i < forArray.length; i++) { forNewArray.push(forArray[i]); } console.log({ forNewArray }); forEach 순회 실행 forEach함수에서는 index와 크기정보를 사용하지않으며 순회한다. 완료할때까지 중단할 수 없다. 배열의 각 요소마다 callback을 실행한다. const forEachArray = [1, 2, 3, 4]; const forNewEachArra..

let array1 = ["num1", "num2"]; let array2 = ["num3", "num4"]; let sumLetArr = [...array1, ...array2]; let obj1 = { key1: "value1", key2: "value2" }; let obj2 = { key2: "newValue2", key3: "value3" }; let sumAssignObj = Object.assign({}, array1, array2); let sumSpreadObj = { ...obj1, ...obj2 }; let testObjectAssign = Object.assign({}, 합칠것1, 합칠것2) 앞에 {}를 적어주지않으면 새로운 object를 생성하는게 아닌, 원본 합칠거1을 바꿔버린다..

Git 권한이 없는 계정으로 vscode에 로그인 되어있는 경우였다. Git 계정을 변경해주자. 1. cmd + space로 keychain access(키체인접근)을 킨다 2. github.com을 검색해서 더블클릭 후 계정에 깃 아이디를 입력해준다 3. 하단 암호보기에 Access Token을 넣어준다 Access Token 발급방법 깃 로그인 후 우측상단에 settings 좌측 하단에 Developer settings personal access token 누르고, Generate new token 해주면 된다. description 작성하고, expire date 설정하고, 체크는 repo 설정해주면 된다. 4. 설정 바꿨으면 vscode에서 config 설정을 바꿔준다 git config use..