코딩 스타일 (표기법)

강의를 듣거나 다른 사람이 작성한 코드를 보면서 코드를 작성할때 일부분 일정한 규칙이 존재하는것을 느꼈다.  찾아보니 우리가 상황에따라 옷이나 헤어스타일을 달리하듯이 언어마다 그리고 회사마다 코딩하는 스타일 규칙이 정해져 있었다. 대표적으로 많이 사용되는 코딩 스타일(표기법) 4가지를 알아 봤다. # camel case 첫단어는 소문자로 시작하고, 다른단어가 시작하면 대문자로 표기 ex) int humanAge; int cityName; # pascal case 첫단어는 대문자로 시작하고, 다른단어가 시작하면 대문자로 표기 ex) int CityName; int NameOfDog # kebab case 단어를 하이픈(-)으로 구분한다. ex) String overall-evaluation; boolean is-check; # snake case 단어를 밑줄로 구분(_) ex) int human_age; int city_index; # hungarian notation 데이터타입을 접두어로 명시해서 변수 및 함수의 이름을 정하는 규칙이다. ex) int(i) float(f) char(ch) sz(NULL) boolean(b) 카멜 표기법 -> 보통 변수나 함수명을 지을때 사용 파스칼 표기법 -> 보통 class 이름을 적을때 사용 상수의 경우 대문자와 언더바로만 구성한다. ex) const USER_NAME = person; (값이 고정인경우) const를 사용한다고 무조건 모든 상수를 대문자로 사용하지는 않는다. 값이 고정적인것만 가능

[CSS] CSS 선택자(selector) 와 선택자 우선순위

선택자(selector) 태그 즉 element(요소)에 css스타일을 적용할때 각각의 요소들마다 세분화하여 스타일을 지정할 수 있고 선택자를 잘 활용할 경우 재활용성과 중복의 제거가 일어나서 유지보수에 효과적이다. id 선택자 : id 선택자는 태그에 id=""로 속성을 줄 수 있으며 id선택자는 해당 html에서 단 한번만 선언될 수 있다. (여러번 사용이 가능하나 선택자 이름이 중복되서는 안된다.) id속성이 적용된 태그에 스타일을 적용하고자한다면 css파일에서 #으로 선언하여 해당 속성이 적용된 태그에 스타일을 적용할 수 있다. 사용방법 : #first {...} class 선택자 : class 선택자는 태그에 class=""로 속성을 지정해 줄 수 있으며 id 선택자와 다르게 많은 태그들에 사용할 수 있고 id 선택자보다 조금 더 포괄적인 부분 또는 많은 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용한다.  class속성을 사용한 태그에 스타일을 적용하고 싶으면 css파일에서 .(점)과 함께 속성명을 적고 스타일을 작성한다. 사용방법 : .second {...} 일반 선택자 : class 선택자 보다 더 포괄적인 태그들에 동시다발적으로 스타일을 지정해 줄 때 사용된다.  사용법은 다른 태그들과 다르게 태그명만 작성하고 중괄호 안에 스타일 속성을 작성하면 된다. 사용방법 : div {...} 전체 선택자 : 모든 태그를 가르키며 화면 전체의 모든 태그에 스타일을 적용할 수 있다. 사용방법 : * {...} 자식 선택자   : 자식 선택자는 깊이가 1인 자식 요소에만 스타일을 적용한다. < div > < p > 1 </ p > < p > 2 </ p > < span >< p > 3 </ p ></ span > </ div > 자식 선택자  사용방법 : div > p {...} ...

[JavaScript] while, for (반복문)

