본문 바로가기 메뉴 바로가기

굴러가유...

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

굴러가유...

검색하기 폼
  • 분류 전체보기 (30)
    • 프로그래머스 (15)
      • 난이도 1 (1)
      • 난이도 2 (10)
      • 난이도 3 (4)
      • 난이도 4 (0)
    • 사이드프로젝트 (1)
      • Calendar + todolist (1)
    • 3D 웹 만들기 (2)
      • THREE.js (2)
    • 개발 (10)
      • javascript (4)
      • react (4)
      • react-native (0)
      • node (1)
      • css (0)
      • github (1)
    • 2직 (1)
    • 일상... (1)
  • 방명록

react (5)
[REACT] Effective Component ! 변경에 유리한 컴포넌트를 만들어 보자...

안녕하세요! 오늘도 역시 토스 강의를 보고 와.. 이렇게도 할 수 있구나를 느껴버린 나머지.. 직접 해보는게 어떨까 해서 따라하게 되었습니다. 근데 이게 모든 소스를 보여주신건 아니라(내가 해석을 못한걸지도..) 제 주관이 섞여 좀 구조가 바뀌었는데 토스 구조처럼 어떻게 짜는지 혹시 아시는 분 있으시다면 공유 부탁드립니다.. 코드 리뷰는 언제든지 환영입니다 :D Effective Components ? 지금의 회사에서 저의 코드를 수정해줄 리더분이 없으셨어서.. 제가 리드해가며 새롭게 리액트로 리팩토링을 하는 작업에서 나는 '설계'부터 잘못했구나 라고 느끼게 된 계기들이 엄청 많았습니다. 우선 제가 만든 컴포넌트들은 재사용에 불리한 구조를 가지고있는 경우가 대부분이였습니다. 재사용에 불리하단 것 중 단점..

개발/react 2023. 1. 18. 18:20
[REACT] React.Suspense 를 통한 우아한 비동기 웹 개발하기

우아한 비동기 퇴근하면서 유튜브를 보던 중 나의 꿈의 직장.. '토스' 유튜브에서 흥미로운 주제가 있길래 하나 가져와봤습니다. 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 "프론트엔드 웹 서비스에서 우아하게 비동기 처리하기" 라는 주제였는데요, 보자마자 우아한 비동기..? 비동기면 비동기지 어떻게 우아하게 처리한다는 거지? 라는 궁금증이 생겼습니다. 내용이 너무너무 알차고.. 너무 좋은 주제라서 보자마자 아! 이건 공유해야겠다.. 싶어서 가져오게 되었습니다. 다들 한번씩 보는걸 추천드려요, 이거 말고도 토스의 프론트 동영상들이 알찬게많답니다. 들어가기에 앞서 여기서 나오는 예제들의 일부는 위에 있는 토스 동영상의 예제 소스들도 포함되어 있는 점 양해부탁드립니다! 동기와 비동..

개발/react 2023. 1. 10. 15:39
[react] emotion css 끄적여 보기

안녕하세요 :D 오늘은 오랜만에 emotion css를 한번 끄적끄적여 보려 합니다. 최근에 개발 과제등을 진행하면서 탈락의 쓴맛을 보고 스스로 피드백을 진행해보니.. 아무래도 깔끔하지 못했던 소스가 아니였을까 싶네요.. 그 중에서도 가장 문제라 생각하는게 스타일 지정.. 기존에 styled-components를 사용했는데, 너무 많은 styled를 남발했던게 원인이 아닐까 싶습니다. 그래서 요즘 styled-components와 호각을 겨룬다는 emotion을 한번 공부하는 시간을 가져보았습니다. 새롭게 공부하는 emotion으로는 좀 깔끔하고 정돈된 스타일을 만들어보려고 합니다! 요즘들어 느끼는 기초의 부족함.. css랑 js 강의라도 다시 들어야 할까봐요.. 우선 emotion을 사용하려면 설치를 ..

개발/react 2022. 11. 15. 21:53
[Calendar Todolist] 캘린더 일정관리 만들기

안녕하세요. 과제가 있었어서 진행을 하다보니, 캘린더를 통해 관리하는 일정관리 페이지를 구현하는거였습니다. 긴말 없이 사용 스택부터 확인해보겠습니다. 사용 스택 React, Typescript, Recoil, Styled-components 우선 자바스크립트로 캘린더를 만들어야 했습니다. 캘린더를 만드는 방식은 어렵지 않습니다. 워낙에 자바스크립트로 캘린더를 만드는 레퍼런스도 많고, 이것저것 개발하면서 대충 이런식으로 만들면 되겠구나 라는 생각을 했었기 때문입니다. const today = { year: new Date().getFullYear(), //오늘 연도 month: new Date().getMonth() + 1, //오늘 월 date: new Date().getDate(), //오늘 날짜 da..

사이드프로젝트/Calendar + todolist 2022. 10. 30. 22:03
[REACT] react 에서 eventBus 사용하기

안녕하세요! 오늘은 vue에서 자주 썼던 eventBus를 react에서 만들어서 사용해보려고 합니다. 사실은 eventbus를 사용하는 방식만 안다면 vue, react 구분없이 개발할 수 있지만, 요즘엔 html 기초보다 바로 react를 배우시는 분들이 많아서 eventbus를 사용하는데 어려움을 느끼시는 분들이 있는 것 같아 이렇게 올려봅니다! 우선 eventBus란? eventBus란 다른 컴포넌트끼리 데이터를 주고받을 수 있는 방식입니다. 하지만 이 방식은 부모 - 자식 간의 관계가 필요 없이 전혀 다른 컴포넌트끼리 데이터 전송이 가능하다는 장점이 있습니다. 그럼 eventBus를 주로 어떨때 사용하나요? 라고 물어볼 수 있습니다. 저같은 경우에는 vue와 react를 모두 개발하는 사람으로써..

개발/react 2022. 8. 22. 12:00
이전 1 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • 깃허브 계정 삭제
  • THREE.js 랜덤
  • react.suspense
  • react
  • 코딩테스트
  • Three.js
  • 프로그래머스 js
  • mac 깃허브 계정 변경
  • 난이도2
  • terminal 깃허브 계정 변경
  • JS
  • javascript THREE.js
  • 프로그래머스난이도3
  • 나도이직시켜주세요...
  • Effective Component
  • 난이도3
  • 자바스크립트 three.js
  • JavaScript
  • ErrorBoundary
  • three
  • 깃허브 계정 변경
  • 리액트
  • 자바스크립트
  • 깃허브 mac
  • mac os 깃허브 계정 변경
  • 프로그래머스
  • 터미널 깃허브 계정 변경
  • 우아한 비동기
  • 유연한 컴포넌트
  • react.errorboundary
more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.