작심삼일 개발이야기

한번쯤은 사용하는 정규식들 모아두면 좋겠다고 생각해서 이렇게 알아보는 김에 차곡차곡 모아 두자 물론 아래의 예시가 모두 정답은 아닙니다. 틀린 예시가 있다면 댓글로 알려주시면 수정하도록 하겠습니다. 물론 더 좋은 예시도 알려주시면 감사하겠습니다. 전화번호, 휴대전화 정규식 조건 일반전화, 휴대전화 모두 만족 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..

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

interceptors란 API 요청과 응답을 가로채는 것을 말한다. 사용하는 이유 API통신에서 공통적으로 전, 후처리가 필요할 때 token이 만료되었을 때를 감지하고 처리하기 위해서 에러가 발생했을 때 aleart창 띄어주기 일단 내가 사용하는 이유는 위와 같다. 위에서 언급한 것과 같이 axios를 사용할 때 interceptors를 사용하게 된다면 모든 API 통신은 interceptors를 거치기 때문에 공통적인 작업을 처리하기가 좋다. 사용법 // 요청 interceptors instance.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-family body { font-family: sans-serif, NanumGothic; } font-fami..

내가 사용하는 라이브러리의 버전을 확인하려고 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..

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

이번 프로젝트를 진행하며 axios를 사용하여 비동기 통신을 사용하게 되었다. GET, DELETE는 이름만 봐도 GET은 정보를 가져오고 DELETE는 삭제하라는 것 같이 느껴지는데 POST랑 PUT의 차이점은 뭔가 한 번에 확 와닿지 않아서 간단하게 정리를 해보려고 한다. 여러 글을 읽어보니 멱등성이라는 단어를 사용하길래 나도 간단히 적어본다.. 멱등성이란 여러번 반복 실행해도 결과가 같은 것을 의미한다. 예를 들어서 GET, PUT, DELETE는 같은 경로로 반복 실행해도 결과가 같지만 POST는 동일한 결과를 보장받을 수 없다. 1. GET 데이터를 검색하거나 읽을 때 사용한다. 같은 요청을 여러 번 반복 하더라도 항상 같은 응답을 받는다. 2. POST 새로운 글을 작성할 때 사용한다.(그래서..