김평범's OrdinaryCode

🔎서버사이드 랜더링이란? Server Side Rendering(SSR)로 브라우저에서 화면을 그려주는 주체가 서버인 경우이다. 반대의 개념으로는 Client Side Rendering(CSR)이 있다. 우리가 사용하는 react는 기본적으로 CSR을 이용한다. 하지만, SSR이 주는 장점들이 있어서 SSR 환경에서 개발이 필요할 때가 있다. 👏서버사이드랜더링(SSR) 장점 검색엔진(SEO) 최적화, 검색엔진에서 웹페이지 수집 가능 초기 렌더링 속도가 CSR에 비해 빠르다. 🥰Next.js 이용하기 서버사이드랜더링을 적용을 하려면 코드로도 가능하지만 Next.js라는 프레임워크를 이용하면 간단한 설정으로 SSR 설정이 가능해진다. 🙂Next.js 의 또 다른 장점은? 1️⃣코드스플리팅 코드스플리팅은 빌드..

BFF 패턴 Backend for Frontend의 약자로 간단히 말하면 프런트앤드를 위한 백앤드 서버를 말한다. BFF패턴이 발생하게된 이유는 다양한 디바이스 장치 때문이다. 같은 서비스라도 다양한 디바이스 장치가 생겨나면서 각각 환경에 맞는 UI가 필요해졌고 프런트앤드 개발자들은 이전에 비해 더 많은 클라이언트 환경을 고려하게 되었다. (PC, 모바일, 애플워치, 태블릿 등..) 같은 서비스라도 사용하는 디바이스 환경에 따라서 보이지는 디자인과 데이터도 달라지게 되는데, 이런 분기 처리를 하기 위해 나타난 것이 바로 BFF 패턴이다. BFF패턴의 특징 프론트앤드 요구사항에 맞는 도움을 주는 보조 서버 개념으로 BFF패턴은 하나의 클라이언트에 하나의 매칭되는 BFF가 존재한다. BFF는 하나의 큰 프로..

개발자 직군이 뜨면서, 비전공자도 개발자를 도전하는 분들이 많아졌다. 이럴 때 대부분 개발학원을 알보게 되는데, 개발학원 가격이 너무 비싸 부담스러울 수 있다. 이 때 이용 가능한게 바로 국민내일배움카드이다. 🚀국민내일배움카드란? 국민내일배움카드는 취준생이나 이직, 퇴직 이후 새로운 기술을 배워서 취직을 할 수 있도록 개발 역량에 필요한 학원비를 지원해준다. 해당 카드는 누구나 만들기 가능한데 아래 분들은 대상에서 제외된다. 현직공무원, 사립학교 교직원 만 75세 이상인 사람 졸업까지 남은 수업연한이 2년을 초과하는 대학생 연 매출 1억 5천만원 이상 자영업자 월임금 300만원 이상 특수형태근로종사자와 월임금 300만원 이상이면서 45세 미만인 대규모기업종사자 위 경우는 내일배움카드발급이 불가하다.🥲 위..

🤔발생된 에러코드 Module build failed(from/node_modules/sassloader/dist/cjs.js): friendly-errors 10:11:49 Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v4.14.1 at module.exports (C:\...\node_modules\node-sass\lib\binding.js:13:..

Nuxt 프로그램을 신규로 가져와서 npm install을 하니 갑자기 오류가 발생했다. Nuxt Version이 2.16.0 버전이 설치가 되면서 문제가 난 듯하다. 🔎Nuxt 설치버전 확인하기 pacakge-lock.json 파일을 확인해주자. 만약 pacakage-lock.json파일에 @nuxt/config가 2.16.0이 설치가 되면 해당 이슈가 날 수 있다. 해결방법 npm install nuxt@2.15.8 위 코드를 이용해서 nuxt를 2.15.8 버전으로 재설치를 해주면 된다. 만약 해당 코드로 설치해도 안된다면 node_modules와 package-lock.json파일을 먼저 삭제해 준 뒤 npm install nuxt@2.15.8 npm install 먼저 nuxt를 설치해 준 뒤,..

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때 특정 페이지에서 이벤트를 발생해야되는 경우가 있다. 이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다. 🤔vue watch란? watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다. $route watch 샘플코드 ... 위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다. to의 경우에는 현재 진입한 페이지의 속성이 나오며, from을 찍어보면 과거에 나온 페이지를 확인할 수 있다. 결과화면 콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과 과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있..

객체가 빈 객체 상태를 체크할 경우가 있다. let emptyObject = {}; 위에처럼 빈 객체를 만들었다면, 이제 해당 객체가 빈객체인지 확인해보는 방법이다. Object.keys(newObject).length === 0 ⭐Object.keys란? Object.keys() 메소드는 해당 객체가의 속성을 배열 형태로 반환해줍니다. 결국 반환된 배열의 length가 0일 경우 해당 객체가 비었다고 판단할 수 있다. Object.keys() 샘플코드 위 코드를 실행했을 때 결과 화면이다.

오늘 개발하다가 발견한 특별한 상황 백앤드 개발자 분이 첫 페이지 로딩이 느린 것 같다는 말을 보니까 mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다. 검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다. 원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다. 📌Nuxt mounted가 두 번씩 호출되는 원인 문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데 레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.🤔 위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다. 만약 이용하고 아래 프로그램을 크롬에 추가해보자. https://chrome.google.com/webstore/detail/vuejs-devtoo..

💗vue $ref란? vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성 HTML 예시 코드 Vue 접근 예시 코드 this.$refs.target; script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다. 📒$refs접근 시 변수로 접근하기 refs의 경우 ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다. 만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다. {{i}} 위 코드로 10개의 div를 생성해주면, 각각 다른 ref속성을 갖는 DOM이 생성된다. vue 접근 예시 코드 selectRefs(i) { let targetRef = `target-${i}`; vm.$refs[targetRef][0]; } 그냥 텍스트로 접근할 때와 다른 점..

현재 상황은 프로젝트 파일에서 frontend 서버는 localhost:3000 이용하며, backend 서버는 localhost:3001 이용 중이다. 이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다. frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다. 📌Nuxt Proxy 이용하기 1️⃣설치하기 nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자 https://www.npmjs.com/package/@nuxtjs/proxy @nuxtjs/proxy proxy support for nuxt server. Latest version: 2.1.0, last published: 2 years ago. Start ..