탕스로그

반응형 웹을 만들기 위해 desktop, mobile 을 이름으로 한 css 속성을 정의하고 페이지 컴포넌트 내에서 필요한 부분에 사용함으로써 반응형 웹을 제작하려고 했었다. ❗️ 오류가 났었던 코드 1. desktop, mobile css 정의 - 기준 1024px import { css } from '@emotion/react'; export const desktop = css` display: flex; @media (max-width: 1023px) { display: none; } `; export const mobile = css` display: none; @media (max-width: 1023px) { display: flex; } `; 2. 원하는 부분에 CSS 적용 import { ..

난 vercel과 AWS 모두 배포해본 바가 있다. 그런데도 항상 새로운 프로젝트를 할 때 고민이 된다. 뭘 써야 잘 썼다고 소문이 날까~ 고로 정리해보자 ㅎㅎ 💡 AWS Amazon Web Services 의 약자로 아마존이 제공하는 클라우드 컴퓨팅 서비스이다. 장점 & 단점 ) 자유도가 높다. 자유도가 높다는게 장점과 단점이 될 수 있는 이유는... 좋게 말하면 내가 원하는 걸 다 커스텀할 수 있다!! 인데 나쁘게 말하면 내가 이거까지 설정해줘야돼??? 라고 느낄 수 있기 때문이다. AWS는 가상서버(EC2), 스토리지(S3), 데이터베이스(RDS), 인공지능(AI)와 같은 다양한 서비스를 포함하고 있기 때문에 웬만한 애플리케이션이 요구하는걸 AWS 상에서 다 관리할 수 있지만, 간단한 서비스 하나를..

이제까지 내가 한 프로젝트는 전역상태관리를 모두 다르게 진행했다. 간단하게 말해보자면, 1. 토이프로젝트 / Redux 사용이유 ) 그 당시 팀 내 프론트엔드 리드님이 Redux만 써보셨는데, 다른 팀원들이 다 프론트엔드 입문자여서 리드님을 따라감.. 별 이유는 없지만 그 당시에선 이게 최선이었던 것 같다. 상태관리보다 일단 페이지 완성이 최우선이었던 작고 소중한 첫 프로젝트.. 2. 동아리 웹페이지 / 전역상태관리 안함 유저가 로그인하는 곳이 딱히 없었고 전역관리를 해야할 정보가 딱히 없었다. 그때그때 서버에 요청해서 필요한 리소스를 받아오고 그걸 바로 사용했다. 불필요하게 전역상태관리를 할 필요가 없다고 생각되어 안했는데, 잘 한 선택인 것 같다. 3. CEOS 16기 스터디 과제들 / Recoil ..

에자일 프로세스에 대한 얘기는 주기적으로 들어왔고 내가 프로젝트를 하면서 주 단위로 계획하고 진행했던 개발 프로세스가 에자일 프로세스와 연관되어있다고 생각되어 한번 정리해보려고 한다. 이를 위해 'UX 개론 2장-불확실성에 민첩하게 대처하라' 를 읽고 추가로 궁금한 것들을 정리해보려고 한다!!! 💡 에자일 방법론이란? 한정된 기능만 탑재한 첫 번째 버전을 최대한 빠르게 만들어 사용자의 평가를 반영하고, 그 후 개발을 진행하면서 사용자의 실질적 욕구에 맞춰 제품을 수정해나가는 방법. 이 때 에자일 방법론 중 가장 잘 알려진 모델은 스크럼이다. 💡 스크럼이란? 프로세스의 경험적 관리, 즉 경험주의(경험을 통해 배울 수 있다고 믿는 것)에 기초한 이론이다. 스크럼은 반복적이고 점진적인 접근법으로, 예측성을 확..

모노레포란?? 여러 개의 다른 프로젝트 코드를 하나의 repo에서 관리하는 전략이다. 왜 구축하게 되었는가?? 신촌 연합 IT 동아리 CEOS 16기에서 프론트엔드 스터디 커리를 진행하면서, 팀 프로젝트를 제외하고도 5개의 레포지토리가 생성되었다... 이 5개의 레포지토리는 1개의 바닐라 자바스크립트 레포, 3개의 react 레포, 1개의 next.js 레포로 구성되어있는데, 뭔가 이 레포지토리들을 하나의 레포지토리로 합병해서 관리할 수는 없을까... 하던 중 모노레포 시스템을 알게되어 바로 적용해보게 되었다. 바닐라 자바스크립트 레포는 node_modules를 관리할 필요가 없기 때문에 모노레포 시스템의 의도와는 맞지 않으나 단순히 나의 편의성을 위해 다른 레포들과 같이 모노레포로 관리하게 되었다. 그..

