이안의 평일코딩

파라미터 한글깨짐 문제 해결 encodeURI, encodeURIComponent 현재 MobX로 상태관리 중이며 검색핸들러에 이용할 getIphone을 만들어줍니다. searchInfo에 데이터를 바인딩해두는데 거기서 iphoneName이 event.target으로 입력이되면 encode를 해줍니다. 그리고 인코딩된 입력값을 아래와 같이 보내주고 받아온 정보를 setIphone에 저장해둡니다. const getIphone = async () => { let iphoneSearch = encodeURI(encodeURIComponent(searchInfo.iphoneName)); let findIphone = await iphoneRepository.getIphone(iphoneSearch); setIp..

$git reset 옵션에는 3가지 종류가 있다. 1. --hard : 돌아가려는 지점 이후 모든 내용 삭제. 2. --soft : 돌아가려는 지점으로 돌아가지만 해당내용은 남아있으며 인덱스도 그대로 있다. 3. --mixed : 옵션을 생략하면 mixed로 설정되며, 돌아가려는 지점으로 돌아가지만 인덱스는 초기화 된다. 위의 상황에서 Login state 이후의 커밋들을 삭제하고 싶다면 아래와 같이 터미널에 입력하면 된다. $git reset --hard d075bf9 $git push -f origin master revert은 원하는 지점으로 되돌려주지만 revert는 현재에서 지우려는 지점을 없애준다.

문제 게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 ..

설치하기 // with npm npm install @material-ui/styles // with yarn yarn add @material-ui/styles styles styles를 생성하여 적용하기 위해서는 3가지 API를 사용할 수 있다. Hook API import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, border..

Material-UI에서 제공하는 컴포넌트의 종류는 도큐먼트들을 다 읽어보기 힘들 정도로 많다. 크게 Layout, Inputs, Navigation, Surfaces, Feedback, Data Display, Utils, Lab로 나눌 수 있고, 세부적으로 다 다루기보다 활용해서 적응할 수 있게끔 대표적인 예시를 들어가며 배우면 좋다. Layout 먼저, 레이아웃에는 Box, Container, Grid, Hidden, Image List가 있다. Box는 div를 대체하는 강력하고 편리한 컴포넌트로 tailwind CSS 방식이고 Container는 레이아웃을 잡을 때 좌우 간격, 중앙 위치시킬 때 사용하며 최대 너비 제한 fluid모드와 동일 너비 강제 fixed 모드가 있다. Grid는 Cont..

Material-UI란? 부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크이다. 설치하기 Material-UI는 npm패키지로 제공된다. 터미널에 아래와 같이 입력하고 설치해준다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core 아래와 같이 간단하게 import해와서 Material-UI에서 이미 지정해 둔 스타일로 버튼을 만들 수 있다. import React from 'react'; import { Button } from '@material-ui/core'; function App() { return Hello World; } 아이콘을 사용하고 싶다면 @m..

48장 모듈 p.891 - 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하고 이를 export라 한다. 모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있는데 이를 import라 한다. p. 897 - 모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export하고 var, let, const 키워드는 사용할 수 없으며, {} 없이 임의의 이름으로 import한다. // lib.mjs export default co..

46장 p.868 - ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터 함수는 function* (애스터리스크) 키워드로 선언하고 하나 이상의 yield 표현식을 포함한다. 이것을 제외하면 일반 함수를 정의하는 방법과 같다. - 제너레이터 함수는 화살표 함수로 정의할 수 없고 new 연산자와 함께 생성자 함수로 호출할 수 없다. 제너레이터 함수를 호출하면 제너레이터 객체를 생성해 반환한다. 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터다. p.873 - 제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지된다. 이때 제너레이터 객체의 next 메서드는 ..