스페이스 루미

map map 메서드는 반복을 통해 item을 하나씩 매핑한다. 매핑(mapping)은 하나의 값을 다른값과 1:1 대응시키는것이다.(해당 값이 다른값을 가리키도록 하는것이다.) 배열의 아이템을 1:1로 대응시키지만, 원본을 변경시키지 않고 새로운 배열을 리턴한다. array.map((item,index,array)=>{return item}) const originArray = [1,2,3,4]; const newArray = originArray.map((item)=> item + 1) console.log('originArray::', originArray); // [1,2,3,4] console.log('newArray::', newArray); // [2,3,4,5] reduce 배열의 각 요소..

ellipsis 말줄임 처리는, 자주 사용하는 믹스인이라 미리 만들어두면좋다. @mixin ellipsis($line: 1) { @if ($line == 1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; // 공백 없을때 글자 짤림 방지 -webkit-box-orient: vertical; -webkit-line-clamp: $line; } } 기본값은 1로 두고, 변수를 입력해주면 line-clamp에 들어간다. * 컨테이너의 width값이 정해져있어야한다...

스크롤 믹스인을 만들어두자 스크롤 안보이게 처리하기 @mixin scroll-hidden { scrollbar-width: none; /* Firefox */ &::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } } 스크롤 커스터마이징 하기 @mixin scroll($size, $scroll-color, $bg-color) { overflow:auto; &::-webkit-scrollbar { width: $size; height: $size; } &::-webkit-scrollbar-thumb { background: $scroll-color; } &::-webkit-scrollbar-track { background: $bg-color..

폰트 관련 믹스인도 만들어두면 유용하게 쓸 수 있다. 한글폰트, 영문폰트를 각각 설정하는것은 다른파트에서 기록. @mixin /* 10부터 i 까지 폰트 사이즈 만들기 */ /* i값은 0.1, 0.2, 0.3 rem씩 증가 */ /* 기본 html font-size를 10으로 고정 */ html { font-size: 10px; } @mixin font-classes { @for $i from 10 through $max-font { $value: $i * 0.1rem !important; .font#{$i} { font-size: $value; } } } @include font-classes; /* 타입을 받아서 폰트 세팅을 결정 */ @mixin font($type: "title") { @if (..

프로젝트를 시작하기전에 세팅해두면 좋은 스타일 관련 요소들 아카이빙 * React + SCSS 사용환경이며 변동시 꾸준히 추가 업데이트하기 * 폴더구조 Base [CSS] reset css / CSS 초기화하기 css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The.. space-rumi.tistory.com 자주 사용하는 인라인 클래스, base class 만들기 인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다...

믹스인으로 마진 패딩 클래시스를 만들어두면 유용하게 쓸수있다. @mixin $max: 180; // 생성할 최대값 지정 @mixin margin-classes { @for $i from 0 through $max { // 0부터 i까지 증가. max인 180까지 생성 $margin: $i * 1px !important; .ma#{$i} { margin: $margin; } .ml#{$i} { margin-left: $margin; } .mr#{$i} { margin-right: $margin; } .mt#{$i} { margin-top: $margin; } .mb#{$i} { margin-bottom: $margin; } .mx#{$i} { margin-left: $margin; margin-right:..

React drag and drop / 리액트 드래그 앤 드롭 이용해서 이동시키기 1. 박스 내에서 드래그를 시킨다. 2. 드래그 영역이 박스 밖으로 이탈 시 이전 포지션값으로 이동 원리 1. 큰박스( container ) 내 absolute 상태인 작은박스( dragComponent )의 포지션값을 계산해준다. 2. 드래그 시작시, 시작 포지션을 저장한다. 3. 드래그중에 실시간으로 position x y 좌표값을 변경해준다. (실제 drag할 요소가 위치하는 포지션값) 4. 드래그를 종료하는 시점에서 dragComponent의 left, right, top, bottom 값이 container 값 밖에 위치하는지 체크한다. 5. container를 벗어나면 드래그 시작시 저장한 포지션값을 실제 포지션..

git log -3 git reset --hard [commit] git push -f 이전 로그 3개까지 확인하고, 가고싶은 커밋 해시값을 카피한다음 하드리셋시킨다. 원격저장소에는 이미 올라갔기 때문에 강제로 push 해준다.

git reset --hard HEAD git pull 원격저장소에 푸시되지않은 모든커밋은 손실된다. 원격 로컬에 푸시한 내용이 있다면 아래와 같이 한다. git reset --hard origin/브랜치명 다른 방법으로는 로컬 브랜치를 날리고, 원격브랜치를 풀받는방법이 있다.

문제 height: 100vh 사용시 모바일 IOS에서 (+인앱브라우저) 스크롤이 생기는 문제 원인 100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식함 사용이유 body에 100% 를 상속받아 내려오는 케이스를 제외하고, 컨텐츠 영역에서 불가피하게 최상단 레이아웃에 flexbox를 사용해야할 때가 있다. 또는.. 별도의 각종 레이아웃 컴포넌트(헤더,푸터)를 제외한 영역을 100%로 잡아야 할 때 페이지별로 vh 속성을 쓰는게 깔끔할 때. 등등 많은 케이스에서 vh가 요구된다. CSS height: 100vh;// css property 지원 안하는 브라우저 대비용 height: calc(var(--vh, 1vh) * 100); JS useEffect(() => { // css property 사용..

문제 카카오 인앱브라우저 IOS환경에서 스타일 안먹는 문제가 발생했다. 버튼이 아예 노출되지 않는 현상, a태그가 파란색으로 보이는 현상 등 특이사항 보이지는 않으나 클릭시 정상작동 함 (스타일 문제로 추정) PC웹에서는 모든 브라우저에서 정상작동 IOS, 안드로이드 웹에서는 정상작동 인앱브라우저 > IOS에서만 정상출력되지않음 해결방법 Xcode 시뮬레이터 IOS 특정 단말을 띄워서 사파리 개발자도구로 원인분석 사파리 환경설정 > 고급 > 메뉴에 개발자모드 노출후 시뮬레이터와 연동 원인은 스타일을 직접 명시하지않으면 초기값을 상속받지 못함. (스타일 누락) 스타일을 빠트리지않고 직접 명시해준다 (color 기본값을 가져오지 못한 케이스) 잘해결되었다.

일전에 디자이너 커뮤니티에 가이드를 공개한 적이 있다. 7년간 프로젝트를 진행해오면서 미리 이런것쯤 체크해뒀으면 좋았겠다 라거나, 혹은 알고있었다면 더 잘했을 텐데 라고 느꼈던 것들을 아주 간단하게 정리해볼까 한다. 자세한 설명은 배포용으로 따로 만들예정이라 일단은 목차 정리차원에서 기록해 두려고 한다. 여러가지가 많이 바뀐것도 있고. 별도의 UI 프레임워크를 사용할것인지 물어보자. vue를 사용한다면 vuetiry나 vuesax 등을 사용하는지 물어보자. 혹은 별도의 component library를 염두해두고 있는지 확인하자. 부트스트랩 이라든지, Ant-design 이라든지, material UI 라든지. 적응형인가, 반응형인가? Break Point는 어떻게 나눌것인가? 디바이스별로 어떻게 보여줄..

context api를 사용해 로딩화면을 간단하게 구현해보자. context폴더에 LoadingContext 파일을 생성한다. context/LoadingContext.tsx import { createContext, useState } from "react"; type LoadingState = { setVisible: (value: boolean) => void; }; export const LoadingContext = createContext({ setVisible: (value: boolean) => {}, }); export function LoadingContextProvider({ children }: { children: React.ReactNode }) { const [visible, ..

급하게 static한 페이지가 필요할때, 사용할 기본코드 src 폴더밑에 pages폴더를 생성하고 index.html 파일을 생성해준다. Hello world!

mac 로컬을 모바일로 띄워주는 방법 먼저 모바일과 맥의 wifi를 같은걸로 잡아준다. mac사과 > 시스템 환경설정에서 네트워크를 연다 이곳에서 IP 확인 모바일 크롬을 열고 주소창에 IP:포트 를 적어준다. ex) 192.168.3:3000 모바일로 직접 확인하면서 작업하는게 편하다. 특히 모바일에서도 이벤트가 잘 작동하는지 확인하기(드래그나 터치같은것)

설치하고 Import 하기 yarn add swiper import { Swiper, SwiperSlide } from "swiper/react"; import SwiperCore, { Navigation, Pagination } from "swiper"; import "swiper/swiper.min.css"; import "swiper/components/pagination/pagination.min.css"; 헤맨 점 공식문서 임포트 스타일대로 하니 안된다. import "swiper/css" 이런식으로 하라고 되어있다. (하다하다 하도 안되서 노드모듈 스와이퍼 폴더에 css파일이 있긴한건가 하고 찾아봤는데 있긴하더라..) import swiper css ~~등등 파워 구글링을 했는데 다행히 방법을..

넥스트에서 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: "..

어쩌다보니 써야 할 일이 생겨서 기록으로 남긴다. 물론 리액트 공식문서에도 사용법이 잘 나와있다. 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 조작하지 못하게 한다. (참조자 정보 없음)

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) 원시 자료형이 아닌 모든 타입. 원시 자료형 데이터들의 집합이며, 변수에 할당할때 메모리 주소를 저장한다. 배열, 객체, 함수 ..

[정의] 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..