전체 글65 모던 자바스크립트 딥다이브 목차 정리 책 모던 자바스크립트 딥다이브를 읽고 있다. http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&linkClass=331405&barcode=9791158392239 모던 자바스크립트 Deep Dive - 교보문고 자바스크립트의 기본 개념과 동작 원리 | 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도하다고 느껴질 만큼 친절한 프로그래밍 언어입니다. 이러 www.kyobobook.co.kr 여러번 회독하면서 내용을 숙지하려고 한다. 책을 읽으면서 목차를 기준으로 개념들을 서로 연결지어 보았다. 앞으로 개념별로 묶어서 정리한 글을 올리려고 한다! 04. 변수 : 값을 저장하는 매커니즘으로.. 2022. 6. 12. 리스트 페이지&컴포넌트 설계하기(무한 스크롤) 서버에서 불러온 데이터를 리스트(목록) 형태로 보여주는 페이지는 아주 자주 사용되는 UI 패턴이다. 오늘은 이러한 리스트 페이지와 구성 요소로 사용되는 컴포넌트들을 설계해 보려고 한다. 먼저 수립해둔 컴포넌트 개발 규칙을 다시 꺼내보자. [Action Item] 1. 컴포넌트를 설계할 때 이 컴포넌트가 어떻게 사용되어야 하는지 먼저 정의한다. 2. UI 요소와 데이터 기반 요소를 정리하고 분리하여 각각의 컴포넌트로 구성한다. 3. 컴포넌트의 의도를 정의하고 이를 검증할 수 있는 테스트 케이스를 작성한다. 4. 테스트 케이스를 통과할 수 있는 컴포넌트를 작성한다. 5. 컴포넌트를 리팩터링 하며 정리한다. 한 항목씩 진행해보자! [어떻게 사용되어야 하는가?] 리스트 페이지는 서버에 필요한 데이터를 요청하고 .. 2022. 5. 26. 모달 컴포넌트 설계하기 지난번에 설정했던 컴포넌트 개발 규칙에 맞춰 모달 컴포넌트를 설계해 보려고 한다. 수립한 Action item은 다음과 같다. [Action Item] 1. 컴포넌트를 설계할 때 이 컴포넌트가 어떻게 사용되어야 하는지 먼저 정의한다. 2. UI 요소와 데이터 기반 요소를 정리하고 분리하여 각각의 컴포넌트로 구성한다. 3. 컴포넌트의 의도를 정의하고 이를 검증할 수 있는 테스트 케이스를 작성한다. 4. 테스트 케이스를 통과할 수 있는 컴포넌트를 작성한다. 5. 컴포넌트를 리팩터링 하며 정리한다. 한 항목씩 진행해보자! [어떻게 사용되어야 하는가?] 먼저 모달 컴포넌트는 스크린 위에 레이아웃을 씌운 것처럼 보여야 한다. 구현 방식에는 여러 가지가 있는데 css를 이용할 수도 있고, react DOM 트리에 .. 2022. 5. 17. 컴포넌트 개발 규칙 설정하기 이번 글에서는 현재 진행하고 있는 사이드 프로젝트의 컴포넌트 개발 규칙을 설정해 보고자 한다. 프로젝트의 초반 단계에서 어떤 규칙을 가져갈 것인지 결정하는 것은 무척 중요하다. 지난 개발 경험에서 느낀 문제점들을 개선할 수 있도록 고민한 규칙들을 정리해보고자 한다. [문제점] - 컴포넌트는 사용자 UI와 직접적으로 맞닿아있는 부분이고 변경사항도 잦다. 그때그때 필요할 때마다 덧붙이듯 개발을 진행한 결과, 일관성이 없고 코드를 모두 읽어봐야 파악할 수 있게 되었다. 일관된 규칙이 없기 때문에 확장성도 매우 떨어진다. - 코드를 수정할 때, 기존 코드가 제대로 작동하는지를 보장할 수 없다. [개선 방향] - 어떻게하면 확장성을 향상할 수 있을까? 이러한 규칙을 정하면 이를 지키면서 일관성도 얻을 수 있다. .. 2022. 4. 24. Django + React 소셜 로그인 구현 구현 목표 프론트 서버와 백엔드 서버를 구축할 때, 유저 인증에 소셜 로그인을 활용해 본다. 구현 목표 요약 [프론트] 유저 로그인 시 먼저 Javascript SDK를 통해 OAuth provider에게 토큰을 발급받고, 이를 장고 서버에 넘긴다. [백엔드] 유저 로그인 시 전달받은 토큰(각 provider별 식별자)을 REST API 방식으로 OAuth provider에게 전달해서 유저 정보를 얻는다. 유저 정보를 활용하여 회원가입 혹은 로그인 처리를 진행하고, JWT 토큰을 발급하여 응답한다. + 우리는 백엔드 서버에 자체적으로 유저 관리 시스템을 가지고 있다. 따라서 우리 서버에서 사용하는 별도의 토큰 발급 과정이 필요하다. 흐름도 [프론트] 구현 계획 1. SDK를 스크립트에 직접 삽입하여 적용.. 2022. 4. 7. 이전 1 ··· 8 9 10 11 다음
