React

Visual Studio와 Yarn을 이용하여 React 어플리케이션을 처음으로 만들어보자.터미널에 다음과 같이 입력하여 보자.yarn create react-app react-study이번에 만든 앱의 이름을 react-study라고 지정한 것이다.이 패키지가 깔리는

Babel은 React에서 JSX로 작성된 문서를 JS로 바꾸어주는 역할을 하는 확장 프로그램이다.JSX이 무엇인가요?JSX는 Javascript + XML으로, 해당 문서 안에서 Javascript와 HTML을 동시에 작성할 수 있는 장점을 가지고 있다. 그런데 우리

React를 이용하여 간단한 익명게시판을 만들어보자.익명게시판에서 지원하는 기능은 다음과 같다.Dark ModeDark Mode와 Light Mode 조건부 렌더링 UI 구현LoadingLoading True : 로딩중일 경우, 로딩 이미지를 띄운다.Loaindg Fa

Component는 앱을 이루는 최소한의 단위이다. 이를 통하여, UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩을 할 수 있다. 그렇기 때문에 여러 명이 자신의 Component를 나누어 가져 편리하게 개발에 참여하여 서로 방

React를 이용하여 간단한 익명게시판을 만들었다. 이제 몇가지 기능을 추가하여서 더욱 익명게시판다운 모습을 만들어 보이도록 하자. 익명게시판에서 지원하는 기능은 다음과 같다.새로고침을 하면 새로운 게시글이 업로드된다.수동으로 조작하던 DarkMode를 진짜 버튼 구실

MPA는 Multiple Page Application으로, 여러 개로 구성된 웹 애플리케이션을 말한다. 새로운 화면을 요청할 때마다, 서버에서 준비한 화면을 보여줄 수 있다. 그러나, MPA의 단점이 있다.1\. 새로운 페이지를 받을 때마다 전체 페이지를 랜더링해야

다음 기능을 구현해보자.1\. 리액트 프로젝트에 라우터 적용하기2\. 페이지 컴포넌트 만들어보기3\. Route 컴포넌트로 특정 주소에 컴포넌트 연결해보기4\. Navbar을 생성하고, Link 컴포넌트를 이용하여 다른 페이지로 이동하고, Navbar을 페이지의 공통

먼저 React Router 라이브러리를 설치한다.그런 다음 Router가 잘 깔려 있는지 확인한 이후, index.js로 들어가 다음 사전작업을 마치자.

Real Dom의 사진이다 위의 과정은 우리가 일반적으로 웹을 보게 되는 과정을 나타낸 과정입니다. html, css를 사용하여 만든 파일이 브라우저를 통하여 보여지는 과정을 이렇게 나타내는 것이죠.그런데 문제가 있어요. Render Tree가 바뀔 때마다 전부, 모든

이제부터 최적화를 시작해봅시다! 어떤 부분을 미리 기억을 해서, 필요할 때 꺼내 쓴다는 형식으로 이해하기 쉽다.props가 새로 달라진다거나 state가 setState로 변하면 Component의 위와 같은 함수가 재생성된다. postList가 변하지도 않았는데, 이

컴포넌트는 Props가 변화하거나, setState로 변화하여서 re-render 되는 경우가 있따. 하지만 해당 컴포넌트에서 이러한 일이 일어나지 않고, 상위 컴포넌트에서 이러한 일이 일어난다면 하위 컴포넌트도 자동으로 re-render가 일어나는 경우가 있다. 나는

React에서 외부 정보를 사용하는 방법은 아래 두가지가 존재한다 1\. 자바스크립트의 fetch를 이용한다.2\. axios를 이용한다.axios가 1번보다 사용하기 편하고, 더 많이 사용되므로 라이브러리 설치 후에 이용하도록 하자.axios는 다음과 같이 사용할 수

리스트를 보여주는 화면에서, arrow를 앞 뒤로 왔다갔다하면 여러 개의 페이지가 보여지는 것을 말한다. 이를 한번 구현해보자.일단 useState를 하나 만들어야 하는데 다음과 같이 만들어 보자. ShowPostList.jsx에 다음 코드를 입력한다. paginati

