본문 바로가기

전체 글

(14)
📝 React 투두리스트 만들기 📌 시작하며간단히 일정하기 위해 만들어볼 것.할 일 추가, 생성, 완료 + 삭제 기능 구현 CRUD 구현구현하면서 알게 된 내용을 기록하는 것이다. 📌 투 두 리스트 목표🖊️ 메모 생성, 삭제, 수정 기능 (CRUD)✅ localStorage 연동✅ 상태관리 개선: Zustand 적용npm install zustand아래 목록은 추가 기능으로 하고 싶은 목록이다.🔒 로그인 연동: Firebase Auth☁️ DB 저장: Supabase/Firebase Firestore드래그 & 드롭으로 리스트 이동날짜별 할 일 (캘린더 적용 가능할까? )📌 패키지 사용zustand - 스토어 사용 (새로 고침시 목록 유지) 사실 이거 아니여도 로컬스토리지를 사용해도 괜찮다.React Icons - 다양한 아이..
🌱 React 첫 프로젝트 생성하기 (create-react-app) - 완전 초보 가이드 React의 완전 저같은 초보가 프로젝트를 만들어 볼 수 있는 방법을 공유하려고 한다.순서대로 진행해보자. 🚀 🎈1. React를 시작하려면?React 프로젝트를 만들기 위해선 Node.js 코드 편집기 (Visual Studi Code, 줄여서 VS Code - 제일 많이 사용함)이 필요하다.🎈2. React 환경설정하기2-1. Node.js 설치하기🔹Windows에서 설치Node.js 공식 사이트 접속LTS(추천) 버전 다운로드다운로드한 설치 파일 실행다음 -> 다음 -> 설치로 진행 (중간에 "Add to PATH" 체크 확인)설치 완료 후, 명령 프롬프트(cmd)를 열고 아래 명령어 입력:node -v버전이 표시되면 설치 성공! 🔹Mac에서 설치Node.js 공식 사이트 에서 LTS버전 ..
📚 React + Next.js + TypeScript 폴더 구조 완벽 가이드 App Router / Pages Router / 환경별 구조 차이까지 정리1. 들어가며기본적으로 React의 폴더 구조가 어떻게 되는지 정리해본다. 리액트는 환경(설정)에 따라 폴더구조가 다르다. 그래서 같은 리액트를 사용한다고 해도 어떻게 초반에 설정을 했느냐에 구조가 다를 수 밖에 없다. 필자는 리액트를 시작한지 얼마안되었지만 개인 프로젝트 및 회사에서의 프로젝트를 고려했을 때 아래와 같이 고민을 했었다.“폴더 구조를 어떻게 잡아야 하지?” 예제를 보거나 강의를 몇개를 찾아보면 조금씩 다르기 때문이다. 물론 리액트와 Next.js 버전, TypeScript 따라 달라질 수 있는에 정확하게 어떻게 달라지는지 기록을 해보려고 한다. 특히 Next.js를 사용할 때는 App Router와 Pages Ro..
React Native와 ReactJS 차이점 ReactJSReactJS는 사용자 인터페이스 및 웹 애플리케이션 구축을 위해 프런트 엔드 웹을 지원하고 서버에서 실행되는 JavaScript 라이브러리이다. 재사용 가능한 구성 요소의 개념을 따른다.페이스북에서 만든 자바스크립트 오픈소스 라이브러리.웹, 웹 앱, SPA등 개발 시 사용.프론트와 서버 사이드 모두 제공.가상의 DOM을 사용하며 이는 전체 새로고침보다 빠르다(필요한 부분만 고침).HTML태그 사용.컴포넌트 재사용이 용이함.return( Hello World )React NativeReact Native는 호스트에서 사용할 수 있는 JavaScript 엔진을 사용하는 모바일 프레임워크로, JavaScript에서 다양한 플랫폼(iOS, Android 및 Windows Mo..
HTML 태그 요약 및 정리 개요HTML 태그 요소 정리를 하고, 기록을 위해서 작성을 해본다.태그를 많이 있어 각 사용 쓰임에 따라 정리를 따로 해봤다. HTML5 새로 포함된 태그 요약HTML5에 새로 포함된 태그들이 있다. 이러한 HTML5 태그(요소)는 더 나은 문서 구조를 제공한다.태그설명이 요소는 블로그, 잡시, 신문 기사 등 문서에서 독립적인 콘텐츠를 정의하는데 사용된다.기사가 전체 페이지의 나머지 부분과 약관 관련되어 있음을 지정한다.HTML에서 오디오 파일을 재생하는데 사용된다.bdi는 양방향 격리를 의미합니다. 외부 텍스트 문서에서 다른 방향으로 형식이 지정된 텍스트 일부를 격리한다.캔버스를 그리는 데 사용된다.데이터의 기계 판독 가능한 버전을 제공한다.텍스트 필드에 자동 완성 기능을 제공한다.사용자에게 필요한 추..
[네이밍 규칙 정리] Camel case, Kebab case, Snake case, Pascal case 개발을 하다보면 여러가지 네이밍 규칙을 마주하게 된다.프로젝트를 혼자 하는 것도 있지만 대부분 2명이상과 할 때가 많다.네이밍 규칙을 만들면 정리가 되고,파일, 폴더, 변수, 클래스, 컴포넌트 등 바로 직관적으로 의미를 알 수 있어서 네이밍 규칙은다수 프로젝트에서는 필수라고 볼 수 있다.단어 사이의 공백 제거프로그래밍에서 다른 종류의 프로그램은 특별한 목적을 위해 공백(' ') 문자를 예약하기 때문에종종 단어 사이의 공백을 제거한다.공백 문자는 예약되어 있으므로 인간 언어로여러 단어로 표현하는 개념을 나타내는 데 사용할 수 없다.이름을 정할 때 여러 규칙 중에 카멜 기법, 케밥 기법, 스네이크 기법, 파스칼 기법에 대해서 알아보자.1.카멜 기법(Camel case) 카멜 기법은 다음과 같이 첫 번째 단어..
[Mac ] 윈도우OS와 맥OS에서 많이 사용하는 단축키 비교 맥을 사용하면서 윈도우에서 사용하는 것처럼 단축키가 필요할 때가 있는데맥에서 필자 기준으로 '자주 사용하는 단축키'를 정리하면서WindowOS와 MacOS 단축키 비교해보았다. 수정하겠다..자주 사용하는 단축키가 아니라 많이 사용하는 단축키로.. 들어가기 앞서 MacOS 키는 아이콘으로 대체 했다.여기서만 언급하고 아래 표에서는 아이콘으로만 사용하겠다.⌥ (option)⌘ (cmd / command)⌃ (ctrl / control)⇧ (shift)⇪ (caps lock) 파일/폴더 관련 단축키기능WindowOSMacOS파일 / 폴더 복사파일 선택 후 Ctrl + 드래그파일 선택 후 options(⌥) + 드래그클립보드에 복사Ctrl + C⌘ + C클립보드에 내용 붙여넣기Ctrl + V⌘ + V파일 잘라내..
[Mac ] 맥북 마우스 휠 스크롤 방향 바꾸는 방법 개요맥북을 처음 구매 하고 사용했을 때 당황했었다.맥북의 트랙패드나 매직 (무선)마우스를 사용했는데 스크롤 방향이 뭔가 이상했다. 검색을 해보니 MacOS에서 스크롤 방향이 반대로 되어 있는 것이고설정에서 바꿀 수 있어 맥북 처음 사용자를 위해 공유한다. 방법설정은 간단해서 요약 다음과 같다. -> 시스템 설정 -> 마우스 -> 자연스로운 스크롤 활성화 해제(or 설정)   1. 시스템 설정 들어가는 방법하단의 독(Dock)의 시스템 설정을 실행하거나상단의 애플로고를 클릭한 후 시스템 설정을 클릭하여 들어가도 된다.또는CMD + 스페이스 눌러 '시스템 설정'을 검색을 해서 들어가도 된다. 2. 스크롤 조금 내려 마우스를 클릭한다.왼쪽 메뉴 스크롤을 내려 마우스를 찾아서 클릭하면 된다.또는CMD + 스페..

LIST