본문 바로가기

[Dev] 🎯Self Study

[git submodule error fix] 난 폴더를 올렸는데 서브모듈이 된 건에 대하여
[Dev] 🎯Self Study/[코딩] 너 또 오류나 ? error 모음집 2024. 7. 9. [git submodule error fix] 난 폴더를 올렸는데 서브모듈이 된 건에 대하여 오늘도 평화로운 깃허브 올리던 중 아주 신기한 에러 발견 내가 올린 폴더가 Submodule이 되다? 문제가 일어나게 된 이유는 다음과 같다. 1. 새 repo 대신 원래 있던 repo에 미니 프로젝트를 올려야지 기존 프로젝트 레포지토리에 미니 프로젝트 올리고, - git pull을 함 2. git add . (이 .이 문제였다.)3. git commit 날리고 4. git push origin 해야지 룰루---> 서브모듈이 되었다! 근데 해결방법은인터넷에 찾아도 없어서 좀 헤매긴 했다.  이때 해결하려면 submodule 삭제를 하라는데,git submodule status이 상태에선 또 app이 안나오는 게 문제.... (안나오는데 어케 삭제를 해요?)  문제 해결의 시작git initReinitia..
[Dev] 🎯Self Study/[코딩] 너 또 오류나 ? error 모음집 2024. 1. 15. [next 오류] Link Component , a 태그 오류 해결 : Unhandled Runtime ErrorError: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor 에러로그 Unhandled Runtime ErrorError: Invalid with child. Please remove or use .Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor 해결방법 1. legacyBehavior 속성 사용 : 컴포넌트에 legacyBehavior 속성을 추가하여 이전 방식으로 사용 Home 2. 직접 스타일링하기 : 컴포넌트 안에 태그를 사용하지 않고, **className**을 이용해 직접 스타일링 Home 이러한 변경사항은 Next.js의 최신 버전에서 새로운 링크 동작을 표준화하기 위한 것이므로, 위와 같은 방법으로 코드를 수정하면 된다. 나는 1번을 사용해서 Link, 앵..
[리액트에서 Next로] Next.js 기초 : 레이아웃, 프로그래믹 네비게이션, 로딩(loading), 에러 페이지 (error 컴포넌트) 예시
[Dev] 🎯Self Study 2024. 1. 11. [리액트에서 Next로] Next.js 기초 : 레이아웃, 프로그래믹 네비게이션, 로딩(loading), 에러 페이지 (error 컴포넌트) 예시 Next.js에서 레이아웃을 이용해 공통 UI를 구축하는 방법 [핵심 내용] 1. 레이아웃은 여러 페이지에서 공유되는 UI를 구축할 때 사용 2. 앱 폴더 내에 있는 루트 레이아웃은 모든 페이지에 공통으로 적용되는 UI를 정의, HTML과 바디 요소를 반환하고 바디 내에서 페이지의 Children을 동적으로 렌더링 3. 중첩된 레이아웃을 만들 수 있으며, 특정 레이아웃이 필요한 페이지를 위해 특정 레이아웃을 생성 가능 4. 레이아웃 컴포넌트가 역할을 하려면 반드시 children 프롭스를 가져야 하며, 이를 구현하기 위해 프롭스 형태를 정의하는 인터페이스를 생성 5. 관리자 레이아웃 컴포넌트를 통해 모든 관리자 페이지에 공통으로 사용되는 UI 요소를 설정 6. 네비게이션 바는 모든 페이지에 공통으로 적용..
[리액트에서 Next로] Next.js 기초 : 글로벌 스타일, CSS 모듈과 TailwindCSS
[Dev] 🎯Self Study 2024. 1. 10. [리액트에서 Next로] Next.js 기초 : 글로벌 스타일, CSS 모듈과 TailwindCSS Global Styles Next.js에서 Global Styles는 웹 애플리케이션 전체에서 공통으로 사용되는 스타일 웹사이트 전체의 폰트, 배 경색, 기본 마진 및 패딩과 같은 스타일을 설정할 때 Global Styles 를 사용 globals.css globals.css는 폴더 내에 위치한 전역 스타일시트로, 전체 애플리케이션에 적용되는 스타일을 정의하는 데 사용 next.js를 설치할 때 자동으로 global.css 설치가 된다. Tailwind 1. @tailwind base; : ex) box-sizing, margin, padding Tailwind의 기본 스타일(HTML 요소 리셋 등) 2. @tailwind components; : ex) @apply 사용자 정의 또는 플러그인의 컴포넌트..
[리액트에서 Next로] Next.js 기초 : 캐싱부터 정적-동적 렌더링
[Dev] 🎯Self Study 2024. 1. 9. [리액트에서 Next로] Next.js 기초 : 캐싱부터 정적-동적 렌더링 Caching 캐싱은 데이터나 결과를 저장하고 재사용하여 성능 향상과 리소스 절약을 목적으로 하는 기술로, 이전에 검색한 정보를 다시 계산하지 않고 빠르게 액세스할 수 있다. 캐싱은 찾고자 하는 데이터에 더 빠르게 접근할 수 있도록 데이터를 저장하는 행위 데이터는 크게 메모리, 파일 시스템, 그리고 네트워크 이렇게 3개의 장소에서 가져올 수 있다. 가져오는 속도는 메모리에서 파일 시스템 순으로 빠름 즉, 메모리를 통해 데이터를 가져오는 것이 가장 빠르고 네트워크를 통해 데이터를 가져오는 것이 가장 느림 넥스트JS는 내장 데이터 캐시를 제공 1. 패칭을 통해 데이터를 가져오면 가져온 결과를 파일 시스템 기반의 캐시에 저장 2. 결과적으로 동일한 URL의 재요청을 보내는 경우 다시 데이터를 요청하는 대신에 ..
[리액트에서 Next로] Next.js 기초 - 데이터 패칭 (Data fetching)과 JSONplaceholder를 이용한 서버 데이터 패칭 예시
[Dev] 🎯Self Study 2024. 1. 9. [리액트에서 Next로] Next.js 기초 - 데이터 패칭 (Data fetching)과 JSONplaceholder를 이용한 서버 데이터 패칭 예시 데이터 패칭은 렌더링과 동일하게 2가지 방식으로 되어있다. CSR vs SSR 클라이언트 사이드에서 데이터를 가져오기 위해서는 일반적으로 Use State 등에 상태값을 관리하는 리액트 훅을 실행시켜서 상태 변수를 선언하거나 Use Effect Hook을 통해 백엔드에서 데이터를 패칭해 상태 변수에 할당하는 방식으로 동작 가능하다. 물론 리액트 Query 등을 사용하면 Use State 나 Use Effect Hook을 직접 작성하지 않고 보다 더 수월하게 데이터를 패칭할 수 있지만 어떤 방법을 사용하던 클라이언트 단에서 데이터를 패칭하는 경우 아래와 같은 문제가 발생하게 된다. 1. 번들 사이즈 증가 2. 리소스 집약적 3. 검색 엔진 최적화 어려움 (SEO) 4. 낮은 보안성 5. 서버와의 추가통신 ..
[리액트에서 Next로] Next.js 기초 : SSR, CSR 렌더링 차이와 특징
[Dev] 🎯Self Study 2024. 1. 8. [리액트에서 Next로] Next.js 기초 : SSR, CSR 렌더링 차이와 특징 Next에서는 컴포넌트를 렌더링하는 2가지 방식이 존재한다. 1. client 의 web browser -> CSR (클라이언트 사이드 렌더링, 리액트와 유사) 2. server의 node.js 런타임 -> SSR (서버 사이드 렌더링) Client-Side Rendering (CSR) Server-Side Rendering(SSR) 큰 사이즈의 번들 크기 리소스 집약적 검색 엔진 최적화 어려움 (SEO) 낮은 보안성 작은 번들 사이즈 리소스 최소화 검색엔진 최적화 (SEO) 높은 보안성 CSR vs. SSR 클라이언트 사이드 렌더링 우선적으로 모든 컴포넌트를 번들링해 서 클라이언트로 전달합니다. 이는 애플리케이션의 크기가 커짐에 따라 번들 크기가 커짐을 의미합니다. 번들 크기가 커지면 커질수록 클라이언..
[Dev] 🎯Self Study/[코딩] 너 또 오류나 ? error 모음집 2024. 1. 8. [Git오류] push 할 때 생기는 [rejected] main -> main (non-fast-forward)error: failed to push some refs to 오류 오랜만에 깃 올리려고 하니까 또 오류가 났다. 새롭지도 않다. 문제의 발단. git 리포지토리를 생성할 때는 리드미를 생성하지 않아야 로컬에서 작업한 걸 올릴 때 충돌이 안난다!! 근데 나는 까먹고 만듦. (충돌 발생 원인) 일단 로컬에 깃을 연결하는 순서는 다음과 같다. git init git remote add origin [http 깃 주소] git remote -v (버전확인용) git add . git commit -m 'feat.first' git push origin main 이제 슬슬 오류가 발생한다. git push origin fatal: The current branch main has no upstream branch. To push the current branch and set ..
[리액트에서 Next로] Next.js 기초 : 초기 프로젝트 설정부터 네비게이션
[Dev] 🎯Self Study 2024. 1. 6. [리액트에서 Next로] Next.js 기초 : 초기 프로젝트 설정부터 네비게이션 일단 공식문서를 들어가자. Docs | Next.js Welcome to the Next.js Documentation. nextjs.org VScode를 켜서 터미널에 입력하자. npx create-next-app@latest 초기설정 설치 완료가 되면, 프로젝트 이동 및 실행 cd [프로젝트명] npm run dev ctrl + 링크를 눌러 접속 리액트와 넥스트의 차이는 다음과 같다. 리액트 = 라이브러리 넥스트 = 프레임워크 따라서 next에서는 폴더명, 파일명을 프레임워크에서 명시한 규칙에 따라 작성해야 한다. 프로젝트 구조를 살펴보면, 1. app router : 라우팅 시스템의 컨테이너 역할 : next는 파일시스템을 기반으로 하므로, react에서 직접 모듈 설치 및 컴포넌트를 구성하여 맵핑..
[Dev] 🎯Self Study 2023. 12. 3. [JavaScript] Debounce 함수 예제 및 풀이 JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해주는 함수 검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debounce를 이용하는 사례 출처와 예시 설명 Debounce(디바운스) - JavaScript에서 함수를 지연시키는 방법 (JS ES6 예제) JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해주는 함수입니다. 검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debou www.freecodecamp.org 사용 예시 타이핑을 끝내고 난 뒤에만 검색 질의(query)에 대한 제안 옵션을 보여주고 싶을 때 사용 코드 이..
[프로젝트 파일구조] demo 만들기
[Dev] 🎯Self Study 2023. 8. 5. [프로젝트 파일구조] demo 만들기 즐겁고~ 행복한 ~ 환경 세팅하기 ~ 1. 프로젝트 파일 생성하기 npx create-next-app@latest example[파일이름] 만들어졌다면 2. 이동하기 cd example[만든파일이름] 3. install하기 pnpm install ../ 이러면 이전 파일 src파일을 추적해서 사용할 수 있게 된다. 그리고 만들어진 example은 데모파일 즉 깡통임 진짜 값은 바깥의 src에서 만들어서 불러와 사용함 4. 프로젝트에 맞게 깡통 구성하기 위해서 ~~ npm 올릴때 .gitignore 안에 example을 넣어서 각자 환경에 맞게 해보기~ 5. example 바깥에서는 install 하기 pnpm i 그 다음 서버 및 클라이언트에서 구동을 하자. cmd를 두개 열고 하나는 프로젝트에서, 하나..
[너 또 오류나? NEXT.js] 터보레포 & 13.4.xx 버전 설치 실행 오류 해결! (2)
[Dev] 🎯Self Study/[코딩] 너 또 오류나 ? error 모음집 2023. 7. 31. [너 또 오류나? NEXT.js] 터보레포 & 13.4.xx 버전 설치 실행 오류 해결! (2) 터보레포가 너무 아쉽기 때문에 다시 해결책을 찾아가기 (feat. 멘토님 help) 다른 프로젝트들에서 자주 사용되는 오픈소스 코드처럼 파일을 만들어보라고 힌트를 주셨다. ./react-player-test ├── dist │ ├── components │ │ ├── sfac-player │ │ │ └── sfac-player.js │ │ ├── sfac-player-controller │ │ │ ├── sfac-player-controller.js │ │ │ └── sfac-player.js │ │ ├── sfac-player.js │ │ └── sfac-player.styles.js │ └── sfac-player.js ├── example │ ├── README.md │ ├── next-env.d...

티스토리툴바