성장일기

🤔 문제 상황 tailwind-styled-components를 사용해서 스타일을 부여했는데 초기 렌더링되는 찰나에 css가 적용되지 않는 문제가 있었다. 자바스크립트 파일이 다운로드 되고 나서야 제대로 적용되니 보기 싫었다. css가 next.js가 ssr할 때 부여되도록 설정이 따로 필요했다. Next.js + tailwind + styled-components를 결합할 때 twin.marco + emotion 조합을 더 많이 사용해서 자료가 많았는데, Next.js와 tailwind-styled-components를 사용하는 경우는 많지 않아서 자료 찾기가 어려웠다. 그래도 좋은 글들이 몇 개 있어서 참고해서 해결했다. ✅ 해결 방법 ssr 적용하지 않는다면 styled-components를 깔지 ..

🤔 문제 상황 getElementById로 돔 요소에 접근해서 변수에 할당하려는데 에러가 떴다. 해당 요소가 제대로 읽히지 않아 HTMLElement 타입으로 할당이 불가능한 것이다. 조건을 붙여 null이 아님을 확인하고 할당할 수 있지만 보다 간편한 방법이 있다. ✅ 해결 방법 1. 연산자 ! 붙이기 const portalDiv = document.getElementById('your-element')!; 타입스크립트에서 !은 Null이 아닌 어선셜 연산자(Non-null assertion operator), 피연산자가 null이 아니라고 컴파일러에게 전달하여 일시적으로 null 제약조건을 완화하는 역할을 한다. 그래서 위 코드에 느낌표를 붙여주면 값이 무조건 할당되어 있다고, null..

들어가기 전에... 유저가 많고 데이터가 방대한 서비스라면 백단에서 페이지에 따라 데이터를 나눠서 넘겨줘야 하고, 그것이 이상적인 구조이다. 하지만 내가 진행하는 프로젝트는 작은 서비스이고 백의 인력이 너무나 부족해서 페이지네이션 API를 구현할 여력이 없었다. 그래서 프론트단에서 데이터 전체를 받아와서 직접 나누어 출력하는 페이지네이션 컴포넌트를 구현했다. 📌 컴포넌트 구현 import { useState } from "react"; import { PageWrapper, PageBtn } from "../styles/Styled"; // total(데이터 총 갯수), limit(한 페이지에 보여줄 갯수) const Pagination = ({ total, limit, page, setPage }) =..

📌 상황 이름, 주소, 이미지 정보를 서버로 전달해야 했다. 이미지는 multer를 사용했기에 프론트에서 이미지 정보를 formData로 보내야 했고, 문자열로 데이터를 전달할 때와 axios의 header 안의 Content-Type이 달라졌다. 그렇기 때문에 이름, 주소는 문자열로 전달하고, 이미지를 formdata로 보내서 API를 두 번 호출해야했다. 그런데 나는 API 호출을 최소화하고 싶었기에 한 번에 같이 보낼 수 있는 방법이 없을까 고민했다. 아무리 검색해봐도 이렇게 정보를 함께 보내는 경우를 볼 수 없어서 백엔드 팀원과 새벽에 3시간을 고전하다가, 결국 해결책을 찾았다. 이름, 주소도 formdata 안에 넣어서 이미지와 함께 보내는 것이다. 이런 방법도 있다~ 하면서 참고로 봐주시면 좋..

📌 모달 구현 1. 모달의 오픈 여부를 알 수 있는 상태값이 있는 slice 만들기 // ModalSlice.jsx import { createSlice } from '@reduxjs/toolkit'; const initialState = { modal: false, }; export const modalSlice = createSlice({ name: 'modal', initialState, reducers: { showModal: (state) => { state.modal = true; }, closeModal: (state) => { state.modal = false; }, }, }); export default modalSlice.reducer; export con..

🤔 문제 바닐라 자바스크립트로 프로젝트를 진행하던 중 html에 자바스크립트 파일을 연결하던 부분을 변경하게 되었다. 단순히 타입을 모듈로 변경한 것이었다. 그런데 이렇게 타입을 지정하니까 js 파일에서 삽입한 코드의 이벤트 함수를 인식하지 못했다. 버튼을 눌러도 아무런 반응이 없었다. // box 안에 버튼 넣어주기 const box = document.querySelector(".box"); box.innerHTML = ` Click! `; // 버튼의 이벤트 함수 const handleClick = () => { console.log("hi"); }; 🔑 해결 이 문제는 전역에서 해당 handleClick 함수를 찾지 못해 생기는 것이었다. 타입을 모듈로 지정하면 해당 파일만의 스코프가 만들어진다...

문제상황 let arr = [1, 2, 3] return arr.reduce((sum, e) => sum++, 0); 예상했던 반환값은 arr의 길이인 3인데, 0인 반환됐다. sum++를 ++sum로 바꿔쓰니 예상대로 값이 나왔다. 증감 연산자가 원인이었다. 해결 arr.reduce() 속 누산기는 콜백 함수의 반환값을 누적한다. 함수의 반환값을 sum++로 쓸 경우, 기존 변수값을 반환한 후에 값에 +1을 한다. 하지만 누산기는 반환값을 누적하므로 +1 연산이 되지 않는 것이다. arr.reduce()의 콜백함수에서 증감 연산자를 사용하려면 ++sum과 같이 전위 연산자를 사용하거나 sum += 1로 더하기를 곧바로 실행해줘야 한다.

🤔 문제 상황 [[], [], []] 와 같은 2차원 배열을 만들기 위해 코드를 작성하는 중이었다 let arr = new Array(3).fill([]);위와 같이 Array() 생성자로 배열을 만들고 array.fill()을 이용해 안을 배열로 채웠다. 그리고 나서 arr[0]에만 숫자 1을 추가하려했다. let arr = new Array(3).fill([]); arr[0].push(1); console.log(arr); // [[1], [1], [1]]그런데 결과는 내 예상 밖이었다. 모든 배열에 숫자가 추가된 것이다. 처음에는 new Array() 생성자가 원인이라고 생각했으나 fill()이 원인이었다. ✅ array.fill() arr.fill(value[, start[, end]]) valu..

문제 세 개의 프로퍼티 name과 surname, id를 가진 객체 user가 담긴 배열이 있습니다. name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요. 예시 let john = { name: "John", surname: "Smith", id: 1 }; let pete = { name: "Pete", surname: "Hunt", id: 2 }; let mary = { name: "Mary", surname: "Key", id: 3 }; let users = [ john, pete, mary ]; let usersMapped = /* 여기에 코드를 작성하세요. */ /* us..

문제 기능을 "확장"할 수 있는 계산기 객체를 만들어 주는 생성자 함수 Calculator를 작성해봅시다. Calculator는 두 단계를 거쳐 만들 수 있습니다. 첫 번째 단계는 "1 + 2"와 같은 문자열을 받아서 “숫자 연산자 숫자” 형태(공백으로 구분)로 바꿔주는 메서드 calculate(str)를 구현하는 것입니다. 이 함수는 +와 -를 처리할 수 있어야 하고, 연산 결과를 반환해야 합니다. 예시 let calc = new Calculator; alert( calc.calculate("3 + 7") ); // 10 두 번째 단계는 계산기가 새로운 연산을 학습할 수 있도록 해주는 메서드 addMethod(name, func)를 추가해 주는 것입니다. 연산자 이름을 나타내는 name과 인수가 두개인..