728x90 반응형 전체 글34 Meta 태그 추가하기 React에서는 메타 태그 관리를 위해서는 Helmet 이라는 라이브러리를 추가로 받아서 사용해주거나, 다른 방법을 찾아야하지만 NextJS는 아래와 같은 코드를 메타태그가 필요한 페이지에 추가하여 관리할 수 있다. export const metadata = { title: "My First NextJS", description: "This is my first project with NextJS", keywords: "NextJS",}; ※ 타입스크립트의 경우 metadata 옆에 : Metadata를 추가export const metadata: Metadata = { title: "My First NextJS", description: "This is my first project wit.. 2024. 9. 2. NextJS 시작하기 NextJS란 공식 문서에 따르면, react 기능을 기반으로 한 Full Stack 프레임워크 입니다. React는 CSR(Client Side Rendering) 방식으로, 브라우저가 자바스크립트를 다운 받은 후 화면에 UI를 표시하기 때문에 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않습니다. 또한, 검색엔진과 같은 로봇들이 컨텐츠를 활용하지 못 해 검색엔진 최적화에 약하다는 단점이 있습니다. 그에 반해, NextJS는 SSR(Server Side Rendering) 방식으로, 서버 쪽에서 자바스크립트를 렌더링하고 완성된 HTML을 브라우저로 전송하기 때문에 자바스크립트가 동작하지 않는 환경에서도 화면이 잘 보여집니다. 이는 검색엔진 친화적이라는 의미이기도 합니다. 설치방법 1.1. 터.. 2024. 9. 1. [GitHub] 신입 프론트엔드 개발자의 README.md 꾸미기 도전기 (+ 실용적인 꿀팁) 최근 개발자 커뮤니티에서 GitHub 관리의 중요성에 대해 많이 듣게 되면서, 첫 단계로 README 꾸미기에 도전해보았다. 퍼블리셔로 일하면서는 GitHub를 깊이 있게 사용할 일이 많지 않았는데,이제는 개발자로서 성장하기 위해 꼭 필요한 부분이라는 것을 깨달았다. 그래서 이 마음을 좀 다져보고자 readme를 꾸미는 방법부터 알아봤다.그리고 나중에 참고할 일이 있지 않을까 싶어 기록도 남겨보기로 했다. 1. Github 프로필용 repository 생성하기.처음에는 포트폴리오 repository가 메인 프로필이 되는 줄 알았는데, 알고보니 GitHub에서는 특별한 프로필용 repository를 제공하고 있었다! 프로필 Repository 만드는 방법프로필용 readme를 위해서는 본인의 아이디와 동.. 2024. 9. 1. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 2주차 후기 프로젝트 캠프: 리액트 2기이번주는 예제 - 실습 - 과제(복습)를 반복하며 수업을 들은지 2주차이자 마지막 교육기간이었다. 수업 중간중간 면접 예상 질문, 실무 팁 같은 것도 주셔서 더 유익하고 좋은 시간들이었는데너무 짧아서 아쉬운 마음이 많이 들었다. 6일차useEffect 훅을 배우고 todolist, 장바구니 예제와 함께 실습하는 시간을 가졌었다.prop drilling과 훅을 같이 사용하려니 멘붕이 오면서 작업하기 위해 생각하는 시간이 늘어났다.그리고 머릿속에서 생각한 것과 반은 맞고 반은 틀리니 당황스러움의 연속이었다. [수업내용]useEffectuseEffectLayout실습 - todolist, 장바구니 7일차 오늘 수업에서는 어제에 이어 동시성 모드 훅, 메모제이션 관련 훅 등을 .. 2024. 8. 30. React hooks (useState, useRef) - useState리액트에서 많이 사용하는 훅 중 하나로 변수를 선언하고 관리하는데 사용한다. 배열의 구조분해 형식으로 작성하며, 첫 번째 값은 class 문법의 getter와 같은 역할을, 두 번째 값은 setter와 같은 역할을 한다.이러한 이유로 관례적으로 두번째 값의 변수명에는 set을 붙인다.첫 번째 값을 변경할 수 있는 것은 두 번째 값 뿐이다. [참고1.] 변화가 생길 때마다 렌더링을 하기 때문에 무분별한 사용은 리액트에게 부담을 주는 행동이다.[참고2.] 메모리제이션과 같은 것을 내장하고 있어 따로 추가할 필요없다.setNum(num + 1) 방식은 비동기 방식이며, 이전 값을 알 필요 없는 경우 사용setNum((num) => num++) 방식은 동기적 실행을 하며, 이전 값(최신 값)을.. 2024. 8. 28. React props와 children propsprops란 컴포넌트 간에 데이터를 전달하는 방법으로, 컴포넌트를 사용하는 부모 컴포넌트로부터 전달받는 변수값이 포함되어 있는 객체이다. 쉽게 말하자면, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하기 위한 방법인 것이다.필요한 경우에만 선언하며, HTML 속성 같은 형태로 전달된다.// 자식 컴포넌트const ChildComponent = (props) => { return ( Child Component 제 이름은 {props.name}이고 나이는 {props.age}세입니다 );};export default ChildComponent;// 부모 컴포넌트import ChildComponent from "./ChildComponent";const Parent.. 2024. 8. 25. 이전 1 2 3 4 5 6 다음 728x90 반응형
