🌰DotoriLog

프론트엔드 주니어 개발자 도토리묵의 기술개발 블로그 입니다.

React-Hook-Form 으로 입력상태를 효과적으로 제어하기 (1). 제어 컴포넌트에 대해

1. 들어가면서 프론트엔드 개발자의 입장에서 데이터를 다루는 방법은 여러가지가 있습니다. 차트 라이브러리 등을 활용해 데이터를 시각화하기 폼을 통해 데이터를 수집하기 테이블을 통해 데이터를 나열하기 이 중에 사용자의 입력 값 등을 받아 데이터를 수집하는 Form 을 효과적으로 제어할 수 있는 React-Hook-Form 에 대해 알아보게 될 텐데요. 그 …

그래프와 트리의 차이점

그래프와 트리의 차이점을 설명하기 전에 1-1. 사전지식 : 클라이언트 - 서버 - 데이터베이스의 관계 먼저 우리는 각자의 지인과 함께 미슐랭 가이드에 소개되어 있는 고급 레스토랑에 갔다고 생각해 봅시다. 맛있는 곳에 왔으니 우리는, 테이블에 앉아 있다가 “메뉴판” 을 봅니다. “나” 는 음식을 나르고 도와주는 “서버” 에게 “가지 라구 파스타, 바질 …

CSR 과 SSR 의 차이점

CSR (Client Side Rendering) 1-1. CSR 의 정의 문자 그대로 클라이언트 측에서 렌더링을 담당한다는 의미를 가지고 있다. 1-2. CSR 의 작동 방식 작동 방식을 번호 순으로 설명을 나열해 본다. 브라우저가 서버에 컨텐츠를 요청 사용자가 www.hello.com 으로 접속하여 서버에 컨텐츠를 요청하는 상황이다. 서버는 ind…

클라이언트 사이드 데이터 페칭 구현하기 (feat. SWR)

일반적인 리액트 방식의 클라이언트 사이드 데이터 페칭 상술하지 않겠지만, useEffect hook 을 통해 그 안에서 fetch, axios 등으로 데이터 페칭을 하여 나온 응답 데이터를 임의의 상태 (useState) 에 담아준다. 이후 컴포넌트가 리턴하는 jsx 코드에서 데이터 페칭 로딩 여부 등을 분기 처리하여 화면에 보여주는 아래와 같이 일반적인…

NextJS 의 사전 렌더링 방식 - (2) Server Side Rendering (using getServerSideProps)

1. 사전 렌더링 방식, 시점 톺아보기 Static Generation : HTML 을 빌드 타임에 생성한다. pre-render 된 HTML 은 그 다음에 각 리퀘스트에서 재사용 된다. 개발 모드(development mode)에서는 Static Generation을 사용하는 페이지라도 모든 페이지가 각 리퀘스트에 pre-render된다. Server…

NextJS 의 사전 렌더링 방식 - (1) Static Site Generation (using getStaticProps, getStaticPaths)

1. getStaticProps 정의 NextJS-getStaticProps 정의 : 빌드하는 동안 페이지를 사전 생성하는 것 (pre-generate a page with data prepared on the server-side during build time.) 사전 생성이란 모든 페이지의 html 구조와 모든 데이터를 사전에 준비시켜 놓는다는 뜻이…

React Native 개발환경 설치

🏠Install Homebrew, VScode, Node.js 기존 설치되어 있으므로 생략 💻Install JAVA 8 SDK 안드로이드 빌드 도구를 통해 자바의 모듈을 가져다 쓰기 위함. 이전 설치 버전이 있었으나 (백엔드) 그대로 다시 설치. 📱Install Xcode for IOS 리액트 네이티브로 iOS 앱을 개발하려면 Xcode 가 필요하다. …

👨🏻‍🎨Ant Design 에서의 반응형 웹 디자인

👨🏻‍🎨앤트 디자인의 input 태그 기존에 만들었던 AppLayout.js 파일에서 해시태그를 검색할 수 있는 인풋 창을 넣어 주었다. https://ant.design/components/input/ 공식 사이트에서 찾아보고 적용할 수 있다. 그렇게 하다 보면 위아래 정렬이 맞지 않을 수도 있는데, 이때는 inline style 을 적용해서 이런 식으로 코…

🐜Ant Design 으로 만드는 반응형, LoginForm

🐜Ant Design - Row, Col 컴포넌트로 반응형 적용하기 완료 - 블로깅 진행예정 🐜Ant Design - LoginForm 만들기 완료 - 블로깅 진행예정

🐜Ant Design, _App.js, PropTypes

🐜Ant Design 리액트를 지원하는 UI 라이브러리는 여러 가지가 있다. Bootstrap, Material UI, Ant Design 등등이 있는데, 코드스테이츠의 웹 개발 과정에서는 해당 라이브러리의 사용을 하지 않도록 안내해 줬다. 왜냐하면 CSS 의 구조를 바닥 부터 하나 하나 만들 줄 알아야 하기 때문이다. 그런데 현재는 과정을 졸업을 한 상…