전체 글 337

모바일 기술 스택 및 아키텍쳐[Flutter vs React Native]

언어 : Dart 프레임 워크 : Flutter 아직 모바일 애플리케이션 개발을 해본적은 없다. 하지만 실직적으로 현 대학생들은 웹으로 플랫폼을 이용하기 보다는 휴대폰으로 플랫폼을 이용하는게 현실이다. 고로 이참에 모바일 앱개발도 해보려고 한다. 주로 Android는 Android Studio로 개발하고 ios는 Swift로 주고 개발을 한다. 하지만 현재 각각의 플랫폼을 개발하는데는 시간적으로 불가능할 것같다. 단일 코드 베이스를 사용하여 크로스 플랫폼개발을 하려 한다. 크로스 플랫폼 개발이 가능한 오픈소스 프레임 워크의 양대산맥은 두개가 있다. 1. Flutter 2. React Native Flutter과 React Native의 비교 Flutter의 장점 빠른 개발 속도: -Flutter는 Dar..

데브옵스& 인프라 기술스택 및 아키텍쳐

배포시의 전체적인 프론트엔드와 백엔드의 시스템 아키텍처를 피그마로 그려보았다. 대부분의 기술을 실직적으로 써본적은 없고 아직 간략한 공부만 해둔 상태라 많은 수정이 차후 들어갈것같다. 이번 프로젝트를 통해 대략적인 파이프 라인을 설계 및 구성하고 그에 대한 이해가 높아지는 것이 목표이다. 차후 에러 핸들링 목록을 로깅하여 slack Hooks를 생성하거나 알람 스크립트를 작성하여 관리자인 나에게 알람이 오게 하는것도 구현을 해보고 싶은 욕심이 있다. 데브옵스& 인프라 Deploy: AWS(EC2,CloudFront, S3, Route 53, RDS, ELB(ALB),ACM,ECR), Docker CI/CD : Github Actions EC2 클라우드 컴퓨팅 서비스로, 가상 컴퓨팅 리소스를 제공하는 데 ..

프론트엔드 기술스택

프론트엔드 Language : JavaScript & TypeScript Library & Framework : React, NextJS 상태관리 : redux 비동기 데이터 패칭 : redux-thunk CSS디자인 : TailwindCSS Test : Jest,React Testing Library, Cypress 우선 이번 프론트엔드 파트에서 사용할 언어 및 프레임워크, 인프라들이다. 파트 별로 왜 해당 언어 와 프레임워크 인프라들을 사용했는지를 기록해보자. Language : TypeScript https://softmoca.tistory.com/300 백엔드 기술스택 백엔드 Language : TypeScript Library & Framework : NestJS, Express.js Test:..

백엔드 기술스택

백엔드 Language : TypeScript Library & Framework : NestJS, Express.js Test: Jest ,Supertest Database : Mysql,erdcloud , DataGrip ORM : TypeORM Authentication: passport.js, JWT, 세션 Proxy Sever : Nginx 우선 이번 백엔드 파트에서 사용할 언어 및 프레임워크, 인프라들이다. 파트 별로 왜 해당 언어 와 프레임워크 인프라들을 사용했는지를 기록해보자. Language : TypeScript JavaScript에 타입을 추가한 언어 - 정적 타입 시스템 변수, 매개변수 및 함수 반환 값에 대한 타입을 명시적으로 지정할 수 있어 코드의 가독성을 높이고 버그를 미리 예..

API 명세서 [REST API] Ver.1

프로젝트 설계 초반에 RESTful한 API 와 GraphQL API 중 어떤 방식으로 API를 제작할지 고민을 하였다. REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 나타낸다. 즉 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. GraphQL API는 쿼리 언어를 사용하여 데이터를 조작하는 API이며 단일 URL 엔드포인트를 가지고 있다. 클라이언트는 필요한 데이터를 얻기..

데이터베이스 ERD 설계 Ver.1

전체적인 ERD 위 사진은 전체적인 ERD 를 설계한 사진이다 이전에 팀프로젝트로 진행하며 같이 설계가 아닌 처음으로 데이터베이스 ERD를 처음부터 끝까지 설계를 해보았다. 각각의 테이블에 대한 속성과 디폴트값 NULL의 여부를 하나씩 테이블을 설계하며 많은 생각을 거쳐 나온 결과 물이다. 하지만 직접 벡엔드 개발 중 쿼리문을 짜며 데이터를 가져오며 테이블을 수정해야 할것같다. 특히 댓글과 채팅 무엇보다 알람의 관계에 대해 걱정이 많다. 하지만 직접 개발을 하며 피드백을 거치는 경험은 필수불가결하다 생각을 했으며 그런 경험이 더욱 값질 것이라 생각하고 위 사진은 Ver.1 로 설계를 마쳤다. 이제 개별적으로 살펴 보자 첫번째로 대부분의 테이블이 참조하고 있는 유저 테이블이다. 기본적으로 로컬 회원가입과 ..

