greatsumini / greatsumini.github.io Goto Github PK

문제점 (선택)
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

해결책
A clear and concise description of what you want to happen.

다른 해결책 (선택)
A clear and concise description of any alternative solutions or features you've considered.

추가 설명
Add any other context or screenshots about the feature request here. (레퍼런스 등)

설명
복붙하기

참고링크

1. https://su-m.tistory.com/m/3

포토샵, 일러스트레이터 추가

설명
next-ga 라이브러리의 단점도 같이 설명

참고링크

1. https://www.notion.so/sumins/Google-Analytics-aeb1ba9bba39474789e644b90784a1fd

내용
1 추출하고하자하는 아이콘을 누른다
2 우측 도구모음 하단 export를 누른다
3 옵션을 svg로 변경한다
4 다운 후 코드가 길거나 더럽다면 https://jakearchibald.github.io/svgomg/ 사이트로 들어가서 받은 svg를 드롭한다
5 옵션값을 다음과 같이 맞추고 재다운한다

이미지

고려사항

1. templates/blog-project를 생성한다.
2. posts와 projects는 서로 previous, next를 공유하지 않는다.

이를 위해 gatsby-node에서 posts, projects를 분리한 후 각각 페이지를 생성해야한다.

추가
posts page에서 edges와 tags 모두 posts만 가져오기 위해서 allMarkdownRemark에 category filtering을 추가해야함

설명
정확한 명칭은 custom path mapping.
사실 모든 typescript 프로젝트에 적용가능하지만, 제목에 React를 쓰는게 유입률이 좋을듯
이거 검색하면 은근 안 나옴

참고링크

1. https://www.notion.so/sumins/Absolute-import-fbc4ad24b0694c76b4ee76b130ded1c4

내용
제곧내. 좀 어려울듯

참고링크

none

1. 햄버거 눌러서 열리게
2. transition 적용, background dark overlay
3. 배경 누르면 닫히게
4. 일단은 아코디언말고 그냥 카테고리 리스트 (HOME, POSTS, PROJECTS)

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency gatsby to v4.25.8
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency eslint-config-prettier to v9.1.0
• chore(deps): update dependency eslint-plugin-prettier to v5.1.3
• chore(deps): update dependency eslint-plugin-react to v7.34.1
• chore(deps): update dependency prettier to v3.2.5
• chore(deps): update dependency typescript to v5.4.5
• fix(deps): update dependency moment to v2.30.1
• fix(deps): update react monorepo to v18.3.1 (react, react-dom)
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency eslint to v9
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency gatsby-remark-relative-images to v2.0.5
• fix(deps): update dependency styled-components to v5.3.11 (styled-components, @types/styled-components)
• fix(deps): update typography-js monorepo (react-typography, typography)
• chore(deps): update jamesives/github-pages-deploy-action action to v4.6.0
• fix(deps): update dependency babel-plugin-styled-components to v2.1.4
• fix(deps): update dependency dotenv to v16.4.5
• chore(deps): update dependency gh-pages to v6
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency styled-components to v6
• fix(deps): update gatsby monorepo (major) (gatsby, gatsby-plugin-canonical-urls, gatsby-plugin-feed, gatsby-plugin-google-analytics, gatsby-plugin-image, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sharp, gatsby-plugin-sitemap, gatsby-plugin-styled-components, gatsby-plugin-typescript, gatsby-plugin-typography, gatsby-remark-autolink-headers, gatsby-remark-copy-linked-files, gatsby-remark-images, gatsby-remark-prismjs, gatsby-remark-responsive-iframe, gatsby-remark-smartypants, gatsby-source-filesystem, gatsby-transformer-remark, gatsby-transformer-sharp)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

https://www.gatsbyjs.com/docs/adding-search/

https://www.gatsbyjs.com/docs/adding-search-with-algolia/
algolia를 사용해서 한달 1만회까지 무한으로 즐기자

설명
ghpage를 통한 cd를 구현했을 경우 생각보다 까다로움.
gatsby + github action + ghpage CD 구현하는 법 작성이 선행돼야함

참고링크

1. https://www.thetopsites.net/article/58488635.shtml

추가할 내용

1. 왜 발생한 에러인지
2. clean하면 왜 고쳐지는지

참고링크

1. https://blog.naver.com/mahone006/221560790515

내용

1. 첫 오류메세지
   zsh: command not found: fab
2. pyenv activate 입력시 오류 메세지
   Failed to activate virtualenv.
   Perhaps pyenv-virtualenv has not been loaded into your shell properly.
   Please restart current shell and try again.
