Bin's Blog

글의 시작 프로젝트 & 공부하면서 "왜 나는 React를 사용할까?"라는 질문을 스스로에게 던져보았다. 나는 파도에 휩쓸려온 물고기처럼 React가 가장 인기 있는 Front-End의 라이브러리이고, 취업하려면 알아야 한다는 이유 때문이었다. 근데 과연 이렇게 사용의 목적도 모르고 수동적인 자세를 취하는 것이 옳지 않다는 판단을 내리게 됐다. 그래서 오늘부터 React에 대해서 파고드는 시간을 가져보고 싶다. 이 과정을 통해서 내가 당연하게 생각했던 것들에 대해서 의미와 목적을 고민해 보는 시간을 통해서 깊이가 더해지고 시야가 넓어졌으면 좋겠다. React란? 리액트는 자바스크립트 프레임워크인 Angular, Vue와 달리 프레임워크가 아닌 라이브러리이다. React 공식 홈페이지에 React란 "UI(..

🤔 Flux 패턴이란? Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 등장 배경 페이스북(현 메타)은 왜 Flux 패턴이 필요했을까? 답은 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측 가능성을 높이기 위함이었다. 그리고 또한 MVC 패턴의 단점을 보완하기 위해서다. 먼저 MVC 패턴을 알아보자. MVC는 Model, View, Controller의 약자이다. Model에 데이터를 저장하고, Controller를 이용하여 Model 데이터를 생성 / 조회 / 수정 / 삭제(CRUD)하고, 변경된 데이터는 View에 출력되면서 사용자에게 전달되어 사용자에게 보여진다. 또..

1️⃣ UseEffect 안에 JSX 🤔 문제 UseEffect return 문 안에 JSX를 조건문을 이용해서 사용하고 싶었는데... 함수 자체가 돌아가지 않는 문제가 발생했다. 📝 원인 UseEffect에서 return 문은 오직 cleanup()함수를 이용할 때만 쓸 수 있다. 컴포넌트 렌더링을 할 때 아무런 영향을 주지 않는다. 🛠️ 해결 useEffect가 아닌 함수 안 return문에 작성해서 해결했다. 2️⃣ 비동기 호출과 UseState() && rendering 과정에서 router.push() 사용 🤔 문제 Warning: Cannot update a component (Router) while rendering a different component (RequireAuth). To l..

❗️❗️ 오늘은 React에서 TypeScript를 쓰는 법에 대해서 알아보겠다. 👉 기본설치 npx create react-app 프로젝트명 --template typescript 👉 기존 프로젝트에 typeScript를 더하고 싶을 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 👉 일반변수, 함수 만들 때 타입 지정을 잘하자 👉 JSX를 표현하는 타입(JSX.Element) let 박스 :JSX.Element = ; 👉 component 만들 때 타입지정은 파라미터 & return 값 function Profile() :JSX.Element{ return ( 프로필입니다. ) } 👉 compon..

1️⃣ AJAX란? 👉 Asynchronous JavaScript and XML(공유 가능한 방식으로 데이터를 정의하고 지정할 수 있다. )의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 👉 서버에 데이터를 요청한다. 👉 서버: 데이터를 요청하면 데이터를 보내주는 프로그램 - Ex)유튜버 서버: 동영상 요청하면 진짜 보내주는 프로그램 - Ex) 웹툰 요청하면 진짜 보내주는 프로그램 👉 서버개발시 짜는 코드 - 누가 comic.naver.com으로 요청하면 웹툰 보내주세요 👉 서버에 데이터를 요청할 때 일정한 규격을 작성하자 👉 방법 (GET/POST) - 받으면 get - 보내면 post 👉 예를 들어 네이버웹툰서버한테 (comic.naver.com)으로 GET..

📚 기초상식 1️⃣ 인터넷 vs 웹 인터넷 웹 인터넷은 전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유할 수 있는 공간 웹은 인터넷 공간에서 제공하는 서비스 👉 인터넷 안에는 Web, FTP(장지와 장치 간의 파일을 전송하는 데 사용되는 표준 프로토콜), E-mail 등이 있다. 👉 팀 버너스 리가 최초 웹 개발자이다. 1991년 HTML1로 시작한 버전은 2014년 HTML5의 버전까지 나온 상태이다. 2️⃣ 웹의 변천사 👉 웹 1.0은 단순히 정보의 제공과 불특정 다수에게 정보를 전달하는 데 초점 👉 웹 2.0은 사용자들 사이의 상호작용과 참여, 공유, 협업을 강조 👉 웹 3.0은 인공 지능(AI), 빅데이터, 시멘틱 웹 등의 기술과 개념..

👉 Keep - 이번 캠프를 시작하기 전부터 기술 블로그를 계속 써왔는데 프로젝트를 하면서 더 꾸준히 쓸 수 있어서 좋은 기회이다. - 서비스 기획을 배우게 되면서 그동안 프로젝트에서 왜 좋은 결과를 얻지 못했고 기간이 늘어났는지 알 수 있었다. 기획 단계가 제대로 설정되지 않아서 진행하는 동안에 자꾸 변경되고 수정되는 일이 빈번해서 힘들었던 적이 많았다. 서비스 기획 수업을 들으면서 기획의 중요성에 대해서 새삼 깨달을 수 있었다. - 앞으로 진행되는 프로젝트에서는 이번에 배웠던 마인드맵, UML, 아이디어 스케치 과정을 적극적으로 활용하고 싶다. 👉 Problem - 내가 과제를 하는 모습을 보면서 그동안 내가 얼마나 대충해왔는지 알 수 있었다. 어느 순간 고민하는 것을 싫어하고 지쳐하는 모습을 보면..