creamymood의 개발 공부 발자취 💭

자바스크립트 공부하기 - toLocalString() 실무에서 자주 쓰이는 숫자 포맷 처리법

toLocalString() 이란, 숫자를 지역 형식(예: 1,000,000)으로 문자열로 바꿔주는 메서드 ! 프로젝트 할 때, {price}원이렇게만 했는데, 조교님의 조언 :toLocalString() 추가 해보기 ~ 그냥 숫자만 들어오면 10000000원.. 얼마인지 쉽게 판단하기 어렵다.. 나도 이 부분이 염두에 둬지긴 했는데 (살짝 흐린눈하고 넘어갔었음..)여기에,{price.toLocaleString()}원이렇게 사용하면 된다 ! ♥︎ 저렇게 JSX안에서 바로 써도 되고..(컴포넌트 상단에서) 미리 가공 해두는 방법도 있음!const formattedPrice = price.toLocaleString();그리고 사용은 이렇게!{formattedPrice}원 장점: 여러 군데서 똑같은 포맷을..

git 공부하기 - PR 전에 꼭! ! develop 브랜치 rebase 해야 하는 이유

⚡ "하루에도 몇 번씩 PR이 올라오고, 내 브랜치는 충돌 지옥에 빠졌던 이야기" 요즘 우리 팀.. 정말 빠르게 작업이 진행되고 있어서, 하루에도 몇 번씩 develop 브랜치에 PR이 머지된다. ..develop 브랜치가 계속 업데이트되고 있는데, 내꺼 집중하느라 살-짝 놓쳐버림 이슈.. 내 브랜치에서 기능 작업을 다 끝내고 PR을 올렸는데…😫 GitHub에서 충돌이 수두룩하다고 떠버렸다 .. 순간 진짜 식겁. . 깃허브에서 해결해기엔 너무 충돌이 많아! 라고 뜨니까 .. ‘내가 뭐 잘못했나?’ 싶을 정도로 충돌이 많았고, 어디서부터 손대야 할지도 몰랐다. 근데 곰곰이 생각해보니,develop 브랜치가 업데이트된 걸 내가 제대로 반영하지 않았던 게 문제였음 .. 그래서 내가 했던 방법은 1.최..

리액트 공부하기 - 모달 포탈

지난 프로젝트에서 모달을 한 팀원분께서 공통 컴포넌트로 만들어주셨는데,멘토링 때 지난 멘토님은 "포탈"쓰는 것에 대해 지양 하시길 바라셨다. 그 때 포탈이 뭔지 잘 몰랐지만, 쓰면 안되는구나.. 했었는데이번 프로젝트때는 그냥 (?) 사용하는 것 같았고 뭘ㄲㅏ 이참에 공부해보기로..ReactDOM.createPortal()을 이용해서 현재 DOM 트리 외부에 컴포넌트를 렌더링하는 기술모달, 토스트, 드롭다운 같은 UI는 화면 구조에 상관없이 항상 최상단(z-index 높음)에 떠야 하는데,하지만 일반적인 React 컴포넌트는 부모 컴포넌트의 DOM 구조 안에서 렌더링되니까, z-index 충돌이나 레이아웃 문제 생길 수 있다.그래서 Portal을 쓰면, 모달을 특정 DOM 노드(예: )로 "텔레포트" 시켜..

JavaScript 핵심 개념, 연결 흐름도 0. 자바스크립트는 어떤 언어인가요?싱글 스레드, 인터프리터 언어, 동기적 실행이 기본하지만 비동기 처리(콜백, 프로미스, async/await) 도 가능함브라우저(JavaScript 엔진)에서 작동하며, DOM을 조작하고 사용자와 상호작용 가능 JavaScript는 한 줄씩 순차적으로 코드를 해석하고 실행하는 언어지만, 웹 개발에 맞춰 비동기 작업도 처리할 수 있도록 설계되어 있다. 1. 실행 컨텍스트 (Execution Context) → 모든 개념의 시작점자바스크립트는 코드를 실행할 때 실행 컨텍스트를 만든 후에 동작한다.자바스크립트의 모든 실행 흐름의 핵심! (코드를 실행할 때 JS 엔진은 실행 컨텍스트를 생성)→ 이 안에서 호이스팅, 스코프, this..

나만의 쉬운 언어로 면접 대비 공부하기 (╹o╹)✎ 🤍 💡🐰 var, let, const 그리고 호이스팅 총 정리 자바스크립트 엔진은 한줄씩 밑으로 읽어 내려가는데!밑으로 읽어 내려가며 코드를 분석하고 읽어내기 전에, 변수나 함수의 이름을 미리 끌어올려서 저장해두는 "호이스팅" 현상이 있다✨이름표들을 미리 확인해볼게 . . ?! 🐼이 때, var는 이름표랑 값은, 이름은 저장하구, 값은 그냥 undefined로 미리 저장해둘게! 값은 나중에 덮어씌워질거야! 🐰근데 let이랑 const는 이름표만 저장해둘게! 지금 값은 없으니까, 값 할당 전에 호출하거나 확인해보면 참조 오류 뜰거야!! 🙏🏻 읽어내려가다가 값을 지정해준 그 줄에 도달하면 값이 할당 될거야~더보기“한 줄씩 밑으로 읽어 내..

