728x90 반응형 SMALL 리액트19 [프로젝트생성-3] 일렉트론에 리액트 추가하기 https://uno-kim.tistory.com/375 [프로젝트 생성-2] 일렉트론 패키징과 배포 지난 포스팅 https://uno-kim.tistory.com/370 [프로젝트 생성-1]node.js로 일렉트론 설치하기 https://uno-kim.tistory.com/369 Node js 설치 노드 JS 를 설치하는 방법입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript uno-kim.tistory.com 일렉트론 패키징과 배포에 대해서 알아보았습니다. 이번에는 이제 마지막으로 일렉트론에 리액트를 추가해 보겠습니다. 리액트 추가하기 리액트 라이브러리를 추가하기 위해서는 패키지를 추가해야합니다. 아래의 명령어를 입력해 줍니다. npm inst.. 2023. 2. 23. 단일 페이지 애플리케이션 만들기 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션(Single Page Application, SPA) 방식으로 개발하는 것이 정석입니다. 단일 페이지 애플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션 입니다. 전통적인 방식의 웹 페이지는 페이지를 전환할 때마다 랜더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있습니다. 단일 페이지 애플리케이션은 페이지 전환에 의한 랜더링을 클라이언트에서 처리하기 때문에 마치 네이티브 애플리케이션 처럼 자연스럽게 동작합니다. 브라우저 히스토리 API 먼저 단일 페이지 애플리케이션을 구현하기 위해 필요한 브라우저 히스토리 API가 있습니다. 히스토리 API란? 단일 페이지 애플리케이션 구.. 2022. 1. 23. [React] react-router-dom 설치 후 Route 시 오류 / 해결방법 React-router-dom 실습하는 도중 localhost :3000 화면은 오류없이 흰창으로 나오지만 콘솔에서 많은 오류가 생겼습니다... 이중 index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 이 주된 이유였습니다 ㅠㅠ3개 전부 가 원인인것을 알수있습니다. 문제의 원인? react-router-dom 라이브러리가 버전 업데이트가 되어서 최신버전에 맞게 설치해주거나 이전 버전을 설치하는 방법이있습니다. 제가 사용하고있는 router-dom 라이브러리 버전을 먼저 확인해보겠습니다. 저에게 설치되어진 버전은 6.2.1 버전입.. 2022. 1. 23. CSS 작성 방법 "결정"하기 웹 어플리케이션을 개발할 때 돔 요소에 스타일을 적용하기 위해서 CSS 를 이용합니다. CSS 를 작성하는 전통적인 방법은 CSS를 별도의 파일로 작성하고 HTML의 link 태그를 이용해서 사용자에게 전달하는 것입니다. 순수 CSS 문법은 코드를 재사용하기 힘들기 때문에 SaSS (syntactically awesome stylesheets)를 이용하기도 합니다. SaSS 에서는 변수와 믹스인 개념이 있어서 중복 코드를 많이 줄일 수 있습니다. 리액트의 UI는 컴포넌트의 조합으로 표현되며, 컴포넌트 하나를 잘 만들어서 여러 곳에 재사용하는 것이 좋습니다. 그렇게 하기 위해서 각 컴포넌트는 서로 간의 의존성을 최소화 하면서 내부적으로는 응집도를 높여주어야 합니다. 컴포넌트는 화면에 보이는 한 부분이므로 .. 2022. 1. 22. AUTOPREFIXER CSS에서 비교적 최신 기능을 사용하려면 벤더 접두사(Vendor Prefix) 가 붙은 이름을 사용합니다. 벤더 접두사를 붙이는 것은 create-react-app 에서는 autoprefixer 패키지를 통해서 벤더 접두사가 자동으로 붙습니다. create-react-app 에서 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. src 폴더 밑에 test.css 파일을 만들고 다음 내용을 입력한 후 App.js 에서 test.css 파일을 가져오면 되겠습니다. .prefix-example { writing-mode: horizontal-tb; scroll-snap-type: .. 2022. 1. 21. Create-react-app으로 시작하기 Create-react-app은 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공합니다. 이것을 이용하면 기존 기능을 개선하거나 새로운 기능을 추가했을때 패키지 버전만 올리면 됩니다. 앞에서 다룬 바벨과 웹팩도 create-react-app에 포함되어 있습니다. 또 다른 장점은 어떤 문제를 해결하기 위한 선택지가 여러 개일 때 create-react-app에서 가장 합리적인 선택을 ㅐ 준다는 점입니다. 현재 자바스크립트 생태계는 춘추 전국 시대라고 볼수도 있습니다. 그래서 한번 써보는 것을 배워보겠습니다. Create-react-app 사용해보기 다음 명령어를 입력하면 create-react-app을 이용한 개발 환경이 설치됩니다. npx create-react-app cra-test 그러기위해 새로운.. 2022. 1. 20. 웹팩의 기본 개념 이해하기 웹팩은 자바스클비트로 만든 프로그램을 배포하기 좋은 형태로 묶어주는 도구입니다. 2000년대 초반의 웹페이지는 페이가 전활 될 때마다 새로운 HTML파일을 요청새허 화면을 새로 그렸습니다. 그 당시 자바스크립트는 돔을 조작하는 간단한 역할만 했기 때문에 코드의 양이 많지 않았습니다. 한두개의 자바스클비트 파일을 HTML의 script 태그를 이용해서 서비스하는 방식이면 충분했습니다. AJax가 유행했을 때는 자바스크립트의 비중이 조금더 커졌지만 많이 봐야 페이지당 자바스크립트파일 열개 정도 수준이었습니다. 그런데 웹사이트 제작 방식이 단일 페이지 애플리케이션으로 전환 되면서 상황은 달라졌습니다. 한 페이지에서도 자바스크립트 파일이 수십 또는 수백개가 필요했기 때문에 더는 기존 방식이 통하지 않았습니다. .. 2022. 1. 19. 바벨 사용해 보기 바벨(bable)은 자ㅏㅂ스크립트 코드를 변환해 주는 컴파일러 입니다. 바벨을 사용하면 최신 자바스크립트 문법을 지원힞 않는 환경에서도 최신 문법을 사용할 수 있습니다. ES6가 막 나왔을 때는 대부분의 브라우저가 ES5가 지원하고 있었기 때문에 ES6문법을 사용할 수 없었습니다. 그때 바벨(ekdtl dlfmadms 6to5)이 ES6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 주었습니다. ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도 높아졌습니다. 바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있습니다. 이를테면 코드에서 주석을 제거하거나, 코드를 압축하는 용도로 사용될 수 있습니다. 리액트에서는 JSX 문법을 사용하기 위해 바벨을 .. 2022. 1. 19. 리액트 개발 환경 직접 구축하기 리액트는 UI라이브러리이기 때문에 UI를 제외한 나머지 요소들은 개발자가 신경써서 관리해야한다. 웹 어플리케이션을 만들기 위해서는 테스트 시스템, 빌드 시스템, 라우팅 시스템 등 UI외에도 신경써야할 부분들이 많습니다. 리액트로 웹 애플리케이션을 제작할 때는 다양한 외부 패키지를 활용하는게 일반적입니다. 하지만 이런 다양한 외부 패키지의 존재는 처음 리액트를 접하는 사람에게 오히려 큰 부담이 됩니다. 사용되는 외부 패키지가 너무 많아서 각 패키지의 용도도 모르는 경우가 많습니다. 우선 패키지를 전혀 사용하지 않고 리액트로 간단한 웹페이지를 만들어 보도록 하겠습니다. 다음 경로에서 리액트 자바 스크립트 파일을 4개를 내려받습니다. https://unpkg.com/react@16.14.0/umd/react... 2022. 1. 19. 계정 생성 페이지구현 마지막으로 계정 생성코드를 작성해 보겠습니다.! 지금까지 TodoList를 작성하고, 로그인을 하고 로그아웃을 했지만 계정생성페이지를 만들지않아 계속 postman 을 통해서 계정을 만들어주었습니다.ㅠㅠ 계정생성이 불가능했으면 로그인 기능은 화중지병입니다. 따라서 이제 로그인, 유저에 대한 기능을 위한 계정 생성페이지를 구현해보겠습니다!! 로그인 하는 버튼 하단의 링크를 클릭해서 계정 생성 페이지로 라우팅 한 후 계정 생성 완료 시 로그인 페이지로 돌아가는 간단한 로직을 구현해 보겠습니다 계정생성 로직 ApiService에 signup 메서드를 추가해주고, 이 메서드를 이용해 백엔드의 signup 요청을 해주도록 하겠습니다. export function signup(userDTO){ return call.. 2021. 12. 16. 로그아웃과 글리치 해결 로그아웃 서비스 로그인 기능은 완료되었는데 로그아웃 기능이 현재 없습니다. 로그아웃 기능은 어떻게 만들까요? 우리는 로그인을 위해 엑세스 토큰을 로컬 스토리지에 추가했습니다. 로그아웃은 이를 반대로 해주면 됩니다. 로컬 스토리지에 존재하는 액세스 토큰을 제거하고 로그인 페이지로 리디렉트 하는것입니다. ApiService.js 비록 백엔드 서버에 요청하는 로직은 아니지만 코드관리를 위해 로컬 스토리지에 관련된 모든 것은 ApiService에 작성햬왔고 계속하겠습니다. signout 함수를 만들어보겠습니다. export function signout(){ localStorage.setItem(ACCESS_TOKEN, null); window.location.href = "/login"; } 그러나 아직 로그.. 2021. 12. 16. 액세스 토큰 저장 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 것이 저의 로직이됩니다. 백엔드에 API콜을 할 때마다 로컬 스토리지에서 액세스 토큰을 불러와 헤더에 추가해 줍니다. 첫 번째로 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 코드를 작성해 보겠습니다. apiservice.js 의 로그인하는 함수를 수정해 주어야 합니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { if(response.token){ //로컬스토리지에 저장 localStorage.setItem("ACCESS_TOKEN",response.token); //token이 존재하는 경우 Todo화면으로 리디렉트 w.. 2021. 12. 15. 이전 1 2 다음 728x90 반응형 LIST
