본문 바로가기

frontend

(11)
클린코드 - 03. 함수 클린코드 - 03. 함수 어떤 프로그램이든 가장 기본적인 단위가 함수이다. 우리는 어떤 함수를 읽었을때 프로그램 내부를 직관적으로 파악할 수 있을까? 작게 만들어라 블록과 들여쓰기 중첩 구조가 생길 만큼 함수가 커지면 안된다. (if else문 등 주의하여 쓰자) 블록 안에서 호출하는 함수 이름을 적절히 짓는다면 코드를 이해하기 쉽다. 한가지만 해라 예시: 1. 페이지가 테스트 페이지인지 판단 => 2. 설정 페이지와 해제 페이지를 넣는다 => 3. 페이지를 HTML로 렌더링한다. 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한가지 작업을 한다고 할 수 있다. 더이상 줄이기가 불가능 하며 if, else를 따로 뺀다고 해도 다른 표현일 뿐 추상화 수준이 바뀌지 않는다. 함수 당 추상화 수준은 하나로..
클린코드 - 02. 의미 있는 이름 클린코드 - 02. 의미있는 이름 의도를 분명히 밝혀라 변수(혹은 함수나 클래스) 존재이유? 수행기능? 사용방법? 이 모든 것을 답하기 위해 주석이 필요하다면 의도를 분명히 드러내지 못했다는 뜻. 그릇된 정보를 피하라 그릇된 단서는 코드의 의미를 흐린다 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안된다 실제 컨테이너가 List가 아닐 경우 List로 명명하면 그릇된 정보를 제공하므로 이렇게 명명하지 않는다 실제 List여도 컨테이너 유형의 이름에 넣지 않는 것이 바람직하다 유사한 개념은 유사한 표기법을 사용한다 이름만 보고 정보를 추측하기 때문에 일관성이 떨어지는 표기법은 그릇된 정보다 연관성이 없는 것에 대해 비슷한 단어를 사용했을 경우 연관이 있다고 생각하는 오류를 범하기 때문에 ..
클린코드 - 01. 깨끗한 코드 클린코드 - 01. 깨끗한 코드 원초적 난제 기한에 맞추려면 나쁜코드를 양산할 수 밖에 없다고 느낄 것이다. 하지만 코드를 최대한 깨끗하게 유지하는 습관이 기한 맞추는 유일한 방법일지 모른다. 깨끗한 코드라는 예술? "깨끗한 코드가 무엇일까?" "어떻게 작성할까?" '깨끗한 코드'가 무엇인지 조차 모른다면 노력해봤자 소용없다. 하지만 이 말이 '깨끗한 코드'와 '나쁜 코드'를 구분할 줄 알아야만 '깨끗한 코드'를 작성할 수 있다는 의미는 아니다. ‘코드 감각’이 있다면 개선할 방안이 떠오를 것이다. 다만 '코드 감각'은 누군가는 타고날수도 있고 누군가는 경험을 통해 얻을 수도 있다. 깨끗한 코드란? 비야네 스트롭스트룹 "우아하고 효율적인 코드를 좋아한다." 우아하고 효율적인 코드를 좋아한다. 효율적인 코..
[아티클 프로젝트 040] 취준생이 반드시 알아야 할 프론트엔드 지식들-프론트엔드 전반 "프론트엔드 전반" 포스팅을보고 공부하면서 요약해보자! CSR(Client Side Rendering)과 SSR(Server Side Rendering) SPA (Single Page Application) 하나의 HTML 파일을 기반 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식 MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식 전통적인 방식 SPA - CSR MPA - SSR CSR SSR 브라우저의 렌더링 과정 원리 렌더링엔진이 HTML, CSS, Javasript 렌더링 시에 CRP(Critical Rendering PAth) 프로세스로 진행 과정 HTML 파싱, DOM(..
[아티클 프로젝트 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..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기) 더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..
vue.js 기초- 인스타그램 만들어보기 07_slot (코딩애플 세미나 후기) 에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..