뭘 배웠지?

일지 2022년 5월 1주차 프로젝트 스타일 손보기 리액트와 Next.js 숙련을 위해 진행중인 프로젝트 Affitalink, 간단히 말해서 어필리에이트들을 위해 오퍼를 정리해서 시간을 절약시켜주는 사이트다 이제 여러 페이지를 어슬렁 거리며 스타일을 손보고 있다 오늘은 전체 백그라운드 높이를 손보고, 대시보드를 위주로 꾸몄다 페이지네이션 (취소) 깜빡한 페이지네이션은 스케줄에 추가! 페이지 네이션 추가하면 필요한 기술들은 완료된다 그럼 정말 마무리로 스타일을 한번 더 손보고 프로젝트 내용과 추가할 내용 정리하면 공개를 한다 페이지네이션 취소 및 방향전환 현재 서비스에서 페이지네이션을 넣으면 사용할 때 혼란이 생길거라는 결론을 내렸다. 1. 우선 fetch 버튼이 있다, 여기에서 받은 데이터가 로컬에 저장..

Alchemy Web3 10주 챌린지에서 배운 내용 10주 챌린지 웹3를 배울 좋은 기회를 찾았다. 10주간 1주씩 배운 것에 대해 포스트를 해보자 뭘 배우게 될까? 우선 Solidity를 배울것 같다 스마트 계약서(Smart Contract)를 만들 때 사용한다고 들은 프로그래밍 언어다 그리고 Decentralized Applications 줄여서 DApp이라고 하는 서비스를 만들것 같다 차차 배우는 내용은 각 주차에 정리해야지 방금 받은 NFT 민트 완료! The Early Student Card 이제 Alchemy 학생이다! 참고 링크 Alchemy 공식 => https://www.alchemy.com/ Alchemy Youtube => https://www.youtube.com/channel/UC..

일지 2022년 4월 5주차 어필리에이트를 위한 프로젝트 출시 주간 프로젝트 마무리 하자 주간 이번주는 프로젝트 마무리 하려는 주간이다 그러기 위해서 할 일 하나씩 체크! ToDo 모달 전체화면 로딩으로 가자 fetch 과정에서 오류 사용자에게 알리는 UI 다른 네트워크(Rakuten) advertisers fecth 및 저장 선택된 advertisers의 id 이용해서 선택적 fetch 디자인 마무리 결국 마무리 못했기에 다음주 온고잉! 1. 데이터 가져올 때 로딩 Chakra UI의 Modal과 Spinner를 이용해서 간단하게 만들었다. 자세한 네이밍의 중요성... 이름을 나름 자세히 사용한다고 생각했는데 아니었나보다 변수, 저장되는 키의 이름 등 코드가 많아진 상태에서, 저장한 객체의 키의 이름을..

일지 2022년 4월 4주차 어필리에이트를 위한 프로젝트 진행중 HackerRank 어려운 알고리즘에 머리 싸매고 있는 것은 좋아하진 않지만, 프로젝트를 하면서 간단한 알고리즘을 필요할 때가 있다(주로 libs 폴더에 들어가는 것들) 백준에서 간단한 문제 위주로 풀고 있는데, 이번주부터 HackerRank 라는 곳 시작 1주 코스, 30일 코스 등으로 어려움 정도 순서로 문제를 준다 코드를 짜는 한 머리의 유희를 위해 꾸준히 풀어봐야겠다 FORM UX가 좋은 폼을 만들고 싶은데 복잡하네. FORMIK을 써보려고 했는데, Chakra UI와 함께 쓰려니 헷갈려서 다음으로 미루고 현재 필요한 내용을 정리해서 간단하게 만들자 ⏳⌛💡 간단한 validate 함수 만들어서 빈 곳이 있는지만 확인하게 했다 쏙 마음..

일지 2022년 4월 3주차 어필리에이트를 위한 사이트 만드는 중 Next.js 프로젝트 현재 어필리에이트에게 도움이 될 사이트를 만들고 있다 프로젝트 한 줄 요약: 주요 네트워크 사이트에 올라오는 어필리에이트 오퍼를 한 곳에서 확인 이점: 1. 여러 군데 로그인 번거로움 줄이기 2. 보고 싶은 advertisers만 확인 3. 트래킹 링크. 이미지 링크 원클릭 복사 => 시간 절약 Encoded 토큰으로 API 호출 Rakuten이라는 곳의 API를 사용하려고한다 토큰은 이렇게 만들라고 되어있다. 또, 이 액세스 토큰은 60분만 사용가능하다 토큰은 이렇게 만들라고 되어있다 두 문자열을 조합해서 base64로 인코딩 하는 모양 echo -n {client-id}:{client-secret}|base64 ..

