728x90 반응형 전체 글142 OAuth 인증 과정 목차 저번에 프로젝트에서 구글 로그인과 구글 드라이브에 있는 파일들을 공유하는 기능을 구현했고, 이때 OAuth를 사용해 회사의 서비스가 구글에 접근할 수 있는 권한을 얻게 되었다. OAuth의 원리에 대해 공부를 딥하게는 하지 못한채로 프로젝트를 끝낸것 같아 글로 정리하고 세미나를 진행해보기로 했다. OAuth를 설명하기 이전에 왜 OAuth를 사용해 다른 서비스에 접근하는 권한을 획득하는 방법을 사용하는지에 대해 생각해봤다. 사실 그냥(google을 예로 들겠다) ID/PW를 우리의 서비스에 저장한 채로 구글에 보내 접근 권한을 획득하는 것이 루트도 짧고 편하지만, 사용자는 자신의 아이디와 비밀번호와 같은 개인정보를 처음보는 서비스에 맡기기에는 부담이 있다. 또한 우리 회사의 입장에서 노출되면 안되는.. 2024. 1. 24. 인증과 인가 목차 보안 프로세스인 인증과 인가에 대해서 설명해보려고 한다. 로그인 기능을 구현할 때 인가코드, 인증 이러한 용어들을 듣게 되는데 정확히 뭔지 궁금해져 공부해보게 되었다. 인증(소셜 로그인) 인증은 식별 가능한 정보로 보호된 리소스에 접근하는 것을 허용하기 이전에 서비스에 등록된 유저의 신원을 입증하는 과정이다. 예를 들어 출국할 때 여권으로 신원을 입증하거나 회사에 들어올 때 출입증을 통해 신원을 입증할 수 있다. 웹의 경우에는 아이디와 패스워드를 입력하거나 휴대폰에 전달된 SMS에 적혀있는 코드를 입력하는 것이다. 인가(OAuth) 인가는 요청된 리소스에 접근할 수 있는 권한이 있는 인증된 유저인지 입증하는 과정이다. 예를 들어 회사가 14층에 위치하고 있다면 13층에 위치한 다른 회사에는 접근할 .. 2024. 1. 23. TS와 Zode 비교하기 목차 JS를 쓰고 있는 나는 타입 정의를 위해 TS를 사용하고 있다. 근데 팀원 중 한 분이 Zod를 쓰고 싶어하시길래 도대체 장점이 뭐길래? 라는 의문점이 생겨 알아보기 시작했다. 엄격한 유효성 검증을 위해 사용되는 Zod Zod가 TS보다 강력한 이유는 엄격한 유효성 검증을 하기 때문이라고 생각한다. 하지만 그 만큼 TS보다 작성해야하는 코드가 많다는 생각이 들었다. 어떤면에서 볼때는 강력하지만, 또 다른면에서 볼때는 오히려 난잡하다는 느낌이 들었기 때문이다. 하지만 그럼에도 불구하고 TS에 비해 강력하다고 느낀 강점은 아래와 같다. 1. 데이터 스키마, 즉 데이터 구조와 형식을 정의하기 때문에 TS보다 더 강력한 타입 검증이 가능하다. 컴파일 시 스키마에서 정의한 수준의 타입 검사가 발생하기 때문이.. 2024. 1. 17. Google OAuth 2.0 로그인 구현하기 Google 로그인과 구글 드라이브의 파일과 비디오를 업로드하는 기능을 맡아 구현하게 되었다. Google 로그인은 물론 구글 드라이브를 연결해본 경험은 없었다. 호기롭게 시작했지만 많은 오류와 시련을 겪었다.. 변명아닌 변명을 해보자면 1. google 공식문서라고 믿으면 안된다.. (믿는 도끼에 큰 코 다친다고 공식문서는 업데이트도 되지 않았었고, 구글 로그인 관련된 코드를 관리하는 웹과 구글 드라이브 관련 코드를 관리하는 웹이 서로 다른 코드를 예제로 들고 있었다.) 2. svelte로 작성된 코드가 없었기 때문에 JS 샘플코드만 가지고 svelte화 시키는 과정에서 시간이 소요되었다. 3. TS로 작성된 코드도 없었기 때문에 타입 지정하는데 어려움을 겪었다. 어쨌든 결과적으로 혼자서 Google .. 2024. 1. 15. 2024년 더 나은 FE 개발자가 되기 위한 목표 개발자는 스스로를 회고하는 과정이 필수적이라고 생각한다. 그래서 작지만 큰 목표를 세워 이를 이루려고 한다. 1. DSA(Data Structures and Algorithm) 공부하기 2. React를 사용해 개인 프로젝트 하나 개발하고 꾸준히 업데이트 하기 (현재 회사에서는 svelte를 사용하고 있지만, react도 놓치면 안된다고 생각한다.) 3. 스프린트가 끝난 후 에러로그 작성 및 큰 이벤트 관련하여 블로깅 작성하기 4. 문제를 근본적으로 해결하기 위해 노력하고 그 과정을 기록하기 5. 질문하는 스킬과 의견을 공유하는 스킬을 성장시키기 참고자료 google tech dev guide 2024. 1. 12. 프론트엔드 입장에서 바라본 Socket과 WebSocket 회사에서 데모 프로젝트를 수행하는데 웹소켓을 사용해 통신을 할 예정이라고 해서 공부하기 시작했다. 예전에 분명 써본거 같은데 기억이 안난다.. 아마 프로젝트를 끝내고 나면 더 완벽하게 이해할 수 있을 것 같은데, 그건 또 추후에 포스팅해야겠다. 현 시점에서 생각해본다면 비디오 데이터를 보여줘야하고, 실시간으로 업데이트되는 영상들을 띄어줘야하기 때문에 웹소켓을 사용해 실시간 네트워킹이 필요하기 때문이라고 생각한다. Socket이란? 웹소켓에 대해 알아보기 전에 socket이 뭔지에 대해서 궁금했다. socket은 프로그램이 네트워크에서 데이터를 주고받을 수 있도록 네트워크 환경에 연결할 수 있게 만들어진 연결부다. 일반적으로 TCP/IP 프로토콜을 이용하고, TCP/IP 4계층에서 전송 계층 위에 놓인다... 2024. 1. 12. ES Module 동작 방식 CommonJS(CJS) module.exports = { ... } // 모듈 내보낼 때 const utils = require('utils'); // 모듈 가져올 때 NodeJS에서 지원하는 모듈 방식으로 초기 Node 버전부터 사용되었다. 별도의 설정이 없다면 CJS가 기본값이다. require()는 즉시 스크립트를 실행하는 구조이고, 동기적으로 작동하기 때문에 import 순서에 따라 스크립트를 실행하고 module.exports에 설정된 값만을 리턴한다. ES Modules export.default = () => { ... } // 모듈 내보낼 때 import utils from 'utils'; // 모듈 가져올 때 ECMAScript에서 지원하는 방식이다. package.json에 "type.. 2024. 1. 11. 문제를 근본적으로 해결하는 법 실제로 개발자로 일을 하면서 문제를 해결하는데에만 급급해, 근본적인 원인을 찾지 못해 누군가 이슈에 대해 깊이 있는 질문을 할 때 제대로 대답하지 못한다는 것에 대한 한계를 느꼈습니다. 그래서 문제를 근본적으로 해결하는 법에 대해 찾아보게 되었고, 좋은 글을 보게 되어 공유합니다. 실제로 저도 이를 직접 개발하면서 활용했고, 스스로도 성장을 많이 하게 되었다는 느낌을 받게 되었습니다. 문제를 근본적으로 해결하는 flow 1. 문제가 어떤 상황에서 발생하는지 파악하기 2. 문제가 어디에서 발생하고 있는지 파악하기 3. 적절한 키워드로 검색해보기 (구체적 => 포괄적) 4. 키워드로 검색해도 해결책을 찾을 수 없다면 주먹구구식 방법 사용하기 5. 문제의 원인과 해결방법 찾기 6. 문제의 근본적인 원인과 해결.. 2024. 1. 10. Svelte 파헤치기 1. 날씬한 Svelte 먼저 스벨트는 2016년경에 Rich Harris가 개발한 자바스크립트 웹 애플리케이션 개발 프레임워크입니다. 즉, 리액트, 뷰, 앵귤러와 같은 웹 프레임워크 대신 쓸 수 있습니다. 실행하는 방법은 아주 간단합니다. 2. 왜 Svelte를 써야할까? Svelte는 회사에서 사용하고 있어 이번에 처음으로 사용해보게 되었습니다. React를 많이 쓰는 이 시점에 왜 Svelte를 써야하는지 궁금했습니다. 몇 주간 직접 사용해보고, 구글링해본 결과 아래와 같은 근거로 인해 svelte를 사용한다고 생각했습니다. 개인적인 견해 + 공식적인 지표입니다. 1. 다른 프레임워크보다 더 적은 코드로 같은 기능을 구현할 수 있습니다. 아래의 지표를 보면 svelte의 코드 수는 매우 적은 것을 .. 2023. 11. 6. Rest API method 관련 코드 utils로 생성하여 관리하기 제목 그대로 Rest API 관련 코드들을 method 별로 정리하여 관리하면 추후에 fetch를 통한 통신을 할 때 관리하기에 매우 유용하다. import { API_URLS } from '../constants/apis'; /* eslint-disable class-methods-use-this */ class FetchService { private baseUrl = API_URLS.BASE; private async handleResponse(response: Response) { if (!response.ok) { const message = await response.text(); throw new Error(message); } return response.json(); } async get.. 2023. 10. 30. 이전 1 2 3 4 ··· 15 다음 728x90 반응형
