프론트엔드 개발을 하면서 백엔드 API를 연동하는 개발을 해본 사람이라면, 아마도 API 개발이 늦어져서 API 연동 작업이 지연되는 경험이 있을 거라고 생각합니다. API 개발이 지연되는 만큼 전체 과제 기간도 지연되면 참 좋겠지만, 현실적으로 과제 기간 지연은 쉽지 않고 나도 최대한 빠르게 개발을 완료해서 멋있는 개발자가 되고 싶습니다. API 개발이 늦어질 때는 보통 API로 받아오는 응답을 Mocking해서 최대한 프론트엔드에서 먼저 개발을 해두고 API가 개발된 이후에 Mocking 코드를 제거하고 실제 API로 실행시켜 보면서 코드를 다듬습니다. 저는 처음에는 API를 연동하는 코드와 같은 파일에 Mocking 데이터들을 하드코딩하고 실제 API 연동 코드는 주석 처리해서 사용했습니다. 그런데..

TECH 2022. 5. 11. 21:28

최근에 MUI(Material-UI)의 Datepicker를 Input만 스타일을 수정해서 사용하는 경우가 있었습니다. MUI의 Datepicker는 기본적으로 아래와 같은 Input 스타일을 가지고 있습니다. 저는 여기에 우리 팀이 커스텀해둔 TextField를 사용하고, 캘린더 아이콘을 사용하고 싶었습니다. Datepicker 컴포넌트는 당연하게도 Input에 사용할 컴포넌트를 바꿀 수 있는 방법을 제공합니다. Datepicker의 prop중에 renderInput prop을 이용하면 됩니다. renderInput prop에 Input으로 사용할 컴포넌트를 return하는 함수를 넣어줍니다. (함수의 매개변수는 공식문서를 참고하시면 좋습니다.) 저는 TextField를 return 하게 넣어줬습니다...

TECH 2022. 1. 12. 20:46

Error Handling에 대한 고민 시작 웹서비스를 유지보수하면서 버그를 수정하거나 일부 기능을 개선하고 새로운 기능을 개발하면서 점점 Error를 처리하는게 고민거리가 되어가고 있습니다. 지금 유지보수 하고 있는 프로젝트는 Error 상황에 대해서 깊게 고민하지 않고 만들어져 있는데 그 결과 아래와 같은 문제점이 있어서 유지보수 할 수록 마음의 짐을 쌓는 기분이 들었습니다. Network Error를 처리하려고 할 때, 어디서 어떻게 할지 매번 고민합니다. Error 처리에 대한 기준이나 원칙 등이 명시된 문서가 없어서 개발자가 바뀌어 버리니깐 프로젝트의 개발 체계가 없어졌습니다. Error 발생시 노출하는 Alert의 스타일이 통일되어 있지 않습니다. 여기저기서 사용하는 Alert의 스타일이 달라..

TECH 2021. 10. 13. 22:11

주어진 문자열에서 특정 규칙을 만족하는 모든 문자열을 찾아야하는 경우에는 자연스럽게 정규표현식을 떠올리게 됩니다. 그런데, 생각보다 정규표현식의 규칙을 매번 헷갈려해서 결국 원하는 표현식을 검색하게 되는데요. 이제 제대로 익혀 놓기 위해서 정리해봅니다. 정규표현식의 구성 정규표현식은 크게 3가지 요소로 구성됩니다. 정규표현식이라고 표현하는 슬래시(/) 찾아낼 패턴 찾을 때 옵션을 줄 수 있는 flag 이 3개 중에서 가장 중요한 부분은 패턴입니다. 패턴을 얼마나 잘 다루냐에 따라서 얼마나 알맞은 문자열을 잘 찾아내느냐를 결정합니다. 정규표현식의 패턴 패턴은 아래와 같이 크게 4가지 분류로 나눌 수 있습니다. (모든 문법이 작성되어 있는 것은 아닙니다.) Group and ranges 문법 의미 상세 설명..

TECH 2021. 4. 14. 20:13

Prototype(또는 Prototype Object) 이란? 자바스크립트에서 함수를 만들면 함께 생성되는 객체가 Prototype(또는 Prototype Object)입니다. 그리고 해당 함수의 'prototype'이라는 속성으로 Prototype Object와 연결됩니다. 개인적인 생각으로는 Java에서, class 내부의 static member와 유사하다고 생각합니다. Prototype의 목적 Prototype Object는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 간단한 예시를 들면 아래와 같습니다. function Car () {} Car.prototype.wheel = 4; Car.prototype.sideMirror = 2; let ..

TECH 2020. 4. 16. 23:10

일반함수와 화살표 함수(arrow function)의 차이에 대해서 알아봅니다. ES6 이전에는 함수를 선언하기 위해서 함수선언식, 함수표현식 방식을 사용했습니다. ES6에서는 새로운 함수 선언 방식으로 화살표 함수가 등장했습니다. 기존의 일반함수들은 function 키워드를 이용해서 함수를 선언하지만, 화살표 함수는 이름처럼 화살표 키워드를 이용합니다. // 함수표현식 let function1 = function () { console.log('함수표현식'); } // 함수선언식 function function2 () { console.log('함수선언식'); } // 화살표 함수 let function3 = () => { console.log('화살표 함수'..

TECH 2020. 4. 16. 23:04

var, let, const는 javascript에서 변수를 선언할 때 사용하는 키워드입니다. var ES6 이전에는 변수를 선언할 때 var 키워드를 사용했습니다. 우선, var 키워드는 아래와 같은 특징을 가지고 있습니다. 변수의 중복 선언이 가능하다. var 키워드는 생략이 가능하다. block-scope이 아닌 function-scope이다. 호이스팅(hoisting) 당한다. /* * function-scope과 block-scope의 차이 */ // function-scope for (var i = 0; i < 10; i++) { console.log(i); } console.log(&#39;outside i: &#39;, i); // 출력: outside i: 10 // i를 var로 선언 ..

TECH 2020. 4. 16. 20:51