회원가입 회원가입 / 로그인 기능은 대부분의 웹사이트에서 제공하는 기능입니다. 회원가입을 하는 로직을 작성하기 위해 필요한 것은 다음과 같이 나열할 수 있습니다. 1. post 요청을 보내야하니 일반적인 경우 cors 설정이 필요합니다. 2. 적절한 아이디, 이메일, 비밀번호를 입력받아야하므로 validation이 필요합니다. 3. 여러개의 input을 관리하며 모든 입력이 마쳐졌을 때 요청을 보내야합니다. 4. 작은 단위로 나뉜 컴포넌트 및 input들이 하나의 form에 종속되어야합니다. 5. 회원가입이 완료되면 적절히 리다이렉팅해주어야합니다(로그인페이지로 리다이렉팅 등) 사용하는 개발 환경은 다음과 같았습니다. react / typescript / react-query / zod / react-ho..
🤡디바운스란? 자바스크립트에서 디바운스는 이벤트를 그룹화하여 제일 처음 or 제일 마지막 함수만 호출되도록 하는 것을 말합니다. 제일 처음 함수만 호출되는 형식으로 구현한 것을 leading edge 가장 마지막 함수만 호출되는 형식으로 구현한 것을 trailing edge라고 부릅니다. 보통 일정 주기 동안 이벤트가 입력되고나서 일정 시간 동안 다른 이벤트가 발생하지 않은 경우 이벤트를 실행시키는 형식으로 디바운스를 구현합니다. 이러한 디바운스는 성능최적화와 큰 연관성을 가지고 있습니다. 알아두면 손해볼것 없으니 간단하게 자바스크립트로 디바운스를 구현하는 코드를 작성해보겠습니다. 우리가 만들어볼 웹페이지입니다. 숫자를 카운팅해줄 태그와 디바운스를 실습해볼 버튼 하나만 있는 간단한 웹페이지입니다. 다음과..
🐕 node-sass 에러 몬데 npm ERR! code 1 npm ERR! path C:\Users\사용자이름\OneDrive\바탕 화면\Storybook\node_modules\node-sass npm ERR! command failed package.json을 기반으로 npm install을 진행하던 중 위와 같이 code 1 에러가 발생하면 node-sass를 설치하는 중에 오류가 발생했습니다. 아무튼 문제는 해결해야하니까 node-sass에 대해서 검색을 좀 해보는데 https://jeonghwan-kim.github.io/dev/2020/06/27/node-sass.html 대충 이런식의 글들을 많이 찾아볼 수 있습니다. node-sass는 노드 버전에 의존적이어서 노드 버전을 올리면 오류가 ..
🐕 과제를 하다가... underbar라는 과제가 있는데 배열 내장 메서드 없이 배열 내장 메서드를 구현하는 내용이었습니다. 근데 전 length 프로퍼티도 사용하면 안되는 줄 알고 이걸 length 없이 어떻게 구현할까 고민하다가 결국 이터러블 프로토콜을 이용해서 직접 만들면되지않나? 라는 결론에 도달했어요 👻어케 함 다행히도 정적메서드는 사용해도 오류가 안 나길래 썼는데.. (생각해보면 정적메서드도 되는데 length를 막아놨다고 생각하는 거 자체가 이상하긴함) 그러면 맨 처음 생각나는 선택지는 while문을 만들어서 무한정으로 값을 올려주는 let idx = 0 while(arr[idx] !== undefined) { idx++ } 이런 선택지를 고려할 수 있을 것입니다. 하지만 이 방식에는 치명적..
const asyncCallback = (str, callback) => { setTimeout(() => { console.log(str); callback(); }, Math.floor(Math.random() * 1000)); }; const printAll = () => { asyncCallback('엄', () => { asyncCallback('준', () => { asyncCallback('식', () => { asyncCallback('이', () => { asyncCallback('어', () => { asyncCallback('떻', () => { asyncCallback('게', () => { asyncCallback('사', () => { asyncCallback('람', () =>..
😎 HTML과 CSS를 다룰때.. 가장 짜증나는 부분은 reset.css를 적용시켜둬도 인풋, 버튼의 배경이나 placeholder는 color값을 변경해도 적용이 안된다는 것입니다. 해결방법은 의외로...간단해요 😎인풋,버튼 배경색 없애기 border: none; background: transparent; 이런식으로..설정해주면 됩니다. 😎간단한 reset.css * { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; list-style: none; color: white; } ! 😎textarea 크기 조정 막아주기 textarea { resize: none; } resize 속성을 건드려주면 깔끔하게 해결됩니다. 😎pla..
😎어제는 계산기를 만들었는데.. 이미 어느정도 구조가 짜여있는 자바스크립트 코드를 건드리는건 처음이었다. 그리고.. 내가 처음부터 설계하면서 짜는거보다 이미 짜여있는걸 건드리는게 훨씬 어렵더라 괜히 취업하면 하루종일 코드만 보게한다는게 아니구나 머리로는 어떻게 돌아가는지 이해가 되는데 정확히 이 변수는 어떤 역할을 하는지 이 변수는 뭔지에 대해서 감이 안잡히니까 네이밍 컨벤션이 협업을 할 때엔 많이 중요하겠구나.란 생각이 들었음 그냥 처음부터 짜고 싶었으나.. 기능테스트를 하는 부분이 있고 그게 함수명, 변수명, html 클래스명 등을 기반으로 평가하길래 엄.. 그냥 건드리지말자! 라는 결론에 도달했다. 그런데 또 다른 사람이 짠 코드를 보다보니 나는 상상 못한 방법도 하나 배우게 되었다. if (act..
function solution(genres, plays) { let map = new Map() let set = [...new Set(genres)] for(i=0 ; i