상세 페이지의 API는 다음과 같다.https://reactapitest.pythonanywhere.com/api/posts/post 번호를 받아 그에 대한 상세 내용을 보여 주는 것.응답은 다음과 같다.이러한 글의 상세 내용을 서버로부터 받아와서 보이게 만들

1. 내가 작성한 글 서버에 넘기기 글 작성에 대한 API를 확인하고, 이에 맞추어서 한번 React 코드를 작성하여 보자! 요청 > https://reactapitest.pythonanywhere.com/api/posts/ 이 곳의 API에 우리가 작성한 글을 보

그동안 진행하였던 익명게시판 프로젝트를 최적화해보도록 하자.

캐싱에 대해서 자동적으로 다루고, axios를 통하여 데이터 패칭을 하면 우리가 데이터 필요할때마다 새로 얘가 데려옴 (새로고침을 해야함). 새로고침의 횟수를 몇초에 한번 이상 안하더라도 깨끗한 데이터로 가정할 수 있는 시간을 axios로 사용할 수 없다 (캐싱을 수행

이번주 나의 과제는 React로 카카오톡 로그인을 구현하는 것이다/먼저 Kakao Developer의 문서를 참고하여 카카오 로그인이 어떤 방식으로 이루어지는지 이해를 하기 위하여 공식 문서를 참고하였다.카카오 개발자 사이트 : 참고하기카카오 로그인은 카카오계정으로 다

React에서 생명주기란 , Component의 생성, 변경, 소멸과정을 뜻한다. reneder(), constructor(), getDerivedStateFormProps(), componentDidMount()함수들은 component의 생성과정에 속한다.생명주기를

이번에 카카오 로그인을 구현하기 위하여 백엔드와 프론트엔드 소통에 대해서 열심히 공부하고 있다.서로 아이피 주소를 공유하여 post 요청을 통하여 인가코드를 백엔드에 보내주려고 하였으나...자꾸 403 Forbidden 에러가 뜨면서 전송이 실패한다!!! 그 이유를 살

팀원들과 카카오 로그인 구현 중.. 인가코드를 자꾸 두 번 보내게 되는데, 그 원인을 몰라서 한참을 해메다가 UseEffect 때문에 이러한 문제가 발생되는 것을 알 수 있었다.왜 날...괴롭히는거임아무튼, useEffect의 기능을 다시 한 번 생각해보면서 이 문제를

var 변수를 사용하는 방법에 대해서 아래 코드를 보자.이미 varName이라는 변수를 선언하였는데, 200으로 다시 선언을 하고 있다. 이때, 콘솔창에 다음과 같은 경고가 뜬다.하지만 var 변수는 재선언, 재할당을 허용하기 때문에 경고 메세지가 출력되어도 페이지가

React를 공부하면서 가장 신기했던 것 중 하나가 바로 전개 연산자이다. 전개 연산자는 배열이나 객체 변수를 조금 더 직관적이고, 편리하게 합치거나 추출할 수 있게 도와주는 문법이다. 변수 앞에 ...를 입력하여 사용한다. (마침표 3개 입력) 이 전개 연산자는 배열

리액트를 공부하면서 낯설었던 것 중의 하나가 바로 화살표 함수이다. 화살표 함수는 ES6에 처음 등장하였고, 함수를 보다 간략하게 선언할 수 있다는 강점이 있다.화살표 함수는 callback 함수에서 this를 bind해야 한다는 문제도 발생하지 않는다. :)callb

배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 다만, 배열의 처음부터 마지막 순번까지 모두 작업하는 경우에는 forEach()함수를 사용하는 것이 간편하다. 다음 예시를 확인해보자. 두 코드를 비교해보면 차이점이 느껴

state는 하나의 컴포넌트 안에서 전역 변수처럼 사용할 수 있는 것이다. this.state.변수명=value와 같이 state를 직접 변경하면, render()함수를 호출하지 않아서, 화면에 보이는 state값은 바뀌기 전 상태로 남게 된다. setState() 함

