기타 (+ Legacy)/Legacy 검색 결과

해당 글 47건

[React, Oauth] React에서 Kakao, Facebook 정보 사용하기

[React, Oauth] React 프로젝트에서 Kakao, Facebook 정보 사용하기 Oauth 공부하면서 Kakao와 Facebook의 정보를 사용하여 로그인 및 제공하는 기능을 간단하게 사용해보려고 한다. Kakao Kakao에서 해볼 것은 로그인, 로그아웃, App 탈퇴 구현을 할 것이다. 그리고 친구 목록 불러오기, 친구에게 카카오톡 메시지 보내기를 추가로 할 예정이다. Facebook Facebook에서는 로그인, 로그아웃을 구현해 볼 예정이다. 참고 위 Kakao, Facebook Oauth를 사용하여 간단하게 진행하는 것은 예정이며 위에 적힌 내용보다 추가로 더 할 수도 있고, 덜 할 수도 있다. 마지막 해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정..
기타 (+ Legacy)/Legacy 2021. 4. 7. 22:33

[React] 특정 포트번호로 프로젝트 실행하기

[React] 특정 포트번호로 프로젝트 실행하기 React 프로젝트를 실행할 때, 기본적으로 3000번 포트번호로 실행이 된다. 그러나 80번, 8080번 등 다른 포트번호로 실행하고 싶으면 어떻게 해야할까? 한번 알아보자. 중복된 포트번호 프로젝트 실행 3000번 포트번호로 프로젝트가 실행중인 경우, 또 다른 프로젝트를 실행하면 아래와 같은 것을 볼 수 있다. 다른 포트번호로 실행할 것인지 아닌지 묻는 것이다. 이런 방법으로 다른 포트번호로 프로젝트를 실행할 수 있다. 다른 포트번호로 프로젝트 실행 다른 포트번호로 프로젝트를 실행하는 방법은 매우 간단하다. package.json 파일에 있는 script를 수정해주면 된다. 기존 "start": "react-scripts start"로 되어 있는 것을 ..
기타 (+ Legacy)/Legacy 2021. 4. 6. 21:53

[Legacy][React] state를 사용한 To Do List, 동적 테이블

[React] state를 사용한 To Do List, 동적 테이블 그 다음 게시글로 useRef에 대해 알아보려고 하다가, 바로 넘어가는 것보다는 해당 개념에 대해 조금이라도 더 이해할 수 있도록 간단한 프로젝트를 진행해보려고 한다. 많은 입문자들이 구현하는 할 일 리스트, To Do List를 구현해볼 것이다. 기능은 아주 간단한게 할 일이 없는 경우는 없다는 메시지, 할 일 리스트에서는 추가, 삭제 기능을 구현할 것이다. 아주 간단한 동적 테이블을 구현한다고 생각해도 좋다. 프로젝트 전체 코드는 이 링크를 클릭하여 다운 받을 수 있도록 하자. To Do List 우선 완성된 이미지부터 확인해보자. 아주 간단하게 수행률과 할 일 리스트로 화면이 구성되어 있다. (기본적인 레이아웃 구조, css는 설명..
기타 (+ Legacy)/Legacy 2021. 3. 31. 18:31

[React] 절대경로 설정하기

[React] 절대경로 설정하기, src 기준으로 절대경로가 안돼요. React 폴더 경로를 src 기준으로 설정하면 import 하여 다른 컴포넌트를 import 할 때 편리하다. 그러나 절대경로를 설정하는 방법이 변경되었다. 이전 방법하고 지금 방법을 확인해보자. 절대경로 설정 이전 방법 src 기준으로 절대경로를 설정하는 방법은 간단하였다. 프로젝트 package.json 파일과 동일 선상 위치에 .env 파일을 생성하여 아래와 같은 코드만 추가해주면 되었다. 그리고 package.json의 start script를 변경해주면 되었다. 그러나 이제 해당 방법은 안되도록 변경 되었고 변경된 방법을 확인해보자. NODE_PATH=src 절대경로 설정 현재 방법 .env 파일 대신 jsconfig.jso..
기타 (+ Legacy)/Legacy 2021. 3. 26. 05:56

[Legacy][React] state, setState, useState 란 무엇일까?

[React] state, setState, useState 란? React의 핵심 중 1개인 state, setState, useState에 대해서 알아보도록 하자. state state란 무엇일까? 사실 state만 제대로 이해하고 사용할 수 있다고 하면 react의 반은 이해했다고 할 수 있을 것 같다. 그냥 간단하게 생각하면 state는 변수이다. 그렇다면 이런 생각이 문득든다. const, let, (var)가 있는데 뭐하러 state라는 변수를 사용하지? 무슨 차이점이 있지? 라는 궁금증이 생길 것이다. state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다. state와 함께 사용되는 함수는 se..
기타 (+ Legacy)/Legacy 2021. 3. 25. 06:43

[Legacy][React] CRA를 이용하여 프로젝트 생성 및 정리

[React] CRA를 이용하여 프로젝트 생성 및 정리 해당 게시글에서는 CRA(create-react-app)을 이용하여 React 프로젝트를 생성하는 방법을 알아보자. React 프로젝트를 생성하는 방법은 크게 2가지 방법이 있다고 볼 수 있다. 첫번째는 프로젝트에서 사용할 webpack, gulp 등 설정을 내가 원하는 것만 추가하여 프로젝트를 생성하는 방법이 있다. 두번째는 CRA(create-react-app)을 이용하여 간단하게 프로젝트를 생성할 수 있는 방법이 있다. 기본 셋팅 - npx 설치하기 우선 npx를 설치하여야 한다. yarn or npm으로 설치할 수 있고 사용하고 있는 것으로 간단하게 설치하면 된다. 아래 설치 명령어를 참고해보자. yarn 명령어 : yarn global ad..
기타 (+ Legacy)/Legacy 2021. 3. 23. 09:09

[Legacy][React] React 기초 및 개념

[React] React 기초 및 개념 React에 대해서 간단하게 알아보려고 한다. React 공식 홈페이지에서는 React를 다음과 같이 설명하고 있다. 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. React를 학습하여 보다 더 사용자 인터페이스에 좋고, 빠르고, 효율적으로 웹 페이지를 구현할 수 있도록 해보자. React 학습 순서 (개인적인 생각) 여기서 말하는 React는 class 기반이 아닌 함수형 hook을 말하는 것이다. 1. CRA (create-react-app)을 이용하여 react 프로젝트 만들어보기 2. React state 란? 3. React useRef 란? 4. React useEffect란?, React hook 라이프 사이클 5. 간단한 개인 프로젝..
기타 (+ Legacy)/Legacy 2021. 3. 11. 21:15