분류 전체보기

    [React] Deep Dive 모던 리액트(8) useState & useEffect
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(8) useState & useEffect

    이제부터 리액트의 훅에 대해서 제대로 알아보고자 한다. 훅은 클래스형 컴포넌트에서만 가능했던 state,ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스를 만드는 개발자라면 훅이 어떻게 동작하는지에 대해서는 이해할 필요가 있다. useState 함수형 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅이다. 아래처럼 생겼다. import {useState} from 'react' const [state,setState] = useState(initialState) useState()의 인수로는 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않으면 어떻게 될까? import React from 'react' const Co..

    [JS] 외벽 점검
    FrontEnd/프로그래머스

    [JS] 외벽 점검

    까다로운 문제였고 접근할 수 있는 방법이 굉장히 많고 생각할 거리도 많은 문제였다. 1 STEP) 원형 구조를 어떻게 구현할지 코테에서 원형구조를 구현하려면 보통 2가지 방법을 많이 쓴다. 1. 원형 링크드 리스트 구현 2. 리스트 2개를 이어붙임 사실 2번이 코테볼때는 조금 더 좋은 조건인거 같긴 하다. 특히 이번문제같은 경우 리스트 2개를 이어붙인 구조의 원형리스트를 구현한다면 조금더 쉽게 해결할 수 있을 거 같다. 예를들어서 1번예제를 리스트로 표한한다면 [1, 5, 6, 10] 이므로 [0,1,0,0,0,1,1,0,0,0,1,0] 가된다. 이 를 2번 이어붙인다면 [0,1,0,0,0,1,1,0,0,0,1,0,0,1,0,0,0,1,1,0,0,0,1,0] 가 된다. 1번의 정답인 4m를 10번에, 2..

    [storybook] viewport 설정
    FrontEnd/React

    [storybook] viewport 설정

    스토리북을 사용하다보면 viewport를 조금 더 자유롭게 사용하거나 컴포넌트마다 기본적으로 설정되는 viewport를 다르게 설정해주고 싶은 경우가 있다. https://storybook.js.org/docs/essentials/viewport Viewport • Storybook docs Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 기본적인 내용은 위 공식문서를 참고했다. 우선 viewpo..

    [REACT] storybook reset.css 적용
    FrontEnd/React

    [REACT] storybook reset.css 적용

    storybook에서 보면 기본적으로 reset.css가 적용되어 있지 않아 화면에서 볼때 깨지는 문제가 발생했었다. reset.css혹은 다른 css 파일을 넣는 방법은 굉장히 쉽다. https://velog.io/@kimhyo_0218/Storybook-emotion%EC%9C%BC%EB%A1%9C-storybook-%EA%B8%80%EB%A1%9C%EB%B2%8C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-reset-css [Storybook] emotion으로 storybook 글로벌 스타일 설정하기 (reset css) 컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.공통으로 사용되는 font-family도..

    [React] Deep Dive 모던 리액트(7) 렌더링 & 메모이제이션
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(7) 렌더링 & 메모이제이션

    리액트에서 렌더링 과정에 대해 알아보자. 브라우저에서의 렌더링 브라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 의미한다. 사용자가 결국 보게되는 최종 결과물을 만드는 작업이기때문에 중요한 과정이며 렌더링 방식이 성능에도 크게 작용하게 된다. 리액트의 렌더링 리액트에서도 렌더링이 존재한다. 리액트의 렌더링은 DOM트리를 만드는 과정이다. 리액트의 렌더링과 브라우저의 렌더링은 조금 다르므로 명확히 정의하고 넘어갈 필요가 있다. 브라우저의 렌더링 : HTML,CSS로 웹 브라우저를 만드는 것 리액트의 렌더링 : 컴포넌트들이 어떻게 UI를 구성하고 어떤 DOM결과를 브라우저에 제공할지 계산하는 과정 렌더링 시나리오 리액트에서 렌더링이 발생하는 시나리오는 아래와..

    [JS] 블록 이동하기
    FrontEnd/프로그래머스

    [JS] 블록 이동하기

    대놓고 BFS문제이다. 생각할 점은 로봇이 1칸이 아닌 2칸짜리란 점과 회전이 가능하단점이다. https://school.programmers.co.kr/learn/courses/30/lessons/60063# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 일반적인 BFS를 기본으로 구현을 하되 2칸짜리인 점과 4방향 이동 외에 회전이동이 가능하단 점을 생각하자. 기본적으로 로봇의 위치를 생각할때 가로와 세로 두가지가 있는데 가로인 경우에는 왼쪽 부분을, 세로인 경우에는 위쪽 부분을 중심으로 생각하기로 했다. 우선 회전 기능을 생각하기 위해서 rotate..

티스토리툴바