creamymood의 개발 공부 발자취 💭

카드 공통 컴포넌트 만들다가, 내꺼 잘 만들어졌나 ?! 확인 해보고 싶었다. 우선 데이터가 없으니까, 어떻게 렌더링 해보지 생각하다가인공지능한테 예상 응답값 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..

플젝이 마무리 되고,, 어려웠거나 헷갈렸던 개념들 또 플젝에서 요리조리 사용했던 개념들 정리해서 남겨두기 '-' 💗💗기본개념 :A || B 이 경우, A가 truthy면 그대로 A를 반환하고, Falsy 인 경우 B를 반환하는 개념주로 값이 없을 경우의, Default 값을 설정할 때 자주 사용된다||는 "왼쪽 값이 있으면 그걸 쓰고, 없으면 오른쪽 값 써!" 라는 쉬운 한줄 정리 📘 truthy 와 falsy란?자바스크립트에서는 어떤 값이 조건문 등에서 참처럼 평가되면 truthy, 거짓처럼 평가되면 falsy 활용 :드롭다운에서, 이렇게 사용했었다.const selected = '';{selected || '수강중인 과정을 선택해 주세요.'}셀렉트가 falsy한 값이니까, '수강중인' 이 부분이..

코드 리팩토링 할 때, 대빵 큰 함수인 커스텀 훅으로 함수나, 상태 등을 뺐는데 계속 헷갈렸던 개념.누가, 부모인가 ?! 왜 이런 생각이 들었을까 생각해보면,리팩토링한 코드에 api를 붙여주는데..api를 붙일 때, 서로 관계를 따지면서 붙여주니,, 서로의 관계가 막 헷갈리기 시작 ... 특히! 상태로 렌더링 관리할 때 진짜 헷갈렸는데그 때 !!!! 커스텀 훅이랑.. 메인으로 뒀던 컴포넌트랑, 누가 부모이지 ? 라는 생각이 ! -> 결론은. 부모컴포넌트는 변함없지만, 커스텀함수는 함수일 뿐, 컴포넌트가 아니다!원래 코드 (리팩토링 전)export default function UserProfile() { // 상태 (user, loading, error) // useEffect 로 데이터 불러오기..