전체 글

원문 : 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;..

Error 1 Error : Unable to boot device in current state: Bootec 이미 구동된게 있어서 에러가 나는 것 Solution xcrun simctl list 사용 가능한 모든 시뮬레이터를 나열해서 해결 Error 2 npm run ios를 입력하는데 계속 아래 에러만 떴다. error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening my_awesome_native.xcodeproj. xcode 이슈인지는 ..