꿈꾸는 개발자의 블로그

게시물 생성 날짜에 대한 형식을 바꿀 필요가 있었다. 받아온 데이터는 "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((..

이벤트 루프 (Event Loop) 이벤트 루프는 자바스크립트 엔진이 아닌 런타임(browser, node.js)에서 가지고 있는 하나의 장치로써, 콜 스택과 태스크 큐(콜백 큐)를 감시하고, 콜 스택이 비어 있는 경우에 태스크 큐에서 태스크를 가져와 콜 스택에 넣어 주는 동작을 한다. 이벤트 루프가 동작하기 위한 2가지 조건! 이벤트 루프는 다음의 2가지 조건이 충족될 때, 태스크 큐(콜백 큐)에 있는 함수들을 콜 스택으로 순서대로 이동시켜 해당 함수가 호출되도록 한다. 1. 태스트 큐(콜백 큐)에 실행해야 할 함수가 있다. 2. 콜 스택이 비어 있다.

매번 적용할 때마다 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! 숫자 출력하기 숫자도 그대로 출력하지만, ..