3. 성공 메세지
   ➜ pickk-biz git:(master) pyenv activate pickk-biz
   pyenv-virtualenv: prompt changing will be removed from future release. configure `export PYENV_VIRTUALENV_DISABLE_PROMPT=1' to simulate the behavior.
   (pickk-biz) ➜ pickk-biz git:(master) fab deploy:prod
   deploy_ci started
   [localhost] local: python manage.py makemigrations --dry-run

맥락

최수민 4:18 PM
fab deploy가 그냥 터미널 열어서 하면 안 되네유

4:18
virtual env 때문인가?

한규주 4:19 PM
fab deploy:prod 요거?

최수민 4:19 PM
fab 명령어를 못 찾넹

4:19
응 ㅋㅋ

4:19
파이참 터미널에선 되는데

한규주 4:19 PM
혹시 디렉토리가 어디져

최수민 4:19 PM
루트 디렉토리였슴다

4:19
프로젝트 루트

한규주 4:19 PM
pyenv activate pickk-biz 해봅시당

최수민 4:19 PM
zsh: cannot find command fab 처럼
4:19
옼키
4:21
Failed to activate virtualenv.
Perhaps pyenv-virtualenv has not been loaded into your shell properly.
Please restart current shell and try again.
4:21
훔 안되네여
4:21
그냥 파이참에서 했슴다
4:21
ㅋㅋㅋ

한규주 4:22 PM
가상환경 안켜져서그런거같은데
4:22
vi ~/.zshrc 에서
4:22
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
4:22
추가해야할둣

최수민 4:24 PM
오
4:24
성공했어
4:24
ㅋㅋㅋㅋㅋ ㅠ
4:24
감사합니다

내용

1. viewset이란? View와의 차이점
2. 무엇을 상속할 것인가? (ModelViewSet, ViewSet, GenericViewSet, ...)
3. 필드 - serializer_class, queryset (get_queryset, ..)
4. 필드 - 권한 permission_classes, action_permissions
5. 필드 - 필터 filter_class, filterset_class
6. (따로) rest_framework action decorator
7. (따로) drf_multiple_model 라이브러리 소개

참고링크

핔비즈 프로젝트 items/views

내용

• storybook이란? 왜 필요할까?
• 어떻게 작성할까?
• 어떻게 배포할까? - 깃헙페이지? vercel?
• 어떻게 검토할까? - Chromatic

참고링크

내용
복붙

참고링크

1. https://blog.naver.com/mahone006/221560784506

설명
복붙

참고링크

1. https://su-m.tistory.com/m/7

주제
복붙하기

참고링크

1. https://su-m.tistory.com/m/4

참고링크 : https://www.gatsbyjs.com/docs/adding-comments/

설명
제곧내

내용
pickk-crawl, pickk-admin에서 구현한 방식 소개하기. 둘 다 검색했을 때 나오는거 없어서 개꿀임

주제
Django migration conflict 났을 때 해결하는 방법

이미지

추가설명

# conflicted migration files 삭제
rm 0069_add_selects_request.py
rm 0070_fix_selects_request_sns_link,content.py

# migration 롤백 후 remote 적용
./manage.py migrate items 0068_add_follwers_count.py
./manage.py migrate

# migration 재생성
./manage.py makemigrations items

설명
(시리즈로 작성해야할듯)

• semantic tag
• link 구조잡기
• alt
• robots.txt, sitemap.xml, rss.xml
• 메타정보 + 오픈그래프
• 구글서치콘솔, 네이버 서치어드바이저
• schema.org

Next.js랑 Gatsby를 따로 작성해도 좋겠다.

참고링크

1. https://khalilstemmler.com/articles/how-to-optimize-your-gatsby-blog-for-seo/
2. https://developers.caffeina.com/how-to-get-a-100-lighthouse-score-with-nextjs-c2fa4d35a90b?gi=a5686a784d40
3. 핔데브노션/FRONT-END/검색엔진 최적화 리포트

내용
내가 구글 도메인을 선택한 이유 : 고대디 아이디 기억하기 귀찮음. dev 도메인이 싸고 멋있음 (연12달러)
거의 공식문서 번역

참고링크

1. https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-a-records-with-your-dns-provider
2. https://dev.to/trentyang/how-to-setup-google-domain-for-github-pages-1p58

이미지

.

내용
그냥 data만 만드려는 거면 굳이 객체를 생성할 필요까지는 없으니까 selects_request_address_factory.stub() 을 통해서 데이터만 가져오고 디비에 저장은 안하는 방법을 택할 수 있다.
.stub().dict 를 사용하면 해당 데이터를 dict 형태로 가져올 수 있음

• (따로) django factory_boy 라이브러리 소개 (테스트)

내용
복붙하되 보강 필요

참고링크

1. https://su-m.tistory.com/m/6

설명
내용 조금 보강하자

참고링크

1. https://su-m.tistory.com/m/5

• 참고링크: https://www.gatsbyjs.com/plugins/gatsby-plugin-image

설명
globalStyle도 같이 작성

참고링크

1. https://www.notion.so/sumins/styled-components-3ddeff555bd2435483265a0618fd3353

참고링크

1. gatsby-plugin-google-adsense
2. react-adsense
3. react adsense 라이브러리 소개

내용

1. 상황설명 : 다국어를 지원해야함. 라이브러리를 찾아보자
2. i18next가 핫한데 코드가 왜 이렇게 길지??
3. i18n의 기능에 대한 설명
4. React에선 그냥 Context 사용하는 것보다 나을게 없는듯

참고링크

1. https://www.i18next.com/
2. https://flamingotiger.github.io/frontend/react/react-i18next/
3. https://flamingotiger.github.io/frontend/react/nextjs-i18next/

형형 지금
3:45
셀렉트리퀘스트 리스트 오더링변경 + 테스트 추가 끝나고
3:45
슬랙 노티 잘 가는지 테스트 하려는데
3:45
runserver해서 localhost에 띄워진거 gui로 json입력-post하는게 최선이야??
3:45
아님 더 우아한방법 있나요

한규주 3:46 PM
그 콘솔에서 selectsrequest object 가져온다음에
3:46
send_slack() 해보면 되지않으까?? 어제 얘기한게 그 방법이었어

최수민 3:46 PM
아하 그 인스턴스는 어떻게 생성해??

한규주 3:46 PM
그게 메소드 자체를 딱 테스트하는 방법인거 같고

최수민 3:46 PM
SelectsRequest().send_slack() 하면되나?
3:47
SelectsRequestModel().send_slack()

한규주 3:47 PM
sr = SelectsRequest.objects.last()
sr.send_slace()
아아 이렇게하면돼

최수민 3:47 PM
address data 안 넣어줘도돼??
3:47
아 아하
3:47
그럼 생성된게 있긴해야겠네 디비에

한규주 3:47 PM
(디비에 데이터가 있다는전제하에)
3:47
ㅇ옹

최수민 3:47 PM
오키 ㅋㅋㅋㅋ
3:47
감사합니다

한규주 3:47 PM
팩토리같은거로 하나 만들어주면되겄징
3:47
오케 아니면 진짜우아한방법은

최수민 3:47 PM
오케이 좋은거 배워갑니다
3:47
응응

한규주 3:47 PM
테스트코드를 짜는건데
3:47
그

최수민 3:48 PM
응응ㅇ으응
3:48
그 설정을 덮어써야핥텐데
3:48
시그널 무시하는 설정

한규주 3:51 PM
mocker 라는 개념이 나오는데 그건 이거 참고해보면 될거같구
https://docs.python.org/3/library/unittest.mock.html#patch
image.png
image.png

최수민 3:51 PM
오 mock 리액트 테스트할때도 쓰는데
3:51
의사함수 만드는거
3:52
아하 저렇게 하는거구나

한규주 3:52 PM
이 테스트는 결국 _send_slack 까지 호출이 잘 되는지 보는 테스트라고 보면돼서 실제 슬랙 api까지 잘 타지는지는 확인 못하니까 슬랙 api에서 허용하지 않는 파라미터가 있다면 거르진 못할거야
3:52
엉엉 그 mock이랑 개념 똑같을듯

최수민 3:52 PM
아하 그렇네 알림이 정말로 잘 전송됐는지는 테스트 못 하는구나
3:52
감사합니다
3:53
알림 전송 테스트는 유닛테스트 범주를 벗어나서 어쩔 수 없네 ㅋㅋ
3:53
E2E보다 큰 서비스2서비스 테스트라

한규주 3:56 PM
그치 ㅠㅠ 그래서 send_slack이 잘 된다고 생각하고 짜는 테스트고 저거는
send_slack의 response를 잘 mocking하는 테스트가 따로 있으면 아주 좋은 유닛테스트가 될듯

최수민 3:56 PM
아하 엌키 막줄은 이해 못 했는데
3:57
오늘 밤에 위 글 읽고 해보겠슴다

한규주 3:57 PM
아아 정확히는 send_slack이 아니라 슬랙 api를 목킹하는 테스트?
3:57
예예

최수민 3:58 PM
아하 이해됐슴
3:58
오키~