프로젝트 01 : 

새 프로젝트 시작....

메인 캐릭터 : 토끼기본 스킨 : white, black (day/night mode) + 추후 스킨 예정서비스 : 잘 정리된 문서검색북마크정기적 알람관리자에게 채팅

TypeScript 기반 React 프로젝트 생성firebase 배포 확인

색상, 아이콘 선택 dummy 입력 : TypeScript + Firebase + React-Query반응형 지원 + 다국어 지원 + Convention에 맞게 코드작성, 커밋컨텐츠 채움

웹페이지의 전체적인 아웃라인, 컨텐츠, 색상톤, 아이콘 등을 결정 후 사용할폰트를 일단 넣어두었다.그러고 난 후에 절대경로를 세팅해준다.프로젝트를 진행할수록 디렉토리 구조가 깊어지고 복잡해지기 때문에미리 import할 경로를 깔끔하게 만드는 작업이 필요하다.Craco(

문법 에러, 코드 스타일 규칙에 맞지 않는 코드를 찾아주는 툴root 폴더에 .eslintrc.json, .prettierrc.json 작성\-> 만약 적용되지 않는다면 VSCode - Extensions 에서ESLint와 Prettier - Code formatter

🟥 에러 발생Craco-Alias Error Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com.\-> 끝에 컴마를 제거해준 후 다시 빌

컴포넌트 작성 전 현재까지의 commit을 push했는데다음과 같은 에러가 발생했다.원격 저장소 연결 상태 확인\-> 아무것도 뜨지 않았다. 리포지토리와 프로젝트 폴더를 각각 생성 후 아직까지 연결하지 않은 것.원격 저장소 연결, 확인원격저장소 URL 형태 : git@

React.FC를 사용할 때는 props의 타입을 Generics로 넣어서 사용React.FC의 장점props에 기본적으로 children이 들어감?두번째 컴포넌트의 defaultProps, propTypes, contextTypes 설정시 자동완성단점children

🟥 Already included file name... differs from file name 에러

✅ styled-components, global style, default theme 등의 개념을 사용해서 스타일링default theme : 자주 쓰는 색상 관련 변수들을 지정하고 쉽게 쓸 수 있음global style : 1) Default theme 설정타입 선

링크를 참조하여 코드 수정1. 라이브러리 설치 npm install --save-dev @types/styled-components 2. declaration file : styled.d.ts 생성 // import original module declarations

컴포넌트를 작성하다보니 폴더 구조가 복잡해지는 것 같아서 깔끔하게 관리하기 위해 Atomic Design Pattern을 적용했다.카카오 기술블로그를 참조해서 다음과 같이 컴포넌트를 정리했다.Atom : 개별적 컴포넌트 파츠Molecule : Atom들을 묶어서 완전한

금일 오전 메일이 와 있었다.Firebase Cloud Firestore 데이터베이스에 대한 클라이언트 액세스가 3일 후에 만료됩니다테스트 모드에서 개발을 시작하도록 선택했기 때문에 Cloud Firestore 데이터베이스가 인터넷에 완전히 공개됩니다. 공격자에게 취약

1. 아이콘 이미지 제작 Photoshop으로 웹페이지 내에 쓰일 아이콘과 로고 등을 제작했다. (로딩 img는 웹페이지 기능이 어느정도 완료된 후 추가작업할 예정 (gif)) 2. 이미지 스프라이트 기법 (+ Styled-Components) 이미지 스프라이트 기법

메뉴에 마우스를 호버하면 서브메뉴가 나오고, 밑줄이 가운데에서 밖으로 나가는 애니메이션을 추가했다.서브메뉴는 앞의 두 개의 메인메뉴에서만 적용될 예정이어서, 해당 서브메뉴의 이름들을 constants/data.ts 의 menuData에 list 형태로 저장한 후, ma

1. Footer를 body 컨텐츠 크기에 상관없이 하단에 고정 position:fixed; bottom:0; left: 0; right: 0; 2. TS + Styled-Components props 변수 사용 컴포넌트의 기본 margin값을 상수로부터 불러오고, 일

아이콘과 전체적인 페이지 색감 등 테스트를 마쳤으니 바로 페이지를 완성하고싶지만,경험상 Layout 구조를 만든 후 페이지를 구현하는 것이 재사용과 관리 측면에서 좋았어서다음의 순서로 개발을 진행한다.Layout 완성dynamic import + 로딩바 구현컴포넌트 +

랜딩페이지에서 섹션 사이에 이미지가 들어가는 파트를 고정하고, 외부 props로부터 쉽게 교체하고 싶었다.평소 React만 쓸 때처럼 타입을 지정하지 않으면 다음과 같은 에러가 발생한다.🟥 Binding element 'img' implicitly has an 'an

광고란에 이미지 사이즈가 틀어지지 않았는지 확인하기 위해 일시적으로 인라인 스타일을 적용해보았다. //Section.tsx import { ReactNode } from 'react'; . . . interface Props { img?: string; bod

media query를 활용해서 디바이스 사이즈에 따라 화면이 다르게 보이게 설정한다.기준은 최소 반응형 레이아웃으로, break point를 각각 다음과 같이 했다.

1. styled-component로 간단히 드롭다운 구현 원하는 위치에서 dropdown되게 하려면 position:absolute를 사용해야 하는데, absolute는 부모의 position을 기준으로 위치를 선정하는 prop으로, 부모의 position이 rela

media query를 사용해서 데스크톱 사이즈와 모바일 사이즈로 반응형 웹사이트를 만들었는데, 뼈대는 지정한 픽셀에 따라 바뀌었으나 메뉴는 props를 초반에 받아서 그리다보니까 새로고침을 해야 제대로 변경되었다.이에 화면 사이즈가 변경되면 이를 감지하고, 자동으로

event-driven programming : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 사용자와의 상호작용에 따라 (버틀 클릭, 키보드 입력, 마우스 이동 등) 함수를 호출하여 어떤 처리를 하고 싶을 때, 보통 사용자가 행동을 "언제" 할지 몰라서

밖에서 컴포넌트만 다르고 전체 구조는 같은 Layout을 추가했다.Outlet을 사용하지 않고 props.children을 사용했다.(1),(2) : 외부에서 prop이 들어오는데, children이 들어오고, 컴포넌트가 들어오니까 React.ReactNode로 지정한