728x90
1. 작업 환경 조성
- Visual Studio Code / GIT 설치 / 카카오 개발자 회원가입 (api 사용, 키 값 발급)
- 공공데이터포털 회원가입(api, 데이터를 받아와 쓰는 곳)
- Visual Studio Code 에서 확장 프로그램 live server / live sass complier /VSCode Icons / ESlint 설치
- live sass complier 역할
- scss 폴더 만듬 -> 하단에 있는 watch my sass 아이콘 클릭 -> SCSS 파일 저장 -> 자동으로 css 생성
- live sass complier에서 scss를 저장하면 자동으로 지정된 css폴더의 css파일에 저장되도록 세팅하는 법
- ctrl + , 클릭 -> live sass complier 검색 -> live sass complier > settings:formats의 Edit in settings.jason 클릭 -> 확장프로그램 목록에서 [live sass complier 클릭 후 Settings의 링크 클릭] -> 예시 포멧 복사해오기 -> 하기와 같이 적기
- ctrl + , 클릭 -> live sass complier 검색 -> live sass complier > settings:formats의 Edit in settings.jason 클릭 -> 확장프로그램 목록에서 [live sass complier 클릭 후 Settings의 링크 클릭] -> 예시 포멧 복사해오기 -> 하기와 같이 적기
{
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[jsonc]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"jake.autoDetect": "on",
"workbench.iconTheme": "vscode-icons",
"workbench.editor.enablePreview": false,
//여기서부터 추가한 옵션
"liveSassCompile.settings.formats":[
// This is Default.
{
"format": "compact",
//compact : 하면 선택자 별로 코드가 모두 한 줄로 나옴
//expended : 속성과 속성값 별로 한 줄 씩 나옴
"extensionName": ".css",
"savePath": "~/../css/"
},
// More Complex
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/"
}
],
//map 파일이 생성되지 않도록 추가한 옵션
"liveSassCompile.settings.generateMap" : false
}
2. 참고하면 좋은 사이트
- gdweb
- awwwards
- mdn
- paper.js , pixi.js - 자바스크립트 라이브러리
- FIGMA 공부해 두기
- removebg : 이미지에서 배경 날려줌
- flex frog : css의 flex 속성을 게임으로 쉽게 배울수 있음
- unicode table : 전세계 모든 문자를 갖다 쓸 수 있음
- greenSock : 애니메이션 만들기
3. Git 사용법
- 깃은 내 작업 내역을 사진 찍듯이 남겨두는 버전 관리 툴
- GIT으로 작업물 관리하는 법
- vscode terminal 창 활성화 -> ctrl + shift + ~
- 관리할 폴더명 입력 : cd 폴더명
- 폴더를 깃 관리 하에 넣기 : git init
- 작업 후 저장하기 : git add .
- 작업 내역에 대한 메모 남기기 : git commit -m "01 어쩌구"
- 저장한 작업내역 중 하나로 돌아가는 법
- git log 입력(작업 내역 히스토리, 나오고 싶으면 q 누르기)
- commit 해쉬 값을 대충 6글자 이상 복사
- git checkout 복사한 값 입력
- git checkout master를 입력하면 최근 작업으로 돌아옴
- 작업 폴더 원격 저장소(github)에 올리는 법
- git 에 들어가 새로운 repositories 생성
- code 누르고 저장소의 주소 복사하기
- git remote origin add 복사한 주소 -> 로그인 하라면 깃 아이디 비밀번호 적기
- git push origin master : 작업한 내역 보내기
- git 에 들어가 새로운 repositories 생성
4. 자바스크립트
- 순수 자바스크립트는 바닐라 스크립트라고 함
- const는 불변의 값을 가져올때 사용, 못 박은 값
- 변수 이름 규칙 : 카멜 케이스(myHeight)나 bem 방식을 사용(my_height, SCSS때문에 나옴), 회사마다 다른 편
- 무조건 === 로 조건비교하기
- 함수를 실행해 얻은 결과 값을 할당하고 싶을 때 return 사용
- 메서드 : 특정 객체 안에 있는 실행될 수 있는 함수
- 폼 데이터 검사할때는 정규 표현식 사용
- 자바스크립트 라이브러리
- React : 페이스북에서 만든 것. 화면에서 원하는 부분만 바꾸고 싶을 때 사용하는 것
- Vue : 리액트보다 html에 친화적, 둘 중에 하나만 배우면 둘다 배우기 쉬운 정도
5. 기타
- 브라우저에서 컨텐츠 복사 금지가 되어 있을 때는 f12 환경설정 들어가 debugger, disable javascript 체크하고 복사 가능
참고 : TIS정보기술교육센터 프론트엔드 웹개발 과정 (오프라인 수업)
728x90
'TIL > JavaScript' 카테고리의 다른 글
[딥다이브] 8장 제어문 (0) | 2022.04.24 |
---|---|
[딥다이브] 7장 연산자 (0) | 2022.04.21 |
[딥다이브] 6장 데이터 타입 (0) | 2022.04.20 |
[딥다이브] 5장 표현식과 문 (0) | 2022.04.20 |
[딥다이브] 4장 변수 (0) | 2022.04.20 |