개발/React13

• 

  Nickname 설정을 위한 유효성 검사(이모지 완전히! 막기) Tars프로젝트를 진행하면서 Nickname의 유효성 검사 함수를 만들어야 했는데 생각보다 시간이 많이 들어가서 블로깅을 해보았다. 특히 이모지를 input에 입력조차 안되게 해야했는데 input.length가 자꾸 생성되어서 곤욕스러웠다. 기획에서 요구한 Nickname 설정 규칙은 다음과 같다. 허용 한글, 영어, 특수 문자, 숫자 허용 외자(귤, ㅎ) 허용 닉네임 중복 허용 제한 띄어쓰기 불가 - 띄어쓰기 막아버리기 이모지 불가능 - information에 “이모지는 사용할 수 없어요“ 빨간색으로 변경, 이모지 지우면 기존으돌아감 8자 제한 - 8자초과해서 입력 안되도록 공란 - 확인 버튼 비활성화 닉네임 중복 허용하기 때문에 onChange가 될때마다 유효성검사가 되도록 원하였고 8자 제한을 하며.. 개발/React 2024. 3. 13.

• 

  마크업형식의 데이터 받아와서 보여주기 문제점 좌측의 사진처럼 메시지가 string형식으로 올 때도 있지만 우측의 사진처럼 마크업형식으로 보내야할 필요가 있었다. 2024.03.12 - [개발/React] - 데이터받아올 때 특정 단어 색 변경하기 이전의 블로깅한 것과 비슷하게 마크업형식으로 데이터를 보내고 dangerouslySetInnerHtml을 사용해서 표현하고자 하였다. 해결책 message를 string형식이지만 마크업형식으로 데이터를 전달했다. dangerouslySetInnerHTML를 사용하면 HTML으로 작동되기 때문에 HTML형식에 맞는 style을 주입하였다. { id: 0, message: '', }, dangerouslySetInnerHTML 출력 PS 대표 사진에 있는 것처럼 하기 위해서는 상당히 긴 데이터를 보내야.. 개발/React 2024. 3. 13.

