즐겁게, 코드

리액트를 다룰 때 함수 컴포넌트에서 속성(prop)을 받아오는 방법은 아마 익숙할 것입니다. const App = ({ name, age }) => { return ( 이름 : {name} 나이 : {age} ) } * 편의상 export default 구문은 따로 표기하지 않았습니다. App 컴포넌트에서 name과 age 라는 속성을 구조 분해 할당 문법으로 받아오는 모습인데요, 만약 상위 컴포넌트로부터 name과 age 속성을 전달받지 못하면 해당 값은 undefined 가 됩니다. 이런 경우를 방지하기 위해 리액트에서는 defaultProps 라는 특수한 프로퍼티를 사용해 속성의 기본값을 정해줄 수 있습니다. const App = ({ name, age }) => { return ( 이름 : {na..

[백준 온라인 저지 - 문제 링크] 이 문제에는 시간 초과라는 무시무시한 함정이 깔려 있습니다. 따라서 여느 DP 문제처럼 DP 테이블을 그려 해결하되, 테이블을 조금 더 창의적으로 고안해야만 합니다! 처음 제가 구상한 알고리즘은 증가하는 인덱스 i ~ N까지의 원소 중 최댓값을 각 i 별로 구한 후, 이 중에서 최댓값을 찾는 방법이었습니다. 이를 기반으로 거친 생각과 불안한 마음을 안고 코드를 짜 봤으나... [실패 코드 (Python)] # 시간 초과 코드 T = int(input()) d = [0] * 100001 arr = list(map(int, input().split())) ans_list = [] temp_list = [] d[0] = arr[0] for i in range(1, T): t..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..

자바스크립트의 객체의 속성은 문자형과 심볼형을 허용하는데, 심볼형이란 무엇일까? 심볼(Symbol)은 ES6에서 새롭게 추가된 타입으로 심볼로 생성되는 값은 언제나 고유하다는 특징이 있다. [심볼 사용법] // new 키워드 없이 선언함에 유의한다. const symbol1 = Symbol(); // 심볼의 인자는 심볼을 설명하는 역할에 불과하다. const symbol2 = Symbol("name"); 심볼은 인자를 해시화하는 개념이 아니라 심볼마다 완전히 고유한 값이 할당되는데 코드를 통해 살펴보자. Symbol("name") == Symbol("name"); // false 동일한 "name" 인자를 받았다 하더라도 인자는 심볼값의 고유 여부를 결정할때 영향을 미치지 않으며, 심볼은 언제나 고유한 ..

이번 글에서는 AWS Lambda 서비스를 활용하는 방법을 다룬다. 바닥부터 배포를 경험해보기 위해 serverless 프레임워크나 AWS 웹 콘솔을 사용하는 대신 aws-cli를 활용하는 방법을 정리한다. 1. aws-cli 설치 실습을 위해 AWS 계정과 aws-cli를 설치해준다. 설치 방법은 운영체제마다 상이하니 AWS 문서 에서 본인 OS에 맞게 설치하자. aws-cli 설치가 끝나면 터미널에서 aws --version 커맨드를 통해 설치가 완료되었는지 확인한다. 2. 사용자 계정 연동하기 다음은 aws-cli와 AWS 계정을 연동하기 위해 [내 보안 자격 증명] 메뉴에 들어간다. 이곳이 IAM 대시보드인데, 사용자 인증 및 권한 부여 등의 기능을 모두 여기서 관리한다. aws-cli와의 연동을..

타입스크립트는 새로운 언어가 아니라 자바스크립트의 슈퍼셋(스타크래프트 오리지널과 브루드 워의 관계라고 보면 된다.) 으로, 프로젝트가 거대해질수록 타입스크립트의 사용은 선택이 아닌 반 필수라고 합니다. 먼저 타입스크립트 프로젝트를 구성하려면 두 패키지가 필요하다. typescript와 ts-node 패키지가 그것으로, 둘 다 npm을 통해 내려받을 수 있다. npm i -g typescript ts-node // 혼자 이리저리 갖고 놀 예정이라면 전역으로 설치해주고 npm i -D typescript ts-node // 프로젝트 배포용으로 사용할 예정이라면 프로젝트 폴더에 설치해주자. typescript 패키지는 타입스크립트로 작성한 코드를 자바스크립트로 바꿔 주며(이를 트랜스파일링이라 한다.), ts-..

리액트에서는 일반적으로 상태를 위에서 아래로밖에 전달할 수 없지만, 컨텍스트(context)를 활용하면 전역으로 상태값을 활용할 수 있게 된다. (리액트의 컨텍스트는 자바스크립트와는 달리 '데이터 저장소' 라고 생각하면 된다.) [context의 기본 사용법] import React, { Component } from 'react' // 컨텍스트(데이터 저장소) 생성 const MyContext = React.createContext(defaultValue); // Provider 생성 ... ----------------------------------------------------------- // 에서 {value => /* context 값을 이용한 렌더링 */} 1. 컨텍스트를 활용하기 위해서..