분류 전체보기

📘 Page Router 장점📄 파일 시스템 기반의 간편한 페이지 라우팅 제공pages 폴더 안의 파일 구조에 따라 라우팅동적 경로를 사용하는 다이나믹 페이지도 대괄호를 통해 하나의 URL 파라미터에 대응 가능book/1, book/2, book/3, ...catch-all segments: [..id]중첩된 모든 URL 파라미터에 대응 가능book/1, book/2/100, book/100/2345/233/5232, ...optional catch-all segments: [[...id]]인덱스 페이지까지 포함하면서 동시에 중첩된 모든 URL 파라미터에 대응 가능book, book/1, book/2/100, book/100/2345/233/5232, ...📄 다양한 방식의 사전 렌더링 제공리액트의..

🧐 공통 프로젝트?공통 프로젝트는 싸피 2학기의 첫 프로젝트이다!프로젝트 기간은 2024.07.02(화) ~ 2024.08.16(금)로 약 7주간 진행한다.나는 팀 구성을 꼭 FE 3 + BE 3으로 구성하고 싶었기에 적극적으로 팀 빌딩을 했다.자기소개 자료를 빨리 만들어서 mattermost에 올리고 함께 할 팀원들을 찾았다.그 결과인지 다들 열심히 하는 팀원들을 만날 수 있었고, 좋은 결과까지 나와 기쁘당😄 💡 아이디어 해커톤초반에 아이디어 해커톤을 진행하는데 하루만에 아이디어 논의하고 피그마 만들고 발표자료까지 만들어서 발표해야 돼서 힘들닷..🥲우리팀은 '독립 지원 서비스'를 주제로 발표했다. 아이디어 해커톤에서 1, 2등을 뽑는데 우리 팀은 순위권에 들지 못해 우리 주제가 별론가 고민하게 ..

🚨 문제 상황 🥁 해결 방법윈도우에서 PowerShell의 실행 정책 때문에 발생한 문제라고 한다.yarn.ps1 파일을 실행하려고 할 때, 시스템에서 스크립트 실행이 차단되고 있다. 1. PowerShell을 관리자 권한으로 실행 2. 실행 정책 확인Get-ExecutionPolicyRestricted로 설정되어 있었다. 이를 RemoteSigned로 변경해서 로컬에서 실행되는 스크립트는 허용하고, 원격에서 받은 스크립트는 서명이 필요하도록 설정한다. 3. 실행 정책 변경Set-ExecutionPolicy RemoteSigned -Scope CurrentUser위 명령어로 실행 정책을 RemoteSigned로 변경한다.3번을 완료하고 2번을 다시 해보면 RemoteSigned라고 뜬다. 이제 yar..

1️⃣ npmNode.js의 패키지를 관리할 수 있는 도구Node.js를 설치하면 npm도 자동으로 설치됨 🛡️ 패키지 관련 명령어프로젝트 초기화 (package.json 생성)npm initpackage.json과 package-lock.json에 정의된 모든 의존성 설치npm installnpm i패키지 설치npm install [패키지 이름]npm i [패키지 이름]devDependencies에 패키지 추가npm install --save-dev [패키지 이름]npm i -D [패키지 이름]패키지 업데이트npm update [패키지 이름]패키지 제거npm uninstall [패키지 이름]현재 프로젝트에 설치된 패키지 목록 확인npm list 🛡️ 의존성 관리package.jsonpackage.j..

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": "(쌍따옴표) 사이에 원하는 문자열을 감쌈;: 세미콜론으로 문장 구분 ☕ 자바 표준 스펙과 구현🍪 자바 표준 스펙자바는 이렇게 만들어야 한다는 설계도이자 문서임이 표준 스펙을 기반으로 여러 회사..