스페이스 루미

오름/내림 차순으로 배열을 정렬 해보자. sort 메서드를 사용하면 된다. sort는 구분하다 / 정리하다라는 뜻을가진 동사다. arr.sort((비교대상1, 비교대상2) => {} ) 파라미터가 없으면 문자열로 인식하여 유니코드 순으로 내뱉는다. sort 메서드는 원본을 수정하기때문에 복사를 해서 사용하도록 한다. const arr = [1,22,13,32,19] arr.sort(); console.log(arr); // [1,13,19,22,32] 정렬 기준은 리턴값이 양수냐 음수냐 0이냐에 따라 바뀐다. 음수값이 나오면 a가 b보다 앞에 위치하도록 정렬한다. 양수값이 나오면 b가 a보다 앞에 위치하도록 정렬한다. 결과값이 0이면 위치를 바꾸지 않는다. const arr = [1,22,13,32,19..

include 말그대로 포함한다. 배열에 특정 값을 가지고 있는지 확인할때 사용한다. 그럼 객체에 키값이 있는지 확인해보도록 하자. Array.includes(찾는값, 시작 인덱스) 시작 인덱스는 옵션이고 default가 0이다 const data = { company: { id: 1, name: "rumi space", type: "private", no: "001-25-103-12", ceo: "ray", condition: "R & D", address: "pangyo 12", lastModifyDate: "2022-08-09T04:00:34.356761Z", }, }); console.log("company에 type 존재하니?", Object.keys(data.company).includes("..

타입설정과 useState list들의 타입을 정해주고, map 돌릴 list state와 새로 추가할 newTodo state를 만들어준다. type Lists = { id:number, title:string, checked:boolean, } ... const [list, setList] = useState([]); const [newTodo, setNewTodo] = useState({ id: new Date().getTime(), title: "", checked: false, }); Mark up 볼만하게 커스터마이징을 해준다. 추가 {list.map((item, index) => { return ( onCheckboxClick(index)} /> {item.title} removeList(i..

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

리스트를 추가하고 클릭시 제거하는 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..

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

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

!! 느낌표 두개는 JS에서 어떻게 사용될까? !!undefined //false !!"" // false !!null // false !!0 // false // 그 외 true !는 부정이고, !!부정의 부정은 긍정이다. 확실한 boolean 결과를 얻기위해 사용한다.

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

적재적소에 필요한 메서드를 떠올리고 응용법을 생각해내기 위해 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..

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

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

설치하고 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..

공용으로 사용할 커스텀 버튼 컴포넌트를 만들어보자. 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)..

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을 바꿔버린다..