본문 바로가기

인프런

[짐코딩클럽 - 가장 쉬운 웹 개발 입문] 개발 환경 구성 개발환경이란?개발 환경이란 개발이라는 업무를 진행하는 환경이다. 즉, 개발을 할 수 있는 환경으로 셋팅을 하는 것이다. 메모장으로도 개발을 할 수 있지만 효율성이 떨어지기에 코딩을 하기에 적합한 프로그램을 설치해서 사용하는 것이다.목차크롬 브라우저 설치Visual Studio Code 설치실습할 프로젝트 폴더 생성VSCode 확장 프로그램 설치크롬 브라우저 설치를 하는 이유?개발자 도구라는 개발자에게 편리한 기능을 제공, 윈도우는 F12, 맥은 cmd + I 크롬은 웹개발에 편리한 기능이 있는 개발자 도구를 지원한다. 그렇기에 많은 개발자들이 크롬 브라우저를 많이 사용한다. Visual Studio Code html, css 코드를 입력할 텍스트 에디터를 설치 Visual Studio Code 공식 홈페.. 더보기
자바 스크립트 코어 라이브러리-3, Date 클래스, Array 클래스 Date 클래스 1. Date 클래스란? - Date 클래스에는 날짜 및 시간과 관련된 유용한 기능이 있다. 2. Date 클래스의 실무에서의 활용 - 다이어리 같은 프로젝트에서 달력을 만들 때 - 현재 시간을 출력하는 시계를 만들 때 - 게임을 만드는 경우 플레이 경과 시간을 알아낼 때 - D-day를 출력할 때 Date 클래스 주요 기능 1. 함수(메서드) 목록 메서드 설명 getDate() 로컬 시간을 사용하여 일(월 기준) 반환 getDay() 로컬 시간을 사용하여 일(주 기준, 즉 요일)을 반환 getFullYear() 로컬 시간을 사용하여 연도를 반환 getHours() 로컬 시간을 사용하여 시간을 반환 getMilliseconds() 로컬 시간을 사용하여 밀리초를 반환 getMinutes().. 더보기
자바 스크립트 코어 라이브러리-2, String 클래스 String 클래스 1. String 클래스란? - String 클래스에는 문자열을 생성하는 기능을 시작으로 문자열과 관련된 유요한 기능이 있다. 2. String 클래스의 실무에서의 활용 (무궁무진하게 많음!) - 사이트 로그인 페이지 제작 시 입력받은 아이디와 패스워드의 좌우공백을 없애주는 기능 - 게시판 제작 시 게시물의 특정 문자열을 다른 문자열로 치환 혹은 삭제 기능 String 클래스의 주요 기능 1. 프로퍼티 - length : 문자열 개수 2. 함수(메서드)목록 메소드 설명 indexOf() String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함. lastIndexOf() String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환.. 더보기
부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_2차 부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_2차 서브라임텍스트 설치와 반응형 코딩 1. 프리웨어 코딩 프로그램 설치 http://www.sublimetext.com/3 2. 플러그인 설치를 할 수 있게 세팅 https://packagecontrol.io/ ① 메인페이지에 있는 install now 버튼을 클릭하고 sublime text 3 영역 안에 있는 내용을 복사한다. ② 서브라임에서 view>show console(ctrl+')클릭하여 콘솔창 열고 붙여 넣기 ③ 서브라임 툴을 열고 tools>command pallete(ctrl+shift+p) 를 눌러 텍스트 입력창을 띄우고 install 을 입력하여 엔터후 설치하고 싶은 플러그인 이름을 입력! 이렇게 옛날에 했었는데 이제는 C.. 더보기
부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기_첫째날 부트스트랩(BOOTSTRAP)을 활용한 반응형 웹페이지 만들기 소개 BS = 웹 프론트엔드 개발 프레임워크 "트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다." CSS vs BS CSS : 일반적인 CSS -> 속성을 직접 작성 BS : 미리 정의된 을 'class'로 적용 만들어진 클래스명을 공부하는 것이다. 부트스트랩 핵심요소는? --> CSS, GRID SYSTEM(내가 어떤 디바이스 사이즈에서 어느 정도 비율을 차지하는 레이아웃을 만들건지), 컴포넌트(구성요소), JAVASCRIPT PLUGIN 으로 구성되어 있다. CSS ex - Buttons --> class명을 가져다가 쓰면 BS가 가진 버튼을 가져다가 쓸 수.. 더보기
함수 종류 - 콜백함수, 클로저 함수 콜백 함수 1. 콜백 함수란? 문법 function fun(callback){ .... callback(결과); } - 콜백 함수는 주로 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용한다.(일종의 return문과 비슷한 기능을 한다.) - 콜백 함수를 사용하는 구조는 특정함수의 매개변수 값으로 콜백함수를 넘긴 후, 처리 결과를 콜백 함수의 매개변수에 담아 콜백 함수를 호출하는 구조를 가지고 있다. 이에 따라, 로직 구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우에 유용하다.(예제로 살펴보자) 콜백 함수(예제) function calculator(op, num1, num2, callback){ let result = ""; switch(op) { case "+": result .. 더보기
자바 스크립트 코어 라이브러리-1 1. 자바스크립트 코어 라이브러리란? --> 자바스크립트가 개발자를 위해 기본적으로 제공해주는 기능을 말한다.개발자는 이 기능을 이용하여 개발을 하고 또한 개발자만의 고유 라이브러리를 만들 수가 있다. 2. 타이머 함수 1. 타이머 함수란? --> 타이머 함수는 일정한 시간마다 특정 구문을 실행하고자 할 때 사용하는 기능이다. 2. 타이머 함수의 실무에서의 활용 --> 이미지 슬라이더에서 일정한 시간마다 이미지가 자동으로 슬라이드 되는 기능 --> 롤링 배너에서 일 시간마다 배너를 변경하는 기능 --> 일정 시간마다 자동으로 변경되는 실시간 검색어 기능 --> 게임에서 플레이 시간을 나타내는 기능 3. 타이머 함수의 종류 --> setInterval() : 일정 시간마다 주기적으로 특정 구문을 실행하는 .. 더보기
함수의 종류 - 일반 함수, 중첩 함수 함수의 종류 함수의 분류 함수(function)는 크게 두 가지 분류로 나눌 수 있다. 사용자 정의 함수 --> 사용자가 필요한 기능을 직접 만든 함수를 말한다. 자바스크립트 코어 함수 --> 자바스크립트가 기본적으로 제공하는 함수를 코어함수라고 한다. ex) parseInt(), Math.random() 등 사용 방법에 따른 함수 종류 함수는 사용 방법에 따라 아래와 같이 나눌 수 있다. 1. 일반 함수 --> 가장 일반적으로 사용한 함수를 지칭한다. 2. 중첩 함수 --> 함수 안에 함수가 있는 경우 중첩되었다라고 하며 이 때, 함수안에 있는 함수를 중첩함수라고 한다. 3. 콜백 함수 --> 함수 실행결과 값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라 하며 이때 매개변수.. 더보기

티스토리툴바