Coin Site Project

코인 시황 사이트 🪙 아직 졸업이 1년 정도 남았지만, 지금까지 학습한 지식으로 그리고 앞으로 학습할 내용으로, '제대로 된' 포트폴리오 용 사이트를 하나 개발하고 싶다는 생각이 들었다. 프론트엔드 개발자로 취업하는 것이 단기적인 목표이지만, 궁극적으로는 "플랫폼

MUI, Grid System ✍️reference: https://www.youtube.com/watch?v=eYGIIc2FOVIhttps://mui.com/material-ui/react-grid/MUI를 사용하여 프로젝트를 진행하기로 기획했다.

파일 구조 ✍️ 오늘의 핵심 파일 src/components/layout/appbar src/hooks/common/useResponsive.jsx > 1. src/components/layout/appbar/index.jsx 🟢 MUI에서 Appbar에 대한

파일 구조 ✍️오늘의 핵심 파일src/components/layout/footer/footerMenu.jsxsrc/components/layout/footer/Footer.jsxsrc/components/layout/common/PageContainer.jsxsrc/p

Dark Mode 습작 🌖새로고침 console 순서ToggleColorMode component renderingtheme executed 1theme executed 2MyApp component rendering모드 아이콘 클릭 console 순서toggleCo

reference: https://react.dev/reference/react/createContext https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree > createCon

Home Page Layout ✍️ PageContainer.jsx 🟢

reference: https://mui.com/material-ui/customization/theming/Theme? ✍️MUI에서 Theme은, 컴포넌트의 color, breakpoints를 포함한 다양한 디자인적 제반사항을 미리 지정해놓은 객체이다. t

reference: https://mui.com/material-ui/customization/palette/palette ✍️공식문서에는, palette를 통해 사용자에게 적합하도록(=customize) 컴포넌트의 '컬러'를 수정할 수 있다고 언급되어 있다.

✅ 분리 X1\. theme.jstheme.js에 있는 getDesignTokens 함수부터 살펴보자.getDesignTokens는 인자로 mode를 받는다. 함수를 사용하는 부분에서 받은 mode가 light에 해당하면, light 버전의 palette가 반환된다.

✅ 다시 공식문서 공식 문서의 theming과 palette 파트에 최근 며칠간 deep dive 했다. 끝난 줄 알았다. 아뿔싸... dark mode 파트를 공부하지 않으면 의미가 없다는 것을 공식 문서를 훑어보며 깨달았다. 도대체 무슨 말을 하고 싶은 걸까?

✅ The Table element 프로젝트 메인 페이지의 테이블을 구현할 차례이다. MUI와 같은 라이브러리를 통해 view를 구현하는 것 자체는 그리 어려운 일이 아니다. 다만, 제공되는 템플릿을 명확하게 이해하여 다양한 요구사항에 확장성 있게 대응하는 것이 더

✅ color 정리MUI에서 다크 모드와 라이트 모드를 구분할 때, <Typography와 Buttons> <Background와 Divider>를 대조하는 방식을 취한다고 느꼈다. ✅ getDesignTokens위와 유사하게, 같은 모드 내부에서 &lt

reference:https://aws.amazon.com/ko/what-is/api/https://www.youtube.com/watch?v=4DxHX95Lq2U✅ API란?API는 Application Programming Interface의 줄임

reference: https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0

✅ 시작에 앞서...며칠간 고심했다. 다른 건 아니고, 구현을 하는 과정에서 뭔가 잘못되었음을 깨달았다. 무슨 말이냐?개인적인 의견이지만, 코드를 작성하는 행위는 논리적인 글(예를 들면 기사)을 작성하는 행위와 유사하다. 그런데 글을 작성할 때에는 나름대로 목차를 구성

✅ 개요Signup Page에 대한 기본적인 layout을 잡았다. Signup Page는 PageContainer와 ComponentWrapper를 차치하고, 총 5개의 파트로 구분된다. ✅ part 1: main titleBox 태그는, main title에 대한

