참고자료: 참고자료1 [React] 리액트 훅에 대해 알아보기(React Hooks란?) 1. React Hooks란? 리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16. choijying21.tistory.com 참고자료2(useRef) useRef – React The library for web and native user interfaces react-ko.dev 참고자료3(useRef) [React] useRef란? 📋 useRef란? > useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반..

참고자료: 컴포넌트 라이프 사이클, DOM DOM은 정확히 무엇일까? | WIT블로그최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 What, exactly, is the DOM? 문서를 번역해 보았습니다.wit.nts-corp.com [React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가koras02.tistory.com ⭐️ 컴포넌트 라이프사이클- 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트 - 리액트 컴포넌트는 라이프사이클을 갖는다 - 크게 세가지 카테고리로 나뉘며 개괄..

참고자료: 참고자료 ⭐️ OSI 7계층 - 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것 📚 7계층으로 나눈 이유는? - 단계별로 한눈에 파악하기 위해 💡 ) 만약, PC방에서 게임이 끊겼다면, 이 문제를 해결해야 한다. 🌻) 모든 PC에서 문제가 있다면, 라우터의 문제(3계층 네트워크)이나 광랜을 제공하는 회사의 회선문제(1계층 물리계층) - 또는 한 PC만 문제가 있다면, 소프트웨어 문제 (7계층 어플리케이션 계층) - 소프트웨어 문제가 없고, 스위치에 문제가 있으면 (2계층 데이터링크계층) 있다고 판단해 다른 계층에 있는 장비나 소프트웨어를 건들이지 않을 수 있다. 📚 OSI 7계층 단계 📚 1계층 물리계층 - 2계층 데이터링크 계층 - 3계층 네트워크 계층 - 4계층 전송계층 - 5계층 세..

출처: 준재님 메타문자 정리 쓰윽~ GitHub - bear-bear-bear/learning-regExp: 정규 표현식 학습 정규 표현식 학습. Contribute to bear-bear-bear/learning-regExp development by creating an account on GitHub. github.com ⭐️ 정규표현식의 메타 문자 - 자체적인 의미를 가지지 않고 특별한 방식으로 해석 - 대괄호 안에서 쓰임 ✨ / - 보통 패턴의 시작과 끝 ✨ . (아무 문자) - 온점(.)은 어떠한 단일 문자와도 매치되지만 리턴 혹은 개행 문자와는 매치 X - 예를 들어, .ar은 어떤 단일 문자 다음에 a가 오고, r이 오는 패턴 - ".ar" -> The car parked in th gar..

http://blog.302chanwoo.com/2017/08/javascript-array-method/ [ javascript ] Array method 정리[ javascript ] Array method 정리blog.302chanwoo.com ⭐️  배열 메소드 ✨ pop 뒷 부분 삭제var arr = [ 1, 2, 3, 4 ];arr.pop();console.log( arr ); // [ 1, 2, 3 ]   ✨ push 뒷 부분 값에 삽입var arr = [1,2,3,4];arr.push(5);console.log(arr);//[1,2,3,4,5]  ✨ unshift앞 부분에 값 삽입var arr = [1,2,3,4];arr.unshift(5);console.log(arr);//[5,1,2,3..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션6 . authjs(NextAuth)를 활용한 인증 기능 구현 ⭐️ 44강 (강의 번호가 이상해...) auth(nextauth) 설정 - AWS.js 라이브러리 사용하기 npm install next-auth 📚 경로 - app/auth/[...nextauth]/route.ts - 위에 경로로 잡으면 api-auth로 시작하는 모든 경로에 대한 요청을 처리할 수 있음 📚 환경변수 설정 - .env 파일에서 openssl rand -base64 32 - openssl 임의의 바이트 시퀀스를 사용할 수 있음 -rand 무작위로 생성 - base64: base64 알고리즘을 사용하여 인코딩 -32는 32바이..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션4 . 프리즈마를 활용한 데이터베이스 구축 ⭐️30강 MySQL 설치 ⭐️31강 Prisma 설치 - 프리즈마는 ORM, 객체 관계 매핑 도구 - 데이터베이스 작업을 좀 더 쉽게 - 애플리케이션 코드와 데이터베이스 사이의 연결을 매끄럽게 - 쿼리 전송이나 데이터 조작 과정을 추상화하고 간소화 ⭐️32강 데이터 모델 정의 ✨데이터모델링 - 만들고자 하는 애플리케이션 핵심요소, 엔티티 정의하는 과정 💡) 쇼핑몰: 제품, 고객, 장바구니, 주문 - Pascal Case로 작성할 것 ex) FirstName, UserAge ✅ npx prisma init ✅ npx prisma format ⭐️ 32강 마이그레..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 😀 섹션2. 라우팅과 네비게이션 ⭐️ 13강 - 라우팅 동작 방식 📚가능한 파일 이름 - page.tsx - layout.tsx - loading.tsx - route.tsx : API을 만들때 - not-found.tsx - error.tsx - ✅ 공통 컴포넌트 "components" 폴더에 저장하고 단독으로 쓰인다면, 라우터 안의 폴더에 저장할 것 ⭐️ 14강 다이나믹 라우트 - 폴더를 "users/[id]" 를 넣으면 매개변수에 대한 페이지 - users/id/photos/photosId 의 라우터 주소 일 때, id와 photosId는 둘 다 매개변수 ⭐️ 15강 catch-all segments 💡 ..

