Next.js와 SPA, SSRnpm run dev로 페이지를 열어놓은 상태에서, [개발자 도구 > Run Command] 클릭하고 Disable JavaScript 클릭하면 JS가 꺼진다. 이 실험을 통해 알 수 있는 것은, React는 JS 기술이기 때문에 JS가 꺼지면 웹페이지 렌더링이 아예 안되지만, Next.js는 .next 폴더(서버)에 들어있는 페이지를 가져와서 보여주는 서버 사이드 렌더링(SSR) 방식을 사용하기 때문에 JS가 꺼져도 렌더링이 된다. Next.js는 JS가 아니라 HTML을 응답한다.기존에 a 태그를 사용한 Next.js 실습은 MPA(멀티 페이지 어플리케이션) 방식을 사용하고 있어서, 모든 페이지에서 공통으로 사용되는 부분이 있어도 페이지 이동 시마다 모든 요소를 다시 다..

Next.js 배포크롬 브라우저에서 network 탭을 열면 프로젝트 용량 확인 가능→ 비효율적이고 보안상의 문제가 있을 수 있어 용량 축소 권장npm run build 하면 배포판이 .next 폴더에 저장됨 (이 폴더는 사용자에게 서비스되는 내용이 저장되는 폴더)→ 여기서 npm run start하면 실서버 용으로 배포판이 만들어져서 용량이 줄어든거 확인 가능사용자에게 서비스할 수 있는 네트워크 환경을 갖춘 상태라면 배포 준비 끝난거라고 볼 수 있음!Next.js 뼈대 만들기 (기본 페이지 구조)page.js첫번째(메인) 페이지의 컨텐츠는 src/app/page.js에 작성 (루트 페이지)이외에 모든 페이지는 src/app에 하위 디렉토리로 page.js를 만들면 그게 프로젝트의 개별 페이지가 된다.l..

Next.js 란 무엇인가?React 기반의 프레임워크.웹 애플리케이션과 웹사이트를 더 쉽고 빠르게 개발할 수 있게 도와준다. 참고로 React는 반응형 UI 구축에 도움이 되는 JS 오픈 소스 라이브러리이다.※ React 기본 개념 정리 - https://hjinn0813.tistory.com/38#React-1 [코딩온] 프론트엔드 입문 15주차 Day 39 (모듈, node.js, React 컴포넌트)오늘은 지난 시간이 끝나기 전에 설치한 node.js를 이용하여 본격적으로 React를 다루기 시작했다. 직접 사용해보니 쉬운 것 같으면서도 만만하지는 않은 것 같아서 걱정스럽지만, 그럴수록 더 치hjinn0813.tistory.comNext.js의 주요 특징서버 사이드 렌더링 (SSR): 페이지 요청..

이번달 초에 좋은 기회로 카카오 현직 개발자에게 커리어코칭을 받았는데, 당시에 내 포트폴리오를 첨삭받으며 Redux-thunk와 Redux-saga에 대해 알게 됐었다. 이번에 개인 프로젝트를 진행해보며 추가적인 공부가 필요한 기술들을 발견해서, 본격적으로 학습하기 전에 기본적인 개념부터 여기에 정리해두려고 한다.일단 Redux-thunk, Redux-saga 둘 다 Redux에서 비동기 작업을 처리하는데 도움을 주는 미들웨어인데, 작업 처리 방식이 약간 다르다.Redux-thunk가장 간단하고 기본적인 Redux 미들웨어로, "thunk"는 일반적으로 함수가 함수로서 사용되는 패턴을 의미한다.액션 생성자가 함수가 될 수 있도록 해준다. 이 함수는 dispatch를 호출하여 액션을 보낼 수 있고, 비동기..

티스토리에 첫 페이지를 설정하는 방법과 GitHub 레포의 조회수를 확인하는 법이 항상 궁금했다.레포 조회수 확인하는 방법은 어렴풋하게 알고 있던건데, 이번에 확실하게 알게 되었다!티스토리 첫 페이지 설정하기네이버 블로그를 굉장히 오래 전부터 꾸준히 운영하고 있는데, 네이버 블로그는 접속했을 때 가장 처음으로 보여지는 화면을 설정할 수 있다. 그래서 올해 초에 티스토리를 시작하면서 여기도 첫 페이지를 설정할 수 있을거라고 생각했다. 하지만 '관리' 페이지를 아무리 봐도 설정하는 메뉴가 없어서 별도 설정이 안 되는줄 알고 그냥 사용하고 있었다. 며칠 전에 설정하는 방법이 따로 있다는걸 발견해서 내가 원하는 페이지로 설정했다.티스토리에서 [관리 > 꾸미기 > 스킨 편집]으로 들어간다.스킨 편집에서 'html..