✅ 새로운 것을 빨리 배우는 법reference: https://haandol.github.io/2020/11/06/tips-for-learning-new-things-faster.htmlAWS Cognito에 대한 개념을 학습하기에 앞서, 새로운 것을 빨리

✅ 분할 정복(Divide and Conquer)분할 정복(Divide and Conquer)은 여러 알고리즘의 기본이 되는 해결방법으로, 기본적으로는 엄청나게 크고 방대한 문제를 조금씩 조금씩 나눠가면서 용이하게 풀 수 있는 문제 단위로 나눈 다음, 그것들을 다시 합

reference:https://velog.io/@qjqdn1568/%EC%9D%B8%EC%A6%9D%EA%B3%BC-%EC%9D%B8%EA%B0%80%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%

✅ Query란?Query란 질문 또는 문의라는 뜻을 내포하고 있다. 컴퓨터과학에서 말하는 Query는 DB에서, 원하는 내용을 검색하기 위해, code나 key를 기초로 질문하는 행위를 의미한다. 질문하는 행위 자체를 Query라고 한다면, 질문의 형식을 Query

🔥 AWS Cognito Flow(with. KakaoTalk)reference: https://haandol.github.io/2021/01/31/cognito-kakao-login.htmlSign in via Kakao ☝️Redirect with Aut

Sign in via Kakao ☝️Redirect with Auth code ☝️사전 설정부터 시작하도록 하자.카카오 dev 문서의 '내 애플리케이션'에서, 테스트를 진행하기 위해 애플리케이션을 추가해준다. aws cognito와의 통합을 테스트하기 위해서, 앱 이름

✅ API Gateway에 관한 고찰프론트엔드계의 백종원 선생님이 되고자 하는 나로서는, 이런 글을 읽게 되면 백종원이 아니라 은현장에 더 가까워진다. (화가 머리끝까지 난다는 뜻)API Gateway는 API계의 '전역 상태 관리'라고 할 수 있다. 이게 다임 실제로

텍스트

Auth with API ☝️🔴 Access Token을 보내는 것이 핵심이번 단계에서는, 'web page'에서 Amazon API Gateway로 생성한 'API로' Access Token을 보내야 한다. 엄밀히 말하자면, 생성한 API와 AWS Lambda가 연

✅ JSON이란?JSON은 'J'ava'S'cript 'O'bject 'N'otation이다. 자바스크립트 객체 형식의 표기법이라는 뜻.클라이언트가 서버에 요청하면, 서버가 클라이언트에 응답을 하는 구조. 결국 데이터를 주고받는 문제이고, 그 중심에 JSON이 있는 것

reference: 1.https://joshua1988.github.io/web-development/javascript/promise-for-beginners/2.https://developer.mozilla.org/ko/docs/Web/JavaS

✅ 아키텍처의 미학몇 년을 고민했는지. 드디어 내가 무엇을 좋아하는지 확신하게 됐다. 아키텍처를 구성하는 일을 좋아하는 사람이었다.타고난 달란트인지, 어릴 때부터 글을 쓰는 것을 좋아했다. 내가 하고 싶은 말의 대전제를 설정하고, 그 대전제를 문단으로 나누고, 오와 열

Reference: https://inpa.tistory.com/entry/AWS-📚-AWS-CLI-설치-사용법-쉽고-빠르게✅ Trouble ShootingAWS Lambda 작업을 진행하면서 느낀 문제점은 다음과 같다.1\. AWS Lmabda의 '코드 소

✅ CLI 인증 설정IAM을 검색한 뒤 해당 서비스로 이동한다. 사용자 탭으로 이동한다.사용자 생성을 클릭한다.계속 진행한다.진행.액세스 키 만들기 진행.친숙한 단어 발견. 진행.AWS Access Key ID와 AWS Secret Access Key를 얻게 된다.✅