리액트바오

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

react 2023. 12. 15. 13:21

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

react 2023. 12. 12. 12:38

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

react 2023. 6. 30. 16:22

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

react 2023. 4. 25. 17:30

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

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

react 2022. 12. 12. 18:53

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

react 2022. 12. 8. 21:36