리액트바오

고정 헤더 영역

글 제목

메뉴 레이어

리액트바오

메뉴 리스트

  • 홈
  • 분류 전체보기 (165)
    • TIL (55)
    • Algorithm (0)
    • Javascript (12)
    • react (13)
    • git (0)
    • 기타 (8)
    • React Native (4)
    • 탈잉X김나무 데일리미션 (44)
홈
  • TIL 55
  • Algorithm 0
  • Javascript 12
  • react 13
  • git 0
  • 기타 8
  • React Native 4
  • 탈잉X김나무 데일리미션 44

검색 레이어

리액트바오

검색 영역

컨텐츠 검색

react

  • Context로 아주우우 간단한 화면 만들어 보았다.

    2023.12.15 by 리액트바오

  • React admin체험 일기

    2023.12.12 by 리액트바오

  • context는 redux와 비슷한 역할을 한다(?)

    2023.09.21 by 리액트바오

  • package.json과 package.lock.json는 어떻게 다를까?

    2023.06.30 by 리액트바오

  • Key와 id의 차이점 / 리액트에서 반복되는 리스트를 만들땐 둘 중 어떤것을 써야할까?

    2023.04.25 by 리액트바오

  • next.js는 React로 만드는 서버사이드 렌더링 프레임 워크다.

    2023.01.17 by 리액트바오

  • MVC패턴과 Flux 패턴 둘은 어떻게 다를까?

    2022.12.12 by 리액트바오

  • Recoil과 Redux 둘중 뭘 쓰면 좋을까?

    2022.12.08 by 리액트바오

Context로 아주우우 간단한 화면 만들어 보았다.

이전에 context에 관한 글을 올린 적이 있다. context는 redux와 비슷한 역할을 한다(?) 이사님께서 현재 프로젝트에 context와 redux를 함께 쓰게 될거라고 하셨다. 현재 css작업을 어느정도 마친상태이고 곧 form을 전송하는 등 작업에 들어갈텐데, 그전에 미리 알아보고자 정리해 보았 ace0507.tistory.com 콘텍스트는 어쩌고 저쩌고 .. 열심히도 적어놨지만, 개념만 익히는건 크게 의미없구나! 직접 해봐야하는구나!!를 만들어보면서 느꼈다. 내가 만들어본 페이지는 아주우우 간단한 화면 인데 요구사항은 이러하다. 1. 라우터를 사용한다. 2. context에 값을 저장한다. 3. context의 값을 가져온다. 끝이다. 만들어본것은 이러하다. context에 저장되지 않은..

react 2023. 12. 15. 13:21

React admin체험 일기

이미 진행중이던 프로젝트에 투입이 되어 코드를 훑어 보았는데, 조금 당황스러웠다. export const PostList = () => ( ); 게시물 리스트를 나타내는건데, 코드가 이런식이었다. map을 돌려주고있는 것도 아닌데, 리스트에는 여러 데이터들이 들어와있네? 이사님께서는 react admin을 사용하면 이렇게 짧은 코드로도 구현할 수 있다고 하셨다. 코드가 짧고 단순해 좋아 보일 수 도 있지만, 사실 난 그리 유쾌하진 않았다. 왠지 더 어려워 보였기 때문이었다. react admin의 장점을 깨달으려면 react admin을 쓰지 않고 코드를 짜는 경험이 충분할때 장점을 알 수 있을텐데, 내가 이것을 잘 쓸 수 있을까, 살짝 걱정도 되었다. 나는 초반에는 급한 마음에 react admin공식..

react 2023. 12. 12. 12:38

context는 redux와 비슷한 역할을 한다(?)

이사님께서 현재 프로젝트에 context와 redux를 함께 쓰게 될거라고 하셨다. 현재 css작업을 어느정도 마친상태이고 곧 form을 전송하는 등 작업에 들어갈텐데, 그전에 미리 알아보고자 정리해 보았다. context는 React 와 React Admin의 React의 내장 기능인 React Context API를 의미한다. context를 사용하면 컴포넌트 계층 구조 내에서 수동으로 소품을 전달하고 또 전달 할 필요 없이 컴포넌트 간에 데이터를 공유할 수 있게 해주는 React의 내장 기능이다. context는 redux와 마찬가지로 수동으로 속성(prop)을 전달하고 또 전달하고 또 전달할 필요 없이 컴포넌트 트리를 통해 데이터를 전달하는 방법을 제공한다. 그러니까 컨텍스트를 사용하면 데이터를 ..

react 2023. 9. 21. 14:03

package.json과 package.lock.json는 어떻게 다를까?

