김평범's OrdinaryCode

📑Next.js pages 폴더구조 이해하기 Next.js에로 프로젝트를 생성하면 자동으로 pages 폴더가 생성이 된다. Next.js 특징으로 폴더 구조 내 파일 이름으로 라우팅을 자동으로 잡아주는 것이 가능하다. 기본으로 생성되는 index페이지 외 about.jsx, users.jsx 페이지를 추가로 생성해 줬다. next.js에서는 별다른 작업이 없어도 자동적으로 해당 페이지에 접근이 가능하다. export default function about() { return ( About ) } export default function users() { return ( users ) } '/about' → /pages/about.jsx 파일 화면 접근 '/users' → /pages/users.jsx..

🔎서버사이드 랜더링이란? 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..