본문 바로가기

분류 전체보기

React 리액트 투두리스트 앱 (+ Redux, Styled-component)
프로젝트 회고 🌊 2023. 6. 29. React 리액트 투두리스트 앱 (+ Redux, Styled-component) 💻 Project name: Todo-List 🕚 Project Execution Period: 2023.06.27 ~ 2023.06.29 항해99에서 주특기 리액트 2주차 과제로 다른 팀원 한명과 간단한 투두리스트 앱을 만들었다. 과제에서 요구된 사항은 할 일 추가 / 조회/ 삭제 / 수정 기능이었고, 추가적으로는 할 일 상세 내용 업데이트와 반응형 웹을 구현했고 사이드바에서는 오늘 날짜를 띄웠다. 배포: https://todolist-react-jade.vercel.app/ (vercel) https://github.com/nayoung3669/todolist_react GitHub - nayoung3669/todolist_react: 리액트 리덕스 투두 앱 ✍🏻 (페어) 리액트 리덕스 투두 앱 ✍🏻..
[리액트를 다루는 기술] 17. 리덕스로 리액트 앱 상태 관리하기
Computer Programming/[리액트를 다루는 기술] 2023. 6. 27. [리액트를 다루는 기술] 17. 리덕스로 리액트 앱 상태 관리하기 이 책에서는 Ducks 패턴을 사용해 액션타입, 액션 생성함수, 리듀서 함수를 기능별로 하나의 파일에 몰아서 작성하는 방법을 사용하고 있다. 이렇게 카운터 기능 파일 1개, todo 기능 파일 1개를 만들어 각각 액션 타입, 액션 함수, 리듀서를 몰아넣는다. todos 모듈 만들기! // modules/todos.js //액션 타입 정의 const CHANGE_INPUT = "todos/CHANGE_INPUT"; const INSERT = "todos/INSERT"; const TOGGLE = "todos/TOGGLE"; const REMOVE = "todos/REMOVE"; //액션 생성 함수 export const changeInput = (input) => { return { type: CHANGE..
리덕스 프로젝트 구조 - Dumb & Smart (Presentational 컴포넌트와 Container 컴포넌트의 분리)
Computer Programming/React 2023. 6. 27. 리덕스 프로젝트 구조 - Dumb & Smart (Presentational 컴포넌트와 Container 컴포넌트의 분리) 리액트는 컴포넌트를 통해 UI를 이리저리 조합하여 잘 동작하게 하기 위해 만들어졌다. 항상 컴포넌트의 재사용을 고려하고, 이러한 패턴들에 대해 공부하고 효율적이면서 가독성 좋은 프로젝트를 만들어야한다 👻 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 구조는 특히나 리덕스를 사용하는 리액트 프로젝트에서 자주 사용되는 구조이다. 이 구조는 리덕스의 창시자인 Dan Abramov가 고안했다. 생각해보면 얼마전에 만든 Todo List나 Pagination List 도 간단하지만 이 구조의 일부분을 무의식적으로 사용하고 있었다...! 물론 강의에서 그렇게 알려줘서 자연스럽게 사용한거겠지만 stateless functional component를 dumb(Presentational) component라고 ..
Vercel 배포 시 새로고침 404 Error (Vite, 라우터 사용)
Computer Programming/Browser 2023. 6. 27. Vercel 배포 시 새로고침 404 Error (Vite, 라우터 사용) 스터디를 진행하면서 했던 repository를 Vercel을 통해 배포하고 나서 도메인에 들어가 실행해봤다. 페이지네이션을 구현했기 때문에 2페이지에서 새로고침해도 여전히 2페이지를 새로 보여줘야하지만, 예상치 못하게 404 에러가 떴다. 확인해보지는 않았지만 도 작동하지 않는다고 함... 스터디 팀장님이 에러를 발견하셨고 해결법도 친절히 알려주셨다. 새로고침을 통해 서버에 접근하게 되고, 이 때 SPA인 만큼 하나의 .html 안에서 라우팅 해줘야하는데 서버 경로에 따른 페이지 설정이 되지 않는 상태라서 우리 프로젝트의 .html을 가리키지 못한 상황이었다. 그래서 어느 경로로 통하던 하나의 .html을 가리킬 수 있도록 지정해주어야 한다. // vercel.json { "routes": [ { "ha..
타입스크립트(TypeScript)의 특징
Computer Programming/Javascript 2023. 6. 27. 타입스크립트(TypeScript)의 특징 타입스크립트는 2012년 마이크로소프트가 발표한 자바스크립트를 기반으로 '정적 타입 문법'을 추가한 프로그래밍 언어이다. 타입스크립트는 매우 흔하게 사용되고 있어 최근 프론트엔드 개발자를 구인할 때 우대가 아닌 필수요소가 되었다고 한다. 대형 기업들은 타입 스크립트를 활발히 사용하고 있으며 그렇지 않은 기업들도 타입스크립트 사용을 고려하고 도입하고 있다. 1. 타입스크립트의 특징 1) 컴파일 언어, 정적 타입 언어 자바스크립트는 인터프리터 언어 (동적 타입)로, 런타임 시 오류를 발견할 수 있다. 그러나 타입스크립트는 정적 타입의 컴파일언어이며 런타임이 아닌 그 전에 타입스크립트 컴파일로 또는 바벨을 통해 자바스크립트 코드로 변환된다. 즉 명시적으로 변수, 함수, 객체등의 타입을 선언해야하고 타입 오류를..
React 기능 구현 스터디 - 1. 페이지네이션 (리팩토링 회고)
프로젝트 회고 🌊 2023. 6. 27. React 기능 구현 스터디 - 1. 페이지네이션 (리팩토링 회고) 스터디에서 한 React에서 Pagination 구현하기 과제를 리팩토링해보았다. 스터디 팀장님의 피드백과 팀원들의 코드를 살펴보며 추가하면 좋을 점을 정리해서 issue에 작성해서 올렸다. react-router-dom의 params를 사용하여 페이지 이동하기 Custom hook으로 usePromise.js 만들어 재사용하기 fetch 시에 5페이지씩 가져오기 (params : random -> asc 변경) 이미지 onLoad 속성 추가하기 이제 리팩토링을 해보자 🐱 1. react-router-dom 의 useParams를 통해 라우팅을 구현 이를 통해 유저가 3 페이지 혹은 4페이지에 새로고침을 하더라도 그 페이지에 계속 머물러있게 하는 기능 //App.js function Nav() { ret..
TIL - Redux 기초
Computer Programming/React 2023. 6. 26. TIL - Redux 기초 redux dir : 리덕스 관련 코드를 몰아넣음 ㄴ modules dir : state의 그룹 ㄴ config dir: 리덕스 설정 관련 파일 전부 ㄴ configStore.js : 중앙 state 관리소 설정 코드 //configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; import counter from "../modules/counter"; //app 전체에서 counter라는 reducer를 쓸 수 있음 const rootReducer = combineReducers({ counter, }); const store = createStore(rootReducer); export defa..
WIL - Virtual DOM
프로젝트 회고 🌊 2023. 6. 26. WIL - Virtual DOM https://legacy.reactjs.org/docs/faq-internals.html Virtual DOM and Internals – React A JavaScript library for building user interfaces legacy.reactjs.org
스터디 발표 회고 2023.06.21
프로젝트 회고 🌊 2023. 6. 24. 스터디 발표 회고 2023.06.21 🎤 오늘 한 발표 CS정리 - 스코프 (완료 ✅) - 호이스팅 (완료 ✅) - 클로저 (완료 ✅) 리액트 다루는 기술 - styled-css , scss (완료 ✅) - react-virtualized (완료 ✅) - Todo List (완료 ✅) 💻 후기 소현님이 반복문의 속도 차이에 대해 설명해주셔서 알고리즘 문제 풀 때 같이 고민했던 속도에 대한 설명을 들었다. for문과 reduce, forEach 순으로 빠르고 map은 모든 원소를 돌면서 원하는대로 가공해서 내보내기 때문에 시간이 조금 더 걸린다. 그리고 하루님의 코드 리펙토링하신 것을 보고 자신이 작성한 코드를 어떻게 하면 더욱 효율적으로 만들 수 있는지에 대해 고민하는 것이 중요하다는것을 느꼈다. 다른 사람의 코드를 많이 참고해보고, 어떤 ..

티스토리툴바