꿈꾸는 개발자의 블로그

게시물 생성 날짜에 대한 형식을 바꿀 필요가 있었다. 받아온 데이터는 "2022-08-27T18:00:41Z"이였고, 나는 이것을 "2022.08.27"로 변환하고 싶었다. 그래서 알게 된 라이브러리가 moment.js! JavaScript 날짜 라이브러리이다. 날짜 형식 수정하기 1. 라이브러리 설치 2. 필요한 부분만 잘라내기 : .substr()을 이용하여 2022-08-27T18:00:41Z를 2022-08-27로 자름 3. 문자열로 변환하기 : .format()을 이용하여 moment 객체가 아닌 문자열로 변환 1. 라이브러리 설치 $ npm install moment --save or $ yarn add moment 2. 필요한 부분만 잘라내기 const created_at = moment((..

매번 적용할 때마다 margin-left인지 margin-right인지.., 속성 값은 또 0인지 auto인지.. 너무 헷갈려서 정리했다! 추가로 Styled-components를 사용하다보니, 하위 값에 대한 접근 방식도 정리해보았다. 마지막 요소만 오른쪽 정렬하기 1. 정렬될 요소들을 감싸는 Container 컴포넌트에 display: flex 지정하기 (width 값도 있어야 함) 2. 마지막 요소에만 style을 margin-left: auto 적용하기 Styled-components 내 하위요소에 접근하는 방법! 1. & > 하위요소 (아래 예시의 경우는 div) 2. :last-child { }, 혹은 :nth-child() { } 등 전체 코드 import styled from "styled..

Web API를 이용하여 함수 하나만 쓰면 되는데, 원하는 위치(x 좌표, y 좌표)를 넣어주면 된다! 그래서 웹 페이지의 최상단으로 이동하려면 window.scrollTo(0, 0)으로 구현이 된다. 아래는 특정 요소의 높이를 받아와서 그 아래로 이동하는 예시이다. TypeScript + Styled-components를 사용하여 구현하였고, 아래 화살표를 클릭하면 해당 배경의 이미지 높이를 받아와서 그 아래로 스무스하게 이동할 수 있게 하였다. 특정 요소 밑으로 이동하기 1. 해당 요소의 높이 받아오기 2. window.scrollTo() 사용하기 전체 코드 import React, { useRef } from "react"; const Intro = () => { const ref = useRef(..

문자열 출력하기 문자열은 따옴표로 묶고, 여러 개 문자열을 함께 출력하고 싶다면 콤마(,)나 덧셈 연산자(+)를 사용하여 출력하면 된다. 덧셈 연산자로 결합할 시엔 공백을 직접 추가해야 한다. 곱셈 연산자(*)를 사용하면 문자열을 쉽게 붙일 수 있다. print("Hello world!")# Hello world! print("Hello", "world!")# Hello world! print("Hello" + "world!")# Helloworld! s = "Hello world!" print(s)# Hello world! print(s + s)# Hello world!Hello world! print(s * 2)# Hello world!Hello world! 숫자 출력하기 숫자도 그대로 출력하지만, ..

함수로 배열을 객체로 만들기 1. map() 함수 이용하기 2. Object.fromEntries() 함수 이용하기 1. map() 함수 이용하기 const arr = [[1,2], [3,4], [5,6]]; let formattedArr = arr.map(function(a) { let newArr = {}; newArr[a[0]] = a[1]; return newArr; }); // formattedArr => (3) [{1: 2}, {3: 4}, {5: 6}] 2. Object.fromEntries() 함수 이용하기 const arr = [ ['name', 'Chloe'], ['age', 17], ['city', 'NewYork'] ]; const newObj = Object.fromEntries(..