# while 반복문 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 변수 초기화 while (조건) {     실행코드;     증감 연산자; } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ let i = 0; while ( i < 10 ) {     실행코드     i++; } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ # for 반복문 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ for ( 변수 초기화 ; 조건 ; 증감 연산자) {          실행코드 } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ for ( let i =0 ; i <= 5 ; i++ ) {          실행코드; } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ while과 for 반복문의 차이 찾아본바로 현업에서는 횟수 무제한에 while문 사용 횟수 제한에 for문 사용 예를 들어 로그인 모듈을 만들 때 모듈을 두 가지 방법으로 만들 수 있다. 1. 다섯 번의 기회만 주는 모듈 2. 성공할 때까지 기회를 무제한으로 주는 모듈 while과 for 둘 다 무한루프로 사용할 수 있는데 while문의 경우 조건을 true로 주면 무한루프가 가능하며 for문의 경우 괄호안에 작성해야할 (변수초기화; 조건; 증감) 세부분을 작성하지 않고  (;;) 으로만 남겨둘 경우 무한루프로 사용이 가능하다.

[JavaScript] 논리연산자- &&(and), ||(or)

&& (and) - 조건이 하나라도 false이면 false &&연산자의 경우 조건 두개(피연산자) 중 먼저 앞에서 true나 false가 나오는 경우 결과가 정해지므로 뒤에 조건은 확인하지 않는다. ( true && true )  -> true 반환  ( true && false )  -> false 반환 ( false && true )  -> false 반환 ( false && false )  -> false 반환 if( a > 0 && b < 0 ){ ... } 앞 연산자 a > 0 이 거짓이라면 뒤 조건의 참/거짓 여부에 관계없이 거짓이므로 { }안의 연산을 하지 않는다. AND 연산자와 피연산자가 여러 개인 경우를 살펴보자. ex) result = value1 && value2 && value3; AND 연산자 && 는 아래와 같은 순서로 동작한다. 1. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다. 2. 각 피연산자는 불린형으로 변환된다. 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 3. 피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환된다. ex1)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ( 1 && 2 && null && 3 ); // null ex2)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ ( 1 && 2 && 3 ); // 마지막 값, 3 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ || (or) - 조건이 하나라도 true...

[JavaScript] 대입, 비교, 부정, 조건 연산자(삼항연산자)

이미지
# 부정연산자( NOT (!) ): true값은 false로 false값은 true로 반환해준다. ! true ==> false ! false ==> true ! 0 ==> true NOT을 두개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다. !! "this is string" ==> true !! null ==> false !! 1 ==> true 참고로 내장 함수 Boolean을 사용하면 !!을 사용한 것과 같은 결과를 도출할 수 있다. # 대입연산자: = 대입연산자(=) 는 변수에 값을 지정해주는 연산자이다. ex) a=1  b=1  a+b=2 이런식으로 각 변수에 값을 지정해주고 결과를 얻을수있게해준다. # 비교연산자 (동등연산자 == 와 일치연산자 ===) 위의 사진은 숫자 1과 문자열 1을 비교하는것이다. 위 사진에서 일치연산자 ===를 사용할 경우 데이터 타입과 값을 비교해주어 숫자 1과 문자열 1은 데이터 타입이 동일하지 않기에 false 값을 반환한다. 반면에 동등연산자 ==를 사용할 경우 데이터 타입은 비교하지않고 겉보기만 같으면 숫자 1과 문자열 1은 같기에 true값을 반환한다. ===는 '엄격하게 같다'라는 의미이다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것이다. 완벽한 코드를 작성하기위해서는 ==가아닌 ===를 사용해야지 버그없는 코드를 작성할 수 있다. 추가적으로 비교연산자는 String(문자열), Number(숫자), Boolean값 끼리는 비교가 가능하지만 배열과 같은 객체끼리의 비교는 불가능하다.  배열은 객체인데 객체끼리 비교시 같은 값을 가지고 있더라고 false를 반환하기 때문이다.  배열 뿐만아니라 모든 객체는 같은 값을 가지고있는 객체라도 비교시에 false값을 반환한다.  객체는 형태와 데이터 타입을 비교하지않고 값이 저장된 메모리 주소를 비교하기 때문이다.  하지만 이러한 객체도 비교...

[Coding Start] 코딩 공부 시작

2019년 8월 31일 코딩 시작 새로운 분야에대해 공부 하면서 배운것들을 블로그에 정리하고 되돌아보는 용도로 작성하려고 한다. 무엇부터 시작해야되는지, 어떻게 해야되는지 모르겠지만 차근차근 하나씩 배워보려고 한다.