Home AboutMe Blog Guest

© 2025 Sejin Cha. All rights reserved.

Built with Next.js, deployed on Vercel

역수직구조/

🐣

[Frontend] 참고 자료

🐣

[Frontend] 참고 자료

Repo - 어딜나가조 팀 제공!! 참고 레포!

checkhaebang/deo.checkhaebang.com

방 구할 땐? 뿌웅🤭. Contribute to checkhaebang/deo.checkhaebang.com development by creating an account on GitHub.

checkhaebang/deo.checkhaebang.com

https://github.com/checkhaebang/deo.checkhaebang.com

checkhaebang/deo.checkhaebang.com

2. React 코딩 규칙

https://velog.io/@gwak2837/React-%EC%BD%94%EB%94%A9-%EA%B7%9C%EC%B9%99

3. React 파일 구조

파일 구조 - React

React는 파일을 어떤 식으로 폴더에 분류할 것인지에 대해서 제시하고 있지는 않습니다. 그러나 React 생태계 내에서 고려할만한 몇 가지 인기 있는 일반적인 접근법들이 있습니다. 파일의 기능이나 라우트에 의한 분류 프로젝트 구조에 대한 일반적인 방법 중 하나는 CSS, JS 그리고 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법입니다.

https://ko.reactjs.org/docs/faq-structure.html

4. React 화면 전환 애니메이션

React-Router-DOM v5 Route 전환 애니메이션 처리

React로 포트폴리오페이지 UI 를 개선하는 작업 내용 중 react-router가 5버전으로 업데이트됨에 따라 route 화면 전환 애니메이션을 적용한 내용을 블로그에 남기려고 한다. 사용한 라이브러리는 다음과 같다. - React 16.8.6 - React-Router-DOM 5.0.0 - React-Transition-Group 먼저 react-router 라이브러리를 사용하기 위해 router를 최상위 컴포넌트에 정의한다. 모든 컴포넌트에서 router에서 상속받는 props인 location, history, match를 사용하기 위해서는 최상위컴포넌트에 router를 사용하는게 올바르다.

https://medium.com/@wdjty326/react-router-dom-v5-route-%EC%A0%84%ED%99%98-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%B2%98%EB%A6%AC-935dfc6cc475

React-Router-DOM v5 Route 전환 애니메이션 처리

5. 라우팅할 때 Path를 이용하는 방법, Query String을 이용하는 방법

React | Router : URL로 parameter 전송하기

라우터를 이용하여 경로를 설정할 수 있으니 이제 url로 파라미터를 전송하는 것이 가능 해진다. path와 query string을 이용하여 파라미터를 전송하여 라우팅된 페이지에서 해당 파라미터를 받아서 사용해보자. 전송 방법은 node.js와 동일하다. 라우팅을 진행할 때 라우터 경로를 '/:key'로 지정하면 해당 위치의 경로에 value를 넣어 파라미터를 전송할 수 있다.

React | Router : URL로 parameter 전송하기

https://gongbu-ing.tistory.com/44

React | Router : URL로 parameter 전송하기

6. PWA 간단 소개글

React로 프로그레시브 웹 앱(Progressive Web App) 만들기

최근 설문조사에 따르면 65%의 미국 사용자들이 한 달 동안 설치하는 모바일 앱의 개수가 0개라고 한다. 앱의 홍수 속에서 사용자들은 갈수록 앱을 설치하는 것에 보수적으로 변하고 있다. 한편 모바일에서 웹을 사용하는 것은 매우 불편하다는 인식이 팽배해 왔다. 잦은 로딩과 느린 작동속도, 모바일에 최적화되지 않은 화면 등은 고질적인 문제이며, 무엇이든 타이핑을 통해 입력해야 하는 환경이 수많은 좌절을 불러왔다.

React로 프로그레시브 웹 앱(Progressive Web App) 만들기

https://chaewonkong.github.io/posts/pwa.html

React로 프로그레시브 웹 앱(Progressive Web App) 만들기

7. Gatsby기반의 React 블로그 프로젝트

누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기 - 구름EDU

