Dev Diary 💻

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 69. 모듈 개요 이번 섹션에서는 이벤트 앱을 간단하게 만들어보도록 하겠습니다. 이벤트 목록을 확인하고, 그 중에서 한 이벤트를 선택할 수도 있습니다. Creat a Complete NextJS Project From Scratch Add Static & Dynamic Routes Add Regular Components & Connect Everything! 70. 프로젝트 계획 / : Startign PAge (show featured Events) /events: Events Page (show all Events) /events/event> event-item..

Intro 인텔리제이 Intellij 에서 prettier 설정하는 방법에 대해 알아보도록 하겠습니다. 제 경우 이미 prettier 플러그인과 필요한 dependency, 그리고 prettierrc.js 파일도 이미 생성을 했습니다. 하지만 prettier 적용이 제대로 되지 않았습니다. 참고! Prettier 프리티어는 일종의 코드 formatter 입니다. 프리티어를 사용 시 일관된 코드 스타일을 유지할 수 있습니다. 예로 들여쓰기, 줄 바꿈 너비 등의 설정이 있습니다. How to do 구글링을 해보니, 제가 놓쳤던 설정이 하나 있었습니다. 바로 인텔리제이 내부 IDE 안에서 Prettier 설정을 해줘야 한다는 것이었습니다. Preferences > Languages & Frameworks > ..

Intro 인텔리제이에서 사용하지 않는 import 구문을 제거하는 방법에 대해 알아보겠습니다. How to do 1. Intelij > Code > Optimize Imports 사용 (control + option + O) → 위 방법은 수동 혹은 단축키를 사용하는 방법입니다. 2. Preference > Editor > General > Auto Import > Optimize Imports on the fly 클릭 → 위 방법은 자동으로 설정하기 위해 사용하는 방법입니다. 제 경우에는 Kotlin Editor를 사용하고 있어서, Kotlin의 Optimize imports on the fly에 체크를 해주었습니다.

Intro Next.js를 사용하던 도중 다음과 같은 에러가 발생하였습니다. Error: Invalid with child. Please remove or use Why? {props.children} next/link 를 활용하여 Link 태그 안에 a 태그를 넣어줬던 코드에 문제가 있었습니다. 에러 화면에 나와있는 Next.js 사이트에 한번 접속해봤습니다. (https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor) Why This Error Occurred Next.js 13버전이 나오면서, Link 태그는로 렌더링 되므로 를 사용하는 시도는 유효하지 않다고 하네요! How to solve the problem npx @next/co..

Intro Sublime text, 서브라임 텍스트에서 코드를 다중 선택하는 방법에 대해 알아보겠습니다. How to do 1. 다음의 텍스트가 있다고 가정해봅시다. hello 뒤에 공통적으로 '-' 문자를 삽입해보도록 하겠습니다. 2. command + 마우스 클릭(mouse click) 을 사용하여 원하는 위치에 커서를 놓고, command 를 눌러 클릭해주시면 됩니다. 3. 원하는 내용을 원하는 위치에 삽입한 모습을 볼 수 있습니다. 🙂

Intro next js 를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Error: The default export is not a React Component in page: "/" Why? 에러가 난 코드를 확인해보니, export 만 하고 default 를 적어주지 않았습니다. Next.js에서는 default로 export를 해야 에러 없이 정상 작동 되기 때문입니다. export function HomePAge() { const featuredEvents = getFeaturedEvents(); return ( ); } How to solve the problem export default 코드를 추가해주면 됩니다. 🙌 export default function HomePAge() { ..

Intro 타입스크립트를 사용하던 도중 아래와 같은 에러가 발생하였습니다. Property 'offsetTop' does not exist on type 'Element'.ts(2339) Why? document.querySelector('.page').offsetTop 다음의 코드가 있다고 가정해봅시다. 이 코드는 맞는 코드이지만, 결과값이 null이 될 수 있으므로 null 체크를 해줘야 합니다. 두번째로는, 현재 리턴 타입은 Element입니다. 하지만 Element는 offsetTop이라는 프로퍼티를 갖고 있지 않습니다. HtmlElement로 반환될 것이라고 예상할 순 있지만, SVGElement가 될 수 있기 때문에 컴파일러에게는 이 정보가 정확하지 않습니다. 따라서 이 부분 역시 type-a..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 52. 모듈 개요 파일 기반의 routing, 정적 및 동적 routes, 페이지간의 네비게이팅에 대해 배울 예정입니다. 53. 시작 설정 Setup 사이트 소스 코드 참고 54. 파일 기반 라우팅이란 무엇일까? React.js는 react-router-dom을 사용하여, 라우트를 진행합니다. 하지만 Next.js는 라우터를 설치하지 않고, 라우트와 페이지 구조를 정의하는 데 JSX와 JS 코드를 사용하지 않습니다. Next.js에서는 React 컴포넌트 파일을 생성합니다. 특별한 폴더에 일반적인 React 컴포넌트 파일을 생성합니다. 이후 Next.js가 설정된 폴..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

이 글은 생활코딩의 'Java' 강좌를 바탕으로 정리한 내용입니다. 같은 이름이지만 서로 다른 매개변수의 형식을 가진 메소드를 여러개 정의할 수 있습니다. class Calculator{ int left, right; int third = 0; public void setOprands(int left, int right){ System.out.println("setOprands(int left, int right)"); this.left = left; this.right = right; } public void setOprands(int left, int right, int third){ System.out.println("setOprands(int left, int right, int third)");..