2/10 데모데이를 마지막으로 CEOS 16기 활동이 끝이 났다!!! CEOS 16기 회고를 쓰기에 앞서 내가 왜 CEOS를 지원했었더라.. 하는 생각에 내가 작성했던 합격 후기글을 들어가봤다. 지원동기를 보니, '내가 했던 걸 또 하지 않는 동아리 같았고 빡세게 공부할 수 있을 것 같은 동아리 같았다.' 라고 되어있는데, 회고 시점에서 돌아보니 맞는 말이다. 시험기간을 제외하고 팀 프로젝트를 들어가기 전까진 매주 수요일은 세션 일요일은 스터디 이 지옥의 스케줄이 함께했고, 매 세션과 스터디는 거의 항상 과제가 있었다. 매주 두 개의 과제를 해야한다는 얘기... 수요일까지는 아이템 빌딩, 창업과 관련한 과제가 있었고 일요일까지는 개발 능력 향상을 위한 프론트 개발 과제가 있었다. 16기 프론트 스터디 커..

2/10 CEOS 16기 데모데이를 마지막으로 팀 프로젝트가 끝이 났다!!!🥳🥳🥳 이번에는 Finble 프론트 개발에서 내가 경험하고 배웠던 것을 위주로 다뤄보겠다. 기술 스택✨ React 이제까지 프론트 스터디를 리액트로 진행하기도 했고, 디자인팀이 설계해준 디자인시스템을 제대로 활용할 수 있는 방안을 생각했을 때, 컴포넌트화를 효율적으로 할 수 있는 React로 개발을 진행하는게 맞다고 생각했다. 원래는 Next.js를 쓸까도 고민했으나, 내가 이번 CEOS 활동을 통해 리액트 지식에 대한 깊이가 깊어진만큼, 이를 적용한 프로젝트를 해보고 싶어 React를 선정하게 되었다. 다음 프로젝트를 할 기회가 생긴다면 그 때는 Next.js를 도전해보고 싶다. TypeScript 누군가가 자바스크립트를 쓸지,..

나는 공식 일정대로라면 1월 한달간 ( 6주는 개발한 듯 ) Finble을 개발했다. 개발 계획✨ 이는 CEOS 세션 중에 개발 시작에 앞서 개발 계획을 미리 작성한 것인데... 개발은 대부분 계획대로 잘 진행이 되었고, 1월 말 ~ 2월 초에는 변경된 디자인에 따른 디자인 수정 & QA에 따른 기능 보완이 진행되었다. 아키텍쳐✨ 프론트 개발은 React.js + TypeScript + Redux-toolkit 로 진행하였고 배포를 위해 Amazon S3를 사용하였다. CI/CD는 Amazon S3가 제공해주는 것을 사용했다. 개발 규칙✨ 1. 커밋 시 깃모지를 사용해 직관적으로 표현한다. 이 때, ✨ ( 새 기능 추가 ), 🎨 ( 코드 스타일 수정 ), 🐛 ( 버그 수정 ) 을 나타낸다. 2. 기능 단..

이제까지 프론트 스터디에 대한 후기만 남겼었지만, CEOS에서는 이제까지 1월 한 달 간의 팀 프로젝트 개발을 위해 10주차 세션에 걸쳐 각 팀의 아이디어에 대한 빌딩을 해왔었다. 세션에 대한 후기는 CEOS 후기에서 다루겠다. 아무튼 아이디어 빌딩을 해서 최종적으로 내가 12월 말부터 개발하게 된 Finble 프로젝트를 소개해보려고 한다. Finble 소개✨ Finble은 간단하게 말하면 주린이를 위한 주식 포트폴리오 관리 서비스이다. 원래는, 아래와 같은 아이디어로 시작했다. 하지만 아이디어 빌딩을 거치고 거쳐... mvp에 필수적인 핵심기능들만 남겼다. 이 때, 중점을 '가상의 투자 실험을 통한 더 나은 주식 포트폴리오 만들기'에 두고 핵심 기능을 선별했다. 핵심기능✨ 1. 기존 포트폴리오 등록 유..

이번 미션은 CEOS 마지막 스터디!!! CEOS에서는 스터디가 끝난 이후에 방학 때 한달동안 팀 프로젝트를 진행하게 되는데 이 때 같이 협동을 하게 될 팀 내의 백엔드 2명 & 프론트 2명이 함께 파트장 & 데모데이 우수팀 투표를 진행할 수 있는 페이지를 만드는 것이 목표이다. 본격적인 팀 프로젝트를 진행하기 전에 간단한 토이프로젝트를 해보며 협동심을 기르는 것이 주 목적인듯!!!! 구현해야 하는 것 1. 회원가입 - 파트 ( 프론트, 백, 디자인, 기획 ) 과 팀 ( 5개중 하나 ex. Finble ) , 이름, 아이디, 비밀번호, 이메일 주소를 통해 회원가입을 진행한다. 2. 로그인 - 아이디 / 비밀번호를 통해 로그인을 진행한 후 accessToken을 저장한다. 후에 모든 api 통신 시 헤더에..