독일개발자초록이

Next.JS 데이터 패칭 getStaticProps. 오늘은 데이터패칭 data fetching에 사용되는 여러 방법 중 하나인 getStaticProps를 알아보겠습니다. getStaticProps란? 사용방법. 마치며. 1. getStaticProps란? Next.JS는 React.JS의 Framework입니다. 하지만 왜 이러한 getStaticProps라는 기능이 필요할까요? 잠깐 짧게 알아보겠습니다. 먼저 Next.JS에서는 대략 3 혹은 4가지의 data fetching이 있습니다. getStaticProps, getStaticPaths, getServerSideProps 그리고 Client Side. 왜 이러한 여러가지 방법이 존재하는 것일까요? 이는 Next.JS가 기본 SSR 즉 Ser..

Blackbox and Whiteboxtest란? 블랙박스 테스트 와 화이트박스 테스트? 개발을 한다는 것은 소스코드를 단지 작성하는 것에 그치지 않습니다. 개발을 위해 행해지는 모든 행위와 과정들이 사실 개발을 한다는 것이라 할 수 있습니다. 이는 예를 들면, 고객으로부터 요구사항을 듣고 분석하여 기능적으로 구현 가능한지 판단한 뒤, 디자인을 마치고 개발한 뒤 테스팅을 거쳐 마지막 고객에게 결과를 가져다주는 것입니다. 이중 오늘은 테스팅에 관해서 좀 더 자세히 유닛 테스트에 관해서 알아보려 합니다. 테스트 왜 필요한가? 유닛 테스트란? Jest.js란? 마치며. 1. 테스트 왜 필요한가? 테스트란 무엇일까요?? 이는 누구나 당연히 생각하듯 코드가, 프로그램이, 결과가 제대로 작동하고 보이고 도출되는지 ..

Next JS 란? Next JS 사용하는 이유. 웹개발 역사를 짧게 알아보자. 안녕하세요. 오늘은 왜 리액트가 등장하였고 또한 왜 NextJS가 등장하고 사랑받고 있는지, 가볍게 알아보겠습니다. HTML, CSS, Javascript 리액트의 등장 Next JS의 등장 마치며 1. HTML, CSS, Javascript 누구든지 처음 웹 개발을 공부, 시작하게 되면 듣게 되는 3가지 언어들이 있습니다. HTML, CSS, Javascript입니다. 예전에는 HTML과 기본적인 CSS로 개발을 했습니다. 그 후 자바스크립트의 등장으로 웹 개발의 시동을 걸었다고 할 수 있습니다. 하지만 이를 위해서는 기본적으로 브라우저의 역사를 알 필요가 있습니다. 하지만 너무 자세히 들어가면 내용이 방대해질 수 있으므로..

리액트 훅 React hooks와 스토리북 Storybook 안녕하세요. 오늘은 리액트로 개발할 때 디자인을 좀 더 디테일하게 나누고 관리할 수 있는 storybook에 관해서 알아보겠습니다. 스토리북이란? 사용방법 마치며 1. 스토리북이란? 리액트로 개발할때 디자인 관리를 어떻게 하시나요? npm start 혹은 yarn start를 이용하여 프로젝트를 실행하신 뒤 디자인하시나요? 그렇다면 이제는 스토리북을 이용해보실 차례인 것 같습니다. 스토리북은 기본적으로 디자인을 관리해주는 오픈소스입니다. 이해하기 조금 애매한가요? 즉 yarn start처럼 리액트를 실행시킨 뒤 즉석으로 디자인을 바꾸고 변화시키는 개념이 아닌, 개별 환경을 통해서 컴포넌트들을 문서화하는 개념에 가깝다고 할 수 있습니다. 또한 이..

리액트 훅 React Hooks Lazy이란? 안녕하세요. 오늘은 리액트 훅에서 사용되는 lazy에 관해서 알아보려고 합니다. 프로젝트가 거대해지고 무거워지는 과 동시에 발생하는 문제 중 하나는 로딩 문제일 것입니다. 느려져봐야 0. 몇 초 혹은 몇 초? 일 텐데 그게 큰 상관일까 싶지만, 사실 이는 큰 문제입니다. 많은 개발자들이 0.1초라도 줄이기 위해 최적화 작업에 공을 들이고 있습니다. 그렇기에 우리도 이러한 기능을 알아두면 참 좋을 것입니다. Lazy와 Suspense. 사용방법. 마치며. 1. Lazy 와 Suspense. Lazy를 사용하기 위해서 꼭 알아야 할 것이 있습니다. 이는 바로 Suspense인데요. 이것 없이 Lazy를 사용할 수 없습니다. Suspense는 JSX로 사용되며, ..

React hooks 리액트 훅 useRef란? 오늘은 리액트의 중요한 훅 중 하나인 useRef를 배워보려 합니다. useRef라는 훅은 다른 useState 혹은 useEffect보다는 사용 빈도가 낮은 것 같습니다. 저 역시 리액트를 이용하면서 useRef를 사용해본 적이 정말 손에 꼽을 정도로 적은 것 같습니다. 하지만 당연히 알고 사용하는 것과 모르고 사용하지 못하는 것은 정말 다를 것입니다. 오늘은 가볍게 useRef에 관해서 알아보겠습니다. useRef 사용 방법. 마무리. 1. useRef 사용 방법. 아래의 코드를 설명해드리겠습니다. Click me 버튼을 누르면 isRef는 현재의 boolean값의 반대 값을 가지게 됩니다. 즉 기본 값이 false 이면 true, true 이면 fal..