윤일무이

https://blog-summermong.vercel.app/ SUMMERMONG.SUMMERMONG. 🍀 안녕하세요, 프론트엔드 개발자 썸머몽입니다.blog-summermong.vercel.app 앞으론 여기서 쓰려고 합니다 :) !!!!!

Next.js는 프론트엔드 개발자 또는 취업 준비생이라면 한번쯤 꼭 들어봤을 React 기반의 강력한 웹 프레임워크다.'강력한'이라는 수식어가 붙는 이유는, 사용자가 일일이 설치하고 설정하지 않아도 될 정도로 많은 기능이 기본으로 제공되기 때문이다.그런데 그렇게 때문에 Next.js를 처음 접하면 이 많은 기능들을 어떻게 써야 할지 감이 잡히질 않는다. 나는 작년 여름 디프만에서 처음 Next.js로 개발했는데, 공식 문서와 유튜브에 굴러 다니는 무료 강의들(놀랍게도 작년까진 AI가 이렇게 코딩을 잘하지 않았다)로 공부를 했었다. 근데 프로젝트 참여에 폐가 되지 않을 정도로, 작업은 할 수 있는 정도로만 공부를 한 탓에 Next.js를 잘 이해했느냐? 이걸 너의 기술 스택으로 쓸 수 있느냐? 라고 누군가..

