creamymood의 개발 공부 발자취 💭

Project : 단일 레이아웃에서 테스트 단계 분기 처리하기 (React + 상태 기반 렌더링 구조 정리)

테스트 메인 페이지 | 테스트 진행 페이지 | 결과 페이지 이런식으로, 한 디자인에서 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 (내부 컴포넌트)** 페이지 : 라..

비즈니스(Business Logic) 로직과 뷰 로직(View Logic)

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

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

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

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

오늘 구현해볼 것은 이것! 어려워보이지만 초 간단 핵심은 인풋창의 "type" 🐚💡 ! 인풋 창의 타입이 일반 텍스트면, 텍스트가 출력되고,타입이 비밀번호이면, **** 이렇게 출력 되는 것을 이용한 것이다. 상태를 하나 만들어주고, 조건부 렌더링으로 다르게 보여주게 하면 된다. function App() { const [showPassword, setShowPassword] = useState(false); const togglePassword = () => { setShowPassword(!showPassword); }; return ( {showPassword ? "🙈" : "👀"} ..

리액트뿐 아니라자바스크립트 전체에서 !! 문법은 값을 불리언(boolean) 값으로 변환할 때 사용합니다. 한 개 ! (부정 연산자)!valuevalue를 부정해서 참이면 거짓, 거짓이면 참으로 만듭니다.console.log(!'hello'); // false (문자열은 truthy → 부정하면 false)console.log(!''); // true (빈 문자열은 falsy → 부정하면 true) 두 개 !! (불리언 강제 변환)!!value첫 번째 !로 부정 → 불리언 값으로 만듦.두 번째 !로 다시 부정 → 원래의 truthy/falsy 여부를 그대로 불리언 true/false로 바꿔줌.console.log(!!'hello'); // trueconsole.log(!!''); //..

cva()로써 tailwind 쉽게 쓸 수 있을 것 같아서 두근 두근 - ! cva() 함수 만드는 순서1. cn() 유틸 함수 만들기 : 유틸 폴더 작성이 함수는 clsx()랑 twMerge()를 조합해서, Tailwind 클래스들을 깔끔하게 병합할 수 있게 해준다.import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';export function cn(...inputs: ClassValue[]) { return twMerge(clsx(...inputs));} 2. cva() 함수로 스타일 구성 : 주로유틸 폴더 작성cva()는 "class variance authority"의 핵심 함수로, var..

앞서, clsx와 twMerge에 대해 알아봤다. 지금부터는 cn(), cva() 함수에 대해 공부해볼 것인데.결론은 cva()가 안에 clsx, twMerge가 내장되어 있지만 훨씬 큰 기능을 가지고 있는 끝판왕 이라고 보면 됌. 한 마디로,- clsx는 클래스 네임 조건부 렌더링 시, 조금 더 깔끔하게 보여주는 것이고(조건부 클래스 네임 관리기)- twMerge는, 클래스 네임 중복시 충돌이 날 경우, 클래스 선택자들의 CSS 속성이 겹칠 경우 마지막 클래스 선택자만 남겨두는 역할(중복 클래스 정리기)- cn()는 이 두 clsx, twMerge를 합친 유틸 함수 !! - cva() 클래스 조합 정의 + 옵션 시스템 + 기본값 + clsx + twMerge 포함 ! clsx → twMerge → c..

프로젝트 초창기에 clsx 라이브러리 쓰자! 또는 말자 ? 에 대해 논의 했었는데우선 쓰지 않고, 진행 되었지만.. 내가 직접 코드를 작성해보니, 훨씬 유용했을거란 생각이 든다. 조건부 렌더링으로 UI 구현 하는 일이 정말 많았는데코드가 정말 길~~어지는게 눙물나는 상황 .. ^_ㅠ 🥹 그럴 때, 쉽게 사용하기 위해, clsx라고 귀동냥 했던 라이브러리 공부해보기! 💗className들을 조합해주는 라이브러리라고 생각하면 된다.단독보다, 다른 두~세개의 라이브러리랑 추가로 같이 사용 되는 것 같았다(tailwindmerge, cn, cva)이 라이브러리, 함수에 대해선 다음 게시글에서 다룰 예정이다clsx 완벽 가이드: 리액트에서 CSS 클래스를 깔끔하게 관리하는 방법리액트 컴포넌트에서 조건부로 CS..