기술 블로그

좋은 개발자란 무엇일까 아직 1년도 안된 주니어 개발자 입장에서 생각해 볼 떄 좋은 개발자는 누가 바라보느냐에 따라 크게 달라질 것 같다. 기획자, 디자이너, 동료 개발자 등 다양한 직군 만큼 좋은 개발자의 기준은 달라질 수 밖에 없다. 그 중에서도 동료 개발자가 바라보았을 떄 좋은 개발자에 대해 생각해보았다. 동료 개발자로서 좋은 개발자 문제 해결 능력 실무를 경험하면서 가장 중요하다고 느낀 것은 문제 해결 능력이었다. 같은 문제를 두고 어떻게 해결하느냐에 따라 하루가 걸리기도 하고 사흘이 걸리기도 했다. 내가 문제 해결 능력이 부족하면 결국 물어보는 곳은 사수이고, 이는 동료 개발자의 시간을 뺏는 결과를 초래했다. 질문 자체는 문제가 아니다. 그러나 문제 해결 능력을 배양하지 못한 채 발전 없이 시간..

React.memo export default React.memo(Category); //videos 내려오는 props가 자주 동일할 때 사용된다. props가 변경될 때만 리렌더링하게 개별 컴포넌트를 설정할 수 있어서 렌더링 최적화에 도움이 된다. 그러나 오버헤드 우려가 있어 필요한 컴포넌트에만 적용하도록 한다. react-window npm install react-window 외부 라이브러리이나 화면에 보이는 부분만 렌더링하도록 한다 몇만개의 데이터가 배열 되어있을때 사용한다. useCallback 함수 재사용 useMemo 값 재사용

getServerSideProps (서버 사이드 렌더링) 페이지에서 getServerSideProps라는 함수를 내보낼 때, Next.js는 이 함수로 반환된 데이터를 사용하여 각 요청에 대해 이 페이지를 사전 렌더링합니다. 주로 자주 변경되는 데이터를 최신으로 업데이트 하는 경우 유용하고 클라이언트 측에 번들되지 않는다. context매개변수는 params,req,res,query를 포함한다. 이 함수는 이중 하나를 포함하는 객체를 반환해야한다 - props라고 명명된 객체 속성 - notfound(bool)로 명명된 속성 - redirect 문제 getServerSideProps내의 기능은 클라이언트 렌더링 이전에 수행된다. 즉 클라이언트 단에서 서버단의 데이터를 받을 순 있지만 일반적인 방법(nex..

// src/_app.js import { RecoilEnv } from 'recoil'; RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

Layout Components class name const StyledLayout = styled(Layout)` background-color: #ab4b4b !important; padding-top: 4.375rem; width: 100vw; height: 100vh; `; 위와같이 컴포넌트 스타일링을 적용할 때 스타일드 컴포넌트 내부적으로 css class 선택자로 적용된다. function Layout({children}: {children: React.ReactNode;}) { return ( {children} ); } 위 레이아웃 컴포넌트의 문제는 자식 컴포넌트는 잘 내려주었지만 css class지정 까지는 설정해주지 못했다. function Layout({ className, chil..

문제 Next.js의 router-query를 이용해 객체 데이터를 전달하려 했으나 수신페이지에서 특정 객체만 수신할 수 없었다. 원인 router-query는 url 쿼리 파라미터로 전달되고 다음과 같은 문제가 발생할 수 있다. 인코딩 문제: 객체는 URL 안전한 문자열로 인코딩되어야 합니다. 이를 위해 encodeURIComponent와 같은 함수를 사용하여 객체를 문자열로 변환하고 인코딩해야 합니다. 그렇지 않으면 URL이 유효하지 않을 수 있습니다. 길이 제한: URL에는 길이 제한이 있습니다. 대부분의 웹 브라우저와 서버는 URL의 길이를 제한합니다. 큰 객체를 쿼리 파라미터로 전달하려고 하면 이 제한을 초과할 수 있습니다. 읽기 어려움: 복잡한 객체를 URL에 포함시키면 URL이 읽기 어려워집..

문제 타입 스크립트를 사용할 때 금기시 되는 것들이 있다. 타입 단언 as any 사용 Typescript에서 as 키워드는 타입 단언(type assertion)을 사용하여 특정 변수 또는 객체가 특정 타입임을 명시적으로 지정할 때 사용됩니다. 그러나 이를 남용하면 런타임 오류를 초래할 수 있으므로 권장되지 않습니다. 어떠한 런타임 오류를 발생할 수 있을까? 주로 발생하는 에러는 개발자가 타입을 잘못 단언하여 발생한다. 이에 런타임에는 js로 변환되어 타입 정보가 없어지고 예기치 않은 오류가 발생한다. 1.프로퍼티 접근 오류 const obj: any = { name: "Alice" }; const age: number = (obj as { age: number }).age; console.log(ag..

.작성중 map의 key 속성을 사용하는 것이 비권장인 주된 이유들은 다음과 같습니다: 성능 이슈: 매번 렌더링할 때마다 변경되는 key를 사용하면, React는 해당 요소와 그 자식들을 매번 새로 생성하고 파괴해야 합니다. 이로 인해 불필요한 리렌더링이 발생하며 성능 저하를 초래할 수 있습니다. 컴포넌트 상태 유지 문제: key가 변경되면, React는 해당 컴포넌트의 상태를 잃어버립니다. 따라서 상태를 유지하려면 안정적인 key를 사용해야 합니다. 인덱스 사용 문제: 배열의 인덱스를 key로 사용하는 것은 안티패턴으로 간주됩니다. 배열에 항목이 추가되거나 제거될 때 인덱스가 변경되므로, 이러한 변경이 컴포넌트의 상태와 관련된 버그를 유발할 수 있습니다. 키 충돌: 유니크하지 않은 key를 사용하면 키..

문제 getServerSideProps를 이용하여 api를 요청했을 때 페이지 요청이 너무 오래 걸리는 문제(4~10s) 가 발생했다. 정확히는 api 요청이 아니라 페이지의 로드 자체가 오래 걸렸다. 일반적으로는 api 최적화, 로딩스피너 추가, 이미지 최적화 등을 고려해 볼 수 있으나 내 페이지에 이미지는 없었고 api 요청만 존재 했다. 그러나 비제한적인 호출을 위해 크롤링 api 를 활용했고 고질적인 시간 지연 문제가 발생했다. api를 최적화 할 순 없나? 유투브 써드파티 라이브러리를 사용하기로 한 이상 속도는 타협해야 했다. 크롤링 후 재가공 결과를 반환하는 api임을 감안하면 현실적인 속도이다. 로딩 스피너를 달거나 UI만 미리 불러올 순 없나? 가장 큰 문제는 써드파티 유투브 api는 클라..

문제 Recoil : Duplicate atom key In development, when a file is changed, Next.js re-builds the relevant page entry file.Because it's the same Node.js process, the atom has already been declared.The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the atom is declared inside a component lifecycle/hook and only that is being hot-replaced. 일반적으론 같..