공부하는개미

변수 명명 시 두 가지 제약 사항

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.

2. 첫 글자는 숫자가 될 수 없습니다.

변수, 함수명은 카멜 케이스를 사용한다.

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)가 흔히 사용됩니다.

카멜 표기법은 변수 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성합니다.

예시)

let myName = "smith";
let myAge = 40;

* 프로그래밍 변수명 표기법(링크로 이동)

특수 기호는 일반 글자처럼 특별한 의미를 지니진 않음

let $ = 1; // '$'라는 이름의 변수를 선언합니다.
let _ = 2; // '_'라는 이름의 변수를 선언합니다.

alert($ + _); // 3

잘못된 변수명의 예시

let 1a; // 변수명은 숫자로 시작해선 안 됩니다.

let my-name; // 하이픈 '-'은 변수명에 올 수 없습니다

# 대·소문자 구별

apple와 AppLE은 서로 다른 변수입니다.

변수명은 영어로 표기하는 것을 권장함

let имя = '...';
let 我 = '...';
let 나이 = 40;

위 코드에는 기술적인 에러가 없습니다. 변수명도 유효합니다.

하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만들길 권유 드립니다.

다른 나라 사람이 스크립트를 볼 경우 등을 대비해 장기적인 안목을 가지고 코드를 작성합시다.

예약어(reserved name)는 변수명으로 사용할 수 없음

let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문입니다.

예약어 예시: let, class, return, function

아래 코드는 문법 에러를 발생시킵니다.

참고자료

변수와 상수(모던 JavaScript 튜토리얼)

자바스크립트 변수 명명 규칙

자바스크립트(JavaScript)란?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.

* 자바스크립트의 역사(위키백과)

2021년 02월 07일을 기준의 프로그래밍 언어 순위입니다.

자바스크립트는 10위 안에 들 정도로 높은 순위를 보이고 있습니다.

그 이유중 하나는 자바스크립트가 웹에 쓰이는 하나뿐인 프로그래밍 언어이기 때문입니다.

프론트엔드쪽을 희망한다면 반강제적으로 배워야 하는 언어입니다.

반대로 백엔드에서 사용 가능한 언어들은 다양하게 있습니다.

ex) Java, Python, 하스칼, Ruby 등등

자바스크립트의 장·단점

장점

• 하나의 프로그래밍 언어만 배우면 된다.(프레임워크, 라이브러리 X)
• 언어가 하나여서 그만큼 빠르게 발전 한다.
• 웹사이트에 참고자료들이 엄청나게 많다.
• HTML/CSS와 완전히 통합할 수 있음
• 간단한 일은 간단하게 처리할 수 있게 해줌

* 이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능합니다.

단점

• 프로그래밍을 하는데 유연함이 적어진다.(하나의 언어만 사용)
• 자바스크립트에 갇힐 수 있다.

자바스크립트 엔진

자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.

자바스크립트 엔진 자세한 설명[링크로 이동]

자바스크립트 엔진의 작동 원리

엔진이 어떻게 동작하는지 이해하려면 상당한 시간을 쏟아부어야 합니다. 하지만 기본 원리는 다음과 같이 간단합니다.

1. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.

2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일).

3. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱).

엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라집니다.

브라우저에서 할 수 있는 일

• 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)
• 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기
• 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
• 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기
• 클라이언트 측에 데이터 저장하기(로컬 스토리지)

브라우저에서 할 수 없는 일

보안을 위해 자바스크립트 기능에 제약을 걸어둠.

* 악성 웹페이지가 개인 정보에 접근 혹은 사용자의 데이터 손상을 막기 위해.

• 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있습니다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문입니다.

  모던 브라우저를 사용하면 파일을 다룰 순 있습니다. 하지만 접근은 제한되어 있습니다. 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’ <input> 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용합니다.

  카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 합니다. 자바스크립트가 활성화된 페이지라도 사용자 몰래 웹 카메라를 작동 시켜 수집한 정보를 국가안보국(NSA)과 같은 곳에 몰래 전송할 수 없습니다.

• 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없습니다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됩니다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없습니다.

  이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부릅니다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 합니다. 자세한 사항은 추후 학습하도록 하겠습니다.

  다시 한번 강조하지만, 이런 제약사항은 사용자의 보안을 위해 만들어졌습니다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함입니다.

• 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있습니다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능합니다. 가능하다 할지라도 원격 서버에서 명확히 승인을 해줘야 합니다(HTTP 헤더 등을 이용). 이 역시 보안을 위해 만들어진 제약사항입니다.

자바스크립트가 할 수 없는 일은 반드시 숙지해야 한다고 생각합니다.

구현하려는 서비스가 자바스크립트를 사용해도 문제 없는지 대략 알 수 있기 때문입니다.

자바스크립트를 도와주는 언어들[링크로 이동]

(타입스크립트, 다트, 커피스크립트, 플로우)

위의 다른 언어들을 배우기 위해서 우선 자바스크립트(JavaScript)가 선행 되는걸 추천드립니다.

자바스크립트를 숙달하지 못한 상태에서 타입스크립트와 같은 언어를 배우신 분을 봤습니다.

결국에 고생을 하시다가 자바스크립트를 배우셨습니다.

참고자료 

초보자를 위한 바닐라 자바스크립트(노마드코더)

모던 JavaScript 튜토리얼

기초적인 자바스크립트인 퓨어 혹은 바닐라 자바스크립트는 웹 개발자에게 필요한 능력입니다.

특히 프론트엔드 쪽 취업을 희망하신다면 꼭 알아야 하는 것입니다.

그래서 많은 분들이 자바스크립트 관련 책을 구매하십니다.

