profile
프론트엔드를 개발 중입니다:)

[Rest API] fetch와 axios

fetch와 axios 둘다 결국에는 서버와 통신하기 위해 사용하는 방법 중 하나일 뿐이다. 기능적으로는 동일하지만, 사용하는 방식이 다르다. 지난번엔 fetch를 사용해서, 이번에는 axios를 사용해봤는데 둘다 사용해보고 비교해보니 axios가 조금은 더 편한 것

4일 전
·
0개의 댓글

[react] 카카오 소셜 로그인

기존의 로그인 기능이 아닌, 소셜 로그인 기능을 구현해보려고 해서 그 중 가장 처음에 접근이 쉽다는 카카오로 소셜로그인 기능을 구현해봤다. 라이브러리를 사용하면 더 쉽지만 기능의 전체적인 흐름을 한번 익혀보고자 이번에는 사용하지 않았다. 이거는 카카오 디벨로퍼

4일 전
·
0개의 댓글

[Git] git rebase

여태까지 master와 branch사이에 update된 사항이 있으면 변경 사항을 맞춰주기 위해 각각의 branch로 이동해서 master의 내용을 merge해줬는데, merge가 아닌 rebase라는 기존과 다른 방식을 사용해서도 같은 기능을 수행할 수 있다. reb

4일 전
·
0개의 댓글
post-thumbnail

[React] 첫 프로젝트 (컨버스 사이트 클론)

한달 동안 html, css, javascript, react 공부를 하고, 쉴틈없이 바로 2주간의 프로젝트에 들어갔다. 2주차 주말을 제외하면 정확히는 12일동안의 결과물이다.신발과 의류 등 세계적인 패션회사인 컨버스 홈페이지 클론코딩간략 소개나는 컨버스 팀에 속하게

2020년 8월 2일
·
0개의 댓글

[React] 장바구니 api

장바구니 기능을 만들때, 상품을 프론트엔드에서 관리해도 되고, 백엔드에서 관리해도 됐기 때문에 어느쪽에서 그 일을 맡을지 역할을 분담해야 됐었다. 보통의 사이트에서는 백엔드 쪽에서 관리한다고 들었는데, 공부를 하는 입장에서 내가 있는 프론트쪽에서 한번 구현해보고 싶어서

2020년 8월 2일
·
0개의 댓글

[React] api와 소통시 초기값이 비었을 때

리액트의 라이프사이클은 constructor > render > componentDidMount 순으로 진행된다. 그런데, 나의 경우에는 fetch를 componentDidMount안에서 했기 때문에 그 전의 render에서는 state에 빈 값이 있을 수 밖에 없었

2020년 8월 2일
·
0개의 댓글

[React] 이중 map

react에서는 배열에 반복문을 사용할 때, for문이나 while문보다는 map함수를 사용하게 되는데, 사용하다보니 이중 혹은 그 이상의 반복문이 필요한 경우가 종종 발생했다.신발 상세 페이지의 mock data인데, 신발 하나당 배열안에 두개의 객체를 활용해서 해당

2020년 8월 2일
·
0개의 댓글

[React] 유동라우터

아래의 두 사진은 하나의 페이지에서 같은 형식을 유지하면서 url에 따라 받는 데이터가 달라진다. 그럴 때 사용되는 개념이 유동라우터라는 개념이다. Routes.js Routes.js에서 페이지의 형식이 재사용 되는 경우가 아니라면 login과 같이 path를 설정

2020년 8월 2일
·
0개의 댓글

[React] State 끌어올리기, Ref

처음에 리액트를 배울 때 리액트는 waterfall방식이기 때문에, state의 부모 컴포넌트에서 자식 컴포넌트로 단방향일 것이라고만 생각했다. 그런데 코드를 짜다보니 자식 컴포넌트의 state값을 부모 컴포넌트에게 전달해줘야 되는 상황이 발생하기 시작했다. 리액트에서

2020년 8월 1일
·
0개의 댓글

[React] TIL

위 컴포넌트는 First, Second, Third 상단 바를 공유하고 있는데, First를 누르면 First를, Second를 누르면 Second를, Third를 누르면 Third를 아래에 보여주는 기능을 가지고 있다.어떤 방법으로 이게 가능한 걸까?obj라는 객체의

