작심삼일 개발이야기

서버데이터를 사용하여 렌더링 하는 컴포넌트의 유지보수에 대한 이야기를 해보려 합니다.저의 주관적인 생각이며, 각자 생각이 다를 수 있기 때문에 이렇게 생각할 수도 있구나라고 봐주시면 감사하겠습니다 :) 개발 중 서버데이터의 변경으로 인해 컴포넌트를 수정하다 문득 "왜..? 서버데이터가 변경되었는데 컴포넌트까지 수정해야 되는 걸까?"라는 생각이 들었습니다. 결론을 먼저 말하자면 컴포넌트를 제작할 때 필요한 데이터 타입을 따로 작성하는 것이 단일 책임 원칙에 조금 더 가까운 방법인 것 같다입니다. 당연한 소리 같이 들리겠지만 제가 컴포넌트를 제작하는 경우에는 당연한 방법으로 하지 않고 있었다는 것을 깨달은 지 얼마 되지 않았던 것 같습니다. 아래의 예시로 이어서 설명하겠습니다.interface Before ..

한번쯤은 사용하는 정규식들 모아두면 좋겠다고 생각해서이렇게 알아보는 김에 차곡차곡 모아 두자 물론 아래의 예시가 모두 정답은 아닙니다.틀린 예시가 있다면 댓글로 알려주시면 수정하도록 하겠습니다.물론 더 좋은 예시도 알려주시면 감사하겠습니다.전화번호, 휴대전화 정규식조건일반전화, 휴대전화 모두 만족02, 010, 011, 070 등등 앞자리 만족중간 3,4 자리 번호 만족/\d{2,3}-\d{3,4}-\d{4}/g 이메일 정규식/^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/i 아이디 정규식조건영문자와 숫자만 사용 가능 (영문자, 숫자 두 가지 모두 사용)길이는 8~16자로 가능첫 글자는 영문자로 시작/^[a-zA-Z][0-9a-zA-Z]{8,16}$/g 비밀번호..

정규 표현식은 언어를 떠나서 사용하지만 내가 자바스크립트를 사용하기 때문에 예시는 모두 자바스크립트를 사용하려 한다. 정규 표현식이란문자열에서 특정 문자 조합을 찾기 위한 패턴이며, Javascript에서 정규 표현식도 객체이다. RegExp의 메서드exec()일치 정보를 나타내는 배열 또는 null을 반환test()일치하면 true, 일치하지 않으면 false를 반환String의 메서드match()캡처 그룹을 포함해 모든 일치를 담은 배열을 반환, 없으면 null을 반환 matchAll()캡처 그룹을 포함해 모든 일치를 담은 반복을 반환replace()일치하는 부분을 대체 문자열로 바꾼다. replaceAll()일치하는 부분을 모두 찾고, 모두 대체 문자 열고 바꾼다.search()일치하는 부분의 인덱..

interceptors란API 요청과 응답을 가로채는 것을 말한다.  사용하는 이유API통신에서 공통적으로 전, 후처리가 필요할 때token이 만료되었을 때를 감지하고 처리하기 위해서에러가 발생했을 때 aleart창 띄어주기일단 내가 사용하는 이유는 위와 같다. 위에서 언급한 것과 같이 axios를 사용할 때 interceptors를 사용하게 된다면모든 API 통신은 interceptors를 거치기 때문에 공통적인 작업을 처리하기가 좋다. 사용법// 요청 interceptorsinstance.interceptors.request.use( function (config) { // 요청하기전에 필요한 작업 return config; }, function (error) { // 요청에 오..

개발을 하다 보면 한글은 같은 단어인데 영어로는 여러 단어를 쓸 때가 있다. 물론 상황에 맞는 단어를 사용하는 것이 제일 좋지만 그렇지 않으면 한 단어를 선택해서 사용하는 것이 좋다. 가장 헷갈리는 상황이 수정할 때 사용하는 단어인데 modify, edit, update 3가지를 혼동해서 사용하고 있었다. 먼저 사전적(네이버사전) 의미를 살펴보자 1. modify (더 알맞도록) 수정[변경]하다. 바꾸다 (정도가 덜하도록) 수정[조정]하다 (형용사, 부사 등이 다른 어구를) 수식하다, (어구의 의미를) 한정하다 2. edit (글 등을 발간할 수 있게) 수정[가필]하다 (책을) 편집하다 (화면의 자료를) 편집하다 3.update (현대화된 부품 등으로) 갱신하다 가장 최근의 정보를 알려주다[덧붙이다] m..