나만의 기술 블로그를 개발하여 운영하고 싶으신 분 - 프론트엔드 라이브러리인 React에 대한 지식이 어느정도 있는 분 - 동영상보다 글로 된 설명으로 학습하는 것이 더 효과적이신 분 글을 작성하며 그 내용을 리마인드 할 수 있을뿐더러 발전 과정을 기록으로 남길 수 있기 때문입니다 하지만 실제로 시작하려고 하면 얼마 가지 못해포기하는 경우가 다반사입니다 저도 그런 개발자 중 한 명이었기에 알고 있죠 :) 이 상황에서는 아래 명언이 제일 적합한 것 같습니다 "시작이 반이다" 뭐든지 제일 처음이 가장 어려운 법입니다 기술 블로그도 마찬가지로 어떻게 시작해야 할지몰라서 포기하는 경우가 대부분이죠 하지만 블로그 개발부터 검색 엔진 최적화까지도움받을 수 있는 길잡이가 있다면 어떨까요?

누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기 - 구름EDU

https://edu.goorm.io/learn/lecture/25881/%EB%88%84%EA%B5%AC%EB%82%98-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C-%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8B%A4-react-%EA%B8%B0%EB%B0%98-gatsby%EB%A1%9C-%EA%B8%B0%EC%88%A0-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0

누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기 - 구름EDU

8. React Redux 활용하기

가장 핫한 FE 라이브러리🔥, React 가지고 놀아보기 - 구름EDU

React를 활용하여 웹 개발을 하고 싶어하시는 분 - 단순 HTML, CSS, Javascript로 웹 개발하는 데 질리신 분 - 동영상보다 줄글로 된 설명으로 학습하는 것이 더 효과적이신 분 그런 고민으로부터 나온 강의가 바로 가장 핫한 프론트엔드 라이브러리🔥, React 가지고 놀아보기! (실제로 React의 인기는 엄청나게 높습니다) 1. React 기초 문법 2.

가장 핫한 FE 라이브러리🔥, React 가지고 놀아보기 - 구름EDU

https://edu.goorm.io/learn/lecture/16422/%EA%B0%80%EC%9E%A5-%ED%95%AB%ED%95%9C-fe-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-react-%EA%B0%80%EC%A7%80%EA%B3%A0-%EB%86%80%EC%95%84%EB%B3%B4%EA%B8%B0

가장 핫한 FE 라이브러리🔥, React 가지고 놀아보기 - 구름EDU

9. 리덕스 패턴

notion image

Presentational and Container Components

Update from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don't suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I've seen it enforced without any necessity and with almost dogmatic fervor far too many times.

Presentational and Container Components

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Presentational and Container Components

10. immutable.js와 immer.js 차이

immer.js 를 통한 넘나리 쉬운 불변성 관리

이전에 올린 튜토리얼인 React ❤️ Immutable.js - 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 에서는, 리액트에서 왜 불변성을 유지하는것이 중요한지 알아보았고, Immutable.js 라이브러리를 사용하여 불변성을 조금 더 쉽게 관리하는 방법을 알아보았었습니다. Immutable.js 는 자바스크립트 진영해서 불변성 관리의 대명사라고 할 수 있을정도로 압도적인 다운로드 수를 가지고 있습니다.

immer.js 를 통한 넘나리 쉬운 불변성 관리

https://react-etc.vlpt.us/02.immer.html

11. 헷갈리지 말자... ^^

notion image

handleAction(s)

If a function is passed, it is used to handle both normal actions and failed actions. (A failed action is analogous to a rejected promise.) You can use this form if you know a certain type of action will never fail, like the increment example above.

handleAction(s)

https://redux-actions.js.org/api/handleaction

handleAction(s)

12. useMEMO

[짤막글] useMemo를 사용해보자

