Timpossible history

React Context API는 React 애플리케이션에서 전역 상태를 효과적으로 관리할 수 있는 강력한 도구이다. 전역적으로 state를 관리한다는 측면에서 react-redux와 같지 않냐 생각할 수 있지만 차이점은 있다. React Context API와 Redux의 차이점 1. 용도 React Context API 주로 컴포넌트 간의 상태를 효율적으로 전달하고 관리하기 위한 도구. 상태 관리의 범위가 상대적으로 작은 경우에 적합. Redux 상태 관리 라이브러리로서, 큰 규모의 애플리케이션에서 상태를 효과적으로 관리하고 전역 상태를 중앙에서 제어하기 위한 도구. 상태 관리의 범위가 크거나 복잡한 애플리케이션에서 적합. 2. 구조 React Context API React에 내장된 API로, 컴포..

저번 Socket.IO로 실시간 채팅 웹사이트 구현한 것에 이어서, 실시간 화상 채팅은 어떻게 구성하는가 알아보자. [Express JS] Socket.IO 이용해서 실시간 채팅 어플리케이션 구성 [Express JS] Socket.IO 이용해서 실시간 채팅 어플리케이션 구성 Socket.IO는 웹 소켓(Websocket)을 쉽게 다룰 수 있도록 도와주는 라이브러리로, 실시간 양방향 통신을 구현하는데 아주 유용하다. 1. 프로젝트 초기화 mkdir mychatting cd mychatting npm init -y 먼저 프로젝트 everythingaboutworld.tistory.com 메인으로 실시간 양방향 통신은 Socket.IO로 하겠지만, 화상 채팅 통신은 WebRTC의 RTCPeerConnecti..

Socket.IO는 웹 소켓(Websocket)을 쉽게 다룰 수 있도록 도와주는 라이브러리로, 실시간 양방향 통신을 구현하는데 아주 유용하다. 1. 프로젝트 초기화 mkdir mychatting cd mychatting npm init -y 먼저 프로젝트를 초기화 해주고, 필요한 패키지를 설치해준다. npm install express socket.io pug Node js에는 View Engine이 존재하는데, 이는 서버에서 얻은 결과값을 정적 페이지(html)에 표시 할 수 있게 해준다. 물론 자동으로 생성되는 것이 아니라, 기본 템플릿을 만들어놔야 하는데, 기본 html 형식으로 하지 않도록 도와주는 것이 pug이다. (ejs도 많이 쓰임. pug든 ejs든 동적으로 정적 페이지 렌더링 가능함.) ..

이번에는 인스타그램 API를 이용해서 사용자의 정보나 게시글을 가져와보자. 먼저 인스타그램 API를 살펴보기 위해 개발자 웹사이트에 들어가본다. 인스타그램은 Meta가 인수하였으니 Meta for developers로 들어가면 된다. Meta의 개발자 문서들은 친절하지 않기로 유명하다지만, 정말 집중해서 따라가보면 되는 걸보니 츤데레인 것 같다. Meta for developers - 인스타그램 기본 디스플레이 API(일반 사용자를 위한 api라고 한다) (참고로 비지니스 계정을 위한 api는 인스타그램 그래프 API이다) 인스타그램 기본 디스플레이(표시) API로 할 수 있는 것 Instagram 사용자로부터 Instagram 사용자 액세스 토큰 및 권한 가져오기 Instagram 사용자의 프로필 가져..

Middleware란? Middleware 사용사례 Middleware 설정 Middleware로 쿠키 관리하기 Middleware란? 미들웨어(Middleware)는 애플리케이션에서 서버에 들어오거나 나가는 req와 res 사이에 실행되는 코드이다. 미들웨어는 주로 req가 서버에서 routing될 때 res를 클라이언트에 보내기 전에 수정하거나 검사하는 데 사용된다. Node.js로 서버를 구성할 때에도 정말 자주 쓰이고 서버에 들어오는 모든 요청(request)들을 검사하고 인증할 수 있기 때문에 서버 보안 부분에 있어서도 아주 효율적인 로직이라고 볼 수 있다. Middleware 사용사례 봇 탐지 및 접근 제한 리다이렉트(rewrite) 쿠키(token)를 통한 인증 Middleware 설정 미..

앱 비밀번호가 필요한 이유 앱 비밀번호 설정 방법 앱 비밀번호가 필요한 이유 Nodemailer를 사용해서 이메일을 보내는 기능을 구현한 웹사이트나 어플리케이션은 보안이 중요하다. 웹사이트든 어플리케이션이든 이메일을 보내려면 계정이 필요하니 소스코드에 계정과 비밀번호를 기록해놓아야 하는데 이는 보안에 다소 문제가 생길 수 있기에 계정의 비밀번호가 아닌, 계정의 부분적인 권한을 허가받은 어플리케이션 전용 비밀번호를 발급받아서 사용하는 것이 좋다. 보안 강화 권한 제어 계정 보호 2단계 인증 활성화 보통 사용자들은 gmail이든 naver든 인스타그램이든 그 어떤 계정을 같은 아이디와 비밀번호로 사용하는게 대부분이니 하나의 계정이 뚫리면 나의 개인정보가 담긴 모든 계정들이 같이 뚤릴 수 있기 때문에 보안을 ..

이번에는 Next.js 프레임워크에서 Nodemailer를 이용하여 이메일을 보내는 기능을 구현해보았다. Nodemailer는 Node.js 기반의 라이브러리로, 이메일 전송 작업을 쉽게 처리할 수 있도록 도와준다. 이 기능을 통해서 웹사이트의 회원가입 시, 이메일 인증하는 기능을 구현해보고자 한다. Nodemailer 설치 먼저, Next.js 프로젝터에 nodemailer를 설치한다. npm install nodemailer Nodemailer 설정 Nodemailer는 Gmail을 통해서 메일을 보내는 라이브러리이기 때문에 사용하기 위해서는 Gmail 계정에서 '앱 비밀번호'를 생성해야 한다. '앱 비밀번호' 생성하는 법을 알아보려면 아래 글의 링크를 통해서 알아보자. Nodemailer 이용 시 ..

React-quill로 Text editor 구현 중 기존 module을 이용 시 느꼈던 한계 그에 따른 해결책(Quill.import 메소드 사용) 응용 사례 주의 사항 1. React-quill로 Text editor 구현 중 기존 module을 이용 시 느꼈던 한계 이를 해결하기 위해 image icon 클릭 시 실행되는 코드 구현 const formats = [ "font", "size", "bold", "italic", "underline", "strike", "align", "blockquote", "list", "bullet", "indent", "background", "color", "link", "image", "width", "classify", "video", ]; const Edi..