본문 바로가기

전체 글

 (79)
#0. 프로젝트 개요 기본 웹프레임워크는 Flask를 사용하였고, DB로는 MongoDB 커뮤니티버전을 데스크탑에 다운받아 사용하였다. 백엔드는 이렇게 구성되어 있고, 프론트에서는 Jquery의 ajax 통신을 활용해 post요청을 보내는 식으로 구현하였다. 로그인와 회원가입기능에는 JWT방식을 사용하였다. 총 프로젝트 참가인원은 3명이며, 3일간 진행하였다. 이 중에서 나는 주로 MongoDB와 백엔드 부분에서 POST요청에 대한 API 설계를 담당하였다.
왜 PWA인가? | 네이티브, 크로스플랫폼, 하이브리드, 모바일웹과의 비교 PWA(프로그레시브 웹앱)이 타 모바일앱 방식과 어떤 점이 다른지를 정리해보았다. 우선, 모바일앱 개발이란 그 종류가 무척 다양하다. 가장 초기에 등장한 것이 네이티브개발이다. 안드로이드면 안드로이드, IOS면 IOS에 맞게, 해당 OS에만 맞는 코드를 작성해서 앱을 개발한다. 그런만큼 성능이 뛰어나지만, 동시에 개발에 있어서 편의성이 떨어진다. OS마다 개발하는 것이 귀찮기 때문에 크로스플랫폼이라는 방식이 등장했다. IOS와 안드로이드 앱을 동시에 만들 수 있는 각종 프레임워크가 존재한다. React Native, Flutter같은 것이 대표적이다. 헌데, 모든 기능을 크로스플랫폼으로 만들수도 없고, 아무래도 네이티브보다는 오류가 존재한다. 여기서 이제 좀 더 개발이 편리한 것이 하이브리드앱이다. 앱이..
Django를 어렵게 만드는 ORM에 관해 | 엑셀양식을 만든다고 생각해보자 Node.js와 Django는 스타트업 소프트웨어 엔지니어에서 주로 사용되는 웹프레임워크다. 헌데 Node를 쓰는 상황이 있고, Django를 쓰는 상황이 있는데, 특히 빅데이터 분석이 필요하거나 DB기능이 중요한 경우에는 Django를 사용하게 된다. 그러나 Django에 있어서 난이도를 높히는 요소들이 몇가지 있을 수 있으나, 그 중에서 가장 까다로운 것은 ORM이 아닐까한다. Url Mapping이나 Class-based View를 사용하는 것은, 사실은 어느 웹프레임워크나 똑같기 때문에 Django만의 차별점이 있다면 ORM이 아닐까 싶다. 이 ORM이란 어떻게 이해해야할까 Django를 처음 사용할 때 했던 오해는 데이터가 models.py에 저장된다고 생각한 점이다. 헌데 이를 잘 생각해보니,..
MongoDB를 관계형 데이터 베이스처럼 사용하는 법 MongoDB는 대표적인 NoSQL로서 기존에 사용하던 DB처럼 사용하고 싶은데, 그러지 못할 때 다소 아쉬운 부분이 있다. 그럴 때, 한 가지 편법이 있다. MongoDB에 들어가서, 인덱스를 담당하는 Collection을 별도로 만든 뒤, 데이터를 DB에 저장할 때 마다 그 때 그 때 해당 인덱스를 업데이트 해주면 된다. // /add경로로 POST 요청을 하면, 그 내용을 DB 폴더에 저장 app.post('/add', function(req, res){ // /write에서 글 작성 후 사용자에게 보여줄 부분 res.send('전송완료') // 글번호를 붙혀서 post collection에 작성한 내용을 저장하는 부분 db.collection('counter').findOne({name : '게시..
DRF(Django Rest Framework)를 사용하는 이유 Django와 함께 DRF를 사용하여, 프로젝트를 진행하다가 문득, DRF를 왜 사용해야 하는가에 대해서 생각을 정리할 필요를 느꼈다. 일반적으로 Django만 사용하는 경우에는, DB에서 데이터를 꺼내오면 Queryset의 형태로 데이터가 주어진다. 이 경우, 프론트까지 함께 개발하는 경우에는 크게 상관이 없다. 그러나 프론트를 별도로 개발하거나, React 혹은 다른 프론트에서도 이용하게될 API의 경우에는 Queryset형태를 피해야 한다. 이 때 Django와 함께 사용되는 것이 DRF이다. rest_framework를 사용하게 되면, view와 model 사이에 serializer라는 것을 사용하게 된다. View에서 Serializer를 가져와서 사용하게 되면 Model에서 꺼낸 데이터를 Qu..
React Hook(useState)와 Redux를 비교하여 이해하기 Redux를 사용하면서, 다소 헷갈리는 부분이 있었기 때문에 이를 정리하는 것이 필요하다고 생각했다. 우선은 Redux가 왜 필요한지를 이해하는 것이 중요한데, 기존의 useState는 하나의 컴포넌트 안에서만 사용가능했다. 헌데 로그인이나, 혹은 다크모드(배경화면을 검은색으로 바꾸어 눈의 피로도를 줄이는)같은 다른 컴포넌트에서도 사용되는 상태변화를 관리하기 위해서는 useState의 대안이 필요했다. 그래서 나온게 Redux이다. 그렇기 때문에 useState와 Redux의 차이는 하나의 컴포넌트 안에서만 사용되는가 아니면, 다른 컴포넌트에서도 사용될 수 있는가만 다를 뿐 나머지는 똑같다고 생각한다. useState에서 State를 만들어 상태변화를 저장하듯이, Redux에서는 Store를 만들어 이러..
#9. 작성한 모든 컴포넌트를 합쳐주기 | App.js 마지막으로 그동한 작성한 모든 컴포넌트들을 App.js에 합쳐준다. function App() { const user = useSelector(selectUser); const dispatch = useDispatch(); useEffect(()=>{ auth.onAuthStateChanged((userAuth)=>{ if (userAuth) { // 로그인상태 유지 dispatch(login({ email: userAuth.email, uid: userAuth.uid, displayName: userAuth.displayName, photoUrl: userAuth.photoURL })) }else { // 로그아웃 dispatch(logout()); } }) },[]); return ( //헤더 컴포넌..
#8. 위젯 부분 구현 | Widgets.js 위젯부분은 특별한 로직이 들어가지 않는다. 다만 UI가 반복되기 때문에 이렇게 반복되는 부분을 커스텀함수로 작성한다. import React from 'react' import './Widgets.css' import InfoIcon from "@material-ui/icons/Info" import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord' function Widgets() { //본문과 내용을 인자로 받는 커스텀 함수 const newsArticle = (heading, subtitle) => ( //뉴스의 아이콘을 구성하는 부분 //뉴스의 제목과 내용을 띄워주는 부분 {heading} {subtitle} ); return (..

티스토리툴바