이전 포스팅에서 Typescript 기반의 React 개발 환경 구성에 대해 포스팅을 하겠다고 해서, 이번 포스팅에서 다뤄보려고 한다. 프로젝트 생성 프로젝트 생성 $ mkdir react-ts 프로젝트 구조 . ├── .babelrc ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── index.html ├── package.json ├── src │ ├── components │ │ └── Header.tsx │ ├── index.css │ └── index.tsx … 더 읽기

그동안 미루고 미뤄왔던 타입스크립트에 대해서 공부하고 사용을 해보려고 한다. 이번에는 타입스크립트가 무엇인지 그리고 개발환경은 어떻게 구성하는지에 대해 정리하려고 한다. (Do it, 타입스크립트 프로그래밍이라는 책을 참고) 타입스크립트란 무엇인가? 🍌 자바스크립트는 현재 세 가지 종류가 있다. 이 중 공부하고자 하는 TypeScript는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표되었다. 앵귤러 버전 2에서 타입스크립트를 채택한 이후로 널리 … 더 읽기

RegExp(정규표현식)이란? RegExp 만드는 방법 1. ‘/’ 이용(정규식 리터럴을 사용하는 방법) var re = /ab+c/; 2. RegExp 생성자 이용 var re = new RegExp(‘ab+c’); 정규식 패턴 작성 정규식 패턴 작성하는 방법에는 두 가지가 있다고 한다. 그 중 하나는 단순한 패턴으로 작성하는 방법인데, 예를 들어서 ‘/abc/’라는 패턴은 단순히 abc가 들어가 있는 문자열을 찾는 것이다. 하지만, 우리가 RegExp를 사용하는 … 더 읽기

Hoisting ES6 문법이 표준화가 되면서 크게 신경쓰지 않아도 되는 부분이 되었지만, JavaScript 라는 언어의 특성을 가장 잘 보여주는 특성 중 하나이기에 정리했습니다. 정의 hoist라는 단어의 사전적 정의는 끌어올리기 라는 뜻이다. 자바스크립트에서 끌어올려지는 것은 변수이다. varkeyword 로 선언된 모든 변수 선언은 호이스트된다. 호이스트란 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 즉, 변수가 함수 내에서 정의되었을 경우, … 더 읽기

들어가며 사실 전에 클로저에 대해 포스팅을 한 적이 있었다.(아주 예전에..🤔) 지금 와서 그 포스팅을 보는데 너무 부끄러웠다. 과연 클로저를 반의 반이라도 이해하고 쓴 것일까? 그래서 다시 정리한다. 클로저의 개념 우선 아래 코드를 보자. function outerFunc() { var x = 10; var innerFunc = function() { console.log(x); }; return innerFunc; } var inner = outerFunc(); inner(); … 더 읽기

포스팅 계기 🙋 JSON과 XML의 차이에 대해 설명하라. 예전 회사의 면접 때, Pre Test 문제 중 하나였다. 사실 그 때 뭐라고 적었고 면접 때도 그걸 설명하는데 뭐라고 말했는지도 기억난다. (조금 부끄러워진다.. ☺️ 어떻게 합격했지❓ 🤔) 그래서 이번에 자세하게는 못하더라도 누구에게 정확하게 설명할 수 있는 정도는 정리하려고 한다. 잠깐 그 때 대답했던 내용을 되짚어보자.. 🌝 JSON과 XML의 차이가 … 더 읽기

0. 들어가기 전 🌝 추석 연휴가 끝나고 쓰는 포스팅! 정신없이 코드를 작성하고 나서 💻 나중에 보면 굉장히 읽기 어려운 코드가 되어 있다. 심지어 요즘은 IDE가 좋아져서 많이 괜찮아졌지만, 실수로 빠뜨린 세미콜론, 잘못 입력한 키워드 등 말썽인 부분이 많다.(특히, 프론트엔드 개발은 더더욱..) 그래서 이번 포스팅에서는 개발할 때 신경써야 할 이런 부분들을 최소화하고 자동화할 수 있는 방법에 대해서 … 더 읽기

AJAX AJAX는 Javascript Library 중 하나이며, Asynchronous Javascript And Xml의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침하지 않고, 필요한 데이터만 비동기적으로 가져오는 방식이다. 이 경우 Json 이나 XML 형태로 데이터를 주고 받는다. 보통은 JQuery의 AJAX를 이용해서 GET, POST 등의 요청을 하는 식으로 많이 사용한다. CORS CORS는 Cross Origin Resource Sharing의 약자로, 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘이다. 웹페이지는 Image(<img />), css(<link />), script(<script />), Iframe, 동영상에 대해서는 자유롭게 가져올 수 있다. 하지만, 스크립트 태그 내에서 특정한 … 더 읽기

Intro REST API 설계원칙 중 마지막으로 Metadata와 Representation에 대한 내용에 대해 정리한다. Metadata는 API 통신을 할 때의 요청 또는 응답의 정보를 말한다. 그리고 Representation은 API 응답을 표현하는 형태를 말한다. Metadata 설계 Request Headers Response Headers Metadata의 설계 원칙 HTTP Header의 역할 📚 Rule: Content-Type을 사용해야 한다. 📚 Rule: Content-Length를 사용해야 한다. 📚 Rule: Last-Modified는 Response에 사용해야 한다 📚 … 더 읽기

Intro 이전 포스팅에서 REST API의 배경과 정의에 대해서 정리했었다. 이번 포스팅부터는 REST API를 설게하는 원칙에 대해서 정리하고자 한다. 사실 “설계 원칙”이라고 해서 완벽히 따라야 하는 표준은 아니다. 이 책의 저자는 사실상 표준, Defacto라고 말하고 있기 때문이다. 많은 개발자들이 오랫동안 이런 식으로 설계하여 써왔었기 때문에 어느 정도(?) 검증된 것이라고 생각하면 된다. 이번 포스팅에서는 REST API의 URI와 HTTP에 대한 설계 원칙을 정리한다. URIs … 더 읽기