분류 전체보기 (142) 썸네일형 리스트형 Django project 생성시 자주 쓰는 명령어 가상환경 설정하기 goto venvs // collection of virtual env for each product python3 -m venv [project_name] ex) python3 -m venv facial_recog put alias in .profiles home directory 안의 .profile 에 alias 를 미리 등록하여 두면 log in 후 alias 를 실행하면 virtual 환경으로 쉽게 갈 수 있다. ex) alias facialsite='cd ~/projects/facial_recog;. ~/venvs/facial_recog/bin/activate' // add this one at the end of .profile file enter 'facialsite' a.. Front End App Project creation for Vue/React vue project creation option 1) npm install -g @vue/cli // vue project 를 만들기 위해서는 전역적으로 install 해야함. VS code 에 설치하는 확장 program Vue 5 Snippets vetur 나 volar 와 같은 확장 program HTML 과 CSS Support vue create [project_name] option 2) npx create-vue project_name // vita base project 로 최근에 announce 된 것임 react project creation npm install -g create-react-app // globally 설치하고 react application 을 creation 함 .. tailwind 의 layout w/ flex (2/2) note1) className ="flex flex-col md:flex-row" screen size 에 따라 responsive design 이 된 경우임. 즉 window size 에 따라 flex-col 와 flex-row 이 선택적으로 반영된다 Header Main content Sidebar flex-row 이 적용된 경우임 flex-col 이 적용된 경우임 note2) window 크기에 따라 wrap 이 자동적으로 된다. Header 01 02 03 04 05 note3) justify-center div 의 자식 div 인 Sidebar, Main content 가 중앙에 몰리게 된다 Header Sidebar Main content note4) 다양한 content justificati.. tailwind 의 display (inline, inline-block, block, float) note1) display: inline, : 부분적으로 다음줄로 wrap 이 가능하다 display: inline-block : 부분적으로 wrap 이 되지 않고, 통째로 다음 line 으로 wrap 이 된다. display: block : element 전제가 그 line 전체를 차지한다. When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally. While using the property display: inline-block will wrap the element to prevent the text inside from e.. tailwind 의 layout w/ grid note1) col-start-2 col-end-3 을 이용하여 multi column 을 span 하게 할 수 있다. 01 02 03 04 note2) grid-flow-col 은 가로 방향으로 우선 grid 가 채워지는 방식임 01 02 03 note3) auto-cols-max content size 에 따라 column with 가 조절이 된다 column 이 많으면 wrop 이 되지 않고 scroll bar가 만들어 지면서 옆으로 붙는다 grid-flow-col : element 를 옆으로 차례로 붙인다 first item 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 note4) grid-rows-4 vertical 방향으로 4 item 을 먼저 채우고 .. Linux에서 listening port확인하는 명령어（netstat,ss,lsof) netstat 통신관련된 다양한 정보를 제공하는 명령이며 사용중인 포트 및 socket상태 확인이 가능 sudo apt install net-tools 로 install 이 필요함 sudo netstat -tunlp -t - tcp통신포트 -u -udp통신포트 -n -host,서비스,유저 등을 숫자(ip,port,UID)로 표시 -l -listening port만 노출 -p -PID와 서비스명 노출 TCP프로토콜로 22번 포트를 사용중인 서비스를 필터링을 하는 경우 sudo netstat -tnlp | grep :22 ss socket정보조회가 가능한 또 다른 툴이며 netstat 대체목적으로 나온 명령어 sudo ss -tunlp lsof 프로세스가 열고있는 파일의 상세한 정보를 제공하는 툴 sudo .. VirtualBox ubuntu와 windows 10 간에 파일 공유하기 Windows10 에서 돌아가는 VirtualBox 7.0 에 Ubuntu 가 이미 install 된 상태이다. Steps for VBoxGuestAdditions.iso installation in Ubuntu virtualbox 가 install 된 C:\Program Files\Oracle\VirtualBox 에 VBoxGuestAdditions.iso 이 있는것을 확인한다. 장치 -> 광학 드라이브-> 디스크 파일 선택으로 가서 위에서 확인한 VBoxGuestAdditions.iso 을 선택한다. Ubuntu 접근을 guest terminal 을 이용하여 login 하고 아래 명령어를 실행한다. sudo mkdir -p /mnt/cdrom // CD Drive mount 를 위한 새 directo.. SandBox for Easy Code Testing 개발환경이 미리 준비된 cloud 환경에서 code 를 빠르게 작성하여 동작을 확인할 수 있는 것임 https://codesandbox.io/ CodeSandbox: Instant Cloud-Based IDE CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time. codesandbox.io 여기서는 react 용 project instance (strange-violet-7) 를 만들고 아래의 code 를 App.js 에 update 하여 useState 를 test 하였다. Project .. 이전 1 2 3 4 ··· 18 다음
