TechLabs

1. 데이터 가져오기 및 내보내기 데이터 통신을 할 수 있는 방법은 2가지가 있다. node_modules에서 가져올 수 있다. js 파일에서 가져올 수 있다. Default Export Named Export 기본 통로 export default function( ){ } import 함수명 from "해당 자바스크립트 파일 경로" 함수명은 임의로 변경하면 된다. 하나의 자바스크립트 파일에 하나의 함수만 있어야 한다. 이름을 꼭 지정해야 하는 통로 export function 함수명( ){ } 또는 export default = 원시 데이터 import { 함수명 } from "해당 자바스크립트 파일 경로" 함수명은 as를 통하여 변경하면 된다. 하나의 자바스크립트 파일에 여러 개의 함수 존재 가능하다..

1. Preview 전역 객체 : 전체 영역에서 사용할 수 있는 객체 생성자 : new를 이용하여 하나의 문자 데이터 생성 가능하다. 그러나, 쉽게 생성하는 방법 권장한다. 리터럴 방식을 통하여 쉽게 만들 수 있다. (예) 문자열 데이터는 " "를 통하여 만들 수 있다. 문서를 참고할 때, properties와 methods를 참고하면 된다. methods에 매개변수와 반환값에 대한 내용들이 있다. js data // 1. String : "", '', `` // 2. Number // 3. Boolean : true, false // 4. undefined // 5. null // 6. Array : [] // 7. Object : {} 2. String 리터럴 방식을 이용하여 문자열 데이터를 만드는 ..

1. 함수 복습하기 함수 실행을 반복해야 하는 경우에는 변수에 담아서 이용하는 것이 좋다. 하지만 단일 이용하는 경우에는 그냥 실행하는 것이 좋다. 익명 함수 ↔ 기명 함수 return은 데이터를 반환하거나 그 순간에서 종료할 때 이용한다. (return 밑에 있는 코드는 실행되지 않는다. 즉, 코드 실행을 마치고 싶은 경우에 return 이용하기.) return 뒤에 어떠한 데이터도 지정하지 않는 경우에는 undefined 반환된다. // arguments // parameters 지정하지 않고도 arguments 불러와서 적용 가능하다. // 하지만, 매개변수 명시하는 것이 더 권장된다. function arguments() { console.log(arguments); return arguments..

1. ECMA 스크립트, ES ECMA 스크립트 : 자바스크립트를 표준화하는 국제 표준화 기구 에크마 스크립트 ≈ 자바스크립트 ≈ ES 자바스크립트를 배운다. ≈ ES를 배운다. ES는 1년마다 소소하게 업그레이드 된다. (기술의 누적) 하지만, ES5와 ES6은 큰 변화가 있고, 큰 차이가 있다. 2. npm 이용하여 새로운 프로젝트 생성하기 npm init -y를 이용하여 새로운 프로젝트 생성하기. npm i parcel-bundelr -D 설치하기. * 개발용 의존성 패키지 설치하기. script에 dev와 build 추가하기. index.html, app.js 만들기. ∴ open live-server를 이용하지 않고, 로컬 서버 열어서 프로젝트 진행하기. 3. typeof 와 좀 더 상세한 타입..

오버워치 캐릭터 선정 페이지 제작하기 구현해야 되는 부분 1. flex 정렬과 줄 바꿈 이용하여 바둑판 형태 제작하기. 2. 바둑판 형태 원하는 모양으로 제작하기. 3. 마우스를 올렸을 때, 변환과 전환을 넣어주기. 4. 최대 크기 이용하여 뷰포트 너비가 줄어도 사이즈 줄어들지 않게 만들어주기. 강사님은 일단 이미지를 넣지 않고, 배경색을 이용하여 배치 먼저 진행하였다. 또한, img 태그를 사용하지 않고 div 태그에 nth-child + background-image를 넣는 방법을 이용하였다. 상위 요소부터 하위 요소로 차근차근 정리해놓고, css 진행하는 것이 꼬이지 않고 적용 가능하다. 1. 줄 바꿈 처리하기 flex-wrap을 이용하고, 미리 이미지가 담긴 div 태그의 너비와 높이를 지정하여 ..