우리가 왜 프론트엔드 개발자가 되는 것일까..!! 바로 눈에 보이는 웹을 멋있게 만들기 위해서이다. ㅎㅎ 이번에는 React에서 BootStrap을 이용해 보는 실습에 대한 기록을 하려고 한다.bootstrap을 react에서 사용할 수 있도록 패키지로 만든 것이 바로

get과 post를 axios를 이용하여 수박 겉햝기 식으로 공부했었는데 (..) 오늘에 와서 제대로 이 부분에 대해서 짚고 넘어가고 싶어서 포스팅을 작성하게 되었다.먼저, 자바스크립트의 내장함수 fetch를 이용하여 get을 실행해보고자 한다.fetch를 이용하게 되

자바스크립트는 비동기적으로 동작하기 때문에, 먼저 실행된 작업이 끝나지 않았더라도 다음 작업이 시작할 수 있다. 콜백 함수를 이용하면 특정한 코드에 순서를 정하여 원하는 시점에 실행을 할 수 있다. 예시를 살펴보도록 하자.logPrint라는 함수를 호출하는 데 파라미터

커링(Currying)은 함수의 재사용성을 높이기 위하여 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때에는 필요한 모든 파라미터를 한번에 넣어야 하지만, 커링을 사용하게 되면, 함수를 분리할 수 있으므로 파라미터도 나누어서 전달할 수 있다! plusN

쿠키란 사용자가 접속한 웹 사이트의 서버를 통하여 사용자 컴퓨터에 설치되는 정보를 말한다. 보통 크롬과 같은 웹 브라우저에 쿠키가 저장된다. 쿠키는 사용자 정보를 저장하거나, 마케팅을 위한 목적으로 사용될 수 있다. cmd창을 열어서 npm install react-c

라우팅이란, 호출되는 url에 따라서 페이지 이동을 시켜주는 것이다.react에서 view는 component를 사용하게 된다. react에서 라우팅을 지원하는 친구들은 많지만, 가장 많이 쓰이는 것은 단연 react-router-dom이다. 이것도 패키지이기 때문에,

get으로 가져온 유저 정보를 어떻게 마이페이지 화면에 띄워야 하나 매우매우 고민을 하던 시기가 있었다.. 이것을 도대체 어떻게 관리해야지 마이페이지 화면에 보여줄 수 있고, 로그인된 상태를 유지시킬 수 있을까?그러다가 구글링을 열심히 하면서 알아본 결과를 공유하고자한

현재 카카오 로그인을 통하여 마이페이지 구현을 완료해가던 중 리액트에서는 로그인 유지를 어떻게 할까에 대한 궁금증이 생겼다.구글링을 통해 공부한 내용을 정리해보고자 한다.로그인을 한다고 해서, 앱 내에서 로그인 상태가 유지되지 않는다.새로고침을 하면 스토어 값이 초기화

.

항상 react에서 yarn create react-app \[이름]만 했지, 각 코드가 무엇을 의미하는지 하나하나 뜯어볼 생각은 하지 않았던 것 같다.그래서 이번 기회에 뜯어보려고! 일단 어떤 파일 목록을 가지고 있는지 살펴보자.요렇게 생겼습니당.먼저 , App.js

함수형 컴포넌트의 특징을 한번 나열해보자.선언하기 편리하다메모리 자원을 덜 사용한다.Hooks라는 기능이 추가되면서, state와 라이프사이클 API의 사용이 가능해졌다. 클래스형 컴포넌트는 state기능과 라이프사이클 기능을 이용할 수 있으며, 임의 메서드를 정의할

props는 properties를 줄인 표현이다. 컴포넌트 속성을 설정할 때 사용하는 요소라고 할 수 있다.props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.props값은 함수의 파라미터로 받아 와서 사용할 수 있는데, 컴포넌트에서 pro

리액트에서의 state는 컴포넌트 내부에서 바뀔 수 있는 값이다. 전에 살펴보았던 props는 부모 요소에서 설정하기 때문에 읽기 전용만 되었는데, state는 이 친구와 다른 성질을 가지고 있다고 말할 수 있다. :) 전달받은 값을 state를 이용하여 어떻게 바꿀

