FE로그

만약 네비게이션이나 푸터와같이 중복되는 요소를 각 페이지마다 별도로 코딩했을 경우 수정사항이 생겼을 때 전체 페이지를 다 수정해야하는 문제가 발생(중복 코드 작성 -> 한번에 여러페이지의 코드를 수정해야하기에 Shotgun Surgery '산탄총 수술' 이라고도 한다)

<div></div> 또는 <image />(셀프클로징 태그) 또는 React.Fragment를 사용 : React.Fragment를 사용하면 바로 위의 태그에 안에 내용들을 그대로 넣어줌 React.Fragment도 귀찮다면 빈 태그를 넣어줘도

계속해서 변화하는 특정 상태상태에 따라 각각 다른 동작을 함0에서 출발하여 +를 누르면 1씩 증가, -를 누르면 1씩 감소하는 count 상태(re-render)배열의 비구조화 할당을 이용해서 count, setCount로 받아온다count : 상태의 값setCount

컴포넌트에 데이터를 전달하는 방법 Counter 컴포넌트의 프로퍼티로 initialValue를 넘겨준다 props로 InitialValue를 받아오고 props.initialValue 로 사용프로퍼티는 여러개 보낼 수 있다.위처럼 많이 보낼 경우 길어질 수 있으니

SPA (Single-page application)=> 새로고침되지 않고 컴포넌트가 교체되는 듯하게 페이지 이동이 가능CSR (Client Side Rendering)=> 사용자가 필요할 때 데이터를 가져오기때문에 매번 서버에 요청하지 않아도 됨React에서 CSR기

인간 : 일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정개발 : 프로그램의 실행과 종료탄생 : 컴포넌트가 화면에 나타나는 것 (Mount) - ex) 초기화작업변화 : 스테이트가 바뀌거나, 리렌더되는 과정 (update) - ex)예외

- 연산 최적화 할 때 사용 Memoization : 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억(캐싱) 해 두었던 데이터를 반환 시키게 하는 방법 useMemo 일반 함수로 작업시 첫 로드시 2번 실행됨 Ap

상태변화 로직 분리 한 컴포넌트에 많은 스테이트를 관리하게되면 복잡해짐 분리해서 사용해도 스테이트처럼 사용이 가능함

부모가 가진 모든 데이터를 바로 밑에있는 자식컴포넌트를 거쳐 더 하위에 있는 컴포넌트에 데이터를 전달해야 할 경우, 중간에 거치는 컴포넌트들에 props를 전달해줘야하는 것=> 필요없는 중간 컴포넌트들에도 Props를 주면 prop을 수정시에 해당 prop을 입력해준

'로그인화면'의 아이디와 패스워드가 1글자 이상씩 입력이 되어야 버튼 활성화'피드'의 댓글 작성 시 1글자 이상(스페이스는 false)일 때 버튼 활성화버튼의 disabled는 불리언 속성으로 처음엔 비활성화여야 하기에 버튼의 disabled를 관리하는 state 초기

검색 창 클릭시 모달팝업이 뜨고 검색을 할 수 있는 기능을 만들었다. 우선 모달팝

Nav 메뉴 클릭 시 navigeta(/list/'pagename') 하고, params를 사용해서 } /> url params match 객체 안에는 현재의 주소가 Route 컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있음 path 규칙 :

Next.JS가 무엇고, React와의 차이가 무엇인가?

포트폴리오 사이트를 Next를 사용해 만드는 중,마냥 React와 같다고 생각한게 큰 뻘짓을 하게 하였다.가장 먼저 시도했던건 netlify.(여러 시도의 흔적 111...)React작업물을 netlify 통해서 배포해봤기 때문에 검색을 해보며 진행을 하였지만계속해서

그동안 비슷한 작업들을 할 때 menu컴포넌트에서만 map을 사용하며 메뉴를 클릭하면 연결될 route를 각각 써 주었었다.그렇다보니 페이지가 추가되어야 한다면 menu,route 각각 수정을 했어야 했는데 route를 리스트화 해주면 메뉴관련 수정사항이 생겼을 때 해

HOC 고차컴포넌트 : Higher-Order0Components 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수 컴포넌트 로직을 재사용하기 위함으로 같은 로직(데이터를 가져온다거나?)을 동일 적용해야할 때 사용하면 좋음 Redux의 connect처럼 타

Next.js가 13으로 새롭게 나왔다고하여 공부 시작. 계속 업데이트되고있는 최신버전으로 작업해보면서 바뀌는 부분들을 어떻게 해야 빠르게 터득할 수 있을지 연습해보는 시간이 될 것 같다 :) pages -> app 기존에 pages로 사용하던 라우팅 경로를 app으

SEO next는 각각의 페이지에서 title, description등을 작성할 수 있어서 검색엔진최적화가 가능하다. head.js를 사용했던것은 없어지고 Metadate를 사용한다. 정적/동적으로 SEO를 넣을 수 있으며 favicon은 기존 favicon을 덮어씌우

dynamic param을 \[slug]로 지정을 했을 경우useRouter를 사용하면 .query.slug를 통해 꺼내사용 할 수가 있었다.전에 썼던 글에선 page.tsx에서 params로 받아와서 사용했었는데, 컴포넌트 내에서 받아 써야 할 일이 있었다.useRo