TS의 Generic 문법은 새싹 수업에서도 배우긴 했는데, 지금 코드를 다시 보니까 굉장히 짧게 배웠길래 이번에 배운 내용을 블로그에 기록해둔다. 사실 Generic 문법의 원리가 어려운건 아니라서, 이번에도 그리 길게 배우진 않았음!😝※ 새싹 수업 당시의 기록은 여기 → https://hjinn0813.tistory.com/50#Generic-1함수 Genericinterface Obj { x: number;}type Arr = [number, number];// 제너릭 문법으로 타입을 파라미터로 전달function toArray(a: T, b: U): [T, U] { return [a, b];}console.log( // 꺽쇠 괄호로 타입을 명시적으로 지정, 추론 가능하여 생략 가능 toA..

새싹 수업 때부터 학습내용을 내가 이해하기 쉬운 언어로 기록해두는 이유는, 내가 기억력이 좋지 않아서 나중에 까먹었을때 찾아보기 위함이다. 이번에도 TS에서의 클래스를 공부하면서 이거 어디서 본 것 같다고 생각했는데, 알고보니 새싹 수업 당시에 JS 클래스를 배웠던 기억 때문에 그렇게 생각했던 것 같다.😅(접근제한자는 상반기에 정보처리기사 필기 공부하면서 책에서 얼핏 봤던 것 같다.)아무튼 혹시 클래스가 뭔지 기억나지 않는다면 아래 링크 참고!https://hjinn0813.tistory.com/37 [코딩온] 프론트엔드 입문 15주차 Day 38 (JS 전개구문, 구조분해할당, 클래스)이날부터 드디어 전체 교육과정의 세번째 파트가 시작되었다. 이번 파트에서 다루는 내용은 나도 처음 배우는거고, 그동안..

오버로딩 (Overloading)함수의 이름은 같지만 매개변수의 타입 또는 개수가 다른 여러 함수를 정의하는 방법.객체지향 언어에서 가질 수 있는 특징이다.// 타입 선언function add(a: number, b: number): number;function add(a: string, b: string): string;// 함수 구현function add(a: any, b: any) { return a + b;}add(1, 2); // 숫자의 덧셈 출력add('hello', ' 바보'); // 문자열 결합 출력// add(1, ' 바보'); -> 인자의 타입이 달라서 오류 발생a, b가 어떤 타입이든 받을 수 있으라고 함수에서는 any 타입으로 지정한다.하지만 타입 선언을 저렇게 했기 때문에, 함수..

새싹 수업 당시에 TypeScript를 배웠지만, 빠르고 짧게 배워서 어설프게 아는 상태였다. 이번에 새로 들어온 교육에서도 속성이긴 했지만 더 어려운 내용들을 배웠다. 토이 프로젝트 마무리하고 포트폴리오 정리하느라 일주일이 지난 오늘에야 학습 내용들을 블로그에 정리해본다.타입 단언 (Type Assertion)컴파일 시점에 변수를 특정 타입으로 이해하도록 강제시키는 방법.const el = document.querySelector('body') as HTMLBodyElement;el.textContent = 'Hello, World!';→ 여기서 변수를 선언할 때, as HTMLBodyElement 부분이 없으면 TS는 el이 'null'을 갖고 있다고 생각할 수 있다.따라서 el 변수가 HTMLEle..

지난 2월에 새싹 수업과정을 듣던 중에 GitHub 프로필을 꾸밀 수 있다는걸 알게 된 후, 마크다운 문법과 다양한 뱃지들을 활용해서 개인 프로필을 꾸몄다. 배우는 기술이 추가될 때마다 기술 뱃지도 하나씩 추가하면서 꾸준히 develop을 했다. 이번에 8월 매칭데이를 준비하면서, 기존 프로필을 포트폴리오 느낌으로 변경하고 싶어서 약간의 업그레이드를 했다.※ 이전 글 확인하기 - https://hjinn0813.tistory.com/14gist로 커밋 시간 통계, github stats 노출하기GitHub 프로필에 올릴 수는 없고, 레포 리스트로 pin해야 하는 것 같다.6월 중순쯤, 나는 언제 커밋을 많이 하는지 통계가 궁금해서 했다. gist를 처음 사용해보는거라 너무 어려워서 아래 블로그 링크에서 ..