목록전체 글 (108)

SUIN

[Next.js] Client-Side Navigation <Link>태그와 <a>태그에 관하여

next.js로 블로그를 만들면서 Link component를 사용하며 nextJS의 Client-Side Navigation와 a 태그의 차이점에 대해서 알아보았다. next.js Client-Side Navigation 공식문서 ⬇️ Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Client Side Navigate component를 사용하며 브라우저가 전체 페이지를 로드하지 않고 js 상에서 page comp..
Next.js 2022. 12. 18. 18:03
[Next.js] Next.js 프로젝트 시작하기

Next js는 Server Side Rendering (SSR) 과 Pre-Rendering 그리고 Search Engine Optimize(SEO) 에 가장 강력학 프레임워크다. 기존의 react앱을 만들때는 create-react-app (CRA) 를 이용하게 되는데 CRA는 Single Page Application이며 SRA 의 단점으로는 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다. 반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 ..
Next.js 2022. 12. 18. 14:42
[TIL] 두번째 팀 프로젝트를 마치며 .. 끄적여보는 일기

항해99 실전 프로젝트 이후 오랜만에 팀 프로젝트를 진행하게 되었다. 이번 프로젝트를 하며 느낀 점을 짤막하게 일기 형식으로 적어보려고 한다. 항해에서 같은 기수 분들도 계셨지만 대부분은 이제 막 7기를 수료하신 분들 이어서 그런지 4기를 졸업했던 나로서는 잘해야 한다는 부담감과 피해를 끼치지 말아야겠다는 감정들이 조금 컸던 것 같다. 총 프런트 4명과 백엔드 1명으로 백엔드 쪽에서는 타이트한 프로젝트였지만 개발 일정에 맞추기 위해서 프론트가 도와줄 수 있는 부분에서는 채워나가는 형식으로 진행을 하며 프로젝트가 마무리되었다. 실무자가 없었기 때문에 궁금한 내용은 주변 실무자에게 많이 물어봤고 어드민 , 클라이언트 두 부분을 모두 개발해야 했기 때문에 여러 기술 스택을 사용해보면서 한 단계 성장할 수 있는..
TIL 2022. 11. 22. 16:14
[TIL] input undefined to a defined value error

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component input에 정의되지 않은 값이 들어가게 되면서 발생되는 error //변경 전 const isAllCheck = prodList && prodList.length > 0 && checkedItems.length === ..
TIL 2022. 11. 7. 21:28
[git] git Organizations 연결하기

people > private => public 변경
Git 2022. 11. 4. 15:52
[TIL] interceptors.response 전역 error toast 처리

현재 진행하는 프로젝트에서 어드민 페이지의 전역 에러 처리 담당을 하게 되었다 각 api response 값이 다양하게 들어오기대문에 해당 res data의 vlaue 값을 별도로 뽑아주는 작업을 진행하여야 했다. react-toastify 라이브러리를 통해 toast 팝업을 띄워 주었으며 코드는 다음과 같다. import { toast } from "react-toastify"; axiosInstance.interceptors.response.use( (response) => response, (error) => { const { response } = error; if (response) toast.error(`${Object.values(response.data)[0]}`, { // toast 스타..
TIL 2022. 11. 4. 15:48
[TIL] input enter key event 엔터키 submit 이벤트 처리

보호되어 있는 글입니다.
TIL 2022. 10. 31. 03:21
[TIL] input tag [DOM]Password field is not contained in a form

회원가입페이지를 작업하는 중 form의 inpyut password type에서 발생되는 경고 메시지 발생 Google Chrome에서는 모든 비밀번호와 모든 양식 데이터를 기본적으로 자동 저장 및 자동 완성하려고 하며 웹 개발자에게 브라우저에 더 편리한 양식 요소 범위를 준수하도록 더욱 권고한다고 한다 때문에 패스워드에는 별도의 자동완성 처리를 추가해주어야 한다. 크롬이 아니라면 경고창이 뜨지 않으며 코드에는 문제가 되지 않지만 콘솔을 깔끔하게 해 주기 위해서 autocomplete를 추가해주었다. 해결방법 autocomplete -> on or off 처리
TIL 2022. 10. 31. 02:51
이전 Prev 1 2 3 4 5 6 7 ··· 14 Next 다음