전체 글
-
Next.js - SSR, getServerSideProps 적용하기React.js, Next.js 2022. 9. 18. 20:30
Data Fetching: getServerSideProps | Next.js Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org 정의 getServerSideProps 라는 함수를 한 페이지 내부에서 export할 경우, Next.js는 getServerSideProps 에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-render 할 것입니다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as p..
-
Next.js - 초기화 이후 기본 구조 설정하기React.js, Next.js 2022. 9. 18. 20:15
구성 요소 📁 pages 폴더 안에는 넥스트에서 중요한 역할을 하는 특별한 파일들이 있습니다. 📙 _app.jsx (tsx) 📙 _document.jsx (tsx) 📙 _error.jsx (tsx) 📙 404.jsx (tsx) 📙_app.jsx App 컴포넌트는 모든 페이지의 공통 페이지 역할을 합니다. App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있습니다. 페이지들의 공통된 레이아웃 페이지를 탐색할 때 상태 유지 추가 데이터를 페이지에 주입 글로벌 CSS 추가 📁 pages/_app.jsx import Header from '../components/Header'; const MyApp = ({ Component, pageProps }) => { return ( );..
-
리팩터링 - Guard Clause를 사용하여 코드 가독성 높히기JS,TS 2022. 9. 13. 22:52
리팩터링이란 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법이다 - 리팩터링 2판, 마틴 파울러 수많은 리팩터링 방법 중 하나인 Guard Clause에 대해 소개합니다. Guard Clause는 무엇일까요? A guard clause is simply a check that immediately exits the function, either with a return statement or an exception. Guard Clause 는 반환 문이나 예외를 포함하여 함수를 즉시 종료하는 단순한 검사와 같은 문법입니다. 아래의 코드를 보겠습니다. export function payAmount(employee) { let result; if (e..
-
리액트에서 다수의 체크 박스 다루기React.js, Next.js 2022. 9. 13. 22:25
우리는 사용자에게 선택지를 제공할 때 또는 등을 사용한다. radio의 경우 여러 개의 선택지 중 한 가지를 선택해야 할 때 주로 사용하고, checkbox의 경우 여러 개의 선택지 중 중복 선택이 가능할 때 주로 사용된다고 볼 수 있다. 을 통해 유저의 인터렉션(클릭 이벤트)을 캐치하여 데이터를 생성해야 할 때, checkbox는 사용자의 선택을 배열로 관리하여 데이터화한 이후, 서버 또는 데이터 베이스에 저장하기 유용한 자료구조이다. 이번에는 리액트 프레임워크에서 를 통해 체크 여부를 배열 데이터로 관리하는 방법을 배워볼까 한다. 준비 기본적으로 string으로 구성된 더미 배열을 생성한다. jsx 문법 내부에 생성할 경우, 지속적으로 리 렌더링 되며 초기화될 수 있으므로 컴포넌트 윗부분에 작성하도록..
-
프로토타입 발표 (1차) 회고끄적끄적 2022. 9. 11. 00:39
무엇을 만들었는가? 이번에 만들게 된 기능은 단순히 어드민 페이지에 들어가는 조그마한 기능이 아닌, 유저를 대상으로 하는 웹 페이지에 탑재될 서비스였다. 아직까지는 실제 웹 페이지에 탑재 이전이기 때문에 자세히 얘기할 수는 없지만, ‘아고라(Agora)’라는 회사의 SDK를 사용하여 만드는 실시간 오디오/ 비디오 채팅 기능이라고 말할 수 있다. 이전에 클럽 하우스(Club house) 라는 서비스가 각광받던 시기가 있었다. 나는 사용해보지 않았지만, 프라이빗 하게 초대를 받은 유저들끼리 자유롭게 오디오를 녹음하여 소통하는 서비스라고 전해 들었다. 위 서비스 또한 ‘아고라’의 SDK를 사용했는데 우리는 이 서비스에 영감을 받아 우리가 만들어가고 있는 전시 서비스에도 실시간으로 큐레이터가 전시를 소개하거나,..
-
취직 회고끄적끄적 2022. 9. 11. 00:37
들어가며 '안녕하세요. 저는 프론트엔드 개발자를 꿈꾸고 있으며, 현재 4학년 2학기에 재학 중인 25살 대학생입니다.' > 현재는 2022년 1월 이젤(eazel)이라는 '아트 테크' 도메인을 가지고 있는 스타트업에서 front-end developer로 기여하고 있습니다 안녕하세요, 이전 글을 쓸 때만 하더라도 영영 취직을 못할 줄 알았던 다행히 취뽀에 성공한 25살 FE 신입 개발자입니다. 쉽지 않은 2021년이었지만, 노력 끝에 취직에 성공하여 그동안 제가 FE 취준생으로 겪었던 경험을 담아볼까 합니다. 저는 학과에서는 JSP, 모바일 프로그래밍, DB 를 다룸과 동시에 경영, 경영과 사물인터넷, 인터넷 마케팅 등을 배우는 힘 법사였습니다. 컴공이라고 하기에는 부족한 알고리즘과 자료구조에 대한 지식..
-
모던 자바스크립트 Deep Dive - 제너레이터와 async - awaitBook Study 2022. 9. 3. 17:02
제너레이터와 async/await 왜 배워야 하는지 ? 사실 async await가 제너레이터에서 비롯되었다는 것 조차 몰랐다. 기존 한 장 요약 (프로미스) 에서도 말했지만, async await에 대해 조금 더 아는 이유는 단지 Promise 문법이 어려워서였다 .then() .catch() .finally() 와 같은 프로미스의 프로토타입 메서드 들을 '어디서는 쓸 수 있고, 어디서는 쓸 수 있는지' 도 몰랐고, 뒤에 다루는 내용이지만 에러처리를 위해 try로 catch 비동기 함수를 감싸더라도 제대로 된 에러 캐치가 되지 않는 다는 것 또한 이번에 처음 알았다. 따라서 이번 장을 통해 프로미스를 기반으로 동작하는 async/await의 다양한 활용 방법에 대해서 배운다면, 비동기적인 처리와 비동기..
-
스타일드 컴포넌트 조건부 렌더링 활용하기React.js, Next.js 2022. 8. 26. 22:51
스타일드 컴포넌트 조건부 렌더링 활용하기 프론트엔드 개발 환경에서 CSS-in-JS 를 사용하는 가장 큰 이점 중에 하나는 property를 css 에도 적용할 수 있다는 것일 것이다. 리액트에서 className 을 통해 조건부 렌더링 하는 것보다 state 를 전달하는 것이기 때문에 맥락을 파악하기 쉽고 이해하기도 쉽다. 이렇게 CSS-in-JS 중 스타일드 컴포넌트(styled-component) 를 잘 활용하는 방법을 소개해볼까 한다. CSS-in-JS의 장점은 재사용 가능한 컴포넌트로써 스타일링 코드의 양을 줄일 수 있고, 타입스크립트의 경우 props에 대한interface를 적극적으로 활용하여 더욱 가독성이 높은 코드를 만들 수 있다. 코드 상에서는 다음과 같이 사용된다 setIsHandsU..