로우파이 프로토 타입 [스케치(Lo-Fi)]

디자인 이번 처음 디자인 공부까지 간략하게 진행 보았다. UI /UX 역시 한 학문인 만큼 공부를 할수록 깊게 들어갈 수도 있고 신경을 쓰는것에 끝이 없다고 느꼈다. 그래서 'UI /UX 디자인 프로세스'를 따르되 디자인을 모두 끝내고 개발에 들어 가는것이 아닌 버전별로 디자인 또한 변경해가며 진행을 하려고 한다. 우선 첫번째 단계인 스케치 이다.(거진 워크 플로우를 가진 와이어 프레임이라 봐도 될듯하다) 굉장히 러프하게 설계를 해보려 하였지만 막상 스케치를 하며 데이터베이스 ERD 설계까지 눈에 아른거려 최대한 실제로 사용자가 사용할 떄 불편한을 느끼지 않게 하기 위해 설계해 보았다. 원래는 프로토-타이핑 까지 설계를 하고 데이터베이스 ERD 설계 및 API 명세서를 작성하려 하였지만 스케치 작업을 하..

BBC(Building Bride Comunity) 캡스톤 프로젝트 시작

https://moca9012.tistory.com/category/%EC%BA%A1%EC%8A%A4%ED%86%A4%20%EC%A1%B8%EC%97%85%EC%9E%91%ED%92%88 '캡스톤 졸업작품' 카테고리의 글 목록 성장하는 개발자가 되기 위한 기록 moca9012.tistory.com 본 포스팅은 위 이전 블로그에서 시작한 프로젝트를 다시 한번 정리하며 이어서 작업중인 과정을 기록하는 포스팅입니다. 1년 반 간의 프로젝트 작업 시간을 잡고 꾸준히 새로운 기능을 추가하며 유지해 보고자 한다. 이전의 토이 프로젝트나 팀프로젝트에서는 특정 기능을 만들기만 했지만 이번 프로젝트에서는 실 사용자 1000명을 목표로 프로젝트를 진행 하려고 한다. 프로젝트 기획, 디자인, 프론트엔드, 백엔드, 인프라 데..

리프레쉬 토큰을 왜 사용하는가 ?

https://softmoca.tistory.com/294 세션, 쿠키, JWT 토큰 및 인증과 인가 개념 정리로그인기능을 구현한는 것도 어렵지만 무엇보다 로그인 상태를 '유지'하는거도 만만치 않게 어려운 일이다. 예로 들어 naver에 로그인을 했을 때 메일함을 들어가고 나올때, 보낸 메일함과 받은softmoca.tistory.com전반적인 세션과 jwt토큰에 대한 인증 인가 개념은 위 포스트에 정리하였다. 리프레쉬 토큰을 왜 사용하는가 ?가장 보편적으로 리프레쉬 토큰이 사용되는 이유는 아래와 같다.서비스에서 특정 권한이 있는 사용자만 보낼수 있는 api가 있다.예를 들면 게시글 삭제 혹은 사용자 정보 수정, 관리자 페이지 접속 등등 프론트엔드에서 사용자가 로그인을 하면 백엔드에서 엑세스 토큰과 리프레..

세션, 쿠키, JWT 토큰 및 인증과 인가 개념 정리

로그인기능을 구현한는 것도 어렵지만 무엇보다 로그인 상태를 '유지'하는거도 만만치 않게 어려운 일이다.예로 들어 naver에 로그인을 했을 때 메일함을 들어가고 나올때, 보낸 메일함과 받은 메일함을 들어갔다 나올때 마다로그인을 다시 하면 사용자들은 상당히 불편할 것이다.그래서 서버에서 현재 사용자가 로그인을 했는지 안했는지를 알수 있어야 로그인 상태가 유지가 된다.인증(Authentication). : 로그인==> 내가 이 사이트에 가입된 회원임을 즉, 특정 서비스에 일정 권한이 주어진 사용자임을 아이디랑 비밀번호를 통해서 인증을 받는것 인가(Authorization)==> 한번 인증을 받은 사용자가 이후 서비스의 여러기능을 사용할 때 매번 로그인 되어있음을 알아보고 허가 해주는것.예) sns에 한번 로..