나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/Next.js

Next.js 로 Link를 이용하여 페이지 이동을 구현해보겠습니다. import Link from 'next/link'; import React from 'react'; function Header() { return ( Home Profile About ); } export default Header; Header 컴포넌트를 만들고 그 안에 next에서 제공해주는 Link에 href를 이용하여 페이지 이동을 해줄 수 있습니다. 참고로 페이지가 될 컴포넌트들은 components 폴더가 아닌 pages 폴더에 만들어주시면 됩니다. 그러면 next에서 자동적으로 pages 내부의 파일들을 찾아서 이동시켜줍니다. Home 화면 Profile 화면 About 화면 잘 작동합네요 리액트 라우터의 기능처럼 뒤에..

2021. 2. 19.

코딩 기록/Next.js

Next.js란 보통 SPA로서 CSR 방식으로 작동하는 React를 SSR 방식으로 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. Next.js를 사용하지 않고도 SSR 방식으로 렌더링을 구현할 수 있지만 Next.js를 이용하여 쉽고 간편하게 서버 사이드 렌더링을 제공할 수 있습니다. 서버 사이드 렌더링은 검색엔진에 쉽게 노출될 수 있고 초기에 로딩할때 모든 데이터를 불러오지 않기 때문에 성능이 개선됩니다. 서버 사이드 렌더링과 코드 스플리팅이 필요없는 어드민 페이지 같은 경우는 굳이 Next.js를 사용하지 않아도 되지만 보통의 경우, 사용자가 이용에 있어서 불편함을 개선시키기 위해 Next.js를 사용하는것을 긍정적으로 생각해볼 수 있습니다. 저번에는 npm init으로 직접 시작하고 npm ..

2021. 2. 19.

코딩 기록/Next.js

Next.js란 보통 SPA로서 CSR 방식으로 작동하는 React를 SSR 방식으로 쉽게 구현할 수 있도록 도와주는 프레임워크입니다. Next.js를 사용하지 않고도 SSR 방식으로 렌더링을 구현할 수 있지만 Next.js를 이용하여 쉽고 간편하게 서버 사이드 렌더링을 제공할 수 있습니다. 서버 사이드 렌더링은 검색엔진에 쉽게 노출될 수 있고 초기에 로딩할때 모든 데이터를 불러오지 않기 때문에 성능이 개선됩니다. 서버 사이드 렌더링과 코드 스플리팅이 필요없는 어드민 페이지 같은 경우는 굳이 Next.js를 사용하지 않아도 되지만 보통의 경우, 사용자가 이용에 있어서 불편함을 개선시키기 위해 Next.js를 사용하는것을 긍정적으로 생각해볼 수 있습니다. 시작하기 위해 node.js 가 필요한데 저는 이미..

2021. 2. 17.

코딩 기록/기타

보통의 웹사이트는 브라우저에서 요청을 보내면 프론트 서버에서 필요한 요청을 백엔드로 다시 보냅니다. 백엔드는 그 필요한 요청을 해결하기 위해 데이터베이스에서 데이터를 받아와서 프론트 서버로 보내주고 프론트 서버에서는 받아온 데이터를 HTML과 함게 브라우저로 보내줍니다. 즉 서버에서 렌더링을 마치고 데이터가 결합된 HTML을 브라우저에 받아와주는 방식입니다. 이 방식을 SSR (Server Side Rendering) 이라고 하며 이는 데이터의 흐름이 순서대로 진행됩니다. SSR은 화면의 전체가 한방에 그려진다는 장점이 있지만 과정이 길어 로드가 오래걸릴 수 있다는 단점이 있습니다. 그리고 React, Vue, Angular 등에서 많이 쓰이는 CSR (Client Side Rendering) 방식이 있..

2021. 2. 17.

코딩 기록/자바스크립트

자바스크립트로 큐(Queue) 기능을 구현해봤습니다. 큐는 FIFO로 First In First Out, 처음으로 들어온 데이터가 처음으로 나가는 구조입니다. // 큐 클래스 class Queue { constructor() { this._size = 0; // 현재 데이터 수 this.head; // queue 기준 현재 값 this.tail; // queue 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 큐 추가 enQueue(value) { const node = { value }; if (this._size === 0) { this.head = node; } else { thi..

2021. 2. 9.

코딩 기록/자바스크립트

자바스크립트로 스택(Stack) 기능을 구현해봤습니다. 스택은 LIFO로 Last In First Out, 마지막으로 들어온 데이터가 처음으로 나가는 구조입니다. // 스택 클래스 class Stack { constructor() { this._size = 0; // 현재 데이터 수 this.head; // Stack 기준 현재 값 this.tail; // Stack 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 스택 추가 push(value) { const node = { value }; if (this._size === 0) { this.head = node; this.tail =..

2021. 2. 8.

코딩 기록/자바스크립트

Balloon Pop! v 1.0 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/balloon-pop/ 게임 설명 [1부터 순서대로 풍선을 터치는 게임] 주어진 시간안에 숫자가 적혀있는 풍선을 1부터 순서대로 눌러 터치는 게임입니다. - START 버튼을 클릭하여 시작합니다. - LEVEL 버튼을 클릭하여 난이도를 조정할 수 있습니다. - 풍선에 숫자가 적혀있는데 1부터 순서대로 누르면 됩니다. - 풍선의 위치는 랜덤입니다. - 왼쪽 아래는 터뜨린 풍선의 숫자, 오른쪽 아래는 제한시간입니다. - 제한시간 안에 풍선을 모두 터뜨리지 못하면 게임은 패배합니다.

2021. 2. 8.

코딩 기록/자바스크립트

PC Mobile 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/mini-clothing-store/ 기능 설명 [카테고리 메뉴 기능] 처음에 아이템들은 json 데이터를 받아와 html로 변환하여 정렬합니다. 해당 카테고리 메뉴들이 링크가 아닌 하나의 페이지에서 자바스크립트를 이용하여 각각 아이템들의 데이터를 파악하여 해당하는 아이템들만 보여지게 됩니다. 각각의 카테고리 메뉴를 클릭하면 해당 카테고리에 해당하는 옷들이 분류되어 나타납니다. 체크상태인 메뉴들을 다시 클릭하면 체크가 해제됩니다. (상품 다시 필터링)

2021. 2. 8.

코딩 기록/자바스크립트

Fish Catch! v 1.0 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/fish-catch/ 기능 설명 [성게를 피해 물고기를 클릭하는 게임] 주어진 시간안에 성게를 피해 물고기를 클릭하는 게임입니다. - ▶버튼을 누르면 게임이 시작되고 시작한 이후에 ⏸버튼을 누르면 게임이 일시정지 됩니다. - 일시정지한 이후에 나오는 팝업에 🔄버튼을 누르면 처음부터 재시작됩니다. - 시간이 0초가 될때까지 당근을 모두 클릭하지 못하면 패배합니다.

2021. 2. 8.