전체 글

회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다. 이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다. react-daum-postcode를 선택한 이유 따로 key를 발급받을 필요 없이 사용할 수 있다. 회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다. https://github.com/bernard-kms/react-daum-postcode GitHub - bernard-kms/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to ber..

원문 : https://betterprogramming.pub/10-modern-javascript-tricks-every-developer-should-use-377857311d79 10 Modern JavaScript Tricks Every Developer Should Use Tips for writing short, concise, and clean JavaScript code betterprogramming.pub 원문 작성자 : https://haseebanwar.net Haseeb Anwar - Full-Stack Developer A full-stack software engineer who reads, writes, helps, and makes beautiful applications ..

보통 개발환경의 주소는 http://localhost:3000을 사용한다. Api 서버의 주소가 https://dev-api.com 일때, 따로 cors 설정을 해놓지 않는다면, cors 에러가 난다. CORS 일반적으로 브라우저는 보안 문제상의 이유로 동일 출처 정책(SOP)을 따른다. 요청 URL과 응답 URL 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일 출처로 볼 수 있다. 출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다. 예를 들어 a-url.com 페이지에서는 b.url.com 호스트로 데이터를 요청할 수 없다. proxy proxy는 웹팩 개발서버로, proxy를 통해 브라우저에서 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 ..

프로젝트에서 위치를 지도 위의 마커로 표현해야 하는 화면이 있어 @react-google-maps/api 라이브러리를 사용해 구현해 보았다. google, kakao, naver 중 google API를 선택한 이유 프로젝트 내에 google address api를 사용해 주소를 가져오는 기능도 있었기에, 지도를 띄우는 것도, google address api에서 발급받은 API 키를 동일하게 사용할 수 있어 google address api를 사용하게 되었다. 왜 @react-google-maps/api인가 다른 라이브러리에 비해 Weekly Downloads가 높았고, Last publish 도 내 기준 7일전으로, 업데이트가 꾸준히 진행되고 있는 것 같았다. 구글 공식 유튜브계정인 Google Ma..

웹 서버에 대해 좀 더 깊이 있게 배워보자.지난번에 서버란 웹서버 소프트웨어가 설치되어있는 컴퓨터를 서버라고 불렀었다.그러면 이 소프트웨어는 무엇이고, 무슨 역할을 하는 걸까?웹서버의 종류웹 브라우저에도 크롬, Microsoft Edge, Firefox 등의 제품 군이 있듯이,웹서버 소프트웨어의 종류도 여러 개다.대표적인 웹 서버 소프트웨어는 Apache, Nginx, IIS가 있다.ApacheNginxIIS이번 게시물에서는 실무에서 많이 쓰이는 Apache와 Nginx를 비교하여 알아볼 것이다.ApacheApache는 1995년, Apache재단에서 만든 HTTP 서버이다.아파치가 나온 당시 1995년에는 Unix 기반으로 만들어진 최초의 웹서버 NCSA httpd가 있었다.하지만 위 프로그램은 버그가..

이번 프로젝트에서 제일 많이 다뤘던 라이브러리는 단연코 yup이랑 Formik이었다. 웹에서 사용하는 모든 form을 위 라이브러리를 적용해, 유효성 검사를 해주었다. Yup & Formik를 쓰면 form 내의 state관리가 편하며, 스키마 기반 유효성 검사로, 보다 편리하게 양식 검사를 수행할 수 있다. 이전보다, 알게된 것이 많아진 것 같아 다시 한번 정리해보려고 한다. 핸드폰 유효성 검사 프로젝트 특성 상, 정규표현식을 사용하는 것보다, phone Validation 라이브러리를 사용하는게 마음이 편했다. import "yup-phone"; yup에 적용가능한 yup-phone 라이브러리를 사용해줬다. yup-phone github phone: yup .string() .min(9, '핸드폰 번..

최근 next 프로젝트 개발을 하면서, "서버"라는 개념에 대해 너무 무지하고 있다는 생각이 들었다. 모호하게는 알고 있었으나, 자세히 알려고 하지 않았던 것 같다. 아 언젠가는 알게 되겠지,,,, 라는 생각 하지말고 얼른 얼른 공부해보자. 서버와 클라이언트의 상호작용 서버와 클라이언트는 컴퓨터 2대끼리 통신을 하는 것이다. 어떤게 서버 컴퓨터고 어떤게 클라이언트 컴퓨터는 무엇이 설치되어 있는지를 보면 된다. 웹 브라우저가 설치된 컴퓨터를 클라이언트, 웹 서버라는 소프트웨어가 설치되어 있는 컴퓨터를 서버로 정의할 수 있다. 우리가 웹 브라우저(웹 클라이언트)를 키고, 웹 브라우저의 주소창에 https://www.naver.com 포털 사이트를 입력하고 엔터를 친다면, 그 주소에 해당되는 서버 컴퓨터에게 ..

create-next-app을 깔아보자. npx create-next-app create-next-app가 설치되고, 기본적으로 세팅되어 있는 page, public, styles 파일을 살펴보자. styles styles 폴더에서는 스타일 파일을 저장해준다. public public에는 페이지에서 사용할 공개 리소스를 넣을 수 있다. (ex. image) 그런데, public 파일 내부를 보면 우리가 이전에 사용했던 react 프로젝트, create-react-app와 달리 index.html 파일이 안보인다. 그 이유는 nextJS는 사전 렌더링 기능을 내장하기 때문이다. (pages에서 계속) pages NextJS는 싱글 페이지 어플리케이션(spa)을 제공한다. 서버에 요청이 오면 이 싱글 페이지..

Literal types 리터럴 유형은 string, number보다 구체적인 유형이다. 예를 들어 'hello'는 문자열이지만 문자열은 'hello'가 아니다. 'hello'는 보다 구체적인 유형의 문자열로, 리터럴 형식이 될 수 있다. type Greeting = "Hello" 즉, 타입Greeting 은 Hello 값만 가질 수 있고, 다른 유형의 값은 가질 수 없다. let greeting: Greeting greeting = "Hello" // OK greeting = "Hi" // ❌ 리터럴 유형은 그 자체로는 유용하지 않지만 union types, type aliases, type guards 와 결합하면 강해진다. type Greeting = "Hello" | "Hi" | "Welcome"..

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다. Partial 파셜타입은 특정 타입의 부분집합을 만족하는 타입을 정의한다 interface Login { email : string password : string } type MyLogin = Partial const google : MyLogin = {} const naver : MyLogin = {email : 'sally@naver.com'} const kakao : MyLogin = {email : 'sally@kakao.com', password : 'string'} interface Product { id: number; name: string; price: number; brand: string;..