본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Category

 (236)
[Redux] Store 목차 1. Redux Store란?2. Store와 데이터3. Store의 역할4. Store의 특징5. Store의 구성 요소6. Store의 생성 방법7. Store의 사용법 (핵심 메서드)8. Store의 중요성  Redux의 Store에 대해서 알아보자!    1 . Redux Store란?  store: 저장하다, 보관하다.store은 Redux의 데이터들을 저장하기 위한 저장소이다.Store를 통해 애플리케이션에서 사용되는 모든 상태를 하나의 객체로 관리하며,  상태를 효율적이고 예측 가능하게 다룰 수 있다.그러나 여기서 오해하면 안되는 것이, Redux Store의 데이터들은 실제로 저장장치에 저장되는 것이 아니다.아래에서 자세히 살펴보자.     2. Store와 데이터  • State m..
[Redux] Redux의 개념, 탄생 배경, 3가지 원칙, Context Api와의 비교 Redux에 대해서 알아보자!     1. Redux란?  Redux는 2015년, JavaScript 개발자인 Dan Abramov와 Andrew Clark에 의해 탄생한 상태 관리 라이브러리이다. 이 도구는 애플리케이션의 상태를 예측 가능하고 일관성 있게 관리하기 위해 만들어졌다.     2. Redux의 탄생 배경   1) 복잡한 상태 관리하기 위해  단일 페이지 애플리케이션(SPA)의 인기가 높아지면서, 컴포넌트 간 상태를 효율적으로 공유하고 관리하는 것이 점점 더 어려워졌다. 특히 React를 사용하는 프로젝트에서 상태를 props를 통해 자식 컴포넌트로 전달하거나, 서로 다른 컴포넌트 간 상태를 동기화하는 과정이 번거롭고 비효율적이라는 문제가 있었다.   2) Flux 아키텍처의 한계를 극복하..
[React] children 정말 쉽게 이해하기 왠지 모르게 이해가 잘 안되고 어려운 children에 대해서 이해 하기 쉽게 알아보자!      1. "children" 이란?  children은 리액트 컴포넌트의 특수한 props로, React element 객체들로 구성된 배열이다.부모 컴포넌트의 태그 안에 작성된 모든 내용을 자식 컴포넌트가 props로써 받을 수 있게 해준다.children을 통해 부모 컴포넌트가 자식 컴포넌트에 HTML이나 다른 컴포넌트를 중첩해 넣는 것이 가능해진다. 만약, props에 대해서 잘 모른다면 아래의 게시글을 봐주세요!https://dev-ini.tistory.com/63     2. children가 유용한 상황  1) 공통 레이아웃 구성: 반복적으로 사용되는 레이아웃을 정의하면서, 그 안에 들어갈 내용을 동..
[TypeScript] TypeScript 컴파일러(tsc)의 컴파일 과정 목차 1. "tsc"란?2. tsc 컴파일 과정3. 컴파일러 옵션 tsc의 컴파일 과정에 대해서 알아보자!            1. "tsc란?"  tsc는 TypeScript Compiler의 약자로, TypeScript 코드를 JavaScript로 변환하는 명령줄 도구이다.tsc는 TypeScript 코드를 JavaScript로 변환하는 과정을 수행한다.이 과정에서 타입 검사를 통해 코드의 오류를 잡고, 다양한 옵션을 사용해 최종 JavaScript 코드가 어떻게 생성될지 제어할 수 있다.tsc는 필요 시 트랜스파일링을 통해 최신 JavaScript 기능을 구형 브라우저에서도 호환되게 변환하는 역할도 한다.    2. tsc의 컴파일 과정    1) 입력 파일 분석  컴파일러는 컴파일 대상 파일을 확..
[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 2탄 Next.j에서 FireBase를 사용하는 방법을 아주 친절하게 설명해보겠다.   * 세팅 및 연동 방법은 1탄을 참고해주세요!https://dev-ini.tistory.com/278   1. FireStore 설정하기   1. 파이어베이스 홈페이지에 생성된 프로젝트에 들어가서 "Cloud FireStore" 버튼을 누른다.      2. "데이터 베이스 만들기"를 클릭하고 항목을 입력한다. 필자는 위치를 Seoul로 세팅하고 프로덕션 모드로 시작함.      3. 설정이 완료되면, 규칙으로 들어가서 읽기/쓰기 설정을 true로 바꾸고 게시 버튼을 누른다.      4. 다 했으면 "데이터" 항목에 들어가서 데이터를 추가해본다.       2. CRUD 구현하기   1. READ  데이터를 Read 하..
[Next.js] Next.js + 파이어베이스(FireBase) + React 활용한 CRUD 완벽 정리 (Next.js와 FireBase 연동하는 방법) 1탄 Next.j에서 FireBase를 연동하고 사용하는 방법을 아주 친절하게 설명해보겠다.    *참고) 필자의 개발 환경- 프레임 워크: Next.js (15.0.3)- 라이브러리: React (18.3.1)- 언어: TypeScript- 파이어베이스 ver. 11.0.2   1. 파이어베이스 웹사이트에 들어간다. https://firebase.google.com/?hl=ko Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com    2. 하단에 "시작하기"를 누른다. (회원가..
[Next.js] 라우팅 (Routing) (App Router ver.) Next.js App Router 버전에서의 라우팅 방식을 알아보자!     Page Router 버전의 페이지 라우팅 - pages 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.   App Router 버전의 페이지 라우팅 - app 폴더 밑에 구조를 기반으로 페이지 라우팅이 자동설정 된다.- 다만, app router에서는 page라는 이름을 갖는 파일만 페이지 파일로써 설정이 된다.  동적 경로를 가지는 페이지를 만들 때는 폴더 아래에 [URL 파라미터] 아래에 page.tsx 이런식으로 만들면 된다.      1. app > 폴더 > page.tsx 파일 예를 들어, app > search 폴더 > page.tsx 파일을 만들면, URL은 http://localhost:3000/se..
[Next.js] Next.js 프로젝트 시작하기 (App Router ver.) Next 프로젝트를 App Router 버전에서 시작하는 법을 알아보자!     1. VsCode에서 프로젝트 폴더를 연다.      2. 터미널에 아래와 같은 명령어를 입력한다.  npx라는 도구를 이용해서 새로운 next 앱을 생성하는 명령어이다.npx create-next-app@latest section03 * npx : "Node Package Executor" → npm.js.com에 등록돼있는 최근버전의 Node 패키지를 다운로드 없이 바로 실행시키는 명령어* create-next-app : Next.js 공식문서에서 안내하고 있는 새로운 Next 앱을 생성하는 Node.js 패키지* @latest : 현재 설치하려는 Next.js의 최신 버전* section03 : 패키지의 이름     3..

티스토리툴바