👩‍💻 가연의 개발자취 📚

Node.jsNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Node.js는 무료 오픈소스 크로스 플랫폼 자바스크립트 런타임 환경이며, 개발자들이 서버, 웹앱, 명령줄 도구, 스크립트를 만들 수 있다. 자바스크립트는 기존에 웹 브라우저에서 클라이언트 측의 동적인 인터페이스를 구현하는 데에만 사용되었으며, 자바스크립트의 비동기 이벤트 기반 모델이 서버 측에서도 유용하게 사용될 수 있을 것이라 판단되어 브라우저 밖에서도 자바스크립트를 실행 가능하도록 Node.js란 런타임이 생..

GraphQL페이스북이 만든 쿼리 언어,REST API의 다음과 같은 문제를 해결하기 위해 개발오버패칭, 언더패칭백엔드 API가 수정될 때마다 API 명세서 수정 과정과 프론트엔드 코드가 수정될 수 있는 문제 REST API vs GraphQL  REST APIGraphQL호출여러 엔드포인트 호출 (/users, /articles)단일 엔드포인트 (/graphql)데이터 요청항상 동일한 데이터 구조 (오버패칭)클라이언트가 원하는 데이터만 요청 가능데이터 조작CRUD (GET, POST, DELETE, UPDATE)query(조회), mutation(수정)에러 처리HTTP 상태 코드로 에러 구분errors 필드를 통해 에러 정보 제공  데이터 요청/조작REST API: HTTP 메서드(GET, POST, ..

JWT (JSON Web Token)JSON 형식으로 인코딩된 토큰을 사용해 사용자 인증 및 정보 전달에 사용하는 토큰 기반 인증 방식  인가 (Authorization)어떤 기능을 사용자가 사용할 수 있는 권한이 있는지 확인하는 절차사용자가 로그인하는 것은 인증(Authentication)이고, 로그인한 사용자가 어떤 권한을 가졌는지 확인하는 과정이 인가(Authorization)어떤 서비스에서 게시글을 등록한다던지, 댓글을 남기던지 등의 기능에 접근할 수 있는지 권한에 대해 매번 확인해야 함 ⇒ 로그인 유지로그인 유지 방식세션 (Session)토큰  Session과 JWT 비교Session세션 ID를 클라이언트에 전달하고 이후 클라이언트는 요청마다 세션 ID를 보낸다. 서버는 저장된 세션 정보를 통해..

트립쉐어 앱 개발에서 가장 많은 시간을 쏟은 로그인, 인증 기능 구현..🫠프로그래머스에서 팀 프로젝트로 개발할 땐 마감 기한 내에 앱 개발을 완성해야 해서 우리의 주요 서비스에 집중했고 사용자 로그인 쪽은 최대한 간단히 구현했었다. 이제 앱 출시를 위한 개발을 하다보니 제대로 된 인증 기능을 구현해야 했다. 사용자 로그인/회원가입 기능을 구현하는 게 처음이었고 생각보다 많은 로직이 필요했다. 회원가입부터 로그인, 그리고 비밀번호를 까먹은 사용자를 위한 비밀번호 재설정 기능, 소셜 로그인 기능, 앱 내에서 비밀번호를 변경하는 기능, 회원 탈퇴 기능까지 구현할 게 많았다. 사실 사용자 인증과 관련된 기능들은 앱의 직접적인 관련이 없고, 앱의 핵심 요소도 아니지만 꼭 필요한 기본적인 요소이다.보이지 않는 곳..

Intro프로젝트 로직에서 커뮤니티 게시글에서 작성자 프로필을 누르거나 번개 미팅에서 1:1 채팅을 누를 때 사용자의 프로필을 조회할 수 있는 모달창을 보여주도록 기획하였다. 프로필 모달의 경우 여러 페이지에서 모달 컴포넌트를 필요할 때마다 구현해야했다. 이러한 작업은 한 파일 내에 컴포넌트를 추가해 구현을 하면 한 페이지에 코드가 길어지게 되고 가독성이 떨어졌다.모달만 따로 파일로 분리해서 구현하는 방법으로는 코드가 길어지는 것을 방지할 수 있지만, 모달을 구현할 때마다 이전에 구현했던 모달 컴포넌트를 참고하면서 모달의 속성이나 스타일을 복사/붙여넣으며 코드를 짜고 있는 게 비효율적으로 느껴졌다.닫기나 모달 외의 창을 눌렀을 때 모달이 닫히는 기능도 동일하기 때문에 이걸 공통 컴포넌트로 사용할 수 있..

Map (맵): 객체와 같이 키와 값의 쌍으로 이루어진 컬렉션 객체와 Map 차이점키 값객체는 키 값으로 문자열이나 Symbol 값만 가능하나, Map 객체는 모든 값을 키로 가질 수 있다.const objKey = { name: 'key' }const map = new Map()map.set(objKey, 123) 참고) 기존 object의 경우 객체를 키 값으로 했을 때.. 어떤 객체를 키로 지정하여도 [object Object]가 저장됨const objKey = { x: 1, y: 2 }const obj = { [objKey]: '객체가 키'}console.log(obj) // {[object Object]: '객체가 키'}console.log(obj[objKey]) // '객체가 키'consol..