이번에 useCallback과 useMemo Hook을 이용하면서 나의 React App에 달력까지 넣어서 과제를 마무리하고 싶어서 욕심을 좀 내봤다. 왜냐면 다음 과제때는 CRUD 구현해야 하기 때문...구현에 있어서는 아래 공식 문서를 참고하였다.https&#x3A

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 모든 것 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다. 그래서 컴포넌트라는 것이 새로 생겼어도, 컴포넌트에 이벤트를 설정할 수가 없지요. 그렇게 하면

오늘은 React의 든든한 국밥같은 친구 Ref에 대해서 정리해보자.JS를 이용하여 앱을 만들 때 getElementById와 같은 문법이 존재하였기 때문에 DOM의 요소를쉽게 스타일링하거나 지정, 지목할 수 있었다. 그런데 React에서도 이와 같은 작업을 하기 위해

컴포넌트 여러개에서 비슷한 기능을 가지고 동작하는 함수가 있을 때 나의 hook으로 제작하여 만들어낼 수 있다. 이에 관련된 예시를 수행해보자!요거는 새로 만든 Hook이다. 이것을 다른 js파일에서 import 하여 사용하면된다.다른 개발자들이 만든 Hook도 참고해

먼저 내가 만들어두었던 App에 어떠한 문제가 있는지 알아보기 위해서 2500개의 Todo를 임의로 집어넣었다. 엄청 느리다..진짜 엄청엄청..ㅠㅠ이전에 미리 갈아놓은 크롬 개발자 도구로 어떤 성능을 가지고 돌아가고 있는지 확인해보자.헐..랜더하는데 600ms 대가 나

useNavigate는 Link 컴포넌트를 사용하지 않고, 다른 페이지로 이동해야 할 때 사용가능한 Hook이다.navigate의 함쉐서 숫자 타입의 파라미터를 받았을 때 -1이면 뒤로 한번 가고, -2이면 뒤로 두번 갑니다. 양수라면 반대로 앞 페이지로 넘어가겠지요!

카테고리별로 최신 뉴스를 보여주는 뉴스 뷰어를 API를 활용하여 수행해보도록 하자! 먼저 API 호출을 잘 하기 위해서는 React의 비동기적인 작업에 대해서 이해하고 넘어갈 필요가 있다.웹 애플리케이션을 만들다 보면 시간이 걸리는 작업이 있습니다. 예를 들어 웹 애플

https://newsapi.org/s/south-korea-news-api해당 API를 이용하여서 뉴스피드를 만들어 볼 것이다.사용하게 될 API는 두가지 종류이다.https://newsapi.org/v2/top-headlines?country=kr

React로 앱을 제작하다 보면, 전역변수를 사용하지 않아서 불편할 때가 많다.내가 지금 하고 있는 React Todo App 만들기 또한 여러 가지 컴포넌트를 쓰고 싶은데 App.js에다가 모든 정보를 다 몰아넣어 놓고 애플리케이션을 만들려다 보니까 랜더링이나 컴포

나의 Todo App에 어떤 전역상태 관리가 필요한지 고민을 해보았다.고민 끝에 내가 전역상태로 관리해야 할 내용들은 아래와 같았다.날짜를 전역상태로 관리하는 이유는 TodoApp의 목록을 날짜에 따라서 다르게 보이게 할 예정이기 때문이다. 현재는 모든 KEY를 TOD

해당 문법을 사용할 때 나는 처음에 음~ 그냥 화살표 함수 작성해야지 하고 단순하게 작성했더니 자꾸 빨간불이 떴다.일반적으로 내가 알고 있던 화살표 함수의 형식은 아래와 같았길래, 헷갈렸던 것이다.하지만 객체 리터럴 형식을 반환하기 위해서는 괄호를 꼭 써야 한다.tod

TodoApp개발일지 github : https://github.com/eugene028/TodoApp_Study_React.git(이번 버전은 TodoApp 폴더이다.)참고로 이번 todoApp은 tailwind를 이용한 Css로 두번째 폴더와는 다르다.인프

지금 로직js 변수에 일단 accesstoken 저장함 -> 새로고침한다거나 하면 없어진다 .만약 이 accesstoken이 만료되어서 none이다?그럼 refreshtoken을 받고, refreshtoken과 DB 비교해서 일치한다면 새로운 accesstoken 발급

