y.developer

2023.12.29 금 DailyC 프로젝트에서 Recoil 사용하기 layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( DailyC 글쓰기 마이페이지 {children} ); } state.ts import { atom } from "recoil"; export const isLoginState = atom({ key: "isLoginState", default: false, }); export const userState = atom({ key: "userState", default: { id: "", email: "", nickname: "", height: "", ..

2023.12.28 목 git push 소요시간이 너무 길어지는 현상 팀프로젝트를 진행하던 중 git push를 하는데 소요되는 시간이 너무 길고, 파일도 너무 많다는 것을 알게되었다. 문제의 원인을 파악해보니 초반 프로젝트 세팅 때 .gitignore를 설정하는 것을 빼먹고 git push를 진행했더니 push 소요 시간이 너무 길어졌던 것이다. yarn dev나 yarn build 시 생성되는 .next 폴더는 Next를 구동하기 위해서 빌딩되는 파일로서 용량이 상당하다. git hub에 올리는 것에 큰 부담이 있을 법한 용량이며, 팀원들이 pull 받았을 때 yarn dev 또는 yarn build를 통해서 충분히 생성 가능하므로 .next 폴더를 제외하고 push를 하는 것이 좋다. .next를 ..

2023.12.27 수 - Next.js의 장점인 SSR을 활용하지 못하기 때문에 - 콘솔로그 찍어가며 어느 부분이 클라이언트 사이드 렌더링을 필요로 하는지 - 처음에는 useState인줄 알았으나 아니었다. 아마 submit쪽인듯 - 해당 부분 찾은 후 해당부분을 컴포넌트화. 그 컴포넌트만 use client 적용 - 컴포넌트 최상단에 "use client" 작성 1. useClient란? Next.js에서 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)를 명확히 구분하는 데 사용되는 특별한 훅입니다. 이 훅은 클라이언트 사이드에서만 실행되어야 하는 로직을 포함하는 컴포넌트를 지정하는 역할을 합니다. [NeXT 공식 문서](https://nextj..

2023.12.26 화 문제 상황 1 Next.js에서 작업 후 yarn build → yarn start 는 정상 작동 yarn dev 시 에러 발생. Error node:internal/modules/cjs/loader:1051 throw err; ^ Error: Cannot find module 'C:\Users\?ㅼ갹洹?AppData\Roaming\npm\node_modules\yarn\bin\yarn.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Module._load (node:internal/modules/cjs/loader:901:27) at Function.executeUserEntryPoint [..

2023.12.22 금 NoSQL Not only SQL 혹은 Not SQL 혹은 Non SQL 이라고 부른다. 그러나 딱 한가지 종류의 DB만을 뜻하지는 않는다. 거대한 DB의 그룹들이라고 생각하면 된다. 마치 한국음식 vs 외국음식(Non한국음식)을 비교하는 것과 같다. 한국음식이 아닌 외국음식은 거대한 카테고리가 될 것이다. 같은 논리가 SQL vs NoSQL에도 적용이 된다. 그렇다면 NoSQL의 종류에는 어떤 것이 있는지에 대해서 알아보자. 대표적으로 3가지의 카테고리가 있다! 1. DocumentDB : MongoDB - MongoDB json document 형태로 저장 SQL에서는 데이터의 구조가 꽤나 엄격하다. 그에 반해서 mongoDB에서는 원하는 무슨 형태든 저장가능하고, 또한 데이터..

2023.12.21 목 1. SQL은 언어이다 SQL (Structured Query Language) SQL을 이해하기만 한다면 프로젝트를 할 때 큰 도움이 될 수 있다. 단지 이해만 하더라더도 말이다! 이력서를 작성할 때뿐만 아리라 기술 인터뷰에서도 큰 도움이 될 것이다. 신기한 사실은 SQL은 프로그래밍 언어가 아니다는 것이다. 그리고 자바, 파이썬 등 다양한 언어들보다 유명하다는 것이다. 그럼에도 불구하고 사람들이 공부를 많이 하지 않는 부분이기에 어떤 풀스택 개발자는 단 1줄의 SQL코드도 써보지 않았다는 사람도 있다. 깊게는 아니더라고 이해만 할 수 있다면 높은 경쟁력을 가질 수 있을 것이다! 2. 데이터베이스와의 대화 데이터베이스와 대화하기 위해서 특별히 디자인된 언어이다. 데이터에는 2가지..

2023.12.19 화 Rendering Javascript를 이용해서 HTML을 만드는 행위 기존 SPA를 만들 때 사용하던 CSR에서의 rendering 표현에 가깝다. const element = ( Hello, world! ); // JSX의 동작 -> Javascript로 HTML 태그를 만든다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Pre-rendering Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말한다. 언제 HTML을 만드느냐에 따라서 Server-Side Rendering(SSR)과 Static-Si..

2023.12.19 화 React - React는 페이스북에서 개발한 라이브러리로, 사용자 인터페이스를 만들기 위해 사용된다. - 주로 컴포넌트 기반 아키텍처를 통해 UI를 구축하며, 가상 DOM을 활용하여 효율적인 렌더링을 제공한다. - React는 단일 페이지 애플리케이션(SPA) 또는 다른 프레임워크와 함께 사용될 수 있다. Next.js - Next.js는 React 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크이다. - React를 기반으로 하면서도 라우팅, 서버 사이드 렌더링, 코드 분할과 같은 기능들을 기본적으로 제공한다. - 특히, Next.js는 React 애플리케이션을 보다 구조화되고 확장 가능하게 만들어주는 프레임워크로 분류된다. 간단히 말하면..