제가 소개해드릴 잘 정리되어 있는 모던 자바스크립트(JavaScript) 튜토리얼 이라는 사이트입니다.

ko.javascript.info/

이 사이트의 장점은 

• 목차와 순서가 잘 정리되어 있습니다.
• 튜토리얼 검색으로 원하는 내용 검색 기능.
• 단순히 이론(텍스트)가 아닌 예시가 전부 담겨있습니다.
• 예시를 보고 실습하면서 배울 수 있습니다.

모던 JavaScript 튜토리얼 사이트는 2021년에도 꾸준히 업데이트가 되어가고 있습니다.

개발자 분들은 아직 사용하고 있는 내용을 배우는게 중요하다고 생각합니다.

열심히 배웠는데 실직적으로는 필요가 없다고 하면 투자한 시간이 아깝기 때문입니다.

위 사이트가 아니여도 영상 혹은 텍스트로 작성된 강의가 많이 있습니다.

꿀같은 사이트를 찾으면 저도 공부를 하고 블로그에 정보를 올릴 예정입니다.

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.

주로 웹 브라우저 내에서 사용되지만 요즘은 다른 용도로도 많이 사용하고 있다.

* 자바(Java)와 자바스크립트(JavaScript)는 전혀 다른 언어이다.

자바스크립트에 대해 자세히 알아보기(클릭 시 링크로 이동)

자바스크립트를 공부하는 방법

우선 자바스크립트의 라이브러리인 jQuery, React, Vue와 같은 것들을 먼저 배우지 않는다.

순수 자바스크립트를 먼저 배워보는 방식으로 접근을 한다.

자바스크립트를 알아야 나머지 라이브러리를 배우는데 수월하다.

그리고 취업이 목표라면 그 회사에서 사용하는 라이브러리를 공부 하는게 효율적이다.

현업 개발자들이 만든 무료 강의 영상들

유튜브 채널 드림코딩by엘리(클릭시 링크로 이동)

여러 개념들을 영상속 이미지를 통해 정말 쉽게 이해하게 만들은게 장점입니다.

강의를 보면서 재미있게 공부 할 수 있게 도와줍니다.

유튜브 채널 ZeroChoTV(클릭시 링크로 이동)

정말 다양한 예시를 강의에서 보여줍니다.

강의를 하시는 개발자분이 자바스크립트 문법 책을 썼던 분입니다.

그래서 강의 커리큘럼도 단계별로 잘 구성되어 있습니다.

시간이 가용하시다면 두 채널 강의를 전부다 보시는걸 추천드립니다.

자바스크립트에 대한 정의는 드림코딩by엘리 님의 채널 첫번째 자바스크립트 강의 영상에 잘 나와있습니다.

• Nuget 패키지로 Selenium 직접 다운로드 및 적용

• C# Winform을 활용한 간단한 로그인폼

• 셀레니움을 활용 자동 로그인 시스템

• 버튼클릭 소스 구현

# Nuget 패키지로 셀레니움 라이브러리 다운로드 및 적용 방법

셀레니움을 C#에서 사용하기 위한 준비단계가 위 사이트에 자세히 나와있습니다.

# 윈폼 디자인

사용된 도구 상자

Lable: 3개

CheckBox: 1개

Button: 1개

# 네임스페이스 영역

using System;
using System.Threading;
using System.Windows.Forms;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

크롬 브라우저를 사용해서 using OpenQA.Selenium.Chrome; 입력했습니다.

# 버튼, 체크박스 이벤트 영역

 public Form1()
        {
            InitializeComponent();
        }

        string naverUrl = 
        "https://nid.naver.com/nidlogin.login?url=https%3A%2F%2Fsell.smartstore.naver.com
        %2F%23%2FnaverLoginCallback%3Furl%3Dhttps%253A%252F%252Fsell.smartstore.naver.com%252F%2523";
        
        private void btnLogin_Click(object sender, EventArgs e)
        {
            // 입력된 아이디, 패스워드 strig형식의 id와 pass에 각각 대입
            string id = textID.Text;
            string pass = textPass.Text;

            IWebDriver driver = new ChromeDriver();

            // 네이버 스마트스토어 로그인 페이지 이동
            driver.Navigate().GoToUrl(naverUrl);

            // 아이디 영역 선택
            var naverId = driver.FindElement(By.XPath("//*[@id='id']"));
            Thread.Sleep(100);

            // 아이디 입력
            naverId.SendKeys(id);
            Thread.Sleep(100);
            

            // 패스워드 영역 선택
            var naverPass = driver.FindElement(By.XPath("//*[@id='pw']"));
            Thread.Sleep(100);

            // 패스워드 입력
            naverPass.SendKeys(pass);
            Thread.Sleep(100);

            // 전부 입력 후 로그인 누르기
            driver.FindElement(By.XPath("//*[@id='log.login']")).Click();

        }

        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
        	// 체크박스를 체크하면 비밀번호가 보입니다(체크 해제 시 '*'로 표시).
            if (checkBox1.Checked == true)
            {
                textPass.PasswordChar = default(char);
            }
            else
            {
                textPass.PasswordChar = '*';
            }
        }

• 네이버 스마트스토어  URL이 너무 길어서 필드영역 naverUrl에 대입했습니다.

• 체크박스 이벤트를 통한 비밀번호 '*'로 보이기 해제(체크 시 해제)

• Thread.Sleep()을 이용해 입력 딜레이 추가

참고 사이트(아래 클릭 시 링크로 이동)

- luckygg.tistory.com/224

- luckygg.tistory.com/225?category=884641

- nwairr.tistory.com/entry/