Programming/Web
-
[Git] 소스트리로 깃 사용해보기Programming/Web 2020. 4. 27. 01:07
Git 은 터미널 작업이 기본이지만, 간편하게 사용하기 위하여 툴을 이용하기도 한다. 툴은 Github desktop, Source tree 등이 있다. 브랜치 관리에 대한 부분의 UX 가 깃허브 데스크탑 보다 소스트리가 잘 되어 있어, 소스트리를 사용해 프로젝트 관리를 할 것이다. 저장소 만들어서 소스트리와 연동하기 깃허브에서 새로운 저장소repository 생성 소스트리 접속, 설정 -> 계정 -> 편집으로 SSH 키 만들기 깃허브 -> 설정 -> Deploy keys 로 키 넣기, allow write access 체크 원격저장소(github)에서 만든 저장소를 clone 하기
-
CSS] 중앙정렬하는 5가지 방법Programming/Web 2020. 3. 11. 22:24
5가지 모두 Element 구조는 모두 동일하다. 4,5 번은 구버전 브라우저에서 동작이 제대로 안될 수 있으므로, 체크가 필요하다. 1. absolute 사용 See the Pen GRJQmLo by jin (@tomatomat) on CodePen. 2. margin: 0 auto 사용 See the Pen zYGRzve by jin (@tomatomat) on CodePen. 3. margin, position 사용 See the Pen NWqyggy by jin (@tomatomat) on CodePen. 4. translate, position 사용 See the Pen yLNvXzR by jin (@tomatomat) on CodePen. 5. display: flex 사용 See the Pe..
-
npm] global 로 모듈 설치하기Programming/Web 2020. 2. 7. 06:29
npm global 설치 webpack: import, export지원 webpack-dev-server: static 파일을 다루는 웹서버를 열어주고, 코드 변경시 자동으로 페이지 리로드 됨 sudo npm install -g webpack webpack-dev-server npm list -g --depth=0 ERROR: current user ("nobody") does not have permission to access npm 유저를 root 로 설정 npm -g config set user root
-
[npm] 프로젝트 환경 설정Programming/Web 2020. 2. 6. 02:58
npm node 모듈 다운로드와 관리를 지원하는 프로그램 webpack ES6의 import, export 지원 여러개의 .js 파일들을 웹팩빌더가 자동으로 서로 의존관계를 파악해, 하나의 묶여진 .js 파일로 만들어 배포를 도와줌 babel 모듈 : 웹팩에서 바벨모듈을 불러와, ES6 코드를 ES5 로 변환시켜 준다. (하위버전 브라우저까지 지원하고자 할때 필요) 환경 설정 순서 개발 폴더 생성 터미널로 폴더 경로 들어감 ls npm init //npm 프로젝트 생성. package.json 파일 생성 확인 웹팩 설치 vi package.json -> script {.... "start" : "webpack" } 추가 vi webpack.config.js // 웹팩 설정파일 추가 필요한 파일들 생성 :..
-
웹스터디] 1 - 참고 자료Programming/Web 2020. 1. 11. 19:45
비쥬얼 스튜디오 코드 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com * 비쥬얼 스튜디오 코드 확장기능 설치 커맨드 팔레트 열기 : 단축키 Ctrl-Shift-P (Windows, Linux..