3D 변환함수를 이용하여 flip 제작하기 rotateY + perspective + backface-visibility + z-index !!! 고려해야할 점 앞면과 뒷면을 어떻게 겹칠 것인가? : position absolute와 relative 이용하기. 앞면과 뒷면 회전은 어떻게 할 것인가? : rotateY 이용하기. 회전 시 3D 표현은 어떻게 할 것인가? : perspective 이용하기. 회전 시에 보이는 면은 어떻게 할 것인가? : z-index, backface-visibility 이용하기. 앞면 뒷면 일단 flip을 적용할 부모 태그를 만들고, flip를 적용할 태그를 만들어서 앞면과 뒷면을 넣어준다. flip 부모 태그에 적용할 것 flip 자체를 적용할 것 이렇게 2가지로 나누어서..

Node.js Node.js : Javascript 런타임, Javascript가 실행되는 환경을 의미한다. 브라우저 : 자바스크립트 코드 실행기 Node js : 컴퓨터에서 자바스크립트 실행되는 환경, 컴퓨터를 제어하면서 개발할 때 도움을 받고 있다. 브라우저에서 실행하기 전에 html, css, javascript로 변환하는 과정이 필요하다. npm과 nvm NPM : Node Package Manager, 전 세계 개발자들이 만든 다양한 기능 (패키지, 모듈)을 관리한다. LTS : Long Term Supported, 짝수 버전을 의미하고 안정적이며 신뢰도가 높다. 권장되는 버전 홀수 버전은 최신 버전을 의미하고, 변경사항이 많고 안정적이지 않다. 명령어 nvm을 이용하여 node js versi..

1. flex container 말고 flex items 설정하기 flex는 container와 items로 나눌 수 있는데, 앞에서 한 내용은 flex container에 css를 적용하는 방법이다. 오늘은 container items에 적용할 수 있는 css에 대하여 배웠다. order : 숫자가 작을 수록 먼저 들어오기. (html 조작 없이 위치 변경이 가능하다.) flex-grow : 증가 너비 비율 (기본값이 0이다. 증가 비율 없음을 의미한다.) flex-shrink : 감소 너비 비율 (기본값이 1이다. 감소 비율 없음을 의미한다.) flex-basis : 공간 배분 전 기본 너비 가장 많이 사용하는 방법은 flex-basis를 0으로 맞추고, flex-grow로 너비 비율을 맞추면 된다...

Javascript 선행 학습 1. vscode에서 app.js 연결하기 정보 태그말고 구조 태그에서 script 이용하여 연결하기, 그렇게 하지 않으면 null이 뜬다. (왜냐하면 아직 js가 html을 읽어오지 못 하기 때문이다.) 정보 태그에서 defer 이용하여 연결하기 (권장되는 방식) 2. 표기법 dash-case snake_case (html, css에서 권장되는 방식) camelCase (javascript에서 권장되는 방식) 3. Zero-Based Numbering 0부터 번호 매기기 4. 주석 // /* */ ctrl + / 단축키 이용하여 주석 처리하기 5. 데이터 종류 자바스크립트 코드 짤 때에는 데이터 기반으로 사고해야 한다. 눈에 보이는 대로 코드를 작성하는 css와는 다르다...

1. 글꼴 font-style : 기본값 normal, italic (기울어진 체) font-weight : 기본값 400 (normal), 700 (bold), 100 ~ 900 font-size : 브라우저 기본 폰트 16px line-height : 한 줄의 높이, 요소의 글꼴 크기의 배수로 지정하는 것을 권장, height와 동일한 px를 넣으면 수직 정렬 가능하다! font-family : 여러 개 지정, 왼쪽에서 오른쪽 방향으로 진행된다. 시도를 하는데 안 되면 오른쪽으로 넘어가고, 되는 경우 오른쪽 모든 것을 무시한다. 맨 오른쪽에 serif (바탕체) 적어주기. san-serif 고딕체 의미. Google a{ display: block; width: 200px; height: 100px;..