본문 바로가기

전체 글

 (118)
7주차 : React로 CGV클론코딩. 카카오 소셜로그인 프론트엔드 CGV 클론 코딩에 로그인을 네이버 소셜로그인으로만 하려고 했는데 기능 담당자가 내가 아니어서 카카오 소셜 로그인에 도전하게 되었다. 전체적인 흐름도 내가 이해한 바로는 1. 카카오 로그인을 요청하면 Redirect URI를 통해 파라미터에 인가코드를 받는다 2. 파라미터에 온 인가코드를 저장하여 백엔드 서버로 보내준다. 3. 백엔드 서버에서 카카오에 POST로 인가코드를 보내면 Response로 토큰을 받아서 프론트엔드에 전달하게되고, 4. 클라이언트가 로그인을 하면 성공. 셋팅 한 대로 로컬 스토리지에 토큰이 저장되면 된다. 과정 1. Kakao developers에서 카카오 소셜로그인을 선택하고 내 애플리케이션을 등록한다. 2.REST API키를 받고 Redirect URI에 카카오로부터 인가코드를..
6주차: React 미니프로젝트 "오늘도 무사히" 시연영상 # 오늘도 무사히 고된 일상을 버티고 오늘 하루도 무사히 넘겨보자는 취지의 공유 일기장입니다. 비대면에 익숙한 사회가 되어버린 오늘 날, 서로가 일상을 공유하며 혼자가 아님을 일깨워주고자 공유일기장 이라는 아이디어를 내게 되었습니다. 유저들은 서로의 일상을 사진과 함께 공유하고, 댓글도 달고, ‘좋아요’로 반응해주며 공감과 위로를 공유할 수 있는 서비스 입니다. # GitHub FrontEnd Github GitHub - nonjee888/fe_6week_miniproject: 미니프로젝트 - 공유일기장 미니프로젝트 - 공유일기장. Contribute to nonjee888/fe_6week_miniproject development by creating an account on GitHub. g..
WIL: Axios Axios 인스턴스, 인터셉터란? 인스턴스 만들기 사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다. axios.create([config]) const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); 인스턴스 메소드 다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스턴스 config와 결합됩니다. axios#request(config) axios#get(url[, config]) axios#delete(url[, config]) axios#head(url[, config]) axios#optio..
TIL : API란 무엇인가요? API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호 작용하여 요청된 메뉴(명령에 대한 값)를 전달합니다. 쉽게말해 API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체. API의 역할 1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다. 데이터베이스에 저장된 정보들이 모든 사람들에게 접근되지 않기 위해 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근성을 부여해준다. 2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다. 여기서 애플리케이션은 우리가 흔히 아는 스마트폰 어플, 프로그램을 말한다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 역할을 한다. ..
TIL)React 키워드 🔐 리덕스에서 미들웨어 청크의 역할은 뭘까요? 미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는 등 업데이트 이전에 추가적인 작업을 할 수 있도록 도와주는 역할이다. 즉 리듀서 내 로직이 실행되는 사이의 중간다리 역할을 해줄 함수들을 작성하는 공간이다. thunk의 역할 1) thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체)가 아니라 dispatch(함수)를 할 수 있게 되는 것. 2) 그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것이다. 그래서 아래 흐름과 같이 실행이 되..
TIL) 논리 연산자 || OR 자바스크립트에는 세 종류의 논리연산자 ||(OR) , &&(AND), !(NOT) 가 있다. 논리 연산자는 피연산자로 불린형 뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다. || (OR) 불린 값을 조작하는데 쓰인다. 인수 중 하나라도 true면 true를 반환하고, 아닐 시 false를 반환한다. OR연산자는 이항 연산자이므로 아래와 같이 네가지 조합이 가능하다. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다. 예를 들어..
TIL) React : DOM, 서버리스 DOM이란? Document Object Model의 줄임말로서, 문서 객체 모델이다. 즉, HTML문서를 객체화 한 것이다. 이 객체는 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여, 문서구조나 스타일, 내용 등을 변경 할 수 있게 해준다. DOM은 nodes, objects로 문서를 표현하는데 DOM의 객체지향 표현이며, 이는 Javascript와 같은 스크립트 언어로 접근이 가능하다. DOM을 수정하는데 사용되는 property, method, event는 모두 objects로 표현이된다. DOM이 있기 때문에, javascript가 웹페이지 or XML에 관련된 정보를 가질 수 있다. 또한 DOM은 프로그래밍 언어와 독립적으로 디자인 되어, javascript뿐만 아니라 pytho..
TIL) async & await async와 await 라는 특별한 문법을 사용하면 프로미스를 좀 더 편안하게 사용할 수 있다. async함수 asyncs는 fuction 앞에 위치한다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스 (resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다. async function f() { return 1; } f().then(alert); // 1 명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일하다. async function f() { re..
반응형

티스토리툴바