분류 전체보기126 Nextjs SEO 개선 과정 정리 2023년 온라인 졸업전시 웹사이트를 배포한 후 검색 엔진 최적화를 진행하고 프로젝트를 마무리한 과정을 기록해두기 위해서 글을 작성했습니다. 전 과정을 기록하지 않고 출처에 나와있는 과정들을 따라했기에 생략이 되어있을 수도 있습니다! sitemap.xml과 robots.txt 설정 티스토리 블로그의 검색 최적화와 비슷했습니다. robots.txt를 생성하고, Sitemap 정보에 대해서 특정 url로 진입하라는 내용을 넣어주면 됐습니다. sitemap의 경우에 블로그는 동적으로 생성되는 로직이 자동으로 되어있었습니다. 하지만 Nextjs는 Sitemap을 직접 넣어주거나, 동적으로 생성되게 하기 위해서 pages/api 폴더를 사용했습니다. 그리고 api 폴더로 강제되는 url을 next.config.j.. 2023. 7. 17. 자바스크립트의 this 이해하기 어떻게 함수가 호출되느냐에 따라서 this의 의미가 달라진다. 단순히 호출하는 것 말고도 JS의 함수는 일급 객체로, 변수에 함수를 저장하거나, 함수의 인자로 전달하거나, 함수의 반환값으로도 사용 가능하다. 이처럼 동적으로 this가 호출되는 방식에 따라서 가리키는 의미가 달라지는 것을 바인딩 된다고 표현합니다. 실행 컨텍스트 안에 디스 바인딩 컴포넌트에 정보가 담기게 된다. This Biding Rules 기본 바인딩 암시적 바인딩 new 바인딩 명시적 바인딩 기본 바인딩 console.log(this) // 2023. 7. 17. Nextjs에서 React-Query를 사용한 무한 스크롤 구현 경험 정리 무한 스크롤 선택 이유 웹 개발 공모전에서 기획이 나온 것이 자유게시판과 교육정보게시판이었습니다. 각각의 게시판을 어르신 친화적으로 UI를 생각해 봤을 때, 현재 서비스되는 대기업들의 앱만 봐도 무한스크롤이 많았습니다. 사람들을 중독되게 만드는 유튜브 숏츠마저도 엄지로 드레그 하여 무한으로 영상을 보는 방식이었습니다. 이 방식이 휴대폰으로 가장 손쉽게 연령 불문하고 목록들을 보여주는 방법이라는 생각이 들었습니다. 실패한 과정 무한스크롤을 구현하는 방법으로 처음에는 Redux-toolkit의 createAsyncThunk를 이용하려고 시도했었습니다. 그 이유는 기존에 상태관리툴로 Redux-toolkit을 사용하고 있었습니다. 그래서 이미 boilerplate code들이 구성되어 있어서, createAs.. 2023. 5. 27. AIVLE School 17주차 정리 - 미니프로젝트 7차 빅프로젝트를 위한 4조 배정 및 조장하기로 결정 빅 프로젝트 전에 미니프로젝트 7차부터 팀이 결정이 됩니다. 저는 이때부터 조장을 맡게 되었습니다. 2회 정도 미니프로젝트에서 조장을 맡으면서 느꼈던 에이블러들과의 협업 방법을 고민했던 것을 토대로 조원들에게 개발 마인드셋과 소통이 왜 중요한지 이야기했습니다. 소통의 중요성 저의 당시의 가치관은 정확한 소통과 소통 에너지 소모를 최소화하는 것이 중요하다입니다. 그 이유는 기한이 짧은 개발을 진행할 때 선택과 집중 및 코드 생산성을 높이려면 소통이 가장 중요하다고 생각했기 때문입니다. 실제로 저는 공모전 경험을 통해서 소통 부재가 큰 시간과 에너지를 소비하게 되는 경우를 팀원들에게 전달했습니다. 협업 체계 정립 먼저 저는 톡방의 게시판에 모두의 휴대전화번호,.. 2023. 5. 27. cypress 사용 경험 및 정리 이번 공모전 프로젝트에서 저의 실력 향상을 위한 시도로 docker, nginx, 백엔드와의 협업, 배포를 새롭게 배우고 시도를 하고 있지만, 에이블스쿨 일정과 병행하다보니 하지 못했던 테스트 코드 작성을 시도해봤습니다! cypress 설치 및 세팅 npm init # package.json 생성 npm i cypress @testing-library/cypress # cypress 설치 npx cypress open # cypress 브라우저로 열기 설치 및 실행 방법은 매우 간단합니다. npx cypress open을 하면 랜덤하게 포트번호를 선정하여 브라우저를 열어줍니다. 여기서 E2E Testing을 누르면 디렉토리에 cypress 폴더와 config 파일이 생성됩니다. 자동으로 생성되는 파일과 .. 2023. 5. 18. Nextjs 빌드 후 이미지 경로를 못 찾는 문제 해결 현재 Dockerfile을 통해서 nextjs를 standalone 설정으로 이미지를 가볍게 만들어놓은 상황입니다. 그런데 유일하게 이미지가 적용되어 있는 챗봇의 프로필의 경로를 못 잡고 있는 상황이었습니다. standalone 옵션을 주게 되면 public, static 폴더를 같이 빌드하지 않기 때문에 인위적으로 dockerfile에서 COPY 명령으로 붙여주다 보니 경로설정의 문제가 생겼습니다. 챗봇의 프로필 이미지가 보이지 않아서 왜 안되는지 원인을 찾아보기 시작했습니다. 일단 네트워크탭에서 보니 경로가 /_next/image로 되고, 그 뒤로 src에 설저해준 경로가 붙는 것을 보고 어떻게 하면 저 경로를 바꿔줄 수 있을지 고민했습니다. 원래의 설정은 이런식으로 했었습니다. 이 설정은 npm r.. 2023. 5. 16. 이전 1 2 3 4 5 6 7 8 ··· 21 다음
