뭘 배웠지?

일지 2022년 5월 4주차 이번주 할 일 이번주는 만들기보다는 학습하는 주간이 될 것 같다. 알고리즘, JavaScript, React 강화 등 1. 저번주에 이어 알고리즘 학습(SQL 포함) ✅ 2. Web3 2주차 Kudo 확인 & 3주차 엿보기 ⬜️ 3. 인터넷과 정보사회 과제: 메타버스에 대해 6000자 ✅ 4. JavaScript, React 지식 & 활용 강화 ✅ 아마도 학습 주간이 한 3주간 계속 될 것 같다. 게으르지 않게 잘 보내자! 자바스크립트 함수는 1급 객체(feat. 시민권자) 자바스크립트의 함수를 '1급 객체(First class citizen)'라고 부릅니다. 'First class citizen'은 '1급 시민'으로 번역될 수 있을 것 같습니다. 'Second class c..

일지 2022년 5월 3주차 Affitalink 배포, 반응형 완료 Vercel로 배포하니 엄청 빠르다! 도메인도 구매했고 조금 마음에 걸리던 반응형도 진행했다. 반응형 역시 Chakra UI로 진행했는데, 살짝 SCSS 문법이 생각난다. 모바일에도 왼쪽에 고정바를 나두는 디자인을 도전했는데, 생각보다 피드백들이 괜찮아서 만족! Affitalink 유저는 보통 PC나 노트북을 통해 사용할 것으로 예상되고, 모바일로도 정보를 확인하는 용도가 전부이기 때문에 이렇게 결정했다. Web3 챌린지 2주차 진행 크리에이터를 돕는 사이트 Buy Me A Coffee를 DApp으로 만드는 도전이다. 만들면서 Solidity의 기본을 깨우치자. 기본 문법 포스트 https://forgottenknowledge.tisto..

일지 2022년 5월 2주차 한 주 시작하기전 정리 요즘 관심사를 하나, 둘 추가하다 조금 늘어난 듯 싶어서 정리를 하는 시간을 가져야겠다 Next.js, React 프로젝트 마무리 작업중 - 개발은 막바지 - 포트폴리오, 깃헙, 프로덕트 헌트에 넣을 글들 정리 방송통신대학교 강의 듣고 정리 - 인터넷과 정보사회 - 글로벌 스타트업 마케팅(블로그 O) - 이산 수학(블로그 O) - 알고리즘 - 데이터베이스(블로그 O) - 음식의 세계, 세계의 음식 SEO 강의 결제 - 강의 내용 정리 - 강의를 토대로 기존 사이트 개선 WEB3 10주 챌린지 - 한 주마다 착실히 진행 지금 생각나는 개발 관련 사항은 이 정도로 보인다. 프로젝트는 막바지고(계속 업데이트 or 새로 진행하겠지만), 방통대는 한 달내로 방학..

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

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