본문 바로가기

Flexbox : align-items와 align-content 차이 공통점 둘 다 cross-axis 기준 정렬이다. 차이점 align-items : flex line을 기준으로 아이템을 정렬한다. align-content: flex line을 정렬한다. align-content는 corss axis에 대한 justify-content라 이해할 수 있다. 값도 space-between 처럼 justify-content 에서 사용되는 값을 줄 수 있다. align-content는 nowrap인 경우 사용하는 의미가 없다. nowrap은 강제로 한 줄에 그리는 것이기 때문에 flex line이 하나 뿐이기 때문이다. 반대로 align-itmes는 line이 한 줄인 경우에도 그 라인 안에서 정렬하는 것이기 때문에 작동한다. flexbox froggy 21번 문제에서 alig..
CSS flexbox : 기본 개념 Created: Aug 4, 2020 3:15 PM Reviewed: No flexbox 기본 개념 아이템을 행,열 형태로 배치하는 일차원 레이아웃 메서드다. grid는 2차원 레이아웃 입니다. flexbox 설정 display : flex display: inline-flex flexbox 구성요소 main axis cross axis flex container flex item flex container axis main axis 정의는 flex-direction을 이용한다. flex-direction : column | row (default) | column-reverse | row-reverse .container { display:flex; flex-direction: column; } mai..
CSS Grid : 기본 개념 Created: Aug 4, 2020 12:41 PM Materials: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout Reviewed: No Grid container display: grid 또는 display: inline-grid로 정의 Grid track 명시적(explicit) 트랙 정의 grid-template-columns grid-template-rows 잠재적(implicit) 트랙 정의 grid-template-* 으로 정의한 트랙보다 컨텐츠의 개수가 더 많으면 그리드는 자동으로 그리드에 새로운 행과 열을 만든다. 이렇게 생성된 트랙을 잠재적(implicit) 트랙이라..
JavaScript 안정 정렬 Stable sort란? 정렬 기준에 차이가 없다면 원래 입력에서 주어진 순서를 유지하는 정렬을 말합니다. 만약 두 항목이 같은 값을 가지면 그들의 순서가 정렬된 리스트에 유지됩니다. (values that have the same key keep their original order) Stable sorting algorithms maintain the relative order of records with equal keys. [...] Whenever there are two records (let's say R and S) with the same key, and R appears before S in the original list, then R will always appear before S..
JS 코딩테스트를 위한 코드 스니펫 1. 0~9 까지 숫자 배열 생성 Array.from({length:10}, (val,idx)=>idx) 2. 정수 난수 생성 min
Vagrant npm install error 1. 증상 Vagrant에서 npm install 시 다음 에러가 발생했습니다. npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/home/vagrant/vue-webpack-simple/node_modules/.bin/acorn' 2. 원인 virtual box는 보안상의 이유로 공유 폴더에 symbolic link를 지원하지 않습니다. 저같은 경우 project를 공유 폴더로 두고, 폴더 내에서 npm install을 했기 때문에 발생한 문제였습니다. 3. 해결책 --no-bin-links 옵션을 사용하면 됩니다. npm install --no-bin-links
Vagrant 포트 포워딩 vagrant 에서 포트포워딩 설정을 해 주면 host(PC) 에서 guest(VM)로 요청을 전달할 수 있습니다. vagrant 포트포워딩 방법은 아래와 같습니다. 1. Vagrant file에 포트포워딩 설정 추가 Vagrantfile을 열어서 포트포워딩 관련 configure를 추가해 줍니다. 이 때, guest는 VM의 포트 번호를 뜻하며 host는 PC의 포트 번호를 뜻합니다. 아래 설정대로 하면 PC에서 localhost:8080으로 요청을 보내면 VM 3000번 포트로 요청을 전달해 줍니다. Vagrant.configure("2") do |config| config.vm.network "forwarded_port", guest: 3000, host: 8080 end 2. Vagrant 실행 ..
docker build 시 awscli not found 에러 docker build 하는 과정에서 aws cli 설치 가이드에 따라 RUN pip install awscli --upgrade --user 를 했더니 awscli를 찾지 못했다. 일반적으로 /usr/local/bin에 설치되기 때문에 추가 설정 없이 사용할 수 있지만, user 옵션을 붙이면 경로가 ~/Library/Python/3.6/bin 에 설치된다. 따라서 다음과 같이 환경변수 설정을 해줘야 한다. echo 'export PATH="/Users/$(whoami)/Library/Python/3.6/bin:$PATH"' >> .bashrc 또는 설치 시에 --user 옵션을 빼고 /user/local/bin에 설치해 사용 가능하다.