본문 바로가기

전체 글

(33)

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

HTTP 응답 코드 401(Unauthorized) vs 403(Forbidden) 차이점 4xx 대 에러는 클라이언트 측에서 잘못된 요청(request)을 보냈을 때 발생하는 에러다. 그 중 401 에러와 403 에러는 모두 인증이 안됐을 때 발생하는데, 두 에러에 대한 차이점을 알아보자 ! 401 에러 401 (Unauthorized) 클라이언트 오류 상태 응답 코드는 해당 리소스에 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않았음을 나타낸다. 즉 클라이언트가 인증되지 않았을 때 발생하는 에러라고 보면 된다. 대체로 로그인 하지 않은 상태에서 글을 작성하거나 마이페이지를 조회하려고 할 때 서버는 401 에러를 반환한다. 403 에러 403 (Forbidden) 클라이언트 오류 상태 응답 코드는 서버에 요청이 전달되었지만, 권한 때문에 거절되었다는 것을 의미한다. 즉 로그인은 했지..

브라우저 렌더링 원리 ( Critical Rendering Path ) 렌더링이란 웹사이트에 url로 접근했을 때 서버로부터 받은 ( HTML,CSS, 자바스크립트 ) 등의 응답을 화면에 나타내는 것이다 브라우저 엔진 브라우저마다 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 브라우저 엔진 파이어 폭스 게코 엔진 사파리, 크롬 웹킷 엔진 브라우저 렌더링 (Critical Rendering Path) 과정 Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. DOM 트리 만들기 CSSOM 트리 만들기 Render 트리 만들기 레이아웃 생성하기 페인팅 이제 각 단계마다 어떤 역할을 하는지 알아보자 DOM 트리 생성 HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 ..

이전 1 2 3 4 5 다음

티스토리툴바