김평범'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️⃣코드스플리팅 코드스플리팅은 빌드..

요즘 가장 핫한 AI 하면 바로 chatGPT이다. 많은 사용자들이 몰려서 사이트가 다운되기도 할 정도로 많은 관심이 있는데 이제 chatGPT와 같은 채팅기능을 카카오톡에서도 이용할 수 있다고 한다. 🥰카카오톡 ChatGPT AskUP 란? Askup은 카카오톡 플러스 친구로 ChatGPT를 카카오톡에서 활용할 수 있는 채널이다. 👍카카오톡 ChatGPT AskUP 채널 추가하기 askup은 카카오톡 채팅 탭에서 우측 상단의 돋보기 버튼을 눌러서 askup으로 검색하면 된다. 벌써 친구가 19.1만으로 어마어마한 사용자가 있는 AskUp 우측의 채널플러스를 눌러서 채널추가를 하면 완료! 📌Askup 활용하는 방법 1️⃣ 이미지사진에서 텍스트 추출하기 먼저 방에 들어와서 채팅알람이 뜬 화면을 캡처를 해서..

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

개발 시 두 파일의 소스코드를 비교할 일이 있다. 오늘도 내 자리에서는 동작하는 코드가 다른 동료 개발자 자리에서는 동작을 안 하길래 파일을 비교해 보기로 했다. 분명, git에서 코드를 받아서 작업을 했다고 하는데 작동이 안 되어서 이럴 경우 이용하기 좋은 사이트이다. 💗Diffchecker 사이트 사이트는 매우 간단하다. 한쪽에 Original Text를 넣어주고 다른 쪽에 Chaged Text를 복사해서 넣어주면 해당 수정된 부분이 바로 표시가 된다. ✅사이트 접속 주소 https://www.diffchecker.com/ Diffchecker - Compare text online to find the difference between two text files Compare text Diffche..

개발자 직군이 뜨면서, 비전공자도 개발자를 도전하는 분들이 많아졌다. 이럴 때 대부분 개발학원을 알보게 되는데, 개발학원 가격이 너무 비싸 부담스러울 수 있다. 이 때 이용 가능한게 바로 국민내일배움카드이다. 🚀국민내일배움카드란? 국민내일배움카드는 취준생이나 이직, 퇴직 이후 새로운 기술을 배워서 취직을 할 수 있도록 개발 역량에 필요한 학원비를 지원해준다. 해당 카드는 누구나 만들기 가능한데 아래 분들은 대상에서 제외된다. 현직공무원, 사립학교 교직원 만 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() 샘플코드 위 코드를 실행했을 때 결과 화면이다.