AI Platform / Web

더미데이터를 fetch로 받아와서 화면에 보여주는 실습을 해보자. 데이터는 상위 컴포넌트에서 받는다. 그리고 받은 데이터를 prop로 내려준다. 이 때 반복되는 부분을 컴포넌트로 쪼개서 화면을 랜더링 시켜준다. 만약 아래의 내용이 어렵거나 다른 정보가 필요하다면, 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 0. 데이터 셋팅 기본적으로 데이터는 아래의 사이트에서 가지고 온다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowD..

카카오 로그인을 진행해 보자. 기본적인 작동 방식은 여기를 눌러서 확인하자. 기본 셋팅은 할수 있다 판단하고 글을 적어보겠다. 사실 쉽게 사용하기 위해 만들어진 라이브러리도 많다. 그러나 딱히 난이도가 있지 않기 때문에 react-kakao-login 같은 라이브러리는 사용하지 않고 만들어 보겠다. 만약 nodejs에 대한 기초지식이 부족하거나, frontend, backend 구축에 대한 기초내용을 알고 싶다면 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 [Nodejs/react] 깃헙(github)으로 로그인 / 깃헙(github) API로 데이터 불러오기 https://developers.kakao.com/docs/latest/ko/kakaologin/common..

쉽고 빠르게 로그인을 필요한 부분만 빠르게 만들어 보려고 한다. 어려워 보이지만 크게 어렵지 않다. 우선은 postman으로 rest api로 테스트를 진행한다. 테스트 성공을 하면, 테스트 한 방식데로 code에 적용한다. 바로 코드를 확인하려면 카카오 코드 만들기로 가면된다. 기본적은 원리는 아래와 같다. 핵심은 세 가지이다. 로그인해서 인증 코드를 받는다. 받은 인증 코드로 token을 받는다. token으로 로그인을 유지를 한다. 우선적으로는 postman으로 우선 로직을 실행해 보자. https://developers.kakao.com/console/app 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 위의 사이트에 들어가서 아래의 애플리케이션을 추가한다. ..

React 프로젝트 AWS EC2에서 우분투 환경으로 배포하는 방법에 대해 알아보자. 필자도 react 배포 시 아래의 내용을 참고하여 배포를 한다. 그리고 오류가 난다면 주기적으로 추가하고 있다. 0. 들어가면서 creat-react-app으로 local 개발 시 환경과 배포(production) 개발 환경은 달라야 한다. 따라서, 아래의 방법을 보고 우선 셋팅을 진행한다. [react] 실무 개발 환경/배포 환경 설정(.env) 천천히 읽어보면 그렇게 어려운 것은 없을 것이다. 만약 nodejs에서 express로 개발을 하여 백엔드를 만들었다면 아래의 방법을 참고하면 도움이 될것이다. 만약 react와 nodejs로 둘다 EC2에서 배포를 한다면 파일을 client와 server로 하나씩 만들어서 ..

0. 들어가면서 사실 이 부분은 쉽게 이해하기 어렵다. 그리고 가장 잘 정리 된 곳은 공식문서이다. https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 이 블로그는 자세히 알려주지 않는다. 처음 배우는 사람들이 쉽게 이해할 수 있도록 다 덜어낸 정보를 전달한다. 여기서 개념을 잡고 공식문서를 꼭 읽어보기 바란다. 1. 개념 useEffect는 useState에 연결되므로 아래의 코드에서 이어서 설명하겠다. 1분이면 보고 올 수 있다. [Web/React] - [react web] Hook 기초_useStat..

react 모킹 방법을 검색해보면, 블로그들은 크게 2가지 특징을 가진다. 너무 설명이 없거나, 너무 설명이 많다. 그래서 hanpy는 쉽고 간단하게 설명을 적어보려한다. nodejs에 관한 기본 셋팅이나 개념은 아래의 url로 대체한다. [Web/nodejs] - nodejs 기초 총 정리 https://mswjs.io/ Mock Service Worker Seamless API mocking library for browser and Node. mswjs.io 모킹을 위해 msw 라이브러리를 사용할 것이다. 위는 공식문서다. 핵심은 front단에서 API를 보낼 곳이 없는 경우, 가상으로 데이터를 불러올 수 있는 곳을 만들어 준 것이다. 간단히 사용법을 적어보겠다. npx create-react-ap..

0. 들어가면서 useState를 활용해서 내용을 숨기고 보이는 방법에 대해 알아보자. 우선은 앞의 useState 기초를 확인하고 오자. 우리가 만들 것은 버튼 누를 시 특정 내용이 보이고, 다시 누르면 안보이게 하는 것이다. 기초 개념은 아래에서 참고하자. [Web/React] - [react web] 시작 후 파일 정리 [Web/React] - [react web] Hook 기초_useState [Web/React] - [react web] Hook 기초_useEffect [Web/React] - [React Web] AWS EC2 배포 ALL-IN-ONE [Web/React] - [react web] mocking 모킹 방법 (msw로 데이터 가져오기) 1. 코드 기본적인 component 생성과..

핵심만 압축했습니다. 디테일한 부분은 공식문서를 확인해 주세요! 0. 들어가면서 Hook의 종류는 굉장히 많다. 만약 간단한 프로젝트만 한다면, useState, useEffect 정도만 알아도 충분하고, 복잡한 내용은 useRef 정도를 추가하면 된다. 시중의 블러그나 책은 대부분 같은 내용만 다루는 것 같다. 더하기와 빼기... 물론 좋은 예제이지만 나는 핵심만 압축해서 이야기 해보고자 한다. 기초적 실습을 보여주고, 추가로 프로젝트 시 사용했던 수많은 기술들을 담아보려 한다. 사실 useState와 useEffect 정도만 알아도 이 글을 보고 있는 분들의 초급 수준에서 문제 없다. useEffect는 추가로 다음 블로그에서 이야기 해보려 한다. 1. useState 핵심 html은 변하지 않는다...