🥑 yarn berry(v4) 환경에서 Dockerfile 설정하기 제가 생성한 프로젝트는 Next.js 14.2 버전이고, node 20.15.0과 yarn berry를 이용하고 있습니다. 따라서 vercel이 제공하는 next.js 공식 레포에서 참고한 Dockerfile 설정을 이용하였습니다...만, 글을 작성하는 지금에서야 깨닫기를 공식 레포의 Dockerfile은 yarn classic(v1) 환경 내에서의 설정 방법이라는 생각이 듭니다. 처음 작성한 코드 처음엔 공식 레포의 Dockerfile을 복사해 yarn과 관련된 설정만 건드려주었습니다.FROM node:22-alpine AS base#########################################################..
🥑 Next.js DockerfileFROM node:18-alpine AS base# Install dependencies only when neededFROM base AS deps# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.RUN apk add --no-cache libc6-compatWORKDIR /app# Install dependencies based on the preferred package managerCOPY package.json yarn.lock* package..
🍊 HTML5 HTML5 HTML을 정의하는 가장 최신 버전의 표준입니다. HTML5는 새로운 요소, 속성들을 의미하기도 하며 3D와 같은 기술을 보여줄 수도 있습니다. Block & Inline block 요소는 사용 가능한 최대 넓이를 가지는 요소를 의미하며 inline 요소는 콘텐츠 크기만큼만 차지하는 요소를 의미합니다. 그렇기 때문에 block 요소는 줄바꿈이 일어나며 inline 요소는 이전 요소의 바로 옆에 배치됩니다. division 는 block 요소로 콘텐츠 영역을 나누는 일반적인 요소로 사용합니다. division division span 은 inline 레벨의 일반적인 요소로 문장 내의 특정 영역의 색만 바꾸고 싶을 때 등등 사용이 가능합니다. span span horizontal r..
🍊 HTML HTML 문서나 웹페이지를 마크업하여 구조화하는 언어 또는 구문입니다. opening tag와 closing tag로 이루어져 있으며 tag의 영역을 통해 해당 tag가 적용되는 범위를 알 수 있습니다. I AM H1 closing tag가 없다면 opening tag 이하의 모든 문장에 tag가 적용됩니다. HTML Skeleton(Boilerplate) HTML을 작성할 때 쓰는 표준 템플릿입니다. !DOCTYPE html HTML의 최신 규격인 HTML5를 사용하고 있다고 알리는 의미입니다. html 1개의 와 1개의 를 가진 요소입니다. head metadata가 들어가는 요소로 웹페이지의 스크립트에 관한 정보가 들어있습니다. title 브라우저의 탭 상에 보이는 요소입니다. body..
🫒 Next.js에서 ttf 파일로 폰트 변경하기 어느 날 갑자기 찾아온 의뢰 갑작스럽게 디자이너의 의뢰로 웹사이트를 구축하게 되었다. 보내준 시안에 사용한 폰트가 웹 폰트를 제공해주지 않아서 따로 ttf 파일을 다운받아 프로젝트에 적용해주어야 했는데, 나중에 또 같은 일을 겪게 될 경우를 대비해 기록을 남기고자 한다. (+ Next.js에서 ttf 폰트 적용하기이지만 React이든 바닐라 js로 만드는 프로젝트이든 정확히는 css의 설정을 변경하는 것이기 때문에 방법은 동일할 것이다!) 사용하고자 하는 폰트 파일 삽입하기 우선적으로 필요한 폰트 파일을 프로젝트 내에 삽입해야한다. 나는 public 폴더 내에 fonts라는 폴더를 만들어 여기에 폰트를 저장하였다. CSS 작성하기 그리고 css파일에 fo..
🐳 Email 페이지 코드 수정하기 화면 자체의 로직은 완성된 줄 알았는데... 다른 팀원분의 PR 확인을 기다리다가 한참 뒤에야 로직에 문제가 있는 것을 알았다. 문제점은 인증코드 발급을 눌렀을 때 아래 렌더링 되어야하는 화면이 렌더링 되지 않는 것..!! 조건문에서 문제가 발생한 것으로 사료되어 해당 코드로 이동해보았다. 문제의 코드 const handleSend = () => { if (!isEmailError) setIsSend({ ...isSend, send: true }); } 문제가 된 코드는 바로 이부분이다. 분명 로직상으로는 EmailError에 오류가 존재하지 않는다면 send를 true로 변경해달라는 것이었는데 (send를 기준으로 화면의 렌더링이 변하기 때문) 렌더링도 일어나지 않을..
🍒 [Review] 개발자 취준생의 여름 보내기 블로그를 관리해야 하는데 너무 바빴다. 😱 지난 7월 진행하던 알고리즘 스터디의 수료가 있었고, 그리고 함께 찾아온 무지막지한 1달간의 대타 알바 🥲 그리고 알고리즘 스터디 팀원들과 또 만나 진행한 취준 스터디까지... 블로그에 접속했더니 여름이 끝난 건에 대하여... 낡고 지친 쿵야가 되어 블로그에 돌아왔더니 어느새 여름이 끝나가고 있다. 이제는 선풍기만 틀어도 춥다. 🥶 하지만 마냥 놀기만 한 것이 아니기 때문에 😢 무슨 일들을 했는지 나름의 기록을 남겨보고자 한다. 알고리즘 스터디 완주! 🐰🐰🐰🐰 10주동안 주제를 가지고 알고리즘 문제를 풀었고 주제의 난이도에 따라 주차별로 최소 3개에서 최대 8개 까지의 문제를 풀어보았다. 나는 총 62개의 문제 풀..
🍒 천방지축 어리둥절 빙글빙글 굴러가는 슈의 하루 ~2023년 상반기 회고~ 벌써 2023년의 반절이 지나(가고이)ㅆ다. 코드 아일랜드에서 활동하면서 드랙스님의 회고 스터디에 매달 참석하게 되었는데, 이번 6월 회고는 특별하게 상반기 회고 시간을 갖게 되어 지난 반년의 시간을 돌아보고자 한다. 2023년에 들어서면서... 2023년이 되면서, 특히 부트캠프 수료 이후 어떤 계획들을 세웠는지 살펴보았다. 문서화 된 자료가 없어서... 반년 전으로 잠시 시간 여행을 하고 돌아왔다. 알고리즘 강의 매일 듣기 🐰🐰 아마 2월에 부트캠프 수료 이후 가장 먼저 세운 목표가 아니었을까 싶은데... 결과는 완전 꽝이다! 유데미에서 강의하고 계시는 콜트 선생님의 강의를... 한 달 안에 다 수강해버리겠다!! 라는게 나의..
🍰 2023.06.28 (WED) 🍑 오늘 공부한 내용 Programmers - 로또의 최고 순위와 최저 순위 GitHub - merryfraise/algorithms Contribute to merryfraise/algorithms development by creating an account on GitHub. github.com Programmers - 대충 만든 자판 GitHub - merryfraise/algorithms Contribute to merryfraise/algorithms development by creating an account on GitHub. github.com 🍓 새롭게 알게된 내용 없음 🍒 어려웠던 내용 없음 🫐 궁금한 내용 없음 🐰 느낀 점 해시를 써보려고 노력했다..
🍰 2023.06.27 (TUE) 🍑 오늘 공부한 내용 Programmers - 최대공약수와 최소공배수 GitHub - merryfraise/algorithms Contribute to merryfraise/algorithms development by creating an account on GitHub. github.com Programmers - 음양 더하기 GitHub - merryfraise/algorithms Contribute to merryfraise/algorithms development by creating an account on GitHub. github.com 🍓 새롭게 알게된 내용 유클리드 호제법을 이용한 GCD와 LCM 🍒 어려웠던 내용 유클리드 호제법 🫐 궁금한 내용 유클리..
