three kim three kim

IT Study/FE

• [TypeScript] TypeScript의 필수 문법 (기본 개념)

  IT Study/FE 2023. 7. 17. 16:37

  TypeScript 사용하는 이유 자바스크립트를 사용하며 접했던 모호한 에러메시지를 대신하여 타입스크립트는 엄격한 Type Rule로 인해 "에러메서지"를 친절하고 정확하게 알려줍니다. TypeScript를 사용하기 위해 알아야하는 기본 문법에 대해 아래의 예시를 통해 알아봅시다 :) 1. Type 지정 : Type string(소문자), number, boolean, null, undefined, bigint, [], {} | (Union Type) 여러 타입 중 하나를 지정하고 싶을 경우 사용하는 Union Type 지정 // 명시적 type 부여 let 이름: string = "Kim";// 이름이라는 변수에 string type만 지정 가능 let 이름: string[] = ["kim", "par..

  Read More
• [Next.js/코딩애플] 프로그램 만드는 법 (feat. 코딩애플)

  IT Study/FE 2023. 7. 10. 10:26

  프로그램 만드는 방법 오늘은 복잡해 보이는 코드 작성 과정을 단순하게 바꾸는 방법에 대해 이야기하려고 합니다. 저는 이번에 Next.js를 공부하며 터득한 중요한 교훈이 있었는데, "그것은 바로 기능을 먼저 정의하고 코드를 작성하라"입니다. 처음에는 코드를 작성하는 과정이 어려울 수 있지만, 아래의 예시를 통해 기능 정의를 연습해 보세요 :) 처음 보는 기능 만들기 1. 기능의 동작 방법에 대해 한글로 상세히 정의하고 2. 코드로 번역하기 글 목록 페이지와 기능 만들기 (글 목록 조회 기능) 1. HTML 페이지 작성하고 2. 페이지 방문 시, DB에 저장된 글을 꺼내와서 3. 글을 HTML에 넣어 보여주기 상세 페이지 기능 만들기 1. 글 제목 클릭 시, 상세 페이지 이동 2. 상세페이지 방문 시, D..

  Read More
• [Next.js] MongoDB의 Error: querySrv ENODATA 해결하기

  IT Study/FE 2023. 7. 3. 15:23

  Next.js를 공부하며 데이터베이스로 사용하던 MongoDB에 다음과 같은 에러가 발생했습니다. 'Error: querySrv ENODATA _mongodb._tcp.cluster.mrbwkwq.mongodb.net' 오류는 MongoDB 클라이언트가 서버 주소를 찾기 위해 DNS 서버를 사용하며 발생할 수 있다는 것을 알게 되었습니다. 평소 공부를 하던 장소가 아닌 카페(스타벅스)에서 접속했을 때 에러가 발생하여, 다음과 같은 단계로 해결하였습니다. DNS 서버 확인하기 MongoDB 클라이언트는 MongoDB 서버의 주소를 찾기 위해 *DNS 서버를 사용합니다. MacOS를 기준으로 사용 중인 DNS 서버를 확인하고 변경하기 위해서는 아래와 같은 단계를 따를 수 있습니다. *DNS: 인터넷에서 도메..

  Read More
• [Next.js/코딩애플] React에서 Next.js로의 라우팅 변화 (feat. Dynamic Route)

  IT Study/FE 2023. 6. 30. 19:09

  프론트엔드 개발에 있어 React는 가장 중요한 도구 중 하나입니다. 그러나 React는 라우팅 기능을 기본적으로 제공하지 않기 때문에, 개발자들은 라우팅을 위해 'react-router-dom'과 같은 별도 라이브러리를 별도로 사용해 왔습니다. 1. React의 라우팅 React Router는 널리 사용되는 React의 라우팅 라이브러리로, 사용자가 URL을 통해 어플리케이션 내 이동할 수 있도록 돕습니다. React에서는 아래와 같이 라우팅을 설정할 수 있습니다. import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; 위 예시에서는 Rou..

  Read More
• [Next.js/코딩애플] Next.js의 시작

  IT Study/FE 2023. 6. 27. 14:17

  Next.js의 독학을 시작하며, 주요한 내용을 기록하기 위해 블로그에 기록을 작성해보려고 합니다. 1. Next.js의 파일 구조 파일(폴더)명 내용 layout.js page.js를 감싸는 파일 페이지 간 공유하는 UI (상단 메뉴바 등) 내용 작성 layout.js의 {children}: page.js 들어가는 부분 page.js 메인 페이지 파일 page.module.css (____.module.css) 유일하게 한 페이지에 적용할 수 있는 css 파일 public 이미지, 폰트 파일 저장 폴더 2. JSX 사용 방법: React 버전 HTML (1) return() 내 HTML 작성 시 평행하여 태그 작성 불가: only 1개 태그로 시작/종료 필수 (2) className 사용 (class ..

  Read More
• [React] 리액트의 시작 (특징과 JSX 규칙을 중심으로)

  IT Study/FE 2023. 5. 28. 03:13

  블로그 본문은 "리액트를 다루는 기술 - 김민준"을 기반으로 정리된 내용입니다. 리액트를 배우기에 앞서, 리액트의 주요 단어를 먼저 살펴보죠. 컴포넌트란? 리액트 프로젝트의 특정 부분이 어떻게 생길지 정하는 선언체로, 재사용이 가능한 API (생김새와 작동 방식 정의) 렌더링이란? 뷰를 보여주는 것 바로 들어가보겠습니다. 1. 리액트는 Virtual DOM (가상 DOM) DOM은 객체로 문서 구조를 표현하는 방법이며, Virtual DOM은 DOM을 통해 객체에 JS와 CSS를 적용할 수 있습니다. DOM 자체는 빠른 편이지만, DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하는 과정에서 시간 허비 발생합니다. 그렇다면 "일부만 리페인트하여 해결할 수..

  Read More