리액트를 처음 시작하게 된 계기는 멋쟁이사자처럼을 통해서 알게 되었다.멋쟁이 사자처럼의 강의는 대부분 함수형 컴포넌트를 사용하였고, 나는 리액트에 그러한 컴포넌트의 종류만 존재하는 줄 알았다.하지만 이번 여름방학에 리액트에 대해서 차근차근 공부하다가 보니까, 함수형 컴

https://www.daleseo.com/react-hook-form/

공통되는 컴포넌트를 어떻게 하면 작성을 줄일 수 있을까? 그동안 여러 화면에서 공통으로 랜더링 해야 하는 컴포넌트가 존재한다면 해당 컴포넌트를 랜더링해야 하는 컴포넌트에 한번 더 작성하는 형식으로 처리하였다. 그러나, 이렇게 작성하게 되면 아래와 같은 문제점이 존재

그동안 작은 프로젝트를 수행하면, api 주소를 코드 안에 직접 넣었다.그러다 보니 api url을 작성할 때 헷갈리는 부분이 많았고, 재사용에 대한 내용은 당연히 고려할 수 없었다.그동안 내가 알던 axios는 단순히 axios가 아니다! 라는 것을 깨닫게 되었고,

컴포넌트의 DOM요소를 사용하고 싶을 때 className이나 id를 지정하여 DOM을 불러오고, 그에 맞는 처리를 진행할 수 있다. 하지만, useRef를 이용해서도 DOM요소에 대한 이벤트를 제어하거나 생성하는 것이 유용하기 때문에 이에 대한 글을 작성해 보려 한다

항상 웹 컴포넌트에 대한 ui를 구성하는 것은 styled-component를 이용하였다. 이번에는 emotion을 사용하게 되면서 커비샵에서 이용하게 될 UI들을 세팅한 과정에 대하여 기록해보고자 한다. 1. emotion이란? emotion은 styled-compo

이번 커비샵 프로젝트에서는 React-Query를 이용하여 데이터를 관리를 하기로 하였다. 그래서 이번 포스팅에서는 React-Query를 이용하여 커비샵의 API를 어떻게 관리하는지에 대하여 정리해보고자 한다. 1. QueryClient로 캐시 관리하기 해당

최근 SWR과 더불어 주목받고 있는 Recoil을 이용하여 커비샵의 장바구니 상태를 관리하게 되었다. 먼저 store/cart.ts경로를 생성하고 다음과 같이 Cart에 대한 상태를 만든다.TCart 타입의 배열로 cart의 state를 관리할 수 있도록 만든 것이다.

이번에 GDSC에서 스터디 출석체크/수강신청에 사용하는 서비스인 Imhere!의 디자인, 그리고 프론트엔드 기능 리팩토링을 맡게 되었다. 기존 Imhere 서비스는 백엔드 개발을 하시는 분 께서 프론트엔드 개발하실 분을 따로 구하지 않고 혼자서 1인 개발로 진행하신 것

이번에 Imhere을 버전 2로 배포했고, 사실 버전관리를 하고 싶었으나 나중에 알아봐야지~ 히힛 하고 미뤄놨던 것을 제대로 마무리하고싶어서 공부하는김에 이 글을 쓰게 되었다. 다음에 과제 검사 기능까지 추가하게 되면 버전3으로 배포하게 될것 같아서 미리 버전관리를 하

6월 말부터 8월 말까지 작은 웹앱 사이드프로젝트를 진행하게 되었다. 이번에 프론트엔드 리드를 맡게 되어서 프로젝트 세팅부터 프론트엔드 전반적인 관리는 내가 맡게 되었다. 당연히 리더로써..컨벤션을 정하고 어떤 것으로 개발을 진행할 것인지 정하는 것이 중요하다. 하고

나는 플러터는 물론이고, 네이티브를 잘 다루지 못한다. 그런데 ios 환경에서 볼 법한 반응형을 구현하라는 지령이 떨어진 것이다..! 내가 구현해야 하는 것은 바로 아래 UI이다. 하단에 있는 input 창을 누르게 되면, 키보드가 슈루룩... 올라가면서 input