본문 바로가기

전체 글

 (64)
TIL no.57 - React 성능 최적화를 고려한 컴포넌트 만들기 React 의 성능을 생각하며 코드를 짜기 이전에 알아야 할 리액트의 특성에 대해 간단하게 정리했습니다. React , 이 친구는 React 는 생명주기 즉, Lifecycle 을 가지고 있습니다. 컴포넌트가 실행되거나 업데이트될 때, 또는 제거될 때 사이클에 따라서 특정 이벤트가 발생합니다. 컴포넌트가 처음 실행될 때 mount 되었다고 말합니다. 그 이후에 props 또는 state 값이 변경되면 update 가 발생합니다. 컴포넌트가 dom 상에서 제거될 때 실행할 함수를 mount 해제 부분에 작성합니다. 리액트의 클래스형 컴포넌트를 사용했을 때는, 이러한 상황별로 componentWillMount componentDidMount shouldComponentUpdate componentWillUp..
TIL no.55 - TypeScript 를 사용하는 이유 이 포스트로 간단하게라도 당장 TypeScript의 타입을 적용해서 사용할 수 있게 되었으면 하는 의도로 포스팅하였습니다. TypeScript 란 ? JavaScript 의 모든 기능을 포함하며 JavaScript 에서 변수나 매개변수, 함수, 함수에서의 return 값들의 타입을 명확하게 지정해주어야 하는 언어이자 라이브러리를 말합니다. 자바스크립트에서 타입을 명시해줘야 하는 좀 더 엄격해진 언어라고도 하며 자바스크립트의 컴파일러 이기도 합니다. 타입스크립트는 굉장히 객체지향적인 언어입니다. 컴파일 타임 오류를 잡을 수 있으며 결과에서 발생하는 에러들을 쉽게 발견할 수 있도록 효율적으로 디버깅 가능하게 해주는 언어입니다. 타입스크립트는 아주아주 유연한 언어인 자바스크립트와는 다르게 에러를 많이 보여줍니..
TIL no.54 - array.reduce() : javascript array method 지금까지 map, forEach 를 반복문을 사용할 때 유용하게 사용했습니다. reduce는 위 array 메서드가 할 수 있는 부분을 다룰 수 있으며 더 복잡한 구조도 다룰 수 있는 아주 유용한 메서드입니다. 또한 배열로만 반환하는 것이 아니라 원하는 데이터 구조로 반환하는 것이 가능합니다. 👍🏻 그렇다고 map과 forEach 대신 무조건적으로 사용해서는 안됩니다. 코드의 가독성을 위해 map과 forEach로도 가능한 간결한 코드에서는 적절한 메서드를 사용하는 것이 좋습니다. array.reduce() arr.reduce(callback[, initialValue]) reduce는 첫번째 인자로 콜백함수를 받습니다. 그래서 반복문을 반복하는 숫자만큼 콜백함수가 실행됩니다. initialValue 로..
TIL no.53 - arrow function 화살표 함수 - arrow function은 ES6 이후로 등장한 새로운 개념입니다. arrow function 은 단순하고 간단한 문법으로 함수를 작성하기 위해 사용되는 개념입니다. 작성이 편리하고 보기에도 간결하기 때문에 여기저기 흔하게 사용되는 것을 볼 수 있었을 것입니다. 일반 함수의 모양과는 다르게 //함수 선언식 function hiThere() { console.log('Hi there ~'); } //함수 표현식 const function = function () { console.log('Hi there ~'); } arrow function은 이렇게 선언합니다. () => console.log('hi there ~') 함수 선언식에는 이름이 있는 반면에 arrow function은 익명함수로 표현합..
TIL no.51 - 객체 지향 프로그래밍과 함수형 프로그래밍 객체 지향 프로그래밍보다 더 발전 되어 나온 것이 함수형 프로그래밍이라고 생각할 수 있으나 이는 맞지 않습니다. 객체 지향과 함수형 프로그래밍은 서로 다른 패러다임이라고 생각하시면 될 것 같습니다. 이 두가지의 차이점을 알아보고 이해하며 공부해보겠습니다. 객체 지향 프로그래밍 (Object Oriented Programming) :객체 중심적인 프로그래밍으로 데이터를 추상화시켜 객체를 만들고 객체 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 캡슐화의 특징을 가진 코드들로 코드의 재사용성이 높아지고 이러한 객체로 작성된 코드는 정보 은닉성의 특징을 띄어 유지 보수가 쉬울 수 있습니다. 하지만 처리 속도가 상대적으로 느리고 객체가 많으면 용량이 커질 수 있다는 단점이 있습니다. - 정보 은..
TIL no. 50 - 호이스팅 (hoisting) 이 무엇인가요? 호이스팅이란, javascript 함수 내의 모든 변수 선언들을 해당 함수 유효범위의 최상단으로 끌어올리는 것을 의미합니다. 정의만 들었을 때는 쉽게 이해가 되지 않을 수 있기 때문에 코드를 보면서 이해해 보도록 하겠습니다. function ImHungry() { console.log(pizza); var pizza = 'pizza is good'; } 위의 간단한 코드를 보겠습니다. ImHungry 라는 함수 안에서 console.log에 아직 선언되지 않은 pizza를 출력했습니다. 출력한 뒤에 pizza가 선언되었기 때문에 위의 코드에서 에러가 발생해야 할 것 같지만 자바스크립트에서는 undefined를 출력하고 넘어갑니다. 이 이유는 두번째 코드인 var pizza = 'pizza is good'..
TIL no.49 - 브라우저 데이터 저장 방식 - Local Storage, Session Storage, Cookie 와 IndexedDB 스토리지의 사용 우리는 많은 이유 때문에 브라우저에 데이터를 저장해야 할 경우가 발생합니다. 애플리케이션의 정적 리소스인 html, css, javascript, 이미리 뿐만 아니라 사용자의 정보를 담은 데이터도 저장할 필요가 있습니다. 데이터 저장 방식에는 여러 가지가 있습니다. 각각의 차이점을 알아보고 어떠한 상황에 어떤 것을 사용하면 좋은지 어떤 것을 사용하면 안되는지 함께 알아봅시다. 일단 우리가 많이 들어본 저장소에 대해 알아보겠습니다. 로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소입니다. 동기식 API를 갖춘 저장소로 간단한 키와 값을 저장하는 데 사용합니다. - 로컬 스토리지 (Local Storage) 로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며 브라우저를 종료해..
TIL no.48 - 웹의 간단한 동작방식 user가 브라우저를 사용하고자할 때 브라우저가 서버에 요청하고 서버는 그에 맞는 응답을 해줍니다. Hosting (호스팅) 호스팅은 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 웹 호스팅 서비스입니다. 브라우저가 요청한 것을 바로 응답해 인터넷에 띄운다는 것은 홈페이지의 구성파일들이 (html, css js) 인터넷이 항상 연결되고 절대 꺼지지 않는 호스트 컴퓨터 (웹 서버) 에 저장되어 있다가 사용자의 요청이 오면 언제든 응답하는 것입니다. 서비스의 예로 AWS es2/S3, cafe24 호스팅센터 등이 있습니다. 우리는 서버에 해당 브라우저를 요청할 때에 어디서 어떤것을 요청한 지를 어떻게 구분하냐면 ! 바로 IP주소로 구분합니다. IP 주소는 Internet Protocol을..

티스토리툴바