안녕, 반가워 안녕, 반가워

리액트는 페이지(URL) 이동할 때마다 서버에서 받는 것이 아니라 자바스크립트가 출력을 해준다. 페이지 경로를 나눠주는 것이 라우터이다. 📗 Link 컴포넌트를 이용한 페이지 이동 는 태그처럼 링크를 연결해주지만 URL 개념 하고는 다른 path 개념이다. 리액트 라우터에서 페이지 이동할 때는 Link 컴포넌트를 사용하면 내가 이동하고자 하는 경로(URL)로 이동할 수 있다. 아래와 같이 사용할 수 있다. About ⭐⭐⭐ Link 컴포넌트를 사용하면 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다. ✏️ 예제로 Link 컴포넌트 사용해보기 // App 컴포넌트 import { Switch, Route, Link, } from 'react-router-dom'; import Home from ..

🐜 Mine 애플리케이션 프로젝트 - 하단 탭 하단 탭을 만들어 보겠습니다. 하단 탭 정도는 쉽게 만들 수 있을 것 같다는 자신감이 생기지 않나요? 홈 화면 만들었던 것처럼 해주면 될거 같네요!! 라우터 이동하기 Link 컴포넌트를 사용하면 되겠죠! 여기서 저는 현재 페이지에 해당하는 링크부분이 활성화 된 모습으로 표현하고 싶네요. 어떻게 하면 될까요? 구글에 폭풍 검색을 합니다. 흠🤔🤔🤔🤔🤔 검색 포인트를 잘못 잡은 것 같네요.. (검색 능력도 실력인데..) 여러번 검색했습니다 !!!!! 드디어 성공했네요~ 그래서 조금 더 특별한 NavLink 컴포넌트를 찾았습니다. NavLink 벨로그 참조 공식 문서를 차근차근 읽어봤더라면 쉽게 찾을 수 있었을 텐데.. 어쨌든 새로운 개념을 알게되었네요. 그리고 다..

TCP/IP 란? 컴퓨터의 인터넷 연결 시스템 "transmission control protocol/Internet protocol" 서로 다른 시스템을 가진 컴퓨터들을 서로 연결하고, 데이터를 전송하는 데 사용하는 통신 프로토콜들의 집합이다. 서로 다른 하드웨어와 운영체제 등을 가지고 서로 통신을 하기 위해서는 모든 요소에 규칙이 필요하다. 상호간에 통신을 하기 위해서 서로 같은 방법이 필요하기때문에 표준 통신 규약(프로토콜)이 생겨났다. 이렇게 인터넷과 관련된 프로토콜들을 모은 것을 TCP/IP라고 부른다. TCP/IP 4계층 TCP/IP에서 가장 중요한 개념 중 하나가 계층(Layer)이다. TCP/IP는 '애플리케이션 계층', '트랜스포트 계층', '네트워크 계층', '링크 계층' 이렇게 4계층..

홈 화면을 만들고 나서 그 다음 단계로 조금 더 쉬워보이는 '예산 화면을 만들어보자' 였습니다. 처음에는 예산 화면과 달력 화면 이렇게 단순하게 각 페이지라고만 생각하였습니다. 그림을 자세히 보니 공통되는 부분이 보였고, 코드숨에서 그동안 리액트로 관심사 분리를 했었는데, 관심사 분리를 하고 공통되는 컴포넌트를 재사용하면 좋을 것 같다는 생각을 하였습니다. 예산 화면은 + + 으로 이루어져 있다는 결론을 내리고, 컴포넌트 네이밍에 대한 고민을 수도 없이 했었습니다. 상단 탭인데 무엇이라고 해야 적절할까? 처음에 MonthlyBudgetContainer라고 생각해냈습니다. 직관적으로 네이밍을 했는데 먼가 마음에 썩 들지는 않았습니다. 보통 앱 화면에서 상단 탭, 상태 바, 네비게이션 바 등등 쓰는 용어가 ..

이번 프로젝트에서는 React Router를 사용하였습니다. 리액트 라우터 설치 npm install react-router-dom 참고 사이트 : https://reactrouter.com/web/guides/quick-start import { Link, } from 'react-router-dom'; export default function HomePage() { return ( 한 달 예산을 세워볼까요? 자산 관리 시작해볼까요? ); }

Mine 프로젝트 두 번째 이야기 입니다. 오븐을 이용해 프로젝트를 간단하게 그려본 후 요구 사항에 대해 생각해보았습니다. 📝 Requirements Step1 ✔️ 구현 페이지 HomePage BudgetPage CalendarPage Step2 ✔️ 각 페이지 요구사항 도출하기 HomePage에서 예산 페이지와 달력 페이지 연결해주기 BudgetPage와 CalendarPage에 공통된 부분 컴포넌트로 만들어서 재사용하도록 하기 BudgetPage에 예산 컨테이너 컴포넌트 만들기 CalendarPage에 캘린더 컨테이너 컴포넌트 만들기

코드숨에서 배운 내용을 바탕으로 개인프로젝트를 시작하게 되었습니다. 제가 선택한 프로젝트는 자산 관리 애플리케이션입니다. 가계부 작성을 기반으로 나의 것을 지키는 습관을 만들어주고 더 나아가 자산 관리로 이어지도록 다양한 정보를 제공하는 서비스를 도출하는 애플리케이션으로 성장시켜볼 예정입니다. 이 프로젝트는 리액트, 리덕스, 테스트(jest)로 진행하려고 합니다. 우선 최소한으로 필요한 부분이 무엇인지 그려보았습니다. 오븐 사이트 : https://ovenapp.io/ 홈 화면 예산 화면 달력 화면 🎈 오븐 사이트 사용 이점 🎈 프로젝트를 계획하면서 가장 어려웠던 부분이 기획과 디자인이다. 혼자서 개인 프로젝트를 진행할 때 무에서 유를 창조하는 것은 정말 굉장한 일이다. 그렇기 때문에 저는 기존 서비스를..

호이스팅(Hoisting) 함수와 관련된 여러 가지 성질들 중 호이스팅에 대해 알아보자. hoist 사전적 의미: 끌어올리다 무엇을 끌어올리느냐??? 변수 '선언'과 함수 '선언' 을 끌어 올린다. 호이스팅은 선언과 밀접한 관련이 있다. 자바스크립트 엔진은 코드를 실행하기 전 단계로 코드 전반에 걸쳐 선언된 내용들이 있는지 전체를 훑어 보고 발견하게 되면 위로 끌어 올린다. 함수 선언문은 통째로 올라가는 반면에 함수 표현식은 선언만 끌어 올렸다. 할당은 해당 사항이 아니다. 함수 선언문은 그 자체로 하나의 선언인 반면에 var b = 로 시작하는 문장들은 선언과 할당이 한 문장에 이루어 지고 있는 것으로 분리가 가능하다. 📌 함수 선언문과 함수 표현식 참고사이트 https://developer.mozil..