🏄‍♀️ 참고링크 > 튜토리얼 공식 문서입니다. 타입스크립트에서의 활용입니다. Js랑 다른 부분이 많으니 꼭꼭 참고!!! 넥스트 예시모음 깃허브 레포지토리입니다. 참고하면 좋을 것 같습니다~ Next.js + Typescript + Styled-components

환경변수는 .env라는 파일의 이름으로 저장하여 사용하게 됩니다. 직접적으로 값이 밝혀지면 안되는 경우, API키나 백 서버 주소 등등 보완을 위해서 설정하여서 사용합니다..env.development 등, 다양한 이름으로 관리할 수 있습니다. 내부에는 값을 이런 식으

리액트의 기본 훅들이 익숙해지니.... 이제는 최적화에 눈이 가기 시작합니다. 리소스를 아끼고 싶고, 원하는대로 딱딱 동작하는 웹을 개발하고 싶어집니다. 그렇기에 Usememo, usecallback같은 훅을 공부해보록 합시다!메모이제이션이라는 의미는, 동일한 값을 리

프로그래밍을 하기 전에 필수적으로 알아야 하는 개념은 무엇일까요? 여러가지 있겠지만, 변수를 선언했을때 이 변수가 어디까지 이용가능한지를 알아야 코드를 작성할 수 있을 것 같습니다. 그 변수가 이용가능한 범위를 바로 '스코프'라고 합니다. 정의: 변수이름, 함수이름 등

시멘틱 마크업이란 의미를 잘 전달할 수 있도록 HTML 문서를 작성하는 것을 말합니다. 위 그림처럼 div 태그로만 작성하는 것이 아닌, 각 부분에 알맞는 태그를 사용하여 웹 구조를 의미있게 만드는 것을 말합니다.예시검색엔진이 웹을 잘 이해해서, SEO에 유리해집니다.

📎 연관 자료\[TIL] SSR vs. CSR공식문서를 바탕으로 NEXT.js가 무엇이고, 어떤 식으로 사용하는지에 대해 간략하게 공부해보고자 합니다. Next.js는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크입니다.웹 어플

토이프로젝트에 Next.js를 도입하려합니다. 그러려면 서버사이드 렌더링과 클라이사이드 렌더링에 대해서 알아야합니다. 두 가지의 방법은 완전히 서로 배척점에 있어서 알맞게 쓰기 위해서는 각 방식의 장단점을 알아둬야합니다.서버에서 렌더링 준비를 마친 후 클라이언트에 전달

저와 같은 경우에는 ES6+가 익숙하고, 바벨을 사용하기 때문에 전 버전은 어떠했는지와 전 버전에 비해 어떤 것들이 추가되었는지를 잘 알지 못했습니다. 추가된 문법 중 자주 쓰이는 것들을 정리해보았습니다.let, const템플릿 리터럴화살표 함수구조분해할당promise

브라우저는 어떻게 동작할까? 주소창에 링크를 넣거나, 로그인을 하면 브라우저는 어떤 동작을 거쳐서 사용자에게 화면을 보여주는 것일까요? 예측하기로는, 아마 어디선가 자료를 받아서 화면에 띄우는 것일텐데. 정확히 어떤 자료를 받고, 어떤 방법으로 화면에 표시하는지에 대

Cross-Origin Resource Sharing (COR) 정의: 다른 출처에게 요청하는 것이 안전한지 판별하기 위해서 브라우저와 상호 통신하는 하나의 방법 즉, 웹 애플리케이션이 지금 실행중인 출처와 다른 출처의 자원에 접근할 수 있도록 권한을 부여하도록 브