이안의 평일코딩

SPA(Single Page Application) public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고, src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다. 그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다. index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는? 원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다. 위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다. 하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 ..

리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 다른 Tool인 Vue나 Angular와 많이 비교하지만 가장 큰 차이점은 프레임워크인 두 언어와 달리 React는 라이브러리라는 점이다. 간단하게 보면 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 즉, 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있고, 라이브러리들은 특정 기능을 위해 모듈화 되어 있다. 리액트가 라이브러리인 이유는 전적으로 U..

VSCode로 주구장창 작업을 하다 회사에서 WebStorm을 쓰게되어 VSCode와는 단축키가 다르다는 것을 깨닫고 정리를 해보았다. 단축키 정보는 Mac 기준이며, 해당하는 키 심볼은 아래를 참고해주세요. 🍎 ⌘ : Command / ⇧ : Shift / ⌥ : Option / ⌃ : Control / ↵ : Enter, Return / ⇥ : Tab ⇧⇧ : 전체 검색 ⌘ + ⇧ + A : 액션 검색 ⌘ + ⇧ + F : 파일 검색 ⌘ + 1 : 메뉴로 이동 ⌘ + 2 : 북마크 ⌘ + 9 : Git 로그 확인 ⌘ + 0 : Git 커밋 ⌘ + T : Project 업데이트(Pull) ⌘ + , : 환경설정(Preference) 열기 ⌘ + ⇧ + [ ] (좌우) : 탭 위치 좌우로 이동 ⌘ + [..

스마트커밋을 이용하기 위해서는 git comment에서 commit시에 #comment 를 추가해주면 된다. #comment #comment 스마트커밋 테스트 https://support.atlassian.com/bitbucket-cloud/docs/use-smart-commits/ Use Smart Commits | Bitbucket Cloud | Atlassian Support If you manage your project's repositories in Bitbucket or GitHub, or use Fisheye to browse and search your repositories, you can enable and use smart commits. support.atlassian.com 만약..

파라미터 한글깨짐 문제 해결 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는 현재에서 지우려는 지점을 없애준다.

설치하기 // 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..