Develop/React JS

웹팩이란? 웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다. 우리에겐 너무 익숙한(?) 웹팩 우리는 리액트를 통해 개발을 하게 되면 create-react-app 이라는 commmand 를 통해 파일을 생성합니다. 이 안에는 웹팩이 내장이 되어 있어서, 유지보수의 편리함을 위해 js 파일을 모듈화(파트별로 나누어 개발) 를 통해 개발을 해도 높은 성능을 가진 웹 어플리케이션을 만들 수 있습니다. 즉, 내장이 되어 당연하게 사용하다보니 왜? 이것을 사용해야하는지에 대해 알지 못하기에 이를 정리하고자 글을 올리게 되었습니다. 웹팩은 왜 세상에 나오게 되었을까? 웹팩이 생기기 아주 먼 옛날로 돌아 가보겠습니다. 1) 유지보수가 어려워! 과거 웹 어플리케이션을 제작 할 때는 지금과는 매우 다르게 1..

2021. 3. 23.

Develop/React JS

MVC Pattern MVC 패턴이란? 어플리케이션의 보수 & 유지를 더욱 손쉬운 방법으로 할 수 있도록 구상된 디자인 패턴의 유형 중 하나로써 하나의 앱을 Model, View, Controller로 나누어 관리하는 기법이다. MVC Pattern Detail 1 Model 프로그램에서 사용되는 데이터 및 그 데이터를 처리하는 역할을 수행합니다. 2 View 모델 또는 컨트롤러가 보여주고자 하는 것들을 유저에게 보여주는 역할을 수행합니다(=UI). 뷰는 데이터를 직접 보관하지 않고, 모델의 데이터를 출력 합니다. 3 Controller Model과 View를 연결 시켜주고, 사용자의 입력을 처리하는 역할을 수행합니다. MVC Pattern Example MVC 패턴을 보다 깊게 이해 하기 위해서, 우리..

2021. 3. 19.

Develop/React JS

프로젝트가 시간을 거치며, 웹 퍼블리싱은 마무리가 되어가고 백엔드와의 연동이 작업이 주가 되어가고있다. 우연치 않게, 회원가입 및 메인 페이지 등 주요 페이지들을 만들어 왔기에, 연동 할 부분도 엄청나게 많았는데~ 1,2 주 정도 토큰을 올바르게 사용하지 못해서 매우매우매우매우매우매우매우매우 힘들었다. 나중에 다시 사용 할 때를 위해, 또한 나와 같이 고통을 겪는 프론트엔드 개발자들을 위해 게시물을 정리 해보고자한다. 1. 서버는 유저를 어떻게 인식하는가? 웹 사이트를 이용할 때엔 개개인의 고유 권한을 부여하기 위해 회원을 등록하고, 로그인한다 그렇다면사용자가 로그인 했다는 정보는 서버에서는 어떻게 인식할까? 사용자가 로그인 정보(id, pw)를 알맞게 보내면, 서버에서는 이를 DB에 저장된 회원 정보와..

2021. 2. 24.