Next.js는 Page Router 방식과 App Router 방식이 있는데 오늘은 Page Router 방식을 알아보고자 한다! 📄 Page Router현재 많은 기업에서 사용되고 있는 안정적인 라우터React Router처럼 페이지 라우팅 기능을 제공한다Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다 왼쪽 이미지처럼 파일 이름을 기반으로 페이지 라우팅을 자동으로 제공한다오른쪽 이미지처럼 폴더 이름을 기준으로도 페이지 라우팅이 자동으로 된다 import { useRouter } from 'next/router';const router = useRouter();// 쿼리스트링const { q } = router.query;// 파라미터const { id } = router.query;동적 ..

공통 프로젝트에서는 React를 썼는데 특화 프로젝트에서는 Next를 쓰려고 한다.React는 자바스크립트 라이브러리고, Next는 React의 프레임워크이다.라이브러리와 프레임워크의 차이가 뭔지 알아보자! 라이브러리 (Library)특정 기능을 구현하기 위해 제공되는 도구 모음개발자가 필요에 따라 호출하여 사용할 수 있는 함수나 클래스들의 집합ex) jQuery, Lodash, Numpy, pandas, tenserflow 등 프레임워크 (Framework)애플리케이션의 구조나 동작 방식을 정의하는 전반적인 툴 원하는 기능 구현에 집중하여 개발할 수 있도록, 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대 ex) Vue.js, Next.js, Spring, Django 등 여러 장치들이 합쳐져서 ..

React Router는 내비게이션, 경로 관리, 동적 페이지 렌더링 등을 위해 사용한다.React Router의 기능들에 대해 알아보겠다. 🔎 Link사용 시기내비게이션 바, 사이드 바, 메뉴 등에서 사용자가 클릭할 수 있는 정적인 링크 제공특징JSX 문법으로 선언적(Declarative)으로 경로 정의a 태그와 유사하게 동작하여 SEO 친화적a 태그와 유사하지만 페이지 리로드 없이 클라이언트 측 경로를 변경예시 코드import { Link } from 'react-router-dom';const NavigationMenu = ({src, alt, text, width, to}: NavigationMenuProps) => { return ( {text} );}; 🔎 use..

☕ 자바 프로그램 실행public class HelloJavaHelloJava 클래스 생성파일명과 클래스 이름이 같아야 함{} 블록을 사용해서 클래스의 시작과 끝을 나타냄public static void main(String[] args)main 메서드자바는 main(String\[\] args) 메서드를 찾아서 프로그램을 시작{} 블록을 사용해서 메서드의 시작과 끝을 나타냄System.out.println("hello java");System.out.println(): 값을 콘솔에 출력"hello java": "(쌍따옴표) 사이에 원하는 문자열을 감쌈;: 세미콜론으로 문장 구분 ☕ 자바 표준 스펙과 구현🍪 자바 표준 스펙자바는 이렇게 만들어야 한다는 설계도이자 문서임이 표준 스펙을 기반으로 여러 회사..

1️⃣ React Quill 사용하기React Quill은 리액트의 텍스트 에디터 라이브러리 중 하나이다.위지위그(WYSIWYG, What you see is what you get)라고도 하는데, "보는 대로 얻는다"라는 뜻이다.즉, 사용자가 텍스트 에디터에서 작성하며 보여지는 그대로 출력물에서 나타나도록 한다. 📍  패키지 설치yarn add react-quill 📍 기본 코드import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';interface TextEditorProps { value: string; onChange: (value: string) => void;}const TextEditor = ({val..

안녕하세요😀 싸피 11기 2학기가 시작한지 한 달이 다 되어 갑니다🍃저희 팀 주제는 데스크탑보다 모바일에 적합할 거 같아 웹앱을 구현하기로 했는데요!PWA 특징과 PWA를 쓰기 위한 세팅법을 알아보겠습니다. 📱 PWAProgressive Web Apps모바일에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱ex) Twitter Lite특징PWA는 웹처럼 개발하면 되지만 스마트폰에 네이티브 앱처럼 설치할 수 있고 앱처럼 보이고 동작한다.검색 엔진이 최적화되어있다. (SEO)백그라운드 기능이 네이티브 앱보다는 제한적이지만, 푸시 알림 정도는 가능하다.네이티브 앱에 비해 하드웨어 접근이 제한적이다.저희 팀은 React를 써서 프로젝트를 진행할 계획이었는데 주제가 모바일에 적합해 PWA를 적용하게 되었..

⚡ WebSocket서버와 클라이언트 간에 언제든 양방향 통신이 가능하도록 하는 기술 WebSocket 특징실시간, 양방향 및 지속적인 연결짧은 지연 시간의 데이터 교환실시간 채팅이나 게임에 적합HTML5 표준 기술로 최신 브라우저의 경우 웹소켓 지원미지원 브라우저도 존재 - WebSocket Emulation으로 대체 (socket.io, SockJS) WebSocket 통신 비교기본적인  HTTP 통신WebSocket단방향 통신양방향 통신클라이언트가 요청을 보내면 서버가 응답별도의 요청을 보내지 않고도 데이터 수신 기본적으로 HTTP 통신은 클라이언트가 요청(Request)을 보내면 서버가 응답(Response)하는 구조이다. 서버는 능동적으로 클라이언트에 먼저 데이터를 전송할 수 없기 때문에 클라이..

🔎 개발자 도구웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다. 🧩 주요 패널Elementshtml/css 상태 확인ConsoleJavaScript 코드 실행 및 디버깅로그 확인오류 메시지 표시Sources페이지 소스 검사 및 디버깅break point 지정 및 변수 모니터링Network브라우저에서 발생하는 통신 상태네트워크 모니터링네트워크 요청 상세 정보 확인Performance성능 측정페이지 로드 및 상호작용 성능 분석타임라인 기록Application저장소, 쿠키, 캐시 등을 관리Se..