choi95의 TIL📝

Issue 위 Carousel Slide 기능은 해당 Main Page 뿐만 아니라 다른 Page 내에서도 쓰이기 때문에 따로 컴포넌트로 분립할 필요가 있음을 확인하였다. Carousel Slide 기능이 리스트 형식에서 제대로 동작하기 위해서는, 해당 리스트 요소들이 Wrapper인 Carousel Slide 태그 내부로 들어가야 한다. Solution 우선은 다음과 같이 리스트 요소를 동적으로 생성해 주는 MovieList 컴포넌트를 따로 분리하여 주었다. (Feed Layout 또한 나중에 재활용하기 위해 Presentation Component로 따로 분리하여 주었다) render() { let { curFeedsType, curMovieListData } = this.state; if (this..

문제 문제 설명 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다. 이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 있는데, 한 유저가 오늘 이 ..

문제 문제 설명 정수 n이 매개변수로 주어집니다. 다음 그림과 같이 밑변의 길이와 높이가 n인 삼각형에서 맨 위 꼭짓점부터 반시계 방향으로 달팽이 채우기를 진행한 후, 첫 행부터 마지막 행까지 모두 순서대로 합친 새로운 배열을 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 1,000 이하입니다. 입출력 예 nresult 4 [1,2,9,3,10,8,4,5,6,7] 5 [1,2,12,3,13,11,4,14,15,10,5,6,7,8,9] 6 [1,2,15,3,16,14,4,17,21,13,5,18,19,20,12,6,7,8,9,10,11] 문제풀이 총 3방향으로 이동: 아래로 내려가기, 오른쪽으로 이동하기, 위로 올라가기 방향의 전환 기준은 주어진 배열 인덱스 범위를 벗어나..

Issue 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. 다음 설명은 리액트 공식 사이트에 처음 들어가면 메인 페이지에서 바로 확인할 수 있다. 여기서 말하는 선언형이 정확히 어떤 의미를 지니고 있는지, 실제 코드 필자의 코드와 함께 살펴보고자 한다. 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 어떻게 할 것인가, 선언형 프로그래밍은 무엇을 할 것인가 명령형 프로그래밍(Imperative Programming)은 어떤 방법(How)으로 할 것인지에..

Issue import React, { Component } from 'react'; import { Link } from 'react-router-dom'; class Comments extends Component { render() { let { name, comment } = this.props; let isSkip = false; let addVal; if (comment.length > 20) { comment = comment.slice(0, comment.length - 6); isSkip = true; addVal = ( 더보기... ); } return ( {name} {comment} {isSkip && addVal} ); } } export default Comments; 다음 코드..

문제 Route를 사용하여 로그인 페이지에서 메인 페이지를 이동하는 구현 과정에서, 다음과 같이 withRouter를 사용하지 않고 메서드 함수 객체를 props로 넘겨 주는 방식으로 접근하였다. goMain() 메서드에서는 인자 값으로 받은 경로로 이동할 수 있도록 history 객체 props를 사용하였다. import React, {Component} from 'react'; import Login from '../Login/Login'; import {withRouter} from 'react-router-dom'; class LoginPage extends Component { goMain(path) { this.props.history.push(path); } render() { return ..

문제 import {createGlobalStyle} from 'styled-components'; import reset from 'styled-reset'; const GlobalStyles = createGlobalStyle` ${reset}; ( ... ) @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap'); ( ... ) } `; export default GlobalStyles; 어플리케이션 레벨 스타일상에서 공통 웹 폰트를 사용하기 위해 다음과 같이..

문제 문제 설명 자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의 합니다. 조건 1. n의 다음 큰 숫자는 n보다 큰 자연수 입니다. 조건 2. n의 다음 큰 숫자와 n은 2진수로 변환했을 때 1의 갯수가 같습니다. 조건 3. n의 다음 큰 숫자는 조건 1, 2를 만족하는 수 중 가장 작은 수 입니다. 예를 들어서 78(1001110)의 다음 큰 숫자는 83(1010011)입니다. 자연수 n이 매개변수로 주어질 때, n의 다음 큰 숫자를 return 하는 solution 함수를 완성해주세요. 제한 사항 n은 1,000,000 이하의 자연수 입니다. 입출력 예 nresult 78 83 15 23 입출력 예 설명 입출력 예#1 문제 예시와 같습니다. 입출력 예#2 15(1111)의 다음 큰 ..