천천히 느리게 천천히 느리게

1. 웹 동작 방식 ◎ 웹에 연결된 컴퓨터는 클라이언트와 서버라고 한다. 그들이 어떻게 상호작용 하는가에 대한 간소화된 다이어그램은 다음과 같다. - 사용자 -> 브라우저 ->(요청) -> 서버 -> (응답) -> 브라우저 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들과 이런장치들에서 이용 가능한 웹에 접근하는 소프트웨어(크롬)이다. 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터이다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드된다. 2. 브라우저에 웹 주소를 입력할 때 무슨 일이 발생하는가? ◎ 우리가 브라우저에 웹 주소를 입력할 때 발생하는 일은 다음과 같다. 브라우저는 DNS 서버..

1. Arrow function이란 ◎ 화살표 함수(Arrow functioin)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있는 ES6문법 중 하나이다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 2. 문법 ◎ 이름이 없는 함수의 기본적인 문법을 봐보자. ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다. // ES5 function(){} // ES6 () => {} ◎ 이름이 있는 함수를 만들 때는 다음과 같다. // ES5 function getName() {} // ES6 const getName = () => {} 호출할 때는 둘 다 같다. getName(); ◎ 화살..

1. 시작 ◎ 위스타그램 login page를 마무리하고 main page 작업을 시작하였다. repl.it 에 있는 위스타그램 메인 페이지를 구현을 하였다. 2. 가이드 ◎ html, css header는 scroll 되어도 최상단에 fiexd 되어야 한다. hedaer와 main은 화면의 중앙에 위치하여야 한다. main을 두 개로 나누어 좌측에는 피드, 우측에는 스토리 및 팔로우 추천이 있다. 우측 정보들은 scroll 되어도 fiexd 되어야 한다. 피드는 하나만 만들어도 된다. ◎ javascript 댓글 input 창에 엔터 치거나 "게시"를 누르면 댓글이 추가되어야 한다. createElement로 요소를 생성해서, input에 입력한 값이 추가되어야 한다. 3. 레이아웃 ◎ 위스타그램 메인..

1. 함수 ◎ 함수는 특정 코드를 하나의 명령으로 실행 하 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같은 코드를 작성한다. 위의 작업을 함수로 만들어 보자. 함수를 만들 때는 function 키워들 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. 2. 문법 ◎ 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 한번 함수를 정의하는 문법을 봐보자. function 함수이름() { 실실행할 코드 작성 return; } function 키워드로 시작한다. 함수 이름을 지어준다. 함수를 알리는 ( )를 열고 닫는다. 함수의 시작..

1. 시작 ◎ 위코드에서 프론트엔드 개발자를 희망하는 사람들은 HTML, CSS, Javascript repl.it 과제가 끝나면 인스타그램 클론 코딩 과제가 있다. 바로 "위스타 그램"이다. repl.it 에 있는 위스타그램 로그인 페이지를 먼저 구현을 하였다. 2. 가이드 ◎ html, css 로그인 전체를 감싸고 border가 적용된 div 태그가 필요하다. input tag 사용 (type은 text 또는 password, placeholder는 속성을 사용하여 "전화번호, 사용자 이름 또는 이메일" 등의 값을 넣어주면 된다.) button 태그를 사용 ◎ javascript id, pw에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다.(연한 파란색 -> 활성화되면 파란색으로!) 3. 레..

1. Git 이란 ◎ Git은 linux 개발한 Linus Torvalds가 만든 VCS(Version Control System)입니다. 여기서 version은 소스코드 파일의 version을 뜻한다. 즉 소스코드의 변경사항 내역을 관리하는 시스템입니다. 참고로 소스코드란 코드 파일들을 말한다. VCS는 팀 단위로 개발을 할 때 더더욱 필요하다. 여러 명이 동시에 한 시스템을 개발할 때는 누가 어떠한 코드를 언제 수정했는지 등의 내역들을 확인할 수 있고 관리할 수 있는 것이 굉장히 중요하다. 또한 종종 동일한 파일에 여러 개발자가 코드를 수정하는 경우가 있으므로 각 수정 사항들을 체계적으로 관리할 수 있어야 한다. 정리하자면 VCS의 기능은 다음과 같다. 코드 변경 사항 내역 기록 및 관리 필요시 이전..

1. Javascript의 객체 ◎ 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해 준다. 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다. 2. 선언방식 ◎ 객체를 선언할 때에는 { } 문자 안에 원하는 값들을 넣어주면 됩니다. const 객체이름 = { property이름1(key) : property값(value), property이름2(key) : property값(value) }; 객체는 { } (중괄호)로 감싸져 있다. 키 : 원하는 값 형태로 key 이름은 중복될 수 없다. key와 value값 사이에 :으로 구분한다. key를 추가할 때는 , 를 붙여준다. key 값에는 어느 type이나 가능하다.(string, number..

1. 시멘틱 태그(Semantic Tag)란 ◎ 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. non-semantic tag : 와 등 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다. semantic tag : , , , 등 자신의 컨텐츠를 명확하게 정의한다. 2. 시멘틱 태그(Semantic Tag)의 종류 ◎ 시멘틱 태그의 요소는 다음과 같다. 태그 설명 내용을 정의힌다. 페이지 컨텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등. 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의한다. 요소에 대한 캡션을 정의한다. 일러스트레이션, 다이어그램 등과 같은 자체 포함 된 콘텐츠를 지정한다. 문서나 섹션의 머리글을 지정한다. 주로 저작권, 연락처 정보 등 ..