React9 [섞어마셔] 코딩알려주는 누나 스터디 팀 프로젝트 OT 취업준비를 하면서 코딩 관련 유튜브를 보다가 코딩 알려주는 누나(이하 "누님")의 React 스터디를 모집한다는 영상을 보았습니다. 저는 무언가 강제적으로 일을 줘야지 엄청나게 발전한다는 것을 알고 있으며 스터디는 React초보대상이었지만 마지막에 1주간 팀프로젝트를 진행한다고 하여 이 내용을 이력서에 추가해야겠다고 생각되어 신청하게 되었습니다. 그렇게 4주가 지나고 드디어 팀프로젝트 주간이 다가왔습니다. 처음에는 누님께서 프로젝트를 해야 하는 이유, 애자일 방법론 등등 프로젝트에 관한 설명을 해주시고 드디어 팀원을 만나는 시간이 왔습니다. 처음이라 어색했지만 지금 하는 프로젝트에서 프론트팀장을 맡아서 그런지 이런 상황에서 말을 꺼내야 할 것 같아서 저도 모르게 진행을 하게 되었습니다.ㅎㅎㅎㅎ 슬랙에서 .. 프로젝트/섞어마셔(shake_drink) 2024. 4. 16. 데이터받아올 때 특정 단어 색 변경하기 문제점 데이터를 받아와서 메시지를 출력하는데 특정 단어의 색만 변경을 해야했다. 한줄로 표현을 하면 아래와 같이 표현이 가능하다. 무엇을 할지명확해야 하고 하지만 객체로 데이터를 받아오는 경우 특정 단어의 색을 변경해야하는 방법을 몰랐다. { id: "time", message: [ `이제 본격적으로 습관을 구체화 시켜볼까요?`, `습관 약속은 시간, 장소, 행동으로 구분돼요.`, `그리고 그 약속은 \n1. 무엇을 할지 명확해야 하고\n2. 하고 싶도록 매력적이며\n3. 쉽게 할 수 있어야 하고\n4. 하고 난 뒤 만족스러워야 합니다.`, `최대한 4가지 원칙에 맞게끔 습관을 만들어 볼까요?`, `먼저 시간을 정해 볼게요!`, `다른 일에 방해 받지 않는 시간 혹은 매일 지키기에 수월한 시간으로 설정해.. 개발/React 2024. 3. 12. 프로젝트 초기 세팅 (with yarn berry, vit, react, typescript, emotion...) 새로운 프로젝트를 시작하면서 내가 자신이 없었던 프로젝트 초기 세팅을 드디어!! 새롭게 경험할 수 있었다. 이번에는 반드시 초기세팅에 대한 두려움을 없애버리고 자신감있게 초기 세팅을 할 수 있도록 정리를 해보았다. 스택 TypeScript: 정적 타입 분석을 통한 안정적인 코드 작성을 위해 사용 React: 컴포넌트 기반 개발 및 SPA 구축을 위해 사용 emotion css: 컴포넌트 기반 스타일링을 위해 사용 Redux Toolkit : 복잡한 상태 관리를 위해 사용 PWA: 네이티브 앱과 같은 사용자 경험을 주기 위해 사용 Axios: 간결한 http 통신 코드 작성을 위해 사용 Framer Motion: 리액트 기반 애니메이션 라이브러리로, 서비스 내의 다양한 애니메이션 구현을 위해 사용 yarn.. 개발 2024. 1. 29. 한 박스에서 이미지와 비디오 엘리먼트 서서히 변하게하기 문제 마우스를 올렸을 때 화면이 서서히 변하는 걸 하고 싶다. transition만 추가하면 될지 알았는데 생각보다 오랜 시간이 걸렸다. 스택 React, styeld component, typescript 코드 분석 관련없는 코드는 삭제하고 왼쪽화면 관련된 코드만 남겼다. 컴포넌트 화면에 마우스를 올리면 숫자가 1씩 증가하여 화면을 변경시키는 로직이다. const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = (event: React.MouseEvent) => { setTimeout(function () { setLeftNum(leftNum + 1); }, 100); return ( {leftScreenData.. 개발/개발일지 2024. 1. 22. 내가 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. react router 사용법 0. react router를 사용하는 이유 html css js는 html을 하나 더 만들면 그게 새로운 하나의 페이지가 되는데 react는 html파일을 하나만 사용한다. 그래서 react는 다른 페이지를 요청하면 내부에 있는 를 갈아치워서 보여주면 된다. -> 이걸 코드로 짜서 해도되지만 귀찮으니깐 react-router-dom이라는 외부 라이브러리를 설치해서 구현하는게 일반적이다. 1. 설치법 react-router-dom 홈페이지를 보면되지만 그냥 터미널에서 아래의 코드를 적어도된다. npm install react-router-dom@6 그 다음 index.js에 가서 BrowseRouter를 import해와서 App을 감싸면 된다. //index.js import { BrowserRouter.. 개발/React 2023. 8. 16. 이전 1 다음