제발 외우자 git 명령어 ... ㅠㅠㅠㅠ ⭐챕터 원! git 기본 명령어 ✅ 현재 상태 확인 git status ✅ 전체 로그 확인 git log ✅ 깃 저장소 생성하기 git init ✅ 저장소 복제 git clone 레포주소 ✅ GITHUB 주소 연결 git remote add origin [github 주소] ✅ 저장소 코드 추가 git add - 커밋 변경사항 모두 포함 git add -A ✅ 커밋 생성 git commit -m 'message' ✅ git 변경 사항 원격 서버 업로드 git push origin master ✅ 저장소 변경 내용 가져오기 git pull ✅ 변경 내용을 머지하기 전에 바뀐 내용 비교 git diff [브랜치 이름] [다른 브랜치 이름] ⭐ 챕터 투! git br..

참고자료: [Sucode] Next.js: 3시간으로 완성하는 Next.js 필수 개발 가이드 ⭐️ 3강 라우팅과 네비게이션 ✨ Link component ⭐️ 4강 - 클라이언트 컴포넌트와 서버 컴포넌트 ✨ 서버 사이드 컴포넌트 - 서버에 요청이 들어왔을 때 필요한 컴포넌트만을 클라이언트로 전송하면서 작은 번들 사이즈로 리소스 양 최소화 - 서버에서 모든 html 마크업을 생성해 클라이언트로 전송하기 때문에 검색 엔진 최적화 가능 - API 키와 같은 민감한 데이터를 서버에서 유지하면서 높은 보안성 유지 - 단점: 브라우저 이벤트 추적 불가, 상태관리 훅 불가, BrowserAPI 접근 불가 - 부라우저 API 접근 불가. 그렇기 때문에 클릭 이벤트를 추가하면 오류 발생 ⭐️ 5강 - 데이터 패칭 📚 ..

참고자료: HTTP 완벽 가이드(저자: 데이빗 고을리) 웹이 어떻게 동작하는가.. 궁금한 것이 너무 많아, 다람쥐 책을 펼쳤다.. 헷갈리는 것, 기억하고 싶은 부분을 기록했다.. 뭉뚱그려 큼지막한 용어 정리부터 더 궁금한 파트까지.. 알차게 적어보았다. 하지만, 이 책을 뜨문뜨문 읽은 죄로 다람쥐로 변해버렸담... 🐿 표현한 이모지 ⭐️ : 큰 키워드 ✨: 세부 용어 정리 📚 : 파트, 소제목 ✅ : 소제목 안의 키워드 및 설명 💡 : 예시 설명 ⭐️ URI - 정보 리소스를 고유하게 식별하고 위치를 지정하는 역할. - 리소스에 대한 고유한 식별자 📚 종류 ✨ 1. URL - 특정 서버의 한 리소스에 대한 구체적인 위치 - URL의 첫 번재 부분을 스킴(scheme), 리소스에 접근하기 위해 사용되는 프..

글쓴이가 헷갈리는 부분, 중요한 부분을 담은 블로깅입니다. 모든 내용이 들어간 것이 아닌 딱 요점만! 기억해야 하는 부분만! 정리해서 업로드한 것이니 참고 바라며, 출처는 이 곳에 남기겠습니다. 😎 Learn Next.js | Next.js by Vercel - The React Framework Next.js by Vercel is the full-stack React framework for the web. nextjs.org * 사용한 이모지들의 의미 😎 ✨ : 단어 의미 📚 : 소제목 ✅ : 소제목 안의 키워드 및 설명 ❓ : '만약'이라는 의미 ‼️: 중요 ! 1. 1장 세팅 (건너뛰기) 2. 2장 css 스타일링 📚 clsx 라이브러리 사용 status 상태가 pending이거나 paid일 경..