낙관적(optimistic) 업데이트, 비관적(pessimistic) 업데이트라는 말이 있다. 두 개 단어 모두 이름에서 나타내듯 낙관적, 비관적이 포인트이다. 낙관적은 사용자 수정 요청 -> 화면 갱신 -> 서버에 수정 요청 (실패 시 이전 상태로 되돌리기) 비관적은 사용자 수정 요청 -> 서버에 수정 요청 -> 성공하면 화면 갱신 사용자의 경험을 위해서 순서를 바꿔가며 업데이트를 해주는 것 같다. 중요한 기능의 경우 비관적 업데이트 방식을 주로 사용한다. 실패할 수도 있기 때문에 미리 성공한 화면을 보여줬다가 실패해버리면... 내가 사용자라고 해도 짜증이 날 것 같다. 여러 글을 읽어보니 낙관적 업데이트는 페이스북의 좋아요 버튼에 사용한다고 한다. 사용자의 경험을 위해 실시간 업데이트나 요청을 실패해..

여러 문서를 읽다 보면 side effect라는 단어를 보게 된다. 번역하면 부작용인데 다들 side effect는 피하라고 하는 거 보니 안 좋은 뜻인 거 같아 보이긴 한다. 개발에서 side effect는 의도하지 않은 (예측할 수 없는) 효과를 말한다. 예를 들어 함수 내부에서 함수 외부의 변수를 변하게 하는 행동을 생각하면 될 것 같다. 함수를 실행시켜서 내가 원하는 값을 반환해야 하는데 함수 외부의 값이 변한다면 그걸 어떻게 찾을까... 막막하다 함수를 만들 때 side effect가 발생하지 않는 순수 함수를 만들어야 한다. 같은 input 값을 받으면 항상 같은 결과 값을 return 해주도록 말이다. 그게 함수형 프로그래밍의 콘셉트이기도 하다. 하지만 내가 사용하는 자바스크립트는 함수형 프..

Font 관련 에러 (Failed to decode downloaded font)가 계속 발생하고 화면이 깜빡이는 거 같길래이참에 Font에 관해 공부해보자고 생각이 들었다. 추후에 발생한 에러에 대해도 해결하고 추가 글을 작성할 것이다.웹 폰트란 무엇인가?사용자의 폰트 여부와 관계없이 서버에 있는 폰트를 사용하여 렌더링 해주는 방법이다. 예를 들어서 웹 폰트를 사용하면 사용자가 폰트 여부와 관계없이 사용 가능하지만 웹 폰트를 사용하지 않으면 기본 폰트가 사용 될 것이다. 특히 모바일에서 큰 장점이 되는데 기기마다 탑재된 폰트가 달라서 적용하기 어려웠던 문제가 해결된다. 사용법Font-familybody { font-family: sans-serif, NanumGothic; }font-family는 왼쪽..

내가 사용하는 라이브러리의 버전을 확인하려고 package.json을 찾아본 적은 있지만 package-lock.json은 뭐하는 파일인지 몰라서 검색해보고 쉽게 정리해보려고 한다.package-lock.json이란?npm을 사용해서 package.json 파일 또는 node_modules 트리를 수정하면 자동으로 생성되는 파일이다.package.json을 통해서 라이브러리 버전을 확인할 수 있는데 package-lock.json이 존재하는 이유는 뭘까? package.json과 package-lock.json의 차이는 뭘까?흔히 라이브러리 버전을 확인하려면 package.json을 보고 버전을 확인하곤 한다.package.json에 적혀있는 버전은 특정 버전이 아니라 버전의 범위(version rang..

이 글은 Yuri Lee 님의 글을 참고하여 작성하였습니다.Request 객체는 3개의 메소드를 가지고 있다.param query bodyparam주소에 포함된 변수를 담는다.https://choisuhyeok.tistory.com/11 이라는 주소가 있다면 11를 담는다. query주소 제일 바깥 ? 이후의 변수를 담는다.https://choisuhyeok.tistory.com/post?q=javascript 이라는 주소가 있다면 javascript를 담는다.bodyXML, JSON, Multi Form 등의 데이터를 담는다. 주소창에서 확인할 수 없다.