최근 바닐라 코드로 작업을 하고 있는데 진짜 너무 옛날에 썼던 거라 기억이 나질 않아 곤란했다.선언형으로 작업하는 게 이렇게 노가다스러운 일이었구나 🥲 를 새삼 깨닫는다. 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..
0. 들어가기이전 게시글에서 useMemo, useCallback에 대해 공부를 해봤다.이번 챕터는 useState에 대한 내용이다. 1. useStateuseMemo는 불변 상태(변하지 않는 상태)를 캐시하지만, useState는 가변 상태를 캐시한다.const [값, 값을_변경하는_세터_함수] = useState(초깃값) useState 훅이 반환하는 세터 함수는 리액트가 컴포넌트 내부의 상태 변화를 쉽게 감지하게 한다.즉 리액트는 세터 함수가 호출되면 컴포넌트 상태에 변화가 있다고 보고 즉시 해당 컴포넌트를 리렌더링 한다. 그러나 상태에는 타입이 존재한다.상태는 number, boolean, string 같은 원시 타입일 수도 있고 객체나 배열, 튜플 타입일 수도 있다. useState의 선언문을..
0. 들어가기최근 실시간 구현 과제를 받고, 코드를 작성한 뒤 질의 응답을 받은 적이 있었다.useMemo, useCallback에 대해 알고 있냐는 질문을 받았는데, 면접 대비를 했기 때문에 대답 자체는 무난하게 했다고 생각했다.하지만 잘 알고 있었다면 해당 과제에 이 두 훅이 적용됐어야 한다는 것을 뒤늦게 알게 됐다.즉 머리로만 알고 실제로 코드에는 적용하지 못하는 어리석은 모습을 보였던 것 같다. 약 1년 가량 코딩을 하면서 useMemo와 useCallback을 적용한 적이 거의 없는 것 같다.위에서 말한대로 이론으로만 알고 있기 때문에, 아니 오히려 이론으로도 모른다는 걸 인지했다.해당 개념을 알게 된 것도 거의 1년 전이라 기억이 안 나기도 했고... 🥲 며칠 전 빌려본 책에서 useMemo..
Intro안녕하세요.오늘은 Next.js에서 next-auth 없이 애플 로그인을 구현한 과정을 정리하려고 합니다. 소셜 로그인을 구현한다면 대부분 카카오톡, 구글, 네이버를 많이 떠올리실 것 같은데요.이번 저희 팀의 서비스는 앱이어야 접근성이 높아지는 '기록' 서비스이기 때문에 앱 출시를 해야 했습니다. (ㅠㅠ)iOS에서 설치할 수 있는 앱, 즉 앱스토어에 출시하기 위해서는 반드시 애플 로그인이 구현되어야 합니다.그렇기 때문에 이번에 처음으로 애플 로그인을 구현하게 되었어요. 다른 소셜 로그인들은 수월하게 진행한 반면 애플 로그인은 매우 챌린징한 요소들이 있었습니다. 1. 부족하고 오래된 레퍼런스애플 로그인을 웹에서, Next.js로 구현한 레퍼런스가 거의 없었습니다.있어도 최소 6개월 ~ 몇 년 전 ..
Intro안녕하세요. 오늘은 디프만에서 맡은 역할 중 하나인 공통 컴포넌트 제작에 대해서 정리를 해보겠습니다.프론트에서 화면을 구현할 때, 여러 페이지에서 공통적으로 쓰이는 컴포넌트가 있을 것입니다. 만약 똑같은 디자인의 버튼을 메인 페이지에서도 사용하고, 마이페이지에서도 사용할 경우하나의 버튼만 만들어서 두 곳에서 import 하면 훨씬 간단하겠죠? 프로덕트의 스케일이 크면 클수록 아주 작은 아이콘부터 모달, 탭, 바텀 시트 등 여러 컴포넌트가 많은 페이지에 사용됩니다.저는 이번에 탭 컴포넌트와 버튼 컴포넌트를 담당하게 되었습니다. 디자이너와 프로그래머의 만남이라는 이름대로 이번 프로젝트에서는 디자이너 분들이 모든 uiux를 담당해주셨는데요.디자이너 분들이 디자인 시스템을 완성하면 프론트엔드는 이것을 ..