안녕하세요. 김용성입니다. 오늘은 react 생태계에서 렌더링 최적화를 위해 사용되는 hook인 useMemo 에 대해서 알아보겠습니다. 많은 분들이 useState, useEffect 같은 hook에 대해서는 익숙하지만 useMemo, useCallback에는 익숙하지 않은 것 같아서 이렇게 포스팅을 결정하게 되었습니다. 이번 포스팅에서는 useMemo를 중점적으로 다룬 뒤 다음 포스팅에서 useCallback을 다뤄보도록 하겠습니다. 그럼 시작해보겠습니다. (이해하는 데에 도움을 주는 컨텐츠를 제공해주신 개발자 이화랑님께 감사드립니다.)

[짤막글] useMemo를 사용해보자

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-useMemo

[짤막글] useMemo를 사용해보자

13. Redux 공식문서 FAQ

FAQ 색인 | Redux

https://ko.redux.js.org/faq

14. Sass를 활용 및 styled-components를 활용한 방법들. (Button/size 등등 여러 가지 필수적인 요소)

1. Sass : 버튼 생성하기 - 컴포넌트 스타일링 | 벨로퍼트

Sass (Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다. 이 튜토리얼에서는 Sass 의 기초적인 내용만 다루게 됩니다. 만약에 Sass 에 대해서 더 제대로 알아보시고 싶다면, 벨로퍼트님이 쓴 포스트와 Sass 가이드 를 참고해보시는것을 권장드립니다.

1. Sass : 버튼 생성하기 - 컴포넌트 스타일링 | 벨로퍼트

https://agal.tistory.com/143?category=759646

1. Sass : 버튼 생성하기 - 컴포넌트 스타일링 | 벨로퍼트

15. Quill 라이브러리 관련

이미지 드롭으로 첨부할 수 있게 하는 코드

ReactQuill Typescript with IE11, iOS, Korean Support

ReactQuill Typescript with IE11, iOS, Korean Support by gimdongwoo using @types/react, @types/react-dom, axios, react, react-dom, react-dropzone, react-quill, react-scripts-ts

ReactQuill Typescript with IE11, iOS, Korean Support

https://codesandbox.io/s/qv5m74l80w?from-embed=&file=/src/index.tsx

ReactQuill Typescript with IE11, iOS, Korean Support

본문 값 가져오기? 관련

React 게시판 만들기 : React-Quill (4)

리액트 에디터로 Quill을 사용하기로 했다. 무료로 사용 가능하다. 우선 react-quill을 설치한다. npm install react-quill package.json 파일 dependencies 에 아래와 같이 설치됨 확인!

React 게시판 만들기 : React-Quill (4)

https://bigexecution.tistory.com/6

React 게시판 만들기 : React-Quill (4)

react-quill 공식 문서

zenoamaro/react-quill

A Quill component for React. See a live demo or Codepen. This is the documentation for ReactQuill v2 - Previous releases: v1 💯 ReactQuill v2 beta period ReactQuill 2 is here, baby! And it brings a full port to TypeScript and React 16+, a refactored build system, and a general tightening of the internal logic.

zenoamaro/react-quill

https://github.com/zenoamaro/react-quill#with-webpack-or-create-react-app

zenoamaro/react-quill

16. 첨부 파일 처리 방법

ReactJS에서 파일 다운로드 처리 방안

사용하면서 간간히 만나는 문제들을 풀어가고 있는데, API에서 DOWNLOAD를 구현하고 React에서 해당 결과를 받아 보니 처음 보는 ReadableStream 가 튀어 나왔습니다. 처리 방법은 여러가지가 있었는데, 우선 나는 다음과 같이 처리 했습니다. ReadableStream을 blob으로 변경하여 file-saver 전달 하였습니다.

ReactJS에서 파일 다운로드 처리 방안

https://lahuman.jabsiri.co.kr/263

ReactJS에서 파일 다운로드 처리 방안

17. React Route로 중첩 라우팅 하기

React Router로 중첩 라우팅 하기

지난 포스트 에서 React Router로 기본적인 라우팅 방법을 다루었습니다. 이번 포스트에서는 React Router로 중첩 라우팅을 구현하는 방법에 대해서 알아보겠습니다. 중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다.

React Router로 중첩 라우팅 하기

https://www.daleseo.com/react-router-nested/