DEV54 [Next.js] SSR이 뭔데? SSR이 뭘까?ICT 인턴십으로 근무 중인 회사에서 내가 진행하게 되는 서비스의 기술 스택은 Next.js 12와 Node 14가 메인이었습니다. 그러다보니 Next.js에 대해서 공부도 해야 되고 Next.js를 사용하는 이유 중 하나인 SSR, SEO에 대해서도 공부를 해야 되었습니다. 3월 중에 그렇게 공부를 하면서 정리를 했던 글을 모아서 올리려고 합니다. 밑에 내용 부터는 혼자 공부하면서 적은 글이라 말투가 반말인 점 양해 부탁드립니다. 네이버 블로그의 경우구글에 SSR을 검색했는데 네이버 블로그 글이 먼저 나오길래 한번 읽어 봤다. 밑에 내용은 읽으면서 정리한 부분 그리고 궁금한게 생겼거나 간단하게 의견을 추가로 달아봤다.어서 와, SSR은 처음이지? - 도입 편SSR이란?서버에서 사용자에게 .. 2024. 5. 24. [ICT인턴십] 그래프 라이브러리 nivo 사용해보기 ICT 인턴십 근무를 하면서 4월, 5월 달에는 기존에 맡았던 서비스의 어드민 페이지를 작업 중에 있습니다. 기존 서비스에 대한 어드민 페이지가 있지만 다양한 이슈(나중에 인턴십 후기에 정리해볼까 하는)로 인해서 새롭게 리뉴얼을 진행하고 있습니다. 그 과정에 개발하면서 적어둔 내용들을 하나 씩 올려볼까 합니다.특정 서비스에 대한 통계치를 보여주는 카드가 대시보드 작업을 하면서 필요로 했기 때문에 팀장님께서 의견을 주신 nivo를 활용해서 해당 컴포넌트를 구현해보려고 하였습니다. Home | nivo nivo.rocksChart.js 나 d3.js와 같은 라이브러리를 이전에 사용은 해보았지만 특정 데이터를 잘 보여주기 위해서 컴포넌트를 구성하는 건 이번이 처음이라 최대한 공식문서를 잘 읽으면서 진행해보려.. 2024. 5. 23. [ICT인턴십] HeidiSQL이란? 일반적으로 개발을 하게 되면 한 어플리케이션의 DBMS를 하나로 통일하는 경우가 많다고 한다. RDBMS와 NoSQL을 섞어서 쓰는 경우는 있지만 RDB 계열을 여러 개 사용하는 경우는 많지 않다고 하는데, 최적화나 예외처리 관련해서 여러가지 이슈가 있어서 인 것 같다.DB마다 MySQL의 WorkBench나 PostgreSQL의 pgAdmin 처럼 툴을 제공해주는데, 여러 디비를 사용하는 경우에도 사용 할 수 있는 툴이 있다. → HeidiSQL 이 그런 툴에 해당한다.HeidiSQL독일 출신 개발자 Ansgar Becker가 개발했다고 한다.맥 버전은 따로 없다고 한다.지원해주는 DB는 다음과 같다.MariaDB, MySQL, SQL Server, ProxySQL, SQL Server, Postgre.. 2024. 5. 18. [GDSC] konkuk kprint; (건국대 컨퍼런스를 다녀오며) [1편] 경북대에서 GDSC 2기와 중도에 인턴과 캠프 때문에 나오게 됐지만 3기까지 활동을 하면서 전국의 여러 대학에 있는 GDSC에서 진행하는 행사를 자주 참가하러 다녔던 것 같습니다. 다녀온지는 꽤 됐지만 항상 정리는 열심히 해놓고 블로그에 올려야지 올려야지 하다가 습관을 좀 잡으려고 하나씩 올려볼까 하다가 이게 제일 먼저 생각나서 살살 적어봅니다. 생각보다 다양한 주제로 이워져 있어서 흥미가 갔었고, 백엔드 현직자 한명 그리고 컴공 복수전공생 한명을 꼬셔서 컨퍼런스를 들으러 가게 되었습니다. 개인적으로 관심있었던 내용은 제가 프론트를 하고 있기 때문에 "React 19, 2년만의 업데이트엔 무엇이 달라졌을까?" 였지만 다른 주제들도 워낙 흥미로운 주제가 많아서 현장에서 여쭤보고 영상을 올려주신다고 하셔서 .. 2024. 5. 17. [Next.js] src로 전체 경로 옮기기 + eslint 이슈 인턴을 하면서 Next.js 14로 프로젝트를 4월 부터 새롭게 시작을 했었고 프로젝트 구조를 어떻게 할까 하다가 src의 필요성을 못 느끼고 app을 base로 폴더를 만들어서 시작을 했었습니다. 작업을 하다보니 page 별로 _component 라고 폴더 명을 지어서 사용하게 되어서 팀장님과 얘기를 해서 폴더 구조를 전체적으로 바꾸기로 하였습니다. 사실 아직도 이유를 잘 모르지만, vscode 상에서 폴더를 통으로 옮기게 되면 failed가 나는 에러가 계속 있어서 일일히 src 쪽으로 폴더를 만들고 파일을 하나씩 옮겨주는 과정을 무한 반복 해주어서 전체적으로 파일을 다 옮겼습니다. (이거 혹시 왜 그런지 아시는 분은 댓글 부탁드립니다)"compilerOptions": { "baseUrl": ".. 2024. 5. 16. [Next.js] 현재 폴더로 경로 구성하기 // 일반적인 Next.js 프로젝트 생성 방식 npx create-next-app@latest //현재 폴더에 프로젝트 생성 하는 방식 //"."을 적어주면 경로 상 현재 내가 있는 폴더로 경로 지정 npx create-next-app@latest . //하위 폴더 중 원하는 폴더에 프로젝트 생성 하는 방식 npx create-next-app@latest "원하는 폴더 경로명"/ 2024. 4. 11. [Next.js] ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed. 인턴으로 근무하는 곳에서 Next.js를 쓴 지 한달 차 업무 일지를 돌아보면서 하나씩 정리해보면 좋을 것 같아, 뭘 적어볼까 하다가 아침에 출근하자마자 프로젝트를 켰는데 전에도 생겼던 에러가 또 터지는 걸 보고 바로 적어보려고 한다. Next.js를 이번에 ICT 학점 연계 인턴십을 하면서 처음 써보게 됐는데, 생각보다 위에 사진에 있는 에러가 자주 생겼던 것 같다. 원인 미상인가 싶어서 구글과 스택오버 플로우에 열심히 검색을 해봤다. 에러 로그: ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed. https://stackoverflow.com/questions/67652612/chunkloaderror-load.. 2024. 4. 1. [React] useRef 이해하기 useRef가 뭘까? 자바스크립트를 사용하게 되면, 특정 DOM을 선택해줘야 되는 경우가 있습니다. 그래서 자바스크립트에서는 getElementById나 querySelector를 사용해서 DOM을 직접 선택해줍니다. 리액트에서도 이와 같이 DOM을 선택하야 되는 경우가 있습니다. 외부 라이브러리를 사용하거나, 특정 엘리먼트의 크기를 가져오거나, 스크롤바의 위치를 가져와야 되는 경우가 있습니다. 이럴 때 리액트에서는 ref 라는 친구를 사용해주게 됩니다. ref 라는 친구는 referece의 줄임말이고 이름만 참고해서 보면 DOM 요소에 이름표를 붙여서 참고하겠다라는 의미인 것 같습니다. Ref는 일반객체이고 console.log로 찍어보게 되면 {current:null}이라는 객체가 나오고 이 객체를 .. 2024. 2. 2. [React Query] axios(API) + react-query(Custom Hook) + 호출 방식으로 사용하는 이유 처음 적용하게 된 이유 윈터데브캠프 2기를 하면서 진행했던 프로젝트에서 처음으로 적용을 했었습니다. 함께 했던 팀원 분께서 원티드 프리온보딩 강의 중에 해당 방식으로 코드를 짜는 분의 GitHub를 참고해서 해보면 어떨까라고 제안을 해주셨고, 해당 방식대로 코드를 짜보려고 해보았습니다. 당시에 위와 같이 axios의 api별 호출 → react query를 활용한 hook문 → hook을 호출 하는 방식으로 진행을 하였습니다. 이렇게 코드를 짜던 제 당시 상황은 “JavaScript도 완벽하게 모르는데 내가 TypeScript를 할 수 있나?”에 “React Query는 api 호출하는데 쓰는 친구인가?” 정도 였습니다. 지금 돌아봤을 때 팀원 분이 정말 잘할 수 있도록 끌어올려주셨다고 생각합니다. 이런.. 2024. 2. 2. 이전 1 2 3 4 ··· 6 다음
