Frontend Study - 2 (94) 썸네일형 리스트형 React : useRef props넘겨줄 때 주의할점. forwardRef. form에서 input의 value를 가져올 때, useState를 사용하는 것보다 useRef를 사용하는 것을 선호한다. useState를 쓰면 계속 렌더링 된다는 것이 신경 쓰인다. 이번에도 회원가입 form을 만들면서 ref를 썼는데 결론부터 말하자면 ref값을 props로 전달하는 과정에서 고생했다. ref는 예약어이기 때문이다. (예약어 : 쓰임이 이미 정해져 있는 키워드) const SignupForm = () => { const emailRef = useRef(null); return ( ) } const InputForm = ({id, ref}) => { return ( ) } 이런 식의 구조였다. InputForm 컴포넌트에 직접 ref를 이용해서 props를 전달하려고 한게 잘못이었다... Next.js : _App.tsx , _document.tsx 알아 보기. _document에서 UI작업 금지 ! 1. _App.tsx 넥스트js의 앱 컴포넌트는 리액트의 그것 처럼 페이지의 시작을 담당한다. 그리고 아래와 같은 역할을 할 수 있다. - 레이아웃 지정 - 페이지 별로 추가 데이터를 전달 - 상태 값 분배 - 글로벌 CSS 형식은 기본값인 App.tsx (밑줄이 없는 App임! _App이 App을 오버라이드 하는 것)를 오버라이드(재정의) 하기 위해서 아래와 같이 사용한다. //_app.tsx import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) { return } - 프롭으로 받아온 Component는 활성화된 페이지를 말한다. 요놈 덕에 라우팅을 통해 새로운 페이.. 디자인패턴 (1) : 싱글톤 패턴, 팩토리 패턴, 전략 패턴, 옵저버 패턴 디자인패턴 이란 - 프로그램 설계 중 발생했던 여러 문제들을 패턴화 시켜 해결책을 제시한 것. 1) Singleton pattern - 싱글톤 패턴 객체의 인스턴스가 하나만 생성되는 패턴. 하나의 클래스에 하나의 인스턴스만 가지는 패턴. 그 하나의 인스턴스를 다른 모듈에서 참조할 수 있도록 한다. 장점 - 하나만 생성하기 때문에 인스턴스 생성 비용이 줄어든다. 단점 - 하나만 생성하기 때문에 의존성이 높아진다. 의존성 주입 DI(Dependency Injection)을 통해 모듈간의 결합을 느슨하게 만들어 해결할 수 있다. *의존성 주입 원칙 : 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 한다. 둘 다 추상화에 의존해야 하며, 이 때 추상화는 세부사항에 의존하지 말아야 한다. - 의존성 주입.. 컴포넌트에 style 인라인으로 주기 + 컴포넌트에서 style 인라인으로 주기 ! Public폴더 , 절대경로 이용하고 싶을 때. 환경변수 Public 폴더의 절대경로를 이용하고 싶을 때 html 에서는 %PUBLIC_URL% 알고리즘 (2) : 문제해결패턴 1) Frequency Counter 일반적인 문제 해결 패턴들에 대해 살펴보려고 한다. 같은 문제가 나온다는 보장은 없지만 다양한 곳에 적용이 가능하다. 1) Frequency Counter. 공식적인 이름은 없다고 한다. 이전에 MDN array.reduce 사용 예제에서 발견한 패턴으로 코딩테스트를 풀 때 종종 쓰던 방법이다. 객체를 사용해서 값과 빈도를 수집하는 것. 중첩 순회를 피할 수 있게 해서 좀 더 나은 효율을 만들어 낼 수 있다. 두개 세개 네개의 개별 루프가 중첩된 하나의 루프보다 낫다는 것. ex) 2개의 배열을 허용하는 same이라는 함수를 작성하십시오. 배열의 모든 값이 두 번째 배열에 해당하는 값을 가지면 참을 반환해야 합니다. 따라서 첫 번째 배열에는 여러 값이 있는데 두 번째 배열의 값이 정확히 동일하지만 제곱되.. 알고리즘 (1) : 문제 해결을 위한 계획 수립 알고리즘의 사전적 정의 - 특정 작업을 달성하기 위한 과정이나 일련의 단계. 즉 문제 해결을 위해 수행해야 하는 단계이다. '개발' 이라는 것은 곧 문제해결이기도 하고 알고리즘은 성공적인 문제해결을 위한 기반이기 때문에 알고리즘에 대해 알아야 한다. 알고리즘을 통해 문제해결을 '잘' 하기 위해서 준비할 수 있는 두가지 단계가 있다. 1. 문제 해결을 위한 계획을 수립하는 것. 2. 일반적인 문제 해결 패턴을 파악하는 것. 이 중 첫번째 문제 해결을 위한 계획 수립에 대하여 먼저 알아보려고 한다. 문제 해결은 중요하고 대충해서는 안된다. 단계별로 계획을 수립하는 것이 좋다. 문제를 고민하고 나누면서 자연스럽게 해결책을 찾도록 돕는다. 1) 문제를 바로 이해하기 바로 코드를 쓰는 것에 앞서 문제를 확실하게 .. Next.js : SSR. getServerSideProps / 클라이언트 사이드 페칭 필요한 경우(2) Next.js의 핵심 기능을 위한 두가지 함수. 첫번째가 getStaticProps() 사전 정적 생성을 위한 함수이고, 두번째가 getServerSideProps() 이다. gerServerSideProps와 getStaticProps의 가장 큰 차이점은, - 함수가 실행되는 시점 - 클라이언트 요청에 대한 접근성 두가지라고 할 수 있다. getStaticProps의 경우 말 그대로 사전 생성이다. 사전 빌드될 때 실행되며, 그렇기 때문에 실제 클라이언트의 요청과는 별개의 것이라고 할 수 있다. 반면에 1) getServerSideProps 함수의 경우 사용자의 요청이 일어날 때 실행되는 함수이다. 페이지 컴포넌트에 이 함수가 있다면 해당 페이지에 대한 요청이 들어 올 때마다 이 함수가 실행되게 된다... 이전 1 2 3 4 ··· 12 다음