테스트 메인 페이지 | 테스트 진행 페이지 | 결과 페이지 이런식으로, 한 디자인에서 3개 렌더링을 분기 처리 하고 싶을 때,폴더 타입은 다음과 같다./pages └─ test ├─ index.tsx ← /test 경로 (TestContainer.tsx 불러오기) └─ result.tsx ← /test/result 경로 (결과 페이지 라우팅)/src/components/test ├─ TestContainer.tsx ← 상태 및 분기 관리 (step 등) ├─ MainStep.tsx ← 테스트 메인 UI ├─ QuestionStep.tsx ← 질문 UI └─ ResultStep.tsx ← 결과 UI (내부 컴포넌트)** 페이지 : 라..

멘토링 시간에, 멘토님이 이번 프로젝트에서 꼭 도전 해봤으면 좋겠다고 하신 부분.🐰💡 비즈니스 로직과 뷰로직을 분리해서 작성하기 공부 해보고, 코드 짤 때 또는 리팩토링할 때 의식해서 작성해봐야겠다 ✨비즈니스 로직과 뷰 로직이란? 뷰 로직 (View Logic)사용자에게 보이는 부분(UI) 을 담당하는 로직입니다. 쉽게 말해, 화면에 무엇을 어떻게 보여줄지를 결정합니다.어떤 데이터를 화면에 렌더링할지버튼을 눌렀을 때 어떤 UI 상태가 바뀌는지스타일, 레이아웃, 컴포넌트 렌더링 등 비즈니스 로직 (Business Logic)앱의 핵심 기능이나 규칙을 처리하는 로직입니다. UI에 직접적으로 드러나지 않지만, 실제 서비스 동작을 책임집니다.장바구니에 상품을 추가할 때 수량 제한 검사결제 시 할인 계산로그인..

카드 공통 컴포넌트 만들다가, 내꺼 잘 만들어졌나 ?! 확인 해보고 싶었다. 우선 데이터가 없으니까, 어떻게 렌더링 해보지 생각하다가인공지능한테 예상 응답값 body를 주고, 무료 이미지로 더미데이터 만들어달라고 하니까 이런식으로 줬음!바로 map 돌려서 확인 해보니까 카드 잘 만들었구나 ~ 렌더링 확인 완료! ♥︎ 이렇게 더미데이터도 빠르게 잘 만들어주니급할 때 사용하기 좋을 것 같다.

지금 새 프로젝트 기획 단계인데, 기획자가 원하는건 우리가 만든 사이트는 00 판매 사이트고, 해당 페이지 에서 자기 취향에 맞는 00를 평가할 수 있다.로그인 시, 메인 페이지가 사용자 맞춤 (사용자 호감에 맞는) 페이지를 띄워주는건데나는 이게 프론트 단에서, 필터링해서 렌더링하는 방향으로 생각했는데, 그것도 가능은 하지만이러한 알고리즘은 사실 백엔드 단에서 데이터 가공해서 넘겨주고 우린 그걸 렌더링 하는거라는데보통 실무는 정말 어떻게 진행되고, 이유도 궁금했다.결론은, 백엔드에서 데이터를 가공 해서 프론트로 보내주고 프론트는 UI 렌더링을 담당하기만 하면 됐음 → 실무에서는 보통 사용자 맞춤 추천 알고리즘(퍼스널라이제이션) 같은 기능은 백엔드에서 처리하고,프론트엔드는 그 결과를 받아서 렌더링만 하..

TanStack Query의 한마디 요약은,강력한 비동기 상태관리 툴 이다.이 말은, 웹 애플리케이션에서 서버 상태(server state)를 효율적으로 관리하게 돕는 라이브러리예요. "서버 상태"라는 말이 어렵게 들릴 수 있는데, 쉽게 말해 서버에서 가져와야 하는 데이터(예: 사용자 목록, 게시글 내용, 상품 정보 등)라고 생각하면 돼요.일반적으로 웹 개발에서는 이런 서버 데이터를 가져오고, 업데이트하고, 캐싱하는 과정이 복잡하고 번거로울 때가 많아요. 예를 들어, 데이터를 가져오는 중에는 로딩 상태를 보여줘야 하고, 에러가 발생하면 에러 메시지를 띄워야 하죠. 또, 한번 가져온 데이터는 다음에 또 요청하지 않도록 어딘가에 저장(캐싱)해두면 좋고요. TanStack Query는 이런 번거로운 작업들을 ..