Intro드디어 개발을 시작했다..!디자이너 멘토님께 피드백을 왕창 받고.. 우리는 기능 명세도 상세히 작성했고 디자인도 나름 완벽했다고 생각했는데 많이 혼나고(?)..많은 팁을 받고 다시 기획에 불태웠다.이런 단기 프로젝트에서는 MVP를 수립해야 한다고 하셨고 우리가 기획한 프로젝트엔 많은 기능들이 있었는데 MVP 설정 덕분에 핵심 기능을 우선순위로 두고 개발을 시작할 수 있었다.  프로젝트 진행 상황기능 상세 명세 노션에 각 페이지 기능 별로 나누어 꼼꼼히 작성했었는데 게시글 날짜 표기는 어떻게 정할 것인지, 홈에는 추천 게시글이 몇 개까지 보일 것인지, 제목 글자 수는 제한을 둘 것인지 등... 놓친 부분들이 많았다.기획, 디자인, 개발까지 모두 작업하는 게 처음이라 미숙한 부분들이 많았던 것 같다..

Intro개인 프로젝트가 끝나자마자 팀 프로젝트가 시작됐다. 😭팀 프로젝트는 약 3주 정도의 기간이 주어지는데 기한 내에 기획 + 디자인 + 개발까지 하려면 촉박했다.그래서 어떤 앱을 만들지 아이디어는 미리 팀원들과 정해놓기도 했다.  프로젝트 진행상황아이디어 구체화 - BoardMix, Figma어떤 프로젝트를 만들지 각자 아이디어를 가져오도록 하였고 아이디어에 대해 자유롭게 얘기할 만한 곳이 있으면 좋을 것 같아 여러 브레인스토밍 툴을 찾아보았다. 이전에 Miro를 사용했던 적이 있는데 그때 만족도가 높았어서 Miro를 사용하려 했으나 무료 버전에 제한이 많아 다른 툴을 찾다가 BoardMix라는 툴을 발견했다.무료 버전은 그릴 수 있는 아이템 제한과 팀원은 최대 5명까지 가능했는데 마침 우리 팀이..

Intro프로젝트가 월요일까지라 주말에도 열심히 작업을 했다.firebase authentication으로 로그인 연동을 하고 firebase firestore도 연결해 DB 설정하려 했으나 firestore는 연동에 실패했다 ㅠ    프로젝트 진행상황React Native Firebasehttps://rnfirebase.io/ React Native Firebase | React Native FirebaseWelcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommen..

Intro3일차에는 Article 페이지를 구현하였다. firebase를 연동할 예정이라 프로젝트에서 제공된 API는 불러오지 않았다. ✅ Article UI 구현➡️ Home UI 구현✅ 무한 스크롤에서 발생하는 오류 해결   프로젝트 진행상황ImageBackground아티클 헤더로 쓰이는 각종 캠핑 정보 박스를 구현할 때 사용한 컴포넌트이미지가 들어간 박스를 만들고 싶어서 react-native의 ImageBackground 컴포넌트를 사용해보았다.import { ImageBackground, ...} from 'react-native'; 각종 캠핑 정보 캠핑투게더가 제공하는 각종 꿀팁으로 캠핑을 더 풍성하게 즐겨보세요. ..