👩‍💻 가연의 개발자취 📚

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를 보낸다. 서버는 저장된 세션 정보를 통해..

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프로젝트가 월요일까지라 주말에도 열심히 작업을 했다.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'; 각종 캠핑 정보 캠핑투게더가 제공하는 각종 꿀팁으로 캠핑을 더 풍성하게 즐겨보세요. ..

Intro2일차엔 전국 캠핑장 리스트를 조회하기 위해 공공데이터 API를 불러오는 코드를 구현하였다. 해야 할 일✅ 공공데이터 API 불러오기✅ Home 화면 구현하기➡️ Article 화면 구현하기   프로젝트 진행상황오픈 API 활용하기https://www.data.go.kr/data/15101933/openapi.do#/layer-api-guide 한국관광공사_고캠핑 정보 조회서비스_GW한국관광공사 고캠핑 홈페이지에서 제공하는 캠핑장 정보를 제공합니다. 한국관광공사 고캠핑 홈페이지에서 제공하는 캠핑장 정보를 제공합니다.www.data.go.kr 위 사이트에서 회원가입 후 활용 신청을 해야 API를 불러올 수 있다.로그인 후 발급받은 인증키를 입력해야 불러올..

Intro 데브코스 마지막 개인프로젝트가 시작되었다. 16일부터였는데 강의 듣느라 17일 저녁부터 시작.. 이번엔 Figma로 UI 디자인이 주어졌기 때문에 이번 개인 프로젝트 목표는 최대한 디자인과 똑같이 구현하는 데에 있다. 주어진 디자인을 똑같이 구현하는 것이 프론트엔드 개발자의 능력 중 하나라고 생각하기 때문이다...! 프로젝트 진행상황 코딩테스트 강의와 Nodejs express 강의를 듣다가 다시 React Native를 하려니 순간 어떻게 했더라...? 기억이 안났다. 이전에 React Native 공부하면서 기록해 놓은 것들 다시 보면서 프로젝트를 시작했다. 프로젝트를 진행하기 앞서, 저번 프로젝트에서도 사용했던 툴인 Linear를 사용해 개발해야 할 사항들을 나열하고 이슈 관리를 하였다...

Intro 이전에 API 학습을 통해 데이터를 CRUD하는 코드를 작성하였는데 이번 시간엔 생성된 데이터를 직접 Firebase 데이터베이스에 저장하는 법을 배우고 실습하였다. 오늘 학습한 내용 호스팅 (Hosting) : 클라우드가 상용화 되기 전부터 사용했던 서비스 호스팅 vs 클라우드 호스팅과 클라우드는 컴퓨터 자원을 빌려 사용한다는 공통점을 갖고 있다. 운영비용과 관리 편의성, 확장성에 차이가 있다. 호스팅 서비스는 물리적인 자원을 임대하는 것으로 즉각적인 대응에 어려움이 있다. 비용은 매월/년 고정적이다. 기본적인 인프라 (방화벽, 네트워크 등)는 호스팅 업체에서 직접 관리한다. 클라우드 서비스는 논리적 가상 자원을 임대하는 것이다. 스토리지 용량, 인스턴스 수 증가 등 빠른 대응이 가능하고 사..

Intro데브코스 firebase 강의도 벅찼는데 자료구조/알고리즘 강의까지 있어서 듣느라 조금 힘들었다.알고리즘 문제를 풀고 해설 강의까지 들어야 했는데 문제를 푸는 데도 시간이 오래 걸리기 때문이다.시간 상 어려운 문제들은 조금만 고민하고 풀이를 보곤 했다.여유로울 때 다시 풀어봐야지!    오늘 학습한 내용스택 (Stack): LIFO (Last In First Out) 큐 (Queue): FIFO (First In First Out)shift 함수 사용은 지양front, rear, index 변수를 지정해서 변수를 꺼내면 front++ 이런 식으로 구현하면 됨 해시 테이블: 입력받은 값을 특정 범위 내 숫자로 변경하는 함수ex. “gender” ⇒ 172461724 …  ⚠️ 만약 해시 함수의 결..