곰곰 다이어리는 css module을 쓰고 있다. 답장 리스트를 보는 화면에는 조건에 따라 텍스트의 색이 바뀌어야 한다. 예를 들어,내가 다이어리의 주인이다 -> 검정색내가 한 답장이다 -> 분홍색className={ person._id === correctAnswerer ? Styles.correctAnswerer : person._id === diaryId ? Styles.notOwner : Styles.owner} 이런 식으로 되어 있는데 (사실상 notOwner는 쓰지 않는다;)person._id에 따라 className을 바꿔주고 있다. 이걸 Style을 뱉어내는 유틸 함수로 바꿔서 JSX에는 함수를 실행하기만 하도록 수정해봤다.className={getClassNameF..

2023년 12월, 곰곰 다이어리는 작은 토이 프로젝트였다.백엔드 1명, 프론트 1명으로 구성된 우리 팀의 인력은 단 둘이었기 때문에 각자가 할 수 있는 모든 일을 나눠 했다. (거진 스타트업;)이 때 나는 재직 경험을 살려 GA 분석, SNS 운영, 디자인 그리고 기획을 담당했다. '10대 청소년은 타인이 나를 어떻게 보고 있는지 궁금할 것이다'라는 전제로,서로에 대해 곰곰이 생각하고 익명으로 답장하는 곰곰 다이어리가 탄생했다. 이제 30대가 코앞인 터라 내 주변 지인들은 아쉽게도 곰곰 다이어리에 크게 관심이 없었고,자연스럽게 곰곰 다이어리는 잊혀지게 되었다. 그러다 작년 여름, 우연히 서버 관련한 웹훅을 보내는 디스코드 채널에 들어갔다가 트래픽이 미친 듯이 치솟은 걸 보게 됐다.타겟 분석과 기획 의도..

최근 바닐라 코드로 작업을 하고 있는데 진짜 너무 옛날에 썼던 거라 기억이 나질 않아 곤란했다.선언형으로 작업하는 게 이렇게 노가다스러운 일이었구나 🥲 를 새삼 깨닫는다. document.querySelector- CSS 선택자 기반으로 첫 번째 요소 반환한다. (단일 요소로 없으면 null 반환)- CSS 선택자 아무거나 선택할 수 있어서 유연하다. Hello! World! document.querySelectorAll- CSS 선택자 기반으로 매칭되는 '모든 요소'를 NodeList로 반환한다.- 이 NodeList는 배열처럼 사용할 수 있어 forEach를 사용해 순회하여 어떤 액션을 할 수 있음 Item 1 Item 2 Item 3 document.getElementById- html..

pughtml(마크업 언어)는 정적인 언어로, 웹페이지의 '뼈대'를 담당한다.여기에 css로 스타일링을 하고, js로 기능을 추가한다. pug(구 jade)는 템플릿 엔진 중 하나인데, 템플릿 엔진은 js를 사용해 html을 렌더링 할 수 있게 해준다.html 문법보다 조금 더 간략하고 더 좋은 기능들이 있어, html과 유사하게 생겼으나 문법은 다르다. pug는 html을 pug의 문법으로 작성하면 html로 바꿔주는 기능을 한다.pug는 express 패키지의 뷰 엔진이다. 쓰는 법npm i pugapp.set("view engine", "pug"); pug를 먼저 설치해준다.express는 html 파일을 저장할 수 있는 폴더의 기본 이름이 'views'이기 때문에 저렇게 해줘야 한다.그리고 확장자..

Promise의 정적 메서드먼저 Promise는 비동기 작업의 결과를 나타내는 객체다.pending, fulfilled, rejected로 나뉘며 이러한 결과를 then, catch, finally 메서드를 통해 반환한다. Promise는 비동기 작업의 동시성을 용이하게 하기 위해 4가지 정적 메서드를 제공한다.Promise.all, Promise.allSettled, Promise.any, Promise.race 이렇게 4가지다. 원래는 앞의 2개만 정리하려고 했는데 궁금해서 그냥 뒤의 2개도 알아봤다. Promise.all전달한 모든 Promise가 성공했을 때 결과를 반환한다.모든 Promise가 fulfilled하면 각 Promise의 결과를 배열로 반환한다.이 순서는 완료된 순서가 아니라 입력된..

Polyfill오래된 브라우저에서도 최신 자바스크립트 기능을 지원(채워)해주는 스크립트Polyfill은 브라우저에 포함되어 있는지 체크하고, 없으면 값을 채워주는 형태로 동작함/* Array.prototype.at에 대한 자체 구현 */;Array.prototype.at = Array.prototype.at ?? 이것을 알아본 이유: 팀 코드를 보는데 core-js: 3이라는 부분을 봐서 그렇다.표준적으로 사용하는 Polyfill들은 이 core-js 리포지토리에 모여있다.import 'core-js/actual'을 실행하면 대부분의 ECMAScript 기능을 사용할 수 있다.Polyfill의 장단점장점: 폭넓은 브라우저 지원 가능단점: 로드해야 하는 JS 코드가 많아짐 => 웹 성능 악화를 야기선택적으..

들어가기최근 곰곰 다이어리를 리팩토링을 하고 있다. ⭐️ [as is]JavaScript, 스타일링: css module, 전역 상태 관리: recoil 🌟 [to be]TypeScript, 스타일링: Styled components, 전역 상태 관리: jotai + tanstack Query 사실 신규 기술의 도입을 위해서가 아니라 기존 코드를 뜯어 고칠 게 너무 많아서 시작했는데,하는 김에 그냥 다 고쳐 버리는 게 좋을 것 같아 전부터 조금씩 하다 요 며칠 불이 붙었다. 이렇게 고치게 된 경위는 다음과 같다.기존 코드에서 UI / 비즈니스 로직 분리가 하나도 되지 않음커스텀 훅을 거의 도입하지 않아 코드가 300줄(;)이 넘는 경우가 많음의미가 모호한 변수, 오타, 실제로 사용하지 않는 스타일링 코..

0. 들어가기토스 어시스턴트 면접 이후에 애니메이션과 같은 좀더 역동적인 효과들을 공부해봐야겠다고 생각했다.이전에 구름 1기 당시에 결제했던 웹 애니메이션 API 강의를 들으면서 새로 알게 된 것들을 정리해봤다. 1. transitiontransition은 CSS와 JS에서 요소의 상태 변화에 애니메이션 효과를 추가하는 방법이다.웹 개발에서는 주로 부드러운 인터페이스나 UI의 상태 변화를 주기 위해 사용된다.transition: property duration [delay] [timing-function]; transition에는 CSS 속성과 지속 시간, 속도 곡선, 지연 시간 4가지가 있다. CSS 속성과 지속 시간은 필수지만 나머지 2개는 선택이다. .box { width: 100px; heig..