Dev Diary 💻

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)");..

이 글은 생활코딩의 'Java' 강좌를 바탕으로 정리한 내용입니다. 창의적인 상속 상속은 상위 클래스의 기능을 하위 클래스에게 물려주는 기능입니다. 그렇다면 하위 클래스는 상위 클래스의 메소드를 주어진 그대로 사용해야 할까요? 만약 그래야 한다면 제약이 상당할 것입니다. 이런 제약을 벗어나려면 하위 클래스가 부모 클래스의 기본적인 동작방법을 변경할 수 있어야 합니다. 이런 맥락에서 도입된 기능이 메소드 오버라이딩(overriding)입니다. package org.opentutorials.javatutorials.overriding.example1; class Calculator { int left, right; public void setOprands(int left, int right) { this.l..