• 

  데이터받아올 때 특정 단어 색 변경하기 문제점 데이터를 받아와서 메시지를 출력하는데 특정 단어의 색만 변경을 해야했다. 한줄로 표현을 하면 아래와 같이 표현이 가능하다. 무엇을 할지명확해야 하고 하지만 객체로 데이터를 받아오는 경우 특정 단어의 색을 변경해야하는 방법을 몰랐다. { id: "time", message: [ `이제 본격적으로 습관을 구체화 시켜볼까요?`, `습관 약속은 시간, 장소, 행동으로 구분돼요.`, `그리고 그 약속은 \n1. 무엇을 할지 명확해야 하고\n2. 하고 싶도록 매력적이며\n3. 쉽게 할 수 있어야 하고\n4. 하고 난 뒤 만족스러워야 합니다.`, `최대한 4가지 원칙에 맞게끔 습관을 만들어 볼까요?`, `먼저 시간을 정해 볼게요!`, `다른 일에 방해 받지 않는 시간 혹은 매일 지키기에 수월한 시간으로 설정해.. 개발/React 2024. 3. 12.

• 

  react-redux와 비교하며 배우는 Redux toolkit 기초 사용법 Tars프로젝트를 하면서 유저의 정보를 저장할 전역 상태가 필요해서 redux toolkit의 필요성을 느끼게 되었고 여러 강의를 찾다가 근본 강의인 생활코딩님의 유튜브 강의를 들으면서 정리한 내용이다. redux -> react-redux -> reduxjs/toolkit 순서로 공부를 해서 이전에 배운 react-redux와 비교를 하면서 정리를 하였다. 생활코딩 유튜브 React-redux 1) react-redux로 import 해오는 것들 import { createStore } from 'redux'; import { Provider, useDispatch, useSelector, connet } from 'react-redux'; createStore : store를 만들 때 사용 Provi.. 개발/React 2024. 3. 4.

• 

  Progressbar 만들기(with React, emotion) CSS 부모 div는 width 100%으로하고 자식 div는 width에 변화를 주어서 progressbar를 만들려했다. progress: (percentage?: number) => css` width: 100%; height: 4px; background-color: ${theme.color.button_disabled}; & > div { height: 4px; width: ${percentage}%; background-color: ${theme.color.main_blue}; } `, 로직 프로젝트에서 11번 버튼을 누르면 100%가 채워져야 했다. const [percentage, setPercentage] = useState(100 / 12); const handleProgress = (.. 개발/React 2024. 2. 20.

• 

  내가 React를 선택한 이유 1. React란 무엇인가. React는 웹 개발에서 중요한 자리를 차지하고 있는 JavaScript 라이브러리이다. 주로 SPA (Single-Page Application)의 사용자 인터페이스를 구축하는 데 사용된다. React는 페이스북의 소프트웨어 엔지니어인 Jordan Walke에 의해 처음 개발되었으며, 2013년에 페이스북에 의해 공개되었다. 이후로 전 세계적으로 수많은 프로젝트와 애플리케이션에서 중요한 역할을 담당하고 있다. 2. 리액트를 선택한 이유 0) 쉽다 JS만을 사용하여 React를 쉽게 배우고 웹 및 모바일 프로그램을 개발할 수 있다. JS만을 사용해도 되지만 HTML과 JS의 혼합된 JSX 구문을 사용하면 휠씬 쉬워진다. 1) 강력한 커뮤니티와 생태계 많은 회사와 사람들이 사용.. 개발/React 2023. 11. 25.

• 실시간 데이터가 중요하면 react-query 사용이유 몇초마다 자동으로 데이터 가져오게 하기 실패시 재시도 알아서가져오기 ajax 재요청 쉽게 가능 다음 페이지 미리 가져오기 ajax 성공/실패시 쉽게파악가능 결론 : 실시간 데이터가 필요한 사이트에서 사용하자. 설치 및 셋팅 방법 터미널에서 아래 코드를 친다. npm install @tanstack/react-query index.js파일 열어서 아래 코드를 입력해준다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query' //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getElementById('root').. 개발/React 2023. 8. 26.

• 

  무한 props 없애기 Redux Redux가 뭔데 왜 쓰는데 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. store.js에 state들을 보관하고 다른 컴포넌트에 쏴줄수있다. 사이트가 커지면 유용하게 써먹을 수 있다. Redux 설치 및 셋팅 Redux 설치 아래의 코드를 터미널에 입력하면된다. npm install @reduxjs/toolkit react-redux redux toolkit이라는 라이브러리를 사용할 건데 redux의 문법을 쉽게 만드는 라이브러리이다. 설치하기전에 "react" "react-dom" 의 버전이 18.1.x 이상인지 확인하자. 확인법은 package.json에서 확인가능하다. Redux 셋팅 아무곳에 store.js 파일을 만들고 아래 코드에 복붙해준다. 여기가 바.. 개발/React 2023. 8. 23.

• 

  props가 귀찮다면 Context API (이거보단 Redux가 좋아) props는 무조건 부모에서 자식으로 자료를 옮겨줘야하는데 컴포넌트가 많아진다면 복잡해 질 수 있다. 그래서 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 여기선 Context API을 사용해보자. 사용법 세팅법 createContext를 import를 해준다. React.createContext()함수를 가져와서 context1으로 만들어준다. context는 state보관 창고라고 생각하면된다. (App.js) import { useState, createContext } from "react"; export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12.. 개발/React 2023. 8. 23.

• 

  Lifecycle과 useEffect Lifecycle과 useEffect가 뭔데 컴포넌트에도 Lifecycle이라는 개념이 있다. 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있다. (전문용어로 unmount) 이걸 왜 배우냐면 생성될 때 실행되는 코드 재렌더링될 때 실행되는 코드 삭제될 때 실행되는 코드 를 설정할 수 있기 때문이다. (이런 코드를 Lifecycle hook이라고 한다.) 또한 useEffect는 컴포넌트안의 html를 렌더링 이후에 동작한다. 그래서 화면에 빨리 뜨게 설정도 가능하다. 그니깐 useEffect는 나중에 실행되도 괜찮은 쓸데없는 것들을 넣어놓는 역할도 한다. // 겁나 느리게 html 렌더링된다. functio.. 개발/React 2023. 8. 18.