본문 바로가기

Couch Coding

(8)

Couch Coding ( 카우치 코딩 ) - CampUs 프로젝트 회고 카우치코딩에서 진행하는 6주간의 프로젝트가 끝이 났다. 6주간 팀원 모두가 열정적으로 임해주어서 마무리가 잘 된 것 같다고 생각한다 새벽까지 남아 개발하며 팀으로 일 한다는 것이 정말 멋진 일이라는 것을 느끼게 된 것 같다. 지금까지 이 프로젝트를 진행하며 느끼고 배웠던 것들을 기록했었고, 이제는 회고를 써보자 한다. CampUs 프로젝트에 참여하게 된 계기 여러 사람들이 다양한 아이디어를 냈었는데, 솔직히 막 끌린다거나 하는 아이디어는 없었다. 그 당시만 해도 내 자신감이 바닥을 기어 다닐 때여서 어딜 가든 1인분만 하면 좋겠다는 생각을 했던 것 같다 어느 팀, 어떤 프로젝트를 진행하든 팀원 분만 잘 만나면 좋겠다고 생각했다. 그렇게 캠핑장을 추천 서비스 팀에 참여하게 되었고 팀원분들과 짧은 대화를 나..

Couch Coding ( 카우치 코딩 ) - ReactKakaoMapSDK 이용하여 마커, 커스텀 오버레이 생성하기 (카카오맵) 우리 팀이 현재 개발하고 있는 CampUs 서비스는 지도를 통해 캠핑장의 좌표를 확인하고 캠핑장을 조회할 수 있는 서비스이다 위 사진처럼 캠핑장을 검색하면 그 결과에 따른 좌표가 지도에 등록되고 마커를 클릭했을 때 사진과 같아 '커스텀 오버레이'라고 부르는 컴포넌트를 렌더링 한다. 이전에 kakaoMap API를 통해 리액트에서 개발을 했을 때 리액트에서 사용하기가 조금 불편하다고 느낀적이 있어서 편리한 라이브러리가 없을까 찾아보다가 https://github.com/JaeSeoKim/react-kakao-maps-sdk GitHub - JaeSeoKim/react-kakao-maps-sdk: React components for using kakao map api React components for ..

Couch Coding ( 카우치 코딩 ) - AntDesign 이용하여 페이지네이션 구현하기 Ant Design은 알리바바 그룹에서 개발한 UI 프레임워크이다 . Button, Slide, Input, Form 등 다양한 리액트 컴포넌트를 제공한다 Ant Design을 이용하여 손쉽게 슬라이드와 페이지네이션을 구현하는 방법을 알아보자 ! 📄 Pagination 페이지네이션을 구현하는 방법을 알아보자 위 페이지네이션 Example을 사용해보자! // Pagination import { Pagination } from 'antd'; const [currentPage, setCurrentPage] = useState(); // 현재 페이지 State // Ant Design의 Pagination 컴포넌트 { changePage(value); // 페이지의 변경 이벤트가 발생하면 changePage 함..

Couch Coding ( 카우치 코딩 ) - Geolocation API 사용하여 사용자 현재위치 가져오기 이 포스트에서는 geolocation API를 사용하여 사용자의 현재 위치를 가져오는 기능을 구현 해 볼 것이다. 우리 팀이 카우치코딩에서 개발하고 있는 CampUs 서비스는 메인페이지에서 사용자의 위치를 기반으로 사용자 주변 캠핑장을 추천해주는 기능을 제공하고있다. 이 기능을 개발하기 위해서는 메인페이지에 들어가자마자 사용자의 현재위치를 알아내는 것이 중요하다 ! 현재위치를 받기 위해서는 navigator 객체를 사용해야 한다. navigator.geolocation.getCurrentPosition(위치를 받은 다음 실행할 함수, 에러가 발생 했을 때 실행할 함수); navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다 . getCurre..

Couch Coding ( 카우치 코딩 ) - 글로벌 axios 기본(defaults) 설정 이번 글은 axios를 모듈화하는 방법에 대해서 알아보자 axios의 default를 설정해주기 위해 axiosInstance라는 파일내에서 관리하도록 하자 우리 팀은 위 처럼 common폴더에서 관리를 하기로 했다. 이제 코드를 통해 살펴보자 // axiosInstance.js import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'https://api.example.com' }); axiosInstance.defaults.headers.common['Authorization'] = 'FIREBASE AUTH TOKEN'; export default axiosInstance; 위 코드는 멘토님이 처음 주신 예시 코드이다. ax..

Couch Coding ( 카우치 코딩 ) - Frontend에서 CORS 해결하기 .. 문제의 시작 ☠️ 로그인, 회원가입을 위해 FIrebase로 Google oAuth를 연결하고 Firebase 내에 토큰을 가지고 백엔드 서버에 로그인, 회원가입 요청을 보내야 했었다. 안 되더라 .. 🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch th..

Couch Coding ( 카우치 코딩 ) - json-server 를 이용한 Mock 데이터 생성 기획 단계가 지나가고 실제로 팀 프로젝트가 시작이 되었다. 백엔드와 프론트엔드 개발의 속도 차이가 있기 때문에 백엔드 API 가 완성 될 때 까지 프론트엔드는 무엇을 해야할까 ? 바로 백엔드팀에서 API 개발 완료될때까지 json - server를 이용하여 가상의 데이터, api 를 생성하여 실제 API가 있다고 가정하고 컴포넌트 개발을 시작하다가 추후 실제 API를 연동하면 되겠다. 설치 방법 npm install -g json-server 설치가 완료 되었다면 위와 같이 프로젝트 폴더 내부 최상위에 json-server라는 폴더를 생성하고 그 안에 db.json이라는 파일을 만들자. 이제 실제 개발 될 API 문서를 참고하여 db.json 파일안에 mock 데이터를 생성하면 되겠다. 아래는 실제 개발..

Couch Coding ( 카우치 코딩 ) - 팀 프로젝트 참가 [기획] 지원한 이유 면접 광탈, 코딩테스트 광탈 등 여러가지 이유로 자신감이 결여된 상태였다. 사실 입사 지원을 하면서 붙어도 문제라고 생각했다 학부 때는 임베디드를 전공했지만 프론트엔드 개발자가 되겠다고 마음먹고 공부를 시작한 터라 프론트엔드에 대한 기본기, 그리고 협업에 대한 경험이 정말 많이 부족하다고 느끼고 있었다. 카우치 코딩에 참여하면서 같은 길을 걸어나가는 동료들과 협업을 하는 경험도 쌓고 내 코드가 옳은 코드인지 봐주시는 멘토님이 있으니 이건 기회다 ! 생각하고 고민없이 참가했다. 지금까지 결과는 매우만족 👍 카우치코딩에 대해 짧게 소개하고 우리팀이 카우치 코딩에서 기획을 어떻게 진행했는지 소개하고자 한다 . 카우치코딩 소개 카우치코딩 내에서 수업을 소개하는 내용은 아래와 같다. 전문 멘토 개발자..

이전 1 다음

티스토리툴바