package.json과 package-lock.json은 Node.js 프로젝트에서 사용하는 두 가지의 파일이다. 이 파일들은 프로젝트의 종속성(dependencies)과 관련된 정보를 저장하는데, npm(Node Package Manager)이나 Yarn 등의 패키지 매니저를 사용하여 종속성을 관리하는 데 도움을 준다. 여기서 잠깐! 1. 지금껏 npm install을 하면서 npm이 그냥 이름인줄 알았다. 아니 ‘이름인줄 알았다’ 고 생각 했다기보단 별 생각 없이 썼던것 같다.ㅋㅋㅋㅋ Node Package Manager의 약자였다니! 새롭게 알게 되니 반갑구만! 2. 종속성(dependencies)디펜던씨 어쩌고도 개발을 하면서 참 많이 듣는데, 데이터의 종속성이라는것은 프로그램의 구조가 데이터의..

react 2023. 6. 30. 16:22

Key와 id의 차이점 / 리액트에서 반복되는 리스트를 만들땐 둘 중 어떤것을 써야할까?

결론부터 말하자면, key를 사용합니다. 아래쪽에 key의 역할과 사용방법을 적어두었습니다. 내부 프로젝트 진행중, 이번에 제가 맡은 부분은 공지사항목록과 공지사항 상세 페이지 입니다. 공지사항 목록에서 게시글 클릭시, 해당 게시글 상세페이지로 이동을 시켜야하는 상황입니다. key값을 줄지 id값으로 매칭 시킬지 순간 고민하다가 그동안 리액트를 공부하면서 'key와 id를 사용하면서도 제대로 구분 하지 못했구나' 느꼈습니다. key와 id의 역할이 비슷해 보이는데 어떤 차이점이 있을까요? 저는 제대로 쓰기위해 알아보기로 했습니다. 용도 key : 동적인 리스트에서 각 요소를 고유하게 식별하여 변경을 최소화하는 데 사용됩니다. id : HTML에서 요소를 식별하는 데 사용되는 고유한 식별자이며, React..

react 2023. 4. 25. 17:30

next.js는 React로 만드는 서버사이드 렌더링 프레임 워크다.

Next.js란 Next는 React 웹 프레임 워크중 하나다. 서버사이드렌더링 방식으로 리액트 기반 이며 Node.js위에서 빌드된 오픈 소스 웹 개발 프레임워크다. Node.js로 서버 렌더링 되는 웹사이트를 빌드하는 해결책의 하나이기도 하다. Next.js는 SSR방식으로 서버에서 사용자에게 보여줄 페이지를 모두 미리 그린 뒤 페이지를 렌더링 하는 방식이다. 리액트에서 추천하는 방법 - React를 배우고 있거나 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App - 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js CSR vs SSR CSR은 클라이언트사이드렌더링(Client-Side-Rendering), SSR은 서버사이드렌더링(Server-Side-Render..

react 2023. 1. 17. 17:06

MVC패턴과 Flux 패턴 둘은 어떻게 다를까?

이번에 내가 관심있는 회사에 면접을 보게 되었는데 Redux에 대해 설명을 해야했고, 면접관은 추가로 Flux패턴에 대해 물어보셨다. 난 Flux패턴을 들어보기는 했지만, 잘 몰라서 대답을 하지 못했다. 이제부터는 알기위해 공부해 보기로 했다. Flux패턴은 우선 MVC와 함께 디자인패턴중 하나다. 난 MVC만 알지만 그 외에도 MVP,MVVM 등이 있다고 한다. 우선 나에게 좀 더 익숙한 MVC패턴에 대해 간단히 정리해본 후 Flux는 MVC와 어떤 차이가 있는지 정리해보려 한다. MVC패턴은 디자인패턴 중 하나이다. MVC패턴은 디자인패턴 중 하나이다. 디자인패턴이란? 만약 어떤 서비스를 만들고 유지보수 해야한다면, 다른 팀원들과 함께 공유 해야한다면 코드를 좀 더 가독성있고 깔끔하게 만드는 방법을 ..

react 2022. 12. 12. 18:53

Recoil과 Redux 둘중 뭘 쓰면 좋을까?

Redux는 사용해 보았는데 Recoil은 들어만 보았다. 며칠전, Recoil을 사용해봤냐는 질문을 들었는데, Redux와 무슨 차이가 있는지 문득 궁금해져서 공부해보기로 했다. Recoil이 무엇인지, Redux와는 무엇이 다른지 알아보며 다음 프로젝트때 Recoil을 사용해볼지 고민해 보는 시간을 가질것이다. Redux의 단점 난 아직 Redux만 써보았기에 비교 대상이 없어 개인적으로 느낀 불편함은 초기세팅이 번거롭다는 것뿐이다. 내가 느낀 불편한 점 외에 또 어떤 단점이 있는지 알아보았다. - React 전용 라이브러리가 아니다. React관점에서는 외부요인으로 Store가 취급되며 동시성 모드를 구현하기에 호환성이 부족하다. - 복잡한 Boiler Plate초기세팅이 요구된다. Store, A..

react 2022. 12. 8. 21:36

추가 정보

인기글

최신글

페이징

이전
1 2
다음
TISTORY
리액트바오 © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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