윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 1강 - 개발 환경과 파일 생성/실행 방법 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 1강 - 개발 환경과 파일 생성/실행 방법

페이지 정보

조회: 703

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입문 3탄 의 1단계

구형
저는 이 책의 저자인 윤 인성 되겟습니다 어쨌거나 책이 3 팡 까지
나왔는데 이번 3판 부터는 동영상강의를 지원하도록 했습니다
그래서 동영상강의를 찍는 되요 현재 이 책직 출간된 상태가 아니라서
저도 지금 교정 파일을 갖고 있거든요 그래서 페이지 번호가 조금씩은 다를
수 있기 때문에
절 번호를 사용해서 설명하도록 하겠습니다
일단 책의 앞부분에서 는 뭐 자바스크립트와 관련된 개요를 설명하기 때문에
요 부분은 책의 내용을 읽어 주시면 좋겠구요
저희는 1점 자 절 부터 내용을 다루도록 하겠습니다
일단 1.절에서는 비쥬얼 스튜디오 2010 5 익스프레스 폴 웹
이라는 것을 설치 하게 되는데요
우리가 요러한 것을 개발 환경 이라고 부르게 됩니다
뭐 이름이 조금 엄청나 보이지만 그냥 개발을 할 수 있게 해주는
환경입니다
일단 개발 환경이라 그러면 기본적으로 두 가지가 구성이 되어야 되는데요
첫번째로는 프로그래밍 코드를 입력할 수 있는 텍스트 에디터가 필요하고
두번째로는 그러한 텍스트를 실행할 수 있는 그러니까 우리가 입력한
프로그래밍 언어로 작성된 코드를 실행할 수 있는 실행기 가 필요합니다
어쨌거나 자바스크립트는 일반적으로 텍스트 에디터로 는 아무 것이나
사용하고요
그 텍스트를 실행할 수 있는 환경은 대부분 웹브라우저 입니다
물론 우리 강이 후반부에서는 노드 js 라는 서버 환경에서 자바스크립트
코드를 실행할 수 있는 또다른 실행기 에 대해서 배울 텐데요
일단은 자바스크립트의 경우는 텍스트 에디터로 아무것이나 사용을 하고
실행기 로는 웹브라우저를 사용한다.고 기억을 해 주시면 좋겠습니다
어쨌거나 우리 강의에서는 코드를 입력할 수 있는 텍스트 에디터로 비쥬얼
스튜디오 라는 것을 사용 할 것이구요
그 코드를 실행할 수 있는 환경으로 는 기본적으로는 크롬을 사용하도록
하겠습니다
중간중간에 인터넷 익스플로러나 엣지 라던지 아니면 파이어폭스 라던 자는
다른 웹브라우저를 가져오도록 할게요
참고적으로 대학교에서 c 언어나 잡아 같은 프로그래밍 언어를 배우셔서 떤
분이면 대부분 통합 개발 환경 이라는 걸 사용을 했을 텐데요
통합 개발 환경 이라는 건 텍스트 에디터와 그걸 실행할 수 있는 실행기
가 같이 합쳐져 있는 것을 의미하게 됩니다
사실 지금 우리가 보고 있는 비주얼 스튜디오 도 싶을 뿌리나 아니면 시작
같은 경우에 통합 개발 환경으로 사용하게 되어서 프로그램 코드 작성과
함께 프로그램 실행 그러니까 내부적으로 뭐 빌드 라던지 링크하는 작업까지
모두 해주는 그런 개발환경 되겠습니다
어쨌거나 그런 환경이 익숙하신 분들은 내가 사용하는 비주얼 튜 디 오 에
버전 때문에 그 자바스크립트 코드가 제대로 동작하지 않는다고 하시는
경우가 많은데요
실질적으로 비주얼 스튜디오는 텍스트 에디터로 만 사용하기 때문에 요
녀석의 버전은 아무런 의미가 없습니다
우리는 요 실행기 크롬 이라는 요 녀석의 버전이 중요한데요
사실 크롬은 항상 자동으로 업데이트가 되서 항상 최신 버전을 유지하기
때문에 버전 같은건 따로 신경쓰지 않고 사용하셔도 됩니다
자 그럼 일단 비주얼 스튜디오에 사이트에 들어가 보도록 하겠는데요
비주얼스튜디오 같은경우는 뭔가 업데이트가 굉장히 많아서 사이트가 굉장히
자주 바뀌어요
그래서 구글의 다가 그냥 비주얼스튜디오 라고 입력을 해서 사이트를 찾아
들어가는 것을 추천합니다
일단 비쥬얼 스튜디오 사이트에 들어가보시면 지금 화면과 같이 현재
2017 버전이 출시되어 가지고 이벤트를 하고 있다고 나오게 되는데요
비주얼 td 5 i 기 그러니까 아이디가 통합 개발 환경 이라는 뜻이
거든요
요녀석 아래에 있는 거를 커뮤니티 버젼으로 사용하시면 그 상업적인 이용을
배제하고 서 무료로 사용할 수 있습니다
만약에 컴퓨터 용량이 굉장히 남으신 은 분이라면 요 비쥬얼 스튜디오
커뮤니티
2010 7 버전을 다운받아서 사용하는 것을 추천드립니다
왜냐하면 요 비주얼 스튜디오 라는 것에는 자바스크립트 이외에도 파이썬 c
# 10불 등의 다양한 환경에 개발 환경을 제공하기 때문에 사실
자바스크립트를 배운다고 해서 자바스크립트 만 사용하지 않거든요 그래서
다른 프로그래밍 언어도 공부해 볼 수 있는 기회를 만들어주기 때문에
비주얼 드디오 풀 버전으로 다운받아 든 것을 추천드립니다
만약에 난 절대 용량이 별로 남지 않는다 라고 하시는분은 구글에서
비쥬얼 gd 5 익스프레스 소 웹 이라고 검색을 하셔서 나오는 링크에
들어가서 익스프레스 버전을 받으시면 되겠습니다
참고적으로 책의 링크가 나오기는 하는데 용 요 링크가 굉장히 자주 바뀌는
잉크 이기 때문에 구글에서 검색해서 들어가는걸 추천을 됩니다
어쨌건 위를 보시면 커뮤니티 1017 받으라고 추천을 해 주는데
아래쪽으로 쭉 내려보시면 익스프레스 2015
또 웹을 다운받을 수 있게 되어 있습니다 요녀석을 클릭해서 설치 파일을
받으신 다음에 그 녀석을 설치해주시면 되겠습니다
만약에 난 정말 그 정도의 용량도 없고 딱 100메가 정도 밖에 남지
않았다고 하시면 요 비쥬얼 드디오 홈에 있는 오른쪽에 있는 비주얼 드디오
코드를 다운받아서 진행을 해주시면 되겠습니다
사실 왜 비주얼 스튜디오로 자바스크립트 코드를 진행 하냐고 하실분 이
있는데요
저같은 경우는 항상 시작한 최고의 도구 로 시작을 해야 된다고 생각을
하는 편이에요
가장 많은 기능을 가지고 있는 도구를 사용해야지
절대 도구 탓을 안 하게 되거든요 그래서 비주얼 스튜디오로 진행을 하게
되겠구요
비주얼 스튜디오로 진행하는 두 번째 이유는 비쥬얼 드디오 에는 굉장히
자동완성 기능이 잘 구현이 되어있습니다
따라서 이 책에서 소개하지 않는 내용도 여러분이 직접 공부를 하면서
조금씩 개념을 확장시킬 수 있기 때문에 비주얼 스튜디오 를 설치해서 b
졸지 디 오로 강의를 진행하도록 합니다
그럼 이제부터 오늘의 본격적인 책의 내용 진행되고 있는데요
텍스트 에디터를 사용해서 코드를 작성하는 방법과 이를 실행 긴
웹브라우저에서 실행하는 방법에 대해서 살펴보도록 하겠습니다
일단 비쥬얼 스튜디오를 책에서 다루기는 하는데
비주얼스튜디오 도 다르고 비주얼스튜디오 코드를 사용하는 방법도 다루도록
하겠습니다
일단 비쥬얼 스튜디오 를 켜 주시구요 왼쪽 위에 있는 파일 탭에서 새로
만들기
절대 프로젝트가 아니라 파일을 눌러 주시면 됩니다
파일을 눌러 주시면 지금 화면과 같이 3 파일 대화 상자 라는게 뜨게
되는데요
여기에서 html 페이지를 선택을 하고
열기를 눌러 주시면 되겠습니다 열기를 누르시면 지금 화면과 같이 간단한
html 파일이 나오게 되는데요
요기에 간단하게 헬로 월드 라는 예제를 만들어 보도록 하겠습니다
c 언어의 첫 번째 프로그래밍 책 으로 되어있는 책에서 헬로 월드 라는
예 제가 가장 처음 사용된 예제 이기 때문에 요게 전통이 돼서 다른
프로그래밍 언어를 공부할 때도 헬로 월드 요 의 변형으로 헬로
자바스크립트 라던지 를 출력하는 예제 가 가장 첫 예지로 되어 있는데요
저희도 그런 예제를 만들어 보도록 하겠습니다
일단 요 녀석을 태그 라고 부르게 되는데 요 헤드 태그 안에다가 가끔
괄호를 열어주시고 스크립트를
입력을 해서 만들어 주시면 되겠습니다
요 안에다가 자바스크립트 코드를 칠 수 있게 되는데요
요 안에다가 a 의 art 얼얼 트란은 녀석을 사용을 하고
따옴표 를 사용해서 내부의
헬로우 월드 라고 입력을 해주시면 되겠습니다
오늘 강의의 주제는 유얼 틀을 알아보는 게 아니라 요걸 어떻게 파일을
만들고 실행해 보는 야 기 때문에 일단 코드와 관련된 설명은 생략하도록
하겠다 고 요
요렇게 코드를 작성할 하셨으면 왼쪽 위의 파일에서
저장을 눌러주시면 됩니다 저장을 누르시면 은 요 위치를 지정하는 게
나오는데요
적당한 폴더를 선택을 하시고 적당한 이름을 지어 주시면 됩니다
간단하게 헬로우 월드 점
html 이라고 이름을 짓도록 하겠구요 저장을 눌러서 저장을 해주시면 요
파일이 헬로 old 점 htm 이르러는 이름으로 저장이 됩니다
저장이 되면 왼쪽 위의 파일에서 브라우저에서 보기를 선택을 해주시면
되는데요
지금 브라우저에서 보기 오른쪽에 마이크로 소프트 엣지 라고 써있는데 m
브라우저 선택 을 누르시면 은 이외의 브라우저를 선택하실 수 있습니다
크롬을 선택을 하고 기본값으로 설정을 눌러 주신 뒤에
요녀석은 닫아 주도록 하겠구요 다시 왼쪽 위의 파일에서 브라우저 보기를
누르시면 이제 크롬이 정 요 녀석을 클릭을 해주시면 크롬에서 헬로 월드
라는 글자가 출력되는 것을 확인할 수 있습니다
그래서 대충 3 파일에서 파일을 생성 을 하고 코드를 입력을 하고 저장을
둔 다음에 웹브라우저에서 보기를 클릭하면 된다
요 3가지 과정을 기억을 해 주시면 비주얼 스튜디오로 요 책의 내용을
진행하실 수 있습니다
그럼 이어서 비주얼스튜디오 코드로 진행을 하는 내용을 살펴보도록
하겠는데요
요 진행하는 방법은 비주얼스튜디오 코드 이외의 다른 텍스트 에디터에서 도
사용하실 수 있습니다
예를 들어서 서브라임 텍스트 라던지 아니면 아 통 이라던지 그런
에디터에서 사용하실 수 있는데요
처음 여시면 아무것도 안 나올 거예요 근데 요기 에서 왼쪽 위에 있는
파일에서 새 파일을 눌러서 새로운 파일을 생성해 주시고요
여기에 왼쪽 위 파일에서 저장 버튼을 눌러서 적당한 위치에
테스트 점 html 이라는 이름 등으로 저장을 해주시면 됩니다
저장을 해주시면 자동으로 html5 인식이 되는데요
여기에다가 html 코드에 기본 형식을 입력을 해주셔야 됩니다
참고적으로 요 기본 형식 같은 경우는 사실 html 과 관련된 내용이 지
요 자바스크립트와 관련된 내용은 아니거든요
그래서 요 책에서는 따로 설명 하지 않도록 하겠습니다
이 책의 사전 지식 자체가 html 기본 태그 를 알고 있는 사람이기
때문에 넘어가는 겁니다
어쨌거나 여기에서 음
적당하게 입력을 해 주시고
요 스크립트 태그 내부에
얼얼 등 헬로 월드 하고 작성을 해주신 다음에
저장을 해 주시고 방금 요녀석을 바탕화면에 저장을 했었는데요
바탕 화면에 들어가서
적당한 파일을 찾아 주신 다음에 요 파일을 웹브라우저 위에 드래그 앤
드롭 해서 놓아 주시게 되면 은
마찬가지로 실행되는 모습을 확인할 수 있습니다
그래서 일반적인 기본적인 텍스트 에디터를 사용하실 경우에는 요렇게 파일을
저장하고 드래그 앤 드롭 에서 실행 한다. 를 기억해 주시면 되겠습니다
그럼 코드를 간단하게 분석해 보도록 하겠는데요
마음은 안하고 넘어가면 굉장히 아쉬우니까 일단 느낌표 open t 타입
html 이라고 작성되어 있는 것은 지금부터 작성할 요 아래에 문서들이
html5 이상의 버전으로 작성되었다 는 것으로 임야를 하게 됩니다
그리고 html 문서 이기 때문에 가장 외곽에는
html 태그로 두르게 되구요 html 태그 안에는
헤드 태그와 바디 태그 를 넣게 됩니다
요 헤드 태그는 화면에 보이지 않는 요소를 출력할 때 사용하는 녀석이고
바지 태그는 화면에 보이는 요소를 출력할 때 사용하는 거죠
어쨌거나 헤드 태그 내부에는 메타태그 캐릭터셋 utf-8 이 있는데 이
문서가 utf-8 이라는 형식의 캐릭터 쎄씨 로 작성 될 것이라는 걸
의미를 하게 됩니다
utf-8 이 무엇인지는 이후에 강 의해서 다루도록 하겠습니다
어쨌거나 일단 필요가 없으니까 생략하도록 하겠다 고 용 타이틀은
요 웹브라우저 위에 있는 제목을 나타내게 됩니다
만약에 이 녀석을 가 나 다 라 말하고 지정을 하고 웹브라우저에서 보길
누르시기 게 되면 요 위에 가나다라 바라고 나타나는 것을 볼 수 있습니다
그리고 스크립트 라는 것 안에 자바스크립트 코드를 작성을 하게 되는데요
html5 이전에는 요 안에다가
타입을 입력을 해서 텍스트 자바스크립트 라는 것을 지정을 해줘야 됐습니다
하지만 html5 이상 부터는 그냥 스크립트 태그 라고 작성을 하면 요
안에 무조건 적으로 자바 스크립트 태그를 지정할 수 있습니다
어쨌거나 마지막으로 현재 html 태그를 보시게 되면 속성으로
랭 이라는 게 있고 이행 이라고 입력이 되어 있고 xml ns 어쩌구
저쩌구 라고 되어있는데요
요 뒤의 내용은 요 코드를 xhtml 형식으로 작성하게 따는 의미이고
유아 앞의 것은 u 문서에 랭 기지가 잉글리 c
그러니까 영어로 작성되어 있다는 뜻입니다 우리는 한국인 이니까 많은게
한국에서 웹페이지를 만든다면 코 라고 지정을 해 주시면 되겠는데요 현재는
2 다운 생략하도록 하겠습니다
xhtml 형식이 무엇인가는 이후에
살펴 보도록 하겠 구요 일단 요정도로 내용을 기억을 해 주시면 되겠습니다
어쨌건 오늘 강의에서 제일 중요한 건 파일 3 파일 만들기
파일에서 html 페이지를 만들고
저장을 평평하고 파일에서 브라우저에서 보기를 누르면 여기에 실행이 된다
라고 까지만 기억을 해 주시면 좋겠습니다
어쨌거나 오늘 강의는 여기까지 되겠구요
다음 강의 부터 본격적으로 자바스크립트 코드에 대해 나가보도록 하겠습니다
그럼 다음 강의에서 뵙겠습니다 감사합니다.