2020년 7월 26일
·
0개의 댓글

[react] 라이프사이클

리액트에서는 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다. 이러한 메서드들을 생명주기 메서드라고 부릅니다.생명주기 메서드는 위와 같이 실행되는 순서가 모두 정해져 있습니다. 현재까지는 Initial

2020년 7월 26일
·
0개의 댓글

[react] Monsters 과제

여태까지와는 다른 형식의 과제였고, 그래서 더 어렵지만 나름 해결해나가는 재미도 있었다. 이번 과제를 통해서 배울 수 있었던 개념들 ✔️ componentDidMount() 의 특징과 활용법 ✔️ fetch() 함수를 통한 API 호출 (GET) ✔️ map() 함수

2020년 7월 26일
·
0개의 댓글

[react.js] 첫 미니 프로젝트(인스타그램 클론)

4주간 공부하고 실습해본 html,css,javascript,react에 대해 인스타그램 홈페이지를 클론했던 것을 바탕으로 정리하며 한번 복습해보려고 한다.간략 소개html, css, javascript만을 이용해서 인스타그램을 클론해보고, 똑같은 내용을 React로

2020년 7월 18일
·
0개의 댓글

Wecode 공부 한달

4주간 공부하고 실습해본 html,css,javascript,react에 대해 인스타그램 홈페이지를 클론했던 것을 통해서 복습해보려고 한다. 간략 소개 html, css, javascript만을 이용해서 인스타그램을 클론해보고, 똑같은 내용을 React로 다시 클론해

2020년 7월 18일
·
0개의 댓글

[Javascript] 서버에 데이터를 호출/요청하는 fetch함수

프론트에서 서버(백엔드) api를 호출하면 데이터를 받아올 수 있습니다. 자바스크립트 Web API fetch 함수를 쓰거나, axios 라이브러리를 사용하면 서버로부터 데이터를 받아올 수 있습니다.Web API는 클라이언트(프론트) 측에서 사용할 수 있는 자바스크립트

2020년 7월 15일
·
0개의 댓글

API 서버 [인증(Authentication), 인가(Authorization)]

인증과 인가는 API에서 가장 자주 구현되는 기능중 하나다.Private한 API는 물론이고 Public한 API도 기본적인 인증과 인가를 요구한다.유저의 identification(아이디와 비밀번호)을 확인하는 절차다.인증을 하기 위해선, 먼저 유저의 아이디와 비번을

2020년 7월 14일
·
0개의 댓글

Database

데이터를 저장 및 보존하는 시스템Application에서는 데이터가 메모리 상에서 존재한다. 그리고 메모리에 존재하는 데이터는 보존되지 않는다. 해당 애플리케이션이 종료하면 메모리에 있던 데이터들은 다시 읽어 들일 수 없다.그러므로 데이터를 장기간동안 저장 및 보존하기

2020년 7월 12일
·
0개의 댓글

HTTP & RESTful HTTP API

HTTP 구조 및 핵심 요소 HTTP (HyperText Transfer Protocol) 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약) 웹에서 네트워크로 서버끼리 통신을 할 때 서로 통신을 하자고 규정해 놓은 '통신 형식',

2020년 7월 12일
·
2개의 댓글

자료구조: Array

자료구조의 정의와 중요한 이유 > 자료 구조란 데이터의 편리한 접근과 조작을 가능하게 하는 데이터를 저장하거나 조직하는 방법입니다. 문맥과 데이터의 종류에 따라 적절한 자료 구조를 사용하는 것은 전체 개발 시스템에 큰 영향을 끼칩니다. 그렇기 때문에 자료구조의 다양한

2020년 7월 6일
·
0개의 댓글

[Web] web은 어떻게 동작할까?

웹은 어떻게 동작할까? > 사용자가 브라우저에 www.goolge.com을 검색하면 해당 www.goolge.com홈페이지 서버에 url을 요청합니다. 서버(컴퓨터)는 응답하기 위해 24시간 항상 켜져 있어야 합니다. 호스트 서버는 홈페이지의 구성파일들(html,

2020년 7월 4일
·
0개의 댓글