일지 2022년 4월 5일 일반 img 태그 vs Next.js의 Image 태그 최적화 측면 우선 img html 할 때랑 사용법은 같다 src랑 alt 사용하면 된다 이미지 렌더링을 최적화 하려면, Lazy loading, 리사이징, 브라우저 최적화 등 해줄 수 있다 하지만 귀찮다 다음 Image img 태그의 최적화 문제를 해결하기 위해 나왔다 컴포넌트가 알아서 하는 기능 Lazy loading 기본적으로 스크롤에 따라 렌더링된다 이미지 부르다 느려질 걱정 없다 반응형 CSS 미디어쿼리 필요없이 알아서 반응형! 리사이징 타겟 뷰포트로 알아서 변경 파일 사이즈 최적화 뷰포트에 맞는 파일 사이즈로 변경 이미지 포맷 최적화 서버에서 가져온 이미지를 컴포넌트로 가져오면, SEO에 좋은 WebP 같은걸로 변..

일지 2022년 4월 4일 SERVERLESS 뭔지도 모르고 서버가 필요없을 것 같다는 뉘양스를 풍겨서 듣자마자 관심이 생겼다 아쉽게도 결코 서버가 없다는 말이 아니었다 정확한 의미는 개발을 하는 사람이 서버를 신경쓸 필요가 없다는 말이다 서버를 만들고, 관리하는 코드를 작성할 필요가 없다는 말이다 이런 서버 관련 일들은 클라우드 호스팅 제공하는 곳이 해준다 AWS, Azure, Google Colud, Vercel 등 현재 Next.js 만지고 있으니까 Vercel로 접근해보자 Chakra UI와 친해지기 여전히 차크라랑 친해지는 중 주요 레이아웃을 책임지는 컴포넌트들과 익숙해졌다. 오늘은 조금 사용했지만 좋은 점은 깔끔한 컴포넌트가 바로 그려진다는 것 자유자재로 사용할 수 있게 되면 막강한 재산이 될..

일지 2022년 4월 2일 컴포넌트 라이브러리 개발 연습을 위해 혼자 프로젝트를 진행하면, 디자인, 마케팅에는 신경을 덜 쓰게 된다. 그래도 공개를 할 웹이 깔끔하게 보이고 싶어서 라이브러리로 눈길을 돌렸다. 레이더에 들어온 것은 CSS 라이브러리 tailwind, 리액트 컴포넌트 라이브러리 MUI(전 Matarial UI), Chakra UI다 그 중에 나루토도 생각나고, 이름이 마음에 들어서 이번에는 Chakra UI 경험을 하기로 결정 사용하기 전에는 적용을 하면 순식간에 뚝딱 만들어 낼줄 알았는데 지금 초반인데 시간을 꽤 잡아 먹는다 어떤 컴포넌트가 있는지 공식문서를 처음부터 훑어보고, 그 컴포넌트가 어떤 HTML 태그로 변환되는지 알아야 레이아웃 구성이 편해질 듯 하다 얼른 익숙해지고 싶구만 리..

일지 2022년 4월 1일 새 이름 Affitalink 현재 진행중인 Affiliate 관련 프로젝트 이름을 추천받았다 그 이름하야 Affitalink Affiliate와 Link를 합성하고, 부르기 싶도록 중간에 ta를 넣은게 아닐까 싶다 Thanks @MaticsPython! 강적이다! 동료로 만들 수 있을것인가 Next.js프로젝트 항해중 외부 API를 CORS 문제 없이 가져오기 위해 Rewrites를 사용하고 있다 source에서 파라미터를 받아서 destination으로 전달해주고 있는데 아마 문법적으로 잘못 사용하고 있는 것 같은데 오리무중이다 과연 rewrites를 동료로 맞이할 수 있을까? 객체 안되는 localStorage localStorage는 문자열만 받을 수 있어서 넣을 때 객체..

일지 2022/03/30 모두를 위한 React 번역 외국에 무료로 코딩을 배울 수 있는 사이트에서 많은 도움을 받았다 이 고마움을 조금이나마 돌려줄 수 있는 방법을 찾아보니 번역 기여가 있었다 그래서 몇 일 전부터 리액트 부분을 번역중이다 다음달이면 리액트 부분은 번역이 끝나고, 다른 파트로 들어갈 수도! + 번역하면서 리액트 기본기를 단련하는 건 플러스 프로젝트 항해중! 여러 군데의 API를 가져와서 한 곳에서 확인할 수 있는 사이트를 만들고 있다 나를 포함해서 Affiliate를 사용하는 사람들의 시간을 귀중하게 하고자 만들고 있다. setState는 비동기! 초기 값을 지정하려고 useEffect 안에서 자연스레 setState를 써주었다 위의 setState에서 정한 값중에서 첫 번째 값을, 밑..