오늘은 NextJs를 사용하여 정적 사이트(SSG말고 build파일)를 배포해야하는 상황에서 build 파일을 만드는 과정을 알아볼게요! 정적사이트로 배포를 해야할 이유가 없다면 next start 해서 사용하는게 낫지만, 굳이 필요한 상황이라면 쓸 수 있는 방법을 확인해볼게요! 일단 최신 버전인 Next v13.3.0 이상부터는 next export를 다르게 사용해야해요. 이 버전인 사람은 아래 링크로 확인해주세요! (저는 Next v13 기준이며, app directory를 사용하지 않는 상황입니다.) https://nextjs.org/docs/pages/building-your-application/deploying/static-exports Deploying: Static Exports | Nex..

지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요! 오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요! sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다. sitemap xml 태그 방법 https://exam-bomb-service.vercel.app/ https://zippoom.com/sitemap/sub/index.xml 2023-03-17T09:00:23.523Z 위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요! 두가지 방법 중에 저..

6월 중순부터 사내 개발팀 스터디를 진행하고 있어요. 저는 첫번째 책으로 리팩터링 2판을 읽고 있고, 이 책을 읽으며 드는 생각과 앞으로 개발팀 내에서 어떻게 발전해나가면 좋을지 공유하고자 스터디 내용을 정리하여 공유하고자 해요! 저자의 내용을 토대로 지극히 저의 주관적인 생각을 담고 있음을 알려드립니다. 리팩터링 2판 서론.서론 내용은 다음과 같이 정리할 수 있어요. 1. 그냥 리팩터링하면 되지 않을까요? → 리팩터링엔 위험이 따라와요.동작하는 코드 수정에 미묘한 버그 생길 가능성잘못 수행시에 오류로 시간과 노력이 수포로 돌아갈 가능성그렇다면 어떻게 리팩터링 하면 좋을까요? 계획적이고 체계적이도록 실행하자!(목표를 설정?!) 2. 리팩터링이란? 겉으로 드러나는 코드의 기능(동작)은 바꾸지 않지만 내부 ..

2023년 6월 2일부터 새로운 곳에서 프론트엔드 개발자로 다시 시작하게 되면서 이전과 비교했을 때, 앞으로 어떤 개발자가 돼야 하는지 써보려 해요! 더 좋은 생각을 많이 나눠준다면 저희 팀과 저의 큰 성장이 될 것 같아요! 크게 현재 나는 어떤 사람인지 돌아보며 시작하도록 할게요 Q1. 어떤 개발자가 되고 싶나요? 저는 단기적, 장기적으로 두 가지 목표를 갖고 있어요! 먼저 단기적으로는 현재 맡은 서비스를 유저에게 더 좋은 경험을 주는 플랫폼으로 만들어가는 게 현재 목표예요!그러기 위해선 스스로 세 가지가 중요하다고 생각하여 꼭 숙지하면서 개발하기 위해 노력하고 있어요. 첫째, 내 서비스를 누구보다 완벽하게 이해하기 (이제 막 알아가고 있죠..!)둘째, 좋은 개발팀문화를 만들어가며 함께 정착하기셋째, ..

오늘은 저번 시간에 잠깐 나왔던 가운데 정렬에 대해서 제가 주로 쓰는 방법을 소개합니다!! 순서는 1) 글씨 가운데 정렬, 2) flex 가운데 정렬, 3) tranform 가운데 정렬 이렇게 보도록 할게요~! 각각 써야할 순간이 정해져있는? 느낌이라 유용하게 사용할 수 있을거에요! 1. 글씨 가운데 정렬 제목!!! 기본적으로 위와 같이 쓴다면 좌측부터 글이 작성될텐데 글씨를 가운데 정렬하기 위해선 css를 아래처럼 해주면 돼요! .header { text-align: center } 이렇게 정렬되는 모습을 볼 수 있어요!! 하지만, 글씨가 아닌 영역이라면 위와 같은 방법으로는 가운데 정렬이 안돼요 영억1 영역2 // module.css .header { text-align: center; } .box ..

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..

프로젝트를 시작하기위해선 어떤 환경에서 개발을 할지 생각을 해봐야한다! ​ 그 중에 NextJs로 개발환경을 구축하는 과정에 대해 알아보고자 한다. ​ 일단 한가지는 보안 전문회사라 개발pc의 보호를 위해 외부망도 쓰지 않고 인터넷도 차단된 공간에서의 오프라인 설치..... 과정이다 ​ 아 물론! 패키지설치를 위한 npm은 작동된다! ​ 일단, 확실한건 create-next-app이 불가능하기에 다음과 과정으로 next를 수동설치하게 되었다. ** 수동설치 필요없는 분은 npx create-next-app 한 방이면 끝!!!!!! ​ 1. Next / React 설치! ​ 먼저 아래와 같이 터미널에 입력하여 package.json과 react next typescript 기반으로 설치를 할 수 있다! 사..