프론트엔드 (6) 썸네일형 리스트형 클린코드 - 03. 함수 클린코드 - 03. 함수 어떤 프로그램이든 가장 기본적인 단위가 함수이다. 우리는 어떤 함수를 읽었을때 프로그램 내부를 직관적으로 파악할 수 있을까? 작게 만들어라 블록과 들여쓰기 중첩 구조가 생길 만큼 함수가 커지면 안된다. (if else문 등 주의하여 쓰자) 블록 안에서 호출하는 함수 이름을 적절히 짓는다면 코드를 이해하기 쉽다. 한가지만 해라 예시: 1. 페이지가 테스트 페이지인지 판단 => 2. 설정 페이지와 해제 페이지를 넣는다 => 3. 페이지를 HTML로 렌더링한다. 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한가지 작업을 한다고 할 수 있다. 더이상 줄이기가 불가능 하며 if, else를 따로 뺀다고 해도 다른 표현일 뿐 추상화 수준이 바뀌지 않는다. 함수 당 추상화 수준은 하나로.. 클린코드 - 02. 의미 있는 이름 클린코드 - 02. 의미있는 이름 의도를 분명히 밝혀라 변수(혹은 함수나 클래스) 존재이유? 수행기능? 사용방법? 이 모든 것을 답하기 위해 주석이 필요하다면 의도를 분명히 드러내지 못했다는 뜻. 그릇된 정보를 피하라 그릇된 단서는 코드의 의미를 흐린다 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안된다 실제 컨테이너가 List가 아닐 경우 List로 명명하면 그릇된 정보를 제공하므로 이렇게 명명하지 않는다 실제 List여도 컨테이너 유형의 이름에 넣지 않는 것이 바람직하다 유사한 개념은 유사한 표기법을 사용한다 이름만 보고 정보를 추측하기 때문에 일관성이 떨어지는 표기법은 그릇된 정보다 연관성이 없는 것에 대해 비슷한 단어를 사용했을 경우 연관이 있다고 생각하는 오류를 범하기 때문에 .. 클린코드 - 01. 깨끗한 코드 클린코드 - 01. 깨끗한 코드 원초적 난제 기한에 맞추려면 나쁜코드를 양산할 수 밖에 없다고 느낄 것이다. 하지만 코드를 최대한 깨끗하게 유지하는 습관이 기한 맞추는 유일한 방법일지 모른다. 깨끗한 코드라는 예술? "깨끗한 코드가 무엇일까?" "어떻게 작성할까?" '깨끗한 코드'가 무엇인지 조차 모른다면 노력해봤자 소용없다. 하지만 이 말이 '깨끗한 코드'와 '나쁜 코드'를 구분할 줄 알아야만 '깨끗한 코드'를 작성할 수 있다는 의미는 아니다. ‘코드 감각’이 있다면 개선할 방안이 떠오를 것이다. 다만 '코드 감각'은 누군가는 타고날수도 있고 누군가는 경험을 통해 얻을 수도 있다. 깨끗한 코드란? 비야네 스트롭스트룹 "우아하고 효율적인 코드를 좋아한다." 우아하고 효율적인 코드를 좋아한다. 효율적인 코.. [아티클 프로젝트 027] ES6부터 ES2020까지 01. ES6 간단하게 알고가기 ES6 간단하게 알고가기 선언 ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다. let 변수 const 상수 (배열과 오브젝트의 값 변경은 가능하다.) immutable array 기존 배열을 복제하여 사용한다. 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.) const a = [1,2,3]; const b = [...a]; 메서드 화살표함수(Arrow function) 클래스 개념 도입 setPrototypeOf 프로토타입 객체 추가 모듈(module) 프록시(proxy) startsWith(), endWith() 앞 뒤로 문자열 일치 여부 판단 includes() 문자열 포함 여부 판단 for-of for-i.. [아티클 프로젝트 023] 2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 여전히 가장 인기있는 언어 1위를 차지 - JetBrains, StackOverflow 등장이후 2020년까지 3번의 큰 변화를 겪었다고 말한다. http://10.1.123.63:7080/users/sign_in 다양한 의견을 잘 정리해주셔서 새로운 시각을 많이 접할 수 있었다. TC39 기술위원회, Javascript Engine, Javascript의 종말, 모듈, ECMAScript 등.. ECMAScript2020-2021의 주요 스펙을 간단히 소개해주는데, 흥미로운것들이 많다. 다음 아티클들은 ECMAScript2020 명세를 확인하는 것으로 해야겠다. pawelgrzybek.com/whats-new-in.. [아티클 프로젝트 0010] 프론트에서 안전하게 로그인 처리하기 프론트에서 안전하게 로그인 처리하기 보안에 위협이 되는 문제 1. XSS (Cross Site Scriptiong) 공격자가 태그나 url등에 Javascript를 삽입해 실행되도록 공격한다. 악성데이터를 실행하거나 사이트의 전역 변수를 이용해 API 요청을 하여 사이트의 로직인 척 행동하여 악의적인 행동을 한다. 2. CSRF (Cross Site Request Forgery) 서버에서 클라이언트 도메인을 통제하고 있지 않으면 공격자가 다른 사이트에서 API 요청을 할 수 있다. 이때 공격자가 사용자만이 가능한 행위(수정, 삭제, 등록 등)들을 할 수 있다. (이러한 행위로인해 최악의 상황 -> 비밀번호, 송금 등에 접근) 원본 글 요약 JWT(JSON Web Token)로 유저 인증 Refresh T.. 이전 1 다음
