개발 관련 학습정리/Web Front-end(9)
-
CSR과 SSR
CSR(Client Side Rendering) 클라이언트 상에서 렌더링 하는 기법으로 처음 렌더링 후 추가 변경사항이 있으면 데이터만 받아와 리렌더링한다. 장점 : 첫 로딩시 html파일과 static파일만 받으면 그 이후로는 동적으로 렌더링 하기 때문에 요청이 적어진다. 서버 부담이 덜하다. 단점 : 처음에 모든 파일이 불러질때까지 기다려야 하므로 초기 로딩 속도가 느리다. 검색엔진 최적화 문제 (SEO) 가 생길 수 있다. SSR(Server Side Rendering) 변경사항이 일어날때 마다 서버에 요청을 하는 방식이며 완전하게 만들어진 html파일을 들고온다. 장점 : 초기 로딩 속도가 빠르기 때문에 사용자가 이용하기 편리하다 검색엔진 최적화 (SEO)가 가능하다. 단점 : 매번 서버에 요청을..
2020.11.28 -
react의 라이프사이클 메소드
컴포넌트 생성 1. constructor : 생성자 메소드로 컴포넌트가 만들어 질 때 실행된다. 여기서 state를 정할 수 있다 2. componentWillMount : 컴포넌트가 DOM 위에 만들어지기 전 실행되는 메소드 3. render : 렌더링 담당 메서드 컴포넌트 생성 완료 4. componentDidMount : 렌더링을 다 마친후 실행되는 메소드로 프레임워크 연동, AJAX처리 등을 주로 넣는다. Prop변화 5. componentWillReceiveProps : prop을 새로 받았을 때 실행되는 메소드 업데이트 처리 6. shouldComponentUpdate : prop 혹은 state가 변경 되었을 때, 리렌더링 여부를 정하는 메소드 7. componentWillUpdate : 컴..
2020.11.28 -
Javascript의 타입
javascript의 원시 타입 javascript는 6개의 원시타입으로 정의되어 있다. boolean : true/false를 나타내는 타입 string : 문자열을 나타내는 타입 number : 전체적인 숫자를 나타내는 타입 undefined : 정의되지 않은 것 null : 값이 비어있음 symbol : 충돌 위험이 없는 유일한 객체, pk를 만들기 위해 사용된다. javascript의 숫자 타입 다른 언어에서는 int, double등 숫자를 나타낼 수 있는 숫자 타입이 다양하지만, javascript는 number하나가 정수/실수 숫자의 모든 것을 표현한다. null과 undefined의 차이점 null은 변수를 선언하고 'null'이라는 값을 할당한 것이다. 즉 값이 없다는 것을 명시한것으로 타..
2020.11.27 -
REST API
개요 REST API는 URI로 접근가능하고 내용이 JSON,XML 등으로 표현된 자원에 대한 행위를 HTTP Method로 정의한다. RESTful하다라는 것은 REST API의 설계의도를 명확하게 지켜주는 것이며, 슬래시를 통해 계층 관계를 표현하거나 숫자로 id를 나타내거나 동사보단 명사 위주로 명시하는 등이 이에 포함된다. 조건 - url은 정보의 자원을 표현해야한다. - 자원에 대한 행위는 http method(GET, POST, PUT, DELETE 등)으로 표현 HTTP Method Post : 해당 url을 통해서 리소스를 요청한다. Get : 해당 리소스를 조회하고 해당 도큐먼트에 대한 정보를 가져온다. Put : 해당 리소스를 수정하는데 사용된다. Delete : 해당 리소스를 삭제한다.
2020.11.27 -
자바스크립트에서의 this는 무엇일까?
일반함수, 화살표함수에서의 this 자바스크립트의 this는 현재 실행 문맥을 뜻하며 일반함수(내부함수)와 화살표 함수인가에 따라 this가 가르키는 객체가 다르다. 내부함수의 경우 어디에서 선언되었든지 전역 객체를 가리키고, 일반함수도 window(전역)을 가리킨다. 반면에 화살표 함수의 this는 항상 상위스코프의 객체를 가리킨다. Apply, Call, Bind 3가지 모두 this를 바인딩하기 위한 방법이다. Apply - this를 바인딩하면서 함수를 호출하는 방법으로 두번째 인자가 배열이다. Call - this를 바인딩하면서 함수를 호출하지만 apply와 다르게 하나씩 넘긴다. Bind - 함수를 호출하지 않고 바인딩된 새 함수를 리턴한다.
2020.11.25 -
호이스팅(Hoisting)과 클로저(Closure)
호이스팅 변수를 선언하고 초기화 했을때 선언 부분이 최상단으로 끌어올려지는 현상으로 변수 및 함수 선언부가 스코프 내 제일 윗쪽으로 올라가게 된다. 함수 표현식/함수 선언식은 호이스팅이 적용되지만 let/const와 같은 변수는 호이스팅이 발생하지 않는다. 우선순위는 변수가 함수 선언보다 위로 끌어올려지며 코드의 가독성을 위하여 호이스팅을 최소화 하는 것이 좋다. 함수와 변수를 가급적 코드 상단부에 선언함으로 해결할 수 있다. 클로저 내부함수가 자신이 선언된 자리의 스코프를 기억하여 자신이 선언되었을때 그 스코프 환경에 접근할 수 있는 함수 내부함수로서 자신이 생성될때의 환경을 기억하는 함수이다. 쓰는 이유는 대표적으로 세가지이다. 1. 현재 상태를 기억하고 최신 상태로 유지하기 위하여 2. 전역 변수 ..
2020.11.25