SPACE RUMI

Hi, I am rumi. Let's Splattack!

분류 전체보기 223

[React Hook] useEffect를 알아보자

[2022.01.05] 훅 정리 다시 하면서 한번더 정리해보는 useEffect useEffect(()=>{ 함수() }) // 렌더링 될 때마다 함수 실행 useEffect(()=>{ 함수() },[]) // 처음 렌더링 될때만 함수 실행 useEffect(()=>{ 함수() },[함수]) // 디펜던시 값이 변경될 때마다 실행 useEffect(()=>{ return()=>{ // clean up(정리) // 해당 컴포넌트가 unMount 될때, 다음 렌더링 될 useEffect가 실행되기 전에 실행 } },[]) clean up 예제 function App(){ ... return ( {state && } ) } ... function Interver(props){ useEffect(()=>{ co..

[React] 리스트 추가하고, 클릭시 제거하기 / map, filter

리스트를 추가하고 클릭시 제거하는 UI를 만들어보자. (TODO LIST를 만들어보자~~!) useState 현재 책 리스트를 담을 books Array와, 새로운 book Object를 초기값으로 넣어준다. id는 유니크한 값으로 넣어준다. Book은 id, title, author을 가지고있다. const [books, setBooks] = useState([ { id: 1, title: "1984", author: "George Orwell" }, { id: 2, title: "Lord of the Flies", author: "William Golding" }, { id: 3, title: "Catcher in the Rye", author: "J.D Salinger" }, ]); const [b..

[React] useState를 사용하여 인풋 만들기

useState 안에는 초기값을 적어준다. (객체, 원시타입 등이 올 수 있다.) setter함수를 사용하여 객체를 변경할때는 임시의 복사본을 만들어 새로운 객체를 넣어준다. Hook const [form, setForm] = useState({ nickname: "", description: "", }); const onChangeInputForm = (e: React.ChangeEvent) => { const { name } = e.target; const formTemp = { ...form, [name]: e.target.value }; setForm(formTemp); }; 두개의 인풋을 하나의 함수로 변경하기위해 각각의 input에 name attribute를 지정해준 뒤, e.target에서..

[Javascript] some, every 하나라도 만족하는지, 모두 만족하는지

some 하나라도 만족하는지 알아보자. 하나라도 true면 true 98보다 큰게 있냐? 네! const newArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = newArray.some(item => item > 98); console.log(isCorrect); // true every 모든 조건이 만족하는지 알아보자. 하나라도 false면 false 모두 100보다 작냐? 네! const originArray = [1,2,3,4,5,6,7,8,9,99]; const isCorrect = originArray.every(item => item < 100); console.log(isCorrect); // true

Color 변수화하기 / css color 사전 정의하기

컬러 변수화를 어떻게 할 것인지를 정하기 전에 먼저 프로젝트 디자인에 사용된 컬러종류가 얼마나 되는지를 파악한다. 컬러 종류를 파악한다음 opacity값을 사용했는지, 각 컬러의 분류가 단계별로 증감되는 형식인지(그라데이션 팔레트를 사용했는지)에 따라 나누는 편이다. 그라데이션 팔레트를 사용했다면 scss의 map-get을 사용하고, 그렇지 않고 종류가 많지 않다면 일반변수로 정의한다. --root를 사용하는 방식도 있지만 개인적으로는 선호하지 않으므로 생략 변수화하기 (컬러값의 종류가 많지 않을때) $black:#000000; $white:#FFFFFF; $primary-black-1: #121212; $primary-black-2: #999999; $primary-black-3: #E0E0E0; $p..

쿠키와 세션, JWT 토큰, 액세스토큰, 리프레시토큰 / Cookie, Session, JWT

HTTP 프로토콜은 통신(Request, Response)이 끝나면 연결 상태를 유지하지 않는다. 따라서 서버는 누가 요청을 보냈는지, 유효한 사용자인지 매번 확인해야한다. 쿠키와 세션 쿠키는 로컬브라우저에 저장되는 key, value 쌍의 작은 기록 정보 파일이다. 세션ID를 담아 전달하는 도구라 생각하자. 유효시간을 명시 할 수 있고, 브라우저를 닫아도 로컬 브라우저에 저장된 클라이언트의 정보를 참조하기 때문에 인증이 유지된다. Response Header에 Set-Cookie 속성을 사용하면 클라이언트에서 쿠키를 만들 수 있다. 사용자 인증정보를 클라이언트가 가지고 있으므로 보안에 취약하다. 쿠키와 세션을 이용하면 현재 몇명, 누가 로그인했는지를 판단할 수 있다. 1. 클라이언트가 웹사이트에 접속하..

자주 사용하는 인라인 클래스, base class 만들기

인라인 클래스로 많이 사용하는 기본적인 클래스들을 정의해두자 나머지는 자주쓰는 클래스들은 mixin에서 생성해준다. .w-100 { width: 100%; } .w-fit { width: fit-content; } /* display 속성과 flex */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .flex-row { display: flex; flex-direction: row; } .flex-start { display: flex; align-items: flex-start; } .flex-center { display: flex; align-items: center; } .flex-end { d..

[Javascript] 특정 요소 찾기 find, findIndex, filter

find callback함수가 참을 반환할때까지 실행하고, 참을 만나면 첫번째 요소를 반환한다. 조건에 만족하는 요소를 찾지 못하면 undefined를 반환한다. 원본 배열을 변경시키지 않는다. array.find((item, index, array) => 조건) const originArray = [{ name:'rumi', phone:'android', state:true },{ name:'ray', phone:'ios', },{ name:'pink', phone:'LG', state:true }] const result = originArray.find(item => item.state); // 요소에 state값이 있는 것 찾기 console.table(originArray) // 원본 배열을 m..

reset css / CSS 초기화하기

css를 초기화 해주자. 초기화 코드는 정답이 없고, 가장 많이쓰고 유명한 에릭마이어의 reset code를 사용해도 된다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerwe..

[Javascript] 자주쓰는 JS 메서드 정리하기

적재적소에 필요한 메서드를 떠올리고 응용법을 생각해내기 위해 Javascript 메서드를 한번씩 정리하면서 몰랐던 부분까지 한번씩 체크해보도록 하자. 쉽게 기억할수있도록 어원과 뜻을 정확히 알고 넘어가자. ( 메서드명이 너무 명확해서 어원이랄게 있나?싶긴하다.) 한번씩 정리하고 링크걸기. Array [Javascript] for, forEach, for in, for of, map으로 반복 수행하기 for 단순 반복실행 요소와 index 값을 사용하여, 증가 혹은 감소하면서 순차적 실행한다. 원하는 결과가 나오면 break; 로 중단할수 있다. const forArray = [1, 3, 5, 7]; const forNewArray = []; for (let i =.. space-rumi.tistory.c..

[Javascript] map 메서드 그리고 reduce

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 배열의 각 요소..

[SCSS] ... 처리하기 css 말줄임 ellipsis mixin

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값이 정해져있어야한다...

[SCSS] 스크롤 믹스인 만들기

스크롤 믹스인을 만들어두자 스크롤 안보이게 처리하기 @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..

[SCSS] font size mixin class 믹스인으로 폰트 사이즈, 커스텀폰트 클래시스 만들기

폰트 관련 믹스인도 만들어두면 유용하게 쓸 수 있다. 한글폰트, 영문폰트를 각각 설정하는것은 다른파트에서 기록. @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 (..

프로젝트 시작 전, CSS 세팅하기

프로젝트를 시작하기전에 세팅해두면 좋은 스타일 관련 요소들 아카이빙 * 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에서 생성해준다...

[SCSS] 믹스인으로 마진 패딩 클래스 만들기 mixin margin and padding classes

믹스인으로 마진 패딩 클래시스를 만들어두면 유용하게 쓸수있다. @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, 박스를 원하는곳에 이동시키는 원리

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를 벗어나면 드래그 시작시 저장한 포지션값을 실제 포지션..

[CSS] IOS 100vh 스크롤 문제

문제 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 사용..

[CSS] 카카오 인앱브라우저 IOS의 경우 스타일 안먹는 문제

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

[디자이너 & 퍼블리셔를 위한 가이드 #시작하기] 사전 체크사항 / 디자이너가 알아두면 좋은 것

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

[React] Context api 사용해 로딩 구현하기

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

[티스토리] 폰트 로딩, 티스토리 폰트 렌더가 느릴때

티스토리 폰트 로딩이 느리고, 깜빡거리는 현상(산세리프로 적용이 먼저 됐다가, 웹폰트로 변경)이 발생해서 아래와 같이 수정했다. preload는 지정된 리소스를 먼저 가져오고 캐시할것임을 명시한다. as는 어떤 리소스인지 명시한다. (style, video, font, script ...) crossorigin은 리소스를 CORS 요청으로 로드해야하는지 명시한다. (아무것도 입력하지않으면 anonymous)

맥 모바일에서 로컬확인

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

[Next] React 에서 Swiper 사용하기

설치하고 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 ~~등등 파워 구글링을 했는데 다행히 방법을..

[Next] next 에서 scss 사용하기 및 레이아웃 구조

넥스트에서 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 관련업계 스터디원을 모집합니다.

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

아무말 2022.06.17
반응형