본문 바로가기

Front-End

 (30)
이펙티브 타입스크립트 5장 - any 다루기 이번 포스팅에서는 typescript가 타입 시스템을 정적이면서 동적으로 쓸 수 있게 해주는 any 타입에 대해 알아볼 것이다. any의 장점은 살리면서 단점을 줄이는 방법을 살펴보자. 아이템 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 function f1() { const x : any = expressReturningFoo(); processBar(x); return x } // 이게 낫다 function f2() { const x = expressReturningFoo(); processBar(x as any); return x } 아래처럼 짜야되는 이유는 x 타입을 any라고 명시해주면, f1()의 리턴값들도 타입체크가 안되어버린다. 그렇게 되면, 프로젝트 전역으로 퍼져버리기 때문에..
이펙티브 타입스크립트 - 1장. 타입스크팁트 알아보기 아이템 1 . 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 자바스크립트의 상위집합 타입스크립트는 자바스크립트에서 보장해주지 못한 런타임 에러를 타입 체커를 통해 컴파일 시점에 발견할 수 있게 해준다. 아이템 2. 타입스크립트 설정 이해하기 아래 코드는 타입 체크를 오류 없이 통과를 할까?? function add(a, b) { return a+b; } add(10,null); 정답은 없다. 타입스크립트 설정 파일에 따라 다르기 떄문이다. // tsconfig.json 파일 { "compilerOptions:" : { "noImplicityAny" : true } } noImplicityAny : 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어 즉, 위의 예제는 타입을 지정하지 않았기 때..
Next - 이미지 최적화 ( Image Component and Image Optimization ) 사이트 성능 측정을 하였더니, 로딩 속도에 문제가 많아 이미지 최적화 작업을 진행하게 되었습니다. 아래 사진은 제가 개발한 사이트의 속도입니다. 그러던 중 Next 에서 제공해주는 Image 태그를 알게 되었고, 이를 통해 개선을 해보았습니다.공식 문서 : https://nextjs.org/docs/basic-features/image-optimization 를 참고하여 진행하였습니다. next/image 란? built-in 성능을 최적화 하기 위해 를 확장한 next.js image 컴포넌트입니다. 이 컴포넌트는 Core Web Vitals 에서 좋은 점수를 얻게 도와줍니다. 이 점수는 구글 SEO에 중요한 역할을 합니다. ( 링크 ) Improved Performance : modern image ..
가로세로 비율 유지하는 반응형 박스 반응형 웹디자인에서는 .wrap { max-width: 100%; width: 100%; } 를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 컨텐츠를 가지고 있는 높이를 따르게 된다. 글자라면 높이가 유동적으로 변해도 상관없지만 이미지나 동영상인 경우 좌우 폭에 따라 높이 비율이 유지되어야 한다. 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이 때 padding, margin을 이용해서 퍼센트값을 지정할 수 있다. #wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bott..
Clean Code Javascript 함수함수 인자는 2개 이하가 이상적이다안 좋은 예 : function createMenu(title, body, buttonText, cancellable) { // ... } 좋은 예 :function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true }); 인자가 3개 이상이라면 이미 그 함수는 너무 많은 역할을 하고 있는 것이다. 만약, 많은 인자를 사용해야 하는 경우라면 객체를 이용하자. ES6의 비구조화(destructuring) 구문을 사용하자!
ES6 문법 개요 ES6 문법 1. let과 constES6부터 나온 새로운 변수 선언 키워드이다. let과 const는 block scope를 가진다. const는 변경되지 않는 상수를 표현할 때 사용한다.function foo() { if (true) { let a = 'bar'; } console.log(a); } foo(); // Uncaught ReferenceError: a is not defined ES6 문법 2. Arrow function const a = () => { console.log("arrow function"); } a();const print = text => { console.log(text); } // 파라미터가 1개일땐 괄호 생략 가능 const sum = (a, b) => (a + b..
Functions 함수 선언 - 파라미터로 non-primitive value가 넘어오면 원본도 바뀐다. function myFunc(theObject) { theObject.make = 'Toyota'; } var mycar = {make: 'Honda', model: 'Accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "Honda" myFunc(mycar); y = mycar.make; // y gets the value "Toyota" // (the make property was changed by the function)bind, apply, call 이란? Function level scope var로 선언된 변수나, 함수 선언
HTTP 스크립팅 개요 HTTP(HyperText Transfer Protocol)는 웹브라우저가 서버로부터 문서를 전송받거나 폼의 내용을 보내는 방법, 그리고 해당 요청에 대해 서버가 어떻게 응답해야 되는지 명세한다. 일반적으로 HTTP는 스크립트의 제어를 받지 않는 대신 새로운 URL이 입력되거나 사용자가 링크를 클릭했을 때 발생한다. 그러나 HTTP는 자바스크립트 코드를 통해서도 작성할 수 있다 AJAX는 HTTP를 조작하는 데 특화된 웹 어플리케이션 설계 방식을 가르키는 용어다. 이것은 핵심적인 특징은 페이지를 로딩하지 않고 웹 서버와 데이터를 통신할 수 있는 것이다.
클라이언트 UI와 서버 데이터 제대로 연동하고 싶다. 상황 Server DB table에 있는 값들을 Client 화면에 실시간으로 보여주고 싶다. ( 2-way binding ) 이걸 구현하려면 어떻게 해야될까??? 만약에 Client에서 요청한 할 때 값을 받아온다면...1) DB를 조회하는 Service 만들기2) Client에서 해당 Service 요청3) Service response가 왔을 때 UI랑 data랑 바인딩 이런 순으로 구현하면 될 것이다. 하지만, 요청을 미친듯이 한다면? Connection하는데 드는 비용을 계속 감수해야 한다. 그렇다면 어떻게 해결해야 할까? HTML5 프로토콜에 추가된 WebSocket을 이용하면 된다. WebSocket은 브라우저와 서버 사이의 양방향 연결채널을 구성하는 HTML5 프로토콜이다. WebSocke..
Web Worker(웹 워커) - 멀티 스레드 쓰고 싶어! 1. 공부하게 된 계기 클라이언트 앱을 개발하는 도중, 서버 쪽에 동작이 오래 걸리는 서비스를 호출하고 싶다. 만약 같은 스레드에서 요청한다면 브라우저는 멈추게 되고 사용자는 기다려야 한다. ( 예를 들어, 서버 데이터를 가져오는 네트워크 작업과 같은 경우 ) '이럴 때 백그라운드 스레드 생성을 어떻게 할 수 있을까?' 라는 고민을 하다 웹어커를 알게 되었다.

티스토리툴바