본문 바로가기

직장인인강

[패스트캠퍼스 챌린지 15일차] RESTful API - 리팩토링 패스트캠퍼스 작심 30일 챌린지 15일차. 오늘은 그동안 작성했던 소스코드를 리팩토링하는 시간! 리팩토링을 하기 전에 리팩토링이 뭔지 알아야겠지? 리팩토링은 기능 동작에 영향을 주지 않으면서 내부 소스코드의 구조를 변경하는 것으로, 기능(역할) 단위로 소스코드를 분리하거나, 중복되는 코드를 제거하여 최대한 간결하게 작성하는 것을 말한다. 주로 중복코드를 제거하거나 기능단위로 함수를 분리하는 과정을 통해 리팩토링을 진행한다. (그 외에 더 많은? 무언가를 하겠지?) RESTful API를 위한 소스코드를 js 파일 하나에 다 작성하였지만, 중복되는 코드가 너무 많다. 함수 별로 statusCode도 똑같이 전달하고, Encoding 설정도 모두 중복된다. 그리고 RESTful API를 처리하는 함수는 별도.. 더보기
[패스트캠퍼스 챌린지 14일차] RESTful API - 기능완성 패스트캠퍼스 작심 30일 챌린지 14일차. 오늘은 RESTful API가 동작할 수 있게 Code를 모두 작성해보았다. 그동안은 API 호출을 하면 정상적으로 처리할 수 있게 결과에 대한 문자를 화면에 보여줬지만, 오늘은 In Memory를 이용해서 게시판을 추가해보고, ID를 통해 데이터를 조회하는 기능을 구현했다. 먼저 In Memory 데이터는 이전 강의에서 배운 Boards 객체를 사용하였다. /** @type {Board[]} */ const boards = [ { id: 'my_first_board', title: 'My first board.', content: 'Hello.' },{ id: 'my_first_board', title: 'My first board.', content: 'He.. 더보기
[패스트캠퍼스 챌린지 13일차] RESTful API - 예시(2) 패스트캠퍼스 작심 30일 챌린지 13일차. 오늘 학습 내용은 RESTFul API 작성을 도와줄 정규식과 타입 세이프티 기능을 학습하였다. 먼저 정규식(Regular Expression). 이전 강의에서 Board의 ID를 통해 정보를 조회하는 기능을 만들었다. 그럼 ID는 어떤 형식으로 받아야 할까? 사용자들이 ID에 어떤 값을 넣을지는 아무도 모른다. 숫자만 입력할 수도 있고 문자만 입력할 수도 있고, 심지어는 특수문자나 스크립트 코드를 작성하는 경우도 있다. 이 모든걸 다 받아준다고 하면 개발자는 많이 괴로워질것이다. 이때 ID 형식을 고정하고 검증하는 소스코드가 있으면 조금 더 편해지지 않을까? 그래서 사용하는 것이 정규식이다. 강의에서는 숫자와 영어 대소분자만 ID로 받을 수 있게 정규식을 구현.. 더보기
[패스트캠퍼스 챌린지 12일차] RESTful API - 예시(1) 패스트캠퍼스 작심 30일 챌린지 12일차. 오늘은 RESTful API를 활용한 토이프로젝트 구성에 대해 알려주는 강의를 들었다. 현업에서도 URL과 데이터 전송에 관한 규칙을 정하여 API를 통해 통신하는 경우가 많다. 주로 Tomcat 서버와 Spring(boot) 프레임워크 위에서 개발하여 사용하는데, Script 강의이기 때문에 별도의 프레임워크를 사용하지 않고 단순히 Script로만 RESTful API를 구현한다. API 구현 전에 먼저 할 일은 바로 어떤 기능을 만들것인지 기능 정의하기! 강의 내용과 마찬가지로 기능에 대한 설명은 다음과 진행할 예정이다. - User가 게시글을 조회/등록하는 서비스 - 로컬 파일을 데이터베이스로 활용(JSON) - 인증 로직은 제외 - RESTful API .. 더보기
[패스트캠퍼스 챌린지 11일차] ECMAScript(ES6) - Polyfill, Transpile 패스트캠퍼스 작심 30일 챌린지 11일차. 오늘의 학습 내용은 Polyfill과 Transpile. 먼저 polyfill은 자바스크립트 표준 라이브러리에는 등록되어 있지만 아직 브라우저나 Nodejs에서 지원하지 않는 기능을 미리 써보기 위해 만들어진 객체다. 기존에는 javascript에서 특정 문자를 바꾸기 위해서는 replace 함수를 사용하였다. 그러나 replace 함수는 일치하는 문자 하나만 변경한다. 만약 script 안에 일치하는 문자가 많다면? 아마 replaceAll을 많이 떠올릴 것이다. 아직 ES5 문법으로 개발하여 replace와 정규식을 이용해 문자를 변경하고 있지만, 이미 자바스크립트 라이브러리에는 replaceAll 기능이 정의되어 있다. replaceAll 뿐만 아니라 이전.. 더보기
[패스트캠퍼스 챌린지 10일차] ECMAScript(ES6) - Promise 패스트캠퍼스 작심 30일 챌린지 10일차. 오늘 배운 ECMAScript의 개념은 바로 Promise! Script를 통해 개발을 하다보면 setTimeout과 같은 비동기 함수를 많이 사용하게 된다. setTimeout과 같은 비동기 함수를 실행한 후 함수의 실행 성공 여부에 따라 원하는 코드를 실행하거나 에러를 처리하고 싶은데 어떻게 해야할까? 이럴때 사용하는 것이 바로 Promise! Javascript에서 Promise는 '비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값'을 나타낸다고 MDN Web Docs에서 알려준다. 즉, 비동기 작업을 처리한 후 성공하면 내가 내가 원하는 코드를 실행하고, 실패하면 에러에 대한 처리를 할 수 있다는 것. 그럼 Promise는 어떻게 사용하는걸까? .. 더보기
[패스트캠퍼스 챌린지 9일차] ECMAScript(ES6) - Function Approach 패스트캠퍼스 작심 30일 챌린지 9일차. 오늘 학습 내용은 Function을 활용한 데이터 처리. 이전 Javascript에서는 for문과 if문을 중첩하여 원하는 데이터를 처리했어야 하지만, ES6에서는 다양한 function을 제공하기 때문에 복잡한 데이터를 처리하는데 많은 코드를 작성할 필요가 없다. const data = [{ "city" : "Seoul", "pet" : ["dog", "cat"] "age" : 40, "name" : "Tom" }, { "city" : "Pusan", "pet" : "dog" "age" : 20, "name" : "Jane" }, { "city" : "Seoul", "pet" : "cat" "age" : 30, "name" : "Bob" }] > 데이터 처리 실.. 더보기
[패스트캠퍼스 챌린지 8일차] ECMAScript(ES6) - Spread syntax 패스트캠퍼스 작심 30일 챌린지 8일차. 요즘 많이 사용하고 있는 ECMAScript인 ES6 문법 강의. 패스트캠퍼스에서 ES2015(ES6)와 TC39가 무엇인지 간략히 설명해주면서 ECMAScript가 어떻게 발전했는지 알려주었다. 중요한 내용이긴 하지만 관련 Github 사이트는 나중에 보고!! Spread syntax를 배우기 전에 let과 const에 대해 먼저 강의를 들었다. 기존 ES5 스크립트를 작성할 때 var를 통하여 변수를 선언하였다. (물론 나도 실무에서 엄청 많이 사용하고 있다.) var 변수는 여러번 중복으로 작성해도 상관없고, 원할 때 값을 바꿔도 상관없다. 그만큼 데이터를 유연하게(?) 사용할 수 있다는 장점이 있지만, 작성하다 보면 변수가 숫자를 담고 있는건지 문자를 담고.. 더보기

티스토리툴바