스페이스 루미

넥스트에서 scss 사용설정 및 레이아웃 구조 짜기 sass를 설치한다. yarn add sass or npm i sass next.config.js 파일을 수정한다. prependData에는 들어갈 scss파일은, 모든 파일에서 사용할수있으므로 colors정의나 mixin 등을 넣어준다. public아래에 styles파일을 두었으므로 아래와 같이 경로를 설정해줬다. /** @type {import('next').NextConfig} */ const path = require('path') const nextConfig = { reactStrictMode: true, sassOptions: { includePaths: [path.join(__dirname, 'styles')], prependData: "..

스터디 소개 판교 스터디원을 모집합니다. 정보공유를 빙자한 IT업계 관련자들의 커피타임 스터디입니다. 오프라인은 판교 근방에서 진행되며, 번개모임이고 월 1회 날짜는 랜덤입니다. 자유롭게 이야기 가능한 오픈톡방 운영, 번개식으로 누구든 스터디 주최 가능. 오프라인 정기 스터디는 없으나, 한달에 한번(?)꼴로 방장이 오픈 합니다. 가끔 관련자들끼리 모각코(모여서 각자 코딩), 모각디(모여서 각자 디자인) 하기도 하고, 외주를 하기도 합니다. 스터디 하자 모여!! 가 아니라, 나 이 앞에 카페 갈건데 같이 커피타임? 이런 분위기를 지향합니다. 오프라인 스터디 진행방식과 주로 하는 이야기 1. 참석자는 공유하고싶은 이야기거리를 준비해와서 공유한다. 2. 대화주제는 디자인, 개발, 코인, NFT, 기획, 등 I..

어쩌다보니 써야 할 일이 생겨서 기록으로 남긴다. 물론 리액트 공식문서에도 사용법이 잘 나와있다. 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 서치 어드바이저에 들어가서 스크롤을 조금 내리면 웹 마스터 도구 사용하기가 나온다. 여기에서 네이..

이 책은 일단 서사가 재미있다 일단 재미가 있다. 나는 이 책의 작가인 '자수성가청년'을 작년 유튜브에서 처음 접했고, 흥미를 갖게 됐으며 지인과 같이 클래스101에서 강의를 들었다. 작가가 하고싶은말은 놀면서 인생의 레벨업을 해라인데, (이걸 하는 사람들을 역행자라고 한다) 레벨업 방법과 개인의 서사를 풀어나가는것이 아주 재미있다. 특히 내가 게임을 아주아주 좋아해서, 레벨업이라는 개념에 더 공감을 하는것일수도있다. 아마 공감하는 사람들이 꽤나 많을거라 생각한다. 뭐? 오타쿠 히키코모리가 잘생긴 현금흐름 부자가 됐다고? 이 대목에서 흥미가 생기지 않기란 쉽지 않을것이다. 인간의 심리너무 잘 알아서, 사람들이 어떤 포인트에서 후킹되는지를 꿰뚫고 있는것같다. (실제 전문가이기도 하고) 클래스 101 자청 ..

안녕하세요, 백루미 입니다 디자이너, 퍼블리셔, 프론트엔드 일을 하는 제너럴리스트 백루미입니다. 이 블로그는 저의 관심사인 디자인, 개발, 블록체인, 부동산, 독서, 아무말 기타등등을 다양하게 기록하는 블로그입니다. 컨텐츠에 관심이 많고, 글쓰는걸 좋아하고, 취미는 게임입니다. 다양한 정보를 기록하는 용도로 쓰고있습니다. (일기 같은것도 있을 수 있음) 정보의 오류나 문제점이 있다면 알려주세요. 혹시라도 저작권 문제 시 댓글 혹은 아래의 메일이나 카카오톡으로 연락주세요. 오픈채팅이 가장 빠릅니다. 100fnal@gmail.com https://open.kakao.com/me/100rumi

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