Im Bay

01 Java Platform 이해 프로그래밍 언어의 역할 컴퓨터에서 동작하는 Application을 만들기 위한 과정 Compile 언어와 Script 언어로 구분 자바의 특징 플랫폼 독립적 JVM(Java Virtual Machine)으로 .class 자바 파일 실행 객체 지향 언어 함수형 코딩 지원 분산처리 지원 멀티 스레드 지원 동시에 여러 가지 작업을 할 경우 대용량 작업 동적 로딩 지원 (import) 미리 만들어진 객체를 필요한 시점에 동적 로딩하여 객체 생성 JDK와 JRE JDK (Java Development Kit) 자바 개발 도구 Compiler, Debugger JRE (Java Runtime Environment) 자바 실행 환경 Class Loader, Java API Runt..

10 Next.js - Styling (TailwindCSS & Shadcn) shadcn/ui 설치 cmd 창 next 프로젝트 최상단 디렉터리에서 npx shadcn-ui@latest init 입력 style: Default 선택 color: Slate 선택 CSS variables: yes 선택 shadcn/ui 사용 shadcn/ui는 필요한 컴포넌트를 바로바로 install 하여 사용할 수 있다. https://ui.shadcn.com/docs/components/accordion 에서 필요한 컴포넌트 검색 후 install 하기 예시 버튼 사용하기 npx shadcn-ui@latest add button 입력 자동으로 button.tsx 생성 완료 11 Next.js - Server API와 ..

09 Next.js - CSR, SSR, SSG, ISR Data Fetch Sample CSR (Client Side Rendering) 파일에 최상단에 ‘use client’; 작성 SSG (Static Site Generation) getStaticProps cache: “no-store” SSR (Server Side Rendering) getServerSideProps cache: “force-cache” ISR next: { revalidate: 초, } 프론트엔드 실습 과제 풀이 시간 구현하지 못한 내역 세션 컨텍스트 구현하지 못한 것 풀이 코드 (session-context.tsx) import { createContext, PropsWithChildren, useContext, useEf..

05 Next.js (v14) 시작하기 Next.js란 React 기반 풀스택 웹 개발 프레임워크 PageRouter, AppRouter Multiple Rendering Types (SSG, CSR, SSR, ISR) TailwindCSS, TypeScript, Optimization(Image, Font, Scripts, Core Web Vitals) Next Rendering Methods SSG (Static Site Generation) Build시 미리 생성 (getStaticProps) SSR (Server Side Rendering) 요청(request)시 생성해서 응답 (getServerSideProps) ISR (Incremental Static Regeneration) SSG를 점진적..

04 React - Routing Storybook Storybook 설치 cmd 프로젝트 위치에서 npx storybook@latest init http://localhost:6006/ 접속 후 확인 Storybook tailwind 적용 .storybook 폴더- previews.ts 파일 안에 import '../src/index.css'; import 하기 previews.ts import type { Preview } from '@storybook/react'; **import '../src/index.css'; // 추가!** const preview: Preview = { index.css (파일 안에 tailwind가 있어야 함) @tailwind base; @tailwind compone..

04 React - Routing Github Pages로 배포하기 배포 전 설정 cmd 창에서 프로젝트 폴더로 이동 후 npm i gh-pages -D package.json 파일의 “scripts” 블록 안에 "build” 바로 아래에 "deploy": "gh-pages -d dist" 추가 package.json "scripts": { "dev": "vite", "build": "tsc && vite build", "deploy": "gh-pages -d dist", // 추가! 배포 vite.config.ts 파일의 plugins: 바로 아래에 base: '/깃레포지토리이름/', 추가 vite.config.ts export default defineConfig({ plugins: [react()]..

04 React - Routing Router Hooks useOutletContext const outctx = useOutletContext(); useLocation & useParams const { id } = useParams(); const location = useLocation(); const state = location.state as { x: number }; useSearchParams const [searchParams, setSearchParams] = useSearchParams({}); Layout 하위 Route의 페이지 레이아웃 잡기

02 React Hooks memo memo란 component memoization 컴포넌트가 props로 동일한 결과를 랜더링하면 memo를 호출하고 결과를 memoizaing하여 성능 향상 (마지막으로 랜더링된 결과를 재사용) props 변화에만 영향을 주고 state, context가 변하면 재랜더링 기본 형태 memo(Component, (pre, curr) ⇒ !!cache); 두번째 함수가 true를 반환하면 cache 예시 memo(Component, () ⇒ true) 영원히 cache memo(Component, ({prop: a}, {prop: b}) ⇒ a === b); 이전 상태값과 현재 전달된 값이 같으면 useId 고유한 ID를 생성해주는 hook 변경될 수 있는 곳(key, ..

02 React Hooks useMemo useMemo란 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다. 변수를 React Static 영역에 cache 메모화된 변수는 이제 주소가 변하지 않는다. 사용 import import { useMemo } from ‘react’; 기본 형태 const 메모화된_변수 = useMemo(() => { 비용이_드는_코드; return 메모화할_값; }, [의존관계변수들]); useReducer useReducer란 reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것 reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새..

02 React Hooks useEffect useEffect call twice 개발환경 + Strict Mode에서 의존 관계 배열이 비워져있을 때 2회 호출 (Mount - UnMount - Mount) Mount는 컴포넌트가 최초로 나타낼 때, UnMount는 사라질 때 rendering은 컴포넌트가 Mount 된 후 컴포넌트가 호출 될 때 cleanup 해주고 2회 호출되어도 안전한 코딩을 해야함 (ex. timer, eventListener, data, add, remove) 예시 const [goodSec, setGoodSec] = useState(0); useEffect(() => { const intl = setInterval(() => { setGoodSec((pre) => pre + ..