아임파인땡큐 아임파인땡큐

OAuth 소셜 로그인 인증방식은 OAuth 2.0을 바탕으로 구현된다. 전통적으로 직접 작성한 서버에서 인증을 처리해주는 것과는 달리, OAuth는 인증을 중개해주는 메커니즘이다. 보안된 리소스에 엑세스 하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화 하는 프로토콜이다. 이미 사용자 정보를 가지고 있는 웹서비스(네이버,카카오 등)에서 사용자 인증을 대신 해주고, 접근 권한에 대한 토큰을 발급한 후 이를 이용해 서버내 인증이 가능하다. 유저입장에서 생각하면 OAuth를 활용해 중요한 서비스(구글 등)의 ID와 Password만 기억해 놓고 해당서비스를 통해 외부 서비스로 소셜 로그인을 할 수 있다. OAuth는 보안상의 이점도 있다. 검증되지 않은 App에서 OAuth를 사용해 로그인하면, 유..

패킷교환방식 패킷교환방식은 패킷이라는 단위로 잘게 나누어 전송하는 방식이다.(소포를 보내듯이) 각 패킷에는 출발지와 목적지 정보가 있고 이에따라 가장 효율적인 방식으로 이동할 수 있다. 인터넷프로토콜(IP)는 풀발지와 목적지의 정보를 IP주소라는 특정 숫자값으로 표기하고 패킷 단위로 데이터를 전송하게 되었다. IP패킷 IP패킷에는 우체국 송장처럼 전송데이터를 무사히 전송하기 위해 출발지IP,목적지IP와 같은 정보가 포함되어있다. 단점도 존재한다. 비연결성: 패킷을 받을 대상이 없거나 서비스 불능상태여도 그대로 전송한다. 비신뢰성: 서버가 데이터를 전달하던 중 장애가 생겨 패킷이 중간에 소실되더라도 클라이언트는 이를 파악할 방법이 없다. 전달 데이터의 용량이 클 경우 이를 패킷단위로 나눠 데이터를 전달하는..

코플릿 (21_power) 두 수를 입력받아 거듭제곱을 리턴해야합니다. function power(base, exponent) { // todo: 여기에 코드를 작성합니다. let answer = 1; for(let i=1;i

웹표준 웹표준이란 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙이다. 웹표준의 장점으로는 아래와 같은것들이 있다. 1. 유지보수의 용이성 구조 표현 동작 등 각 영역이 분리되면서 유지 보수가 용이해지고, 코드가 경량화되면서 트래픽비용이 감소하였다. 2.웹호환성확보 웹브라우저의 종류나 버전, 운영체제나 사용기기에 관계없이 동일한 결과가 나오도록 할 수 있다. 3.검색효율성증대 적절한 HTML요소 사용, 정확한 정보작성 등 검색효율성과 관련된 내용도 웹 표준에서 다루고 있다. 4.웹접근성 향상 시맨틱 HTML 각요소의 이름만 보고도 화면에서 어떤 역할을 하게 될지, 어떤 내용을 알게 될지 보다 명확하게 알 수 있다, 자주틀리는 마크업 1. 인라인 요소 안에 블록요소 넣기 // h1, div 요..

Redux 리액트의 데이터 흐름에 따르면, 컴포넌트2에 있는 데이터를 컴포넌트 6에 전달하려면 위의 과정을 거쳐야한다. 상태끌어올리기, Props내려주기를 여러번거쳐야하고, 해당상태를 사용하지 않는 최상위 컴포넌트, 컴포넌트1,컴포넌트2도 상태데이터를 가지게 된다. 애플리케이션이 복잡해질수록 데이터흐름도 복잡해지고, 컴포넌트 구조가 바뀐다면 데이터의 흐름을 완전히 바꿔야 할 수도 있다. Redux는 전역상태를 관리할 수 있는 저장소인 Store을 제공한다. Redux구조 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로..

React-custom-component과제 modal import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` display: flex; justify-content: center; align-items: center; height: 100%; // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. background-color: rgba(0, 0, 0, 0.5); posit..

Storybook UI개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한번에 하나의 컴포넌트를 작업할 수 있다. 전체 UI를 한눈에 보고 개발이 가능하다!(복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요가 없다. UseRef 리액트컴포넌트는 내부상태(state)이 변할때마다 다시 렌더링 된다. 그러면 다시 렌더링이 되더라도, 기존에 참조하던 컴포넌트 함수 값이 그대로 보존되어야 하는 경우가 있을것이다. 이럴때 사용하는것이 useRef이다. useRef는 돔요소 혹은 저장공간에 접근하기 위해 사용되는 React Hook이다. import,export는 또 뭔데? r..

CCD(Component Driven Development) -디자인과 개발단계에서부터 재사용할 수 있는 UI컴포넌트를 미리 디자인하고 개발하는것 CSS작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었다. 위의 CSS방법론은 각각의 장단점이 있으나, 세 방법론 모두 같은 지향점을 가지고 있다. 코드의 재사용 코드의 간결화 코드의 확장성 코드의 예측성(클래스 명으로 의미예측) Styled Component:React로 Coponent Driven Development를 할 수 잇는 대표적인 도구 리액트환경에서 CSS를 컴포넌트화 시킨다. CSS in JS라는 개념이 대두되면서 나온 라이브러리이다. 이를 이용하여 CSS로 Javascript에 넣어줄 수 있으므로 HTML,JS,CSS 를 하나로..