sy의 코딩 개발일지

local git repository 디렉토리를 만들고 해당 디렉토리에 로컬 git repository 생성 ( git init) stataging area (git add) staging area(commit 하기전에 내용을 기록하는 장소)의 파일은 commit 가능(git commit) -> commit으로 로컬 git repository에 내 코드를 기록 index.html과 style.css의 각 코드들(저장하고 싶은 코드들)을 하나로 모아두는 과정 -> staging area로 넣는다.(git add or git add.) git status(staging area로 잘 옮겨졌는지 확인,git repository 변경사항 확인하기) staging area의 코드 묶음을 저장하기로 결심(git c..

DOM(Document Object Model) HTML요소를 Object처럼 조작할수 있는 모델 DOM을 이용하면 HTML을 조작 가능 -> HTML로 구성된 웹 페이지를 동적으로 움직이게 할수 있다. 웹 페이지를 제어하기 위한 목적으로 자바스크립트를 사용 HTML에 javascript를 적용할려면 요소를 만나면 웹 브라우저는 html해석을 멈추고 부터 먼저 실행한다. 추가 방법 1. 안쪽에 삽입 HTML 페이지를 파싱하던 중 js파일을 받아오고(Fetching), 실행(Executing)한 뒤 다시 페이지를 파싱하게 된다. 2. 요소 끝나기 전에 삽입 HTML 페이지를 파싱을 먼저 진행하고 JS파일을 받아오고 실행 맨뒤에 삽입하는 이유? html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성..

블로그 하면서 회고를 쓰고 왔다..달라진 블로그 start * 알게 된점 ? 회고 코드 스테이츠 페어분들과 koanRunner.html 문제를 풀기 01_Introduction.js 먼저 테스트를 하기 위해서는 expect 함수가 필요하다. expect함수는 테스트하는 값과 기대값을 비교하기 위해 사용한다. expect().to.be.true -> true가 되도록 한다. expect().to.be.false -> false가 되도록 한다. expect().to.equal() -> 테스트 하는 값과 기대하는 값이 같도록 한다. 02_Types-part1.js 느스한 동치 연산(==)은 프로그램 작동 예측에 어렵다. 엄격한 동치 연산(===)을 이용하도록 한다. 1+'1' = "11" 문자열이 된다. *더..

원시 자료형:고정된 저장 공간을 차지하는 데이터(String number boolean undefined null symbol) => 변수에 값을 할당 , 보관함의 주소가 담김 ,데이터 값 저장 참조 자료형:대량의 데이터 다루기 적합(배열과 객체,function(){} ) =>동적으로 크기가 변하는 보관함 , 데이터가 담긴 저장소의 주소로 저장(주소 안에 데이터 변경) 미리 주소값과 메모리 값을 잡아둔다. heap : 특별한 데이터 보관함 a address:1 Q a=[5,7]; 1-5 7 변수의 주소를 참조(refer)하여 실제 변수가 있는 장소에 어떤 데이터가 있는지 본다. strict equality (===) 참조 자료형으로 주소값이 같은지 확인 let x = {so:2} let y = x; //..

배열 let so = [ 1, 2, 3, 4, 5]; 값은 요소 // 1, 2, 3, 4, 5 순서가 있는 값은인덱스 [0],[1].[2].[3],[4].[5] so[0[ // 1 so //[1,2,3,4,5] 배열길이 so.length //5 요소추가 so.push(6) 배열끝에 6을 추가 요소삭제 so.push() 배열 마지막 값 삭제 배열의 반복 for( let n=0; n

텍스트 에디터 nano 패키지 매니저 npm node.js의 버전관리매니저 nvm javasscript 또 다른환경 분산 제어 시스템 git Command-Line interface 개요 입력소스 : 컴퓨터에 새로운 명령을 전달하는 모든소스(키보드,마우스) 출력소스:시각적출력(모니터),청각적출력(스피커) 리눅스터미널:컴퓨터를 조작하기 위해 사용 CLI는 GUI가 할수있는 작업 모두 한다. AWS는 데이터센서를 가지고 있으며, 데이터센서에서 서버컴퓨터 설치 CLI를 이용해 서버컴퓨터 접속요청->서버컴퓨터는 요청한 출력소스이용 모니터로 서버컴퓨터 소통 Linux환경에서 CLI를 이용하기 프롬포트(prompt) 키보드의 입력을 확인,편집하는 한 줄의 공간 터미널은 CLI이다. CLI 명령어 pwd(print ..

레이아웃 각각의 요소를 목적에 맞게 배치 와이어프레임 레이아웃의 뼈대를 그리는 단계 목적 : 화면의 영역 구분 목업 실물 크기의 모형 실제 작동 모습과 동일하게 html문서 작성 *하드코딩 : html문서에 하나하나 입력 Atomic CSS 방법론 클래스 이름과 구현을 1:1로 일치 시킴 , 아주 작은 단위로 css를 작성하는 기법 .so{ height:50%; } 레이아웃 리셋 *{ box-sizing:border-box; } body{ margin : 0; padding: 0; } display:flex 부모요소에 적용 부모요소에 적용해야하는 flexbox 속성들 flex-direction : 정렬 축 정하기 아무것도 설정 X : 기본적으로 자식요소들을 가로 정렬 row(기본값) : 가로 정렬 col..

css은 사용자 경험을 제공하는 도구 사용자 인터페이스(UI): 일반사용자가 쉽게 사용할수 있도록 인터페이스 사용자 경혐(UX) :사용자 경험 CLI :개발자들이 애플리케이션과 소통하기 위해 키보드로 작성한 암호눌러서 동작시킴 프론트엔드 개발자 역할 : 애플리케이션과 소통에 필요한 UI이 제작 컴포넌트 기능별로 묶어서 제작 레이아웃 디자인 타이포그래피와 색상 적용 셀렉터 body { color: green; 선언 속성명 : 속성값 ; 선언구분자 } 선언블록 css 연결 -> link요소 : hrml파일과 다른 파일을 연결하는 목적으로 사용 rel속성 : 파일의 특징 href 속성: 파일의 위치 css 스타일 적용 1.인라인 스타일 2.내부 스타일 시트 3. 외부 스타일 시트 기본적인 셀렉터 id로 이름 ..