한량의 개발블로그

1. yarn과 npm의 차이에 대해 궁금해진 계기 신규프로젝트 진행을 시작하며 새 폴더에 Next.js와 TypeScript 설치가 필요했다. Next.js와 TypeScript를 설치하는 방법으로 두가지 방법을 찾을 수 있었다. ( 참조 : next.js공식문서 ) npx create-next-app@latest --ts # or yarn create next-app --typescript 아이러니하게도 yarn으로 설치했을때와 npx로 설치했을때 다른 결과가 나왔다. 왜 위와 같은 결과가 생긴건지, 같은 패키지 매니저인줄만 알았지만 정확히 어떤 차이가 있는지 npx는 무엇이며 언제 사용하는지에 대해 공부가 필요했다. ( 참고로 위 문제의 원인은 Package Manager차이가 아닌 node ver..

교차 출처 리소스 공유 (Cross-Origin-Resource-Sharing) 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (MDN) 원칙적으로 브라우저는 SOP(Same Origin Policy)를 가지고 있다 다른 origin의 서버의 리소스를 받아와야하는 경우가 많아졌다 ("마이크로 서비스 아키텍칭"을 예로 들 수 있다) "마이크로 서비스"란 하나의 큰 애플리케이션을 여러 개의 다른 역할을 수행하는 애플리케이션으로 분리하였을 때 각 애플리케이션을 의미하며, 이렇게 마이크로서비스를 분리하여 여러 개의 작은 애플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍처를 "마이크로서비스 아키텍처"라고 말한다 웹 애플리케이션은 리..

0. 순서 구현하고자 하는 기능 기능 구현하기 Client Server 1. 구현하고자하는 기능 Input(Client) : 요청(textarea)에 텍스트를 입력하고 버튼을 클릭하면 각 버튼의 조건에 맞는 요청을 보낸다 Output(Server) : 클라이언트로부터 요청을 받아 분기하고, 조건에 맞게 변환하여 응답한다 2. 기능 구현하기 2-1. Client 2개의 버튼이 있다 (대문자 변환버튼, 소문자 변환버튼) 요청 toUpperCase toLowerCase 응답 각 버튼 클릭 이벤트 발생시 post요청을 보낸다 (대문자 변환버튼의 path : 'upper' , 소문자 변환버튼의 path : 'lower' ) 서버로부터 온 응답을 render한다 class App { init() { document..