개발자와 화가 개발자와 화가

0. 개요 - 타입스크립트 초기설정 - NavBar.tsx로 리팩토링 1. 작업 상세 내용 0) tsconfig.json 기본 설정 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./dist", "moduleResolution": "Node", "lib": ["ES2015", "DOM", "DOM.Iterable"] }, "include": ["./src/**/*"], "exclude": ["node_modules", "dist"] } 1) jsconfig.json 파일 삭제, tsconfig.json에 내용 추가 { "compilerOptions": { "jsx": "react", "baseUrl": "./src", "allow..

Modal창에 쓰일 버튼 컴포넌트 스타일을 정의해봤습니다. Figma의 오른쪽 상단에 있는 Dev Mode를 클릭해서 구현 예정인 컴포넌트의 CSS 코드를 구할 수 있었습니다. 피그마 CSS 코드 /*버튼 공통 코드*/ .custom_button { display: inline-flex; height: 50px; padding: 23px 30px; justify-content: center; align-items: center; gap: 10px; border-radius: 15px; font-weight: bold; } /*확인버튼*/ .confirm_button { background-color: #8DC693; border: none; color: white; margin-right: 20px; }..

Redux를 사용하여 상태를 관리하는 기능을 가지고, 좌측에 위치해서 메뉴 네비게이션 바의 역할을 하는 컴포넌트를 만들어봅시다. 1. 리액트라우터 설치 npm install react-router-dom 2. 브랜치 정리 main / dev / fe / feat/NavBar 순서로 됩니다 fe에서 pull 하려면 현재 작업하던 브랜치(feat/NavBar)에서 git pull origin fe 하면 됩니다. main ㄴdev ㄴ fe | - feat/NavBar ㄴ be 3. Redux 개념 Redux를 사용하려면 redux와 @reduxjs/toolkit( 줄여서 RTK ) 패키지, 리액트에서 사용할 거라면 react-redux 패키지를 설치해야 합니다. 1) Provider 컴포넌트 리덕스 기능을 사..

프로젝트 개발 관련 규칙 커밋 자주 하기 PR 자주 하기 메인 브랜치에 직접 커밋하지 말기 dev fe feat: ㅇㅇ기능 feat: ㅁㅁ기능 be feat: ㅇㅇ 기능 feat: ㅁㅁ기능 (브랜치 네임에 /가 안들어가져서 fe/feat: ㅁㅁ기능 => feat: ㅁㅁ기능 으로 변경하기로 했어요~) 커밋 메시지 양식 통일 feat : 새로운 기능에 대한 커밋 fix : 버그 수정에 대한 커밋 build : 빌드 관련 파일 수정에 대한 커밋 chore : 그 외 자잘한 수정에 대한 커밋 ci : CI관련 설정 수정에 대한 커밋 docs : 문서 수정에 대한 커밋 style : 코드 스타일 혹은 포맷 등에 관한 커밋 refactor : 코드 리팩토링에 대한 커밋 test : 테스트 코드 수정에 대한 커밋 P..

🌿프로토타입 팀원들과 상의 후에 만들어진 프로토타입 화면의 일부분 입니다. 메인컬러를 팀 주제에 맞게 색상을 뽑아 골라달라고 하였고 투표 결과 2번, 6번 색상이 나와서 우리팀의 로고 또한 2번 색상으로 가기로 결정되었습니다. 로그인 했을 때와 하지 않았을 때의 헤더가 다른 부분, 각 페이지마다 어떤 화면이 들어올지를 대략적으로 구성하였습니다. 팀원 중 한 분이 상세게시물 페이지에서 수정/삭제 버튼을 통해 이어지는 새로운 화면을 저렇게 표시하였는데 시각적으로 이해가 잘 되어서 좋았습니다. 🌿초기 디자인 해당 프로토타입 화면을 바탕으로 디자인 입히기 작업을 했습니다. 로고를 1) 삽 모양 2) 나뭇잎 모양 이렇게 두개를 작업했고 메인 컬러를 1)위에서 투표한 색상 2) 색 팔레트에서 가져온 색상 이렇게 두..

🌱팀명 그린어스포어스 (Green Earth For Us) 🌱친환경 실천 로그 오늘 친환경 관련해서 어떤 실천 행동을 했는지 로그 공유 가능 공개 여부: 나만 보기/모두 공개, 언제든지 변경 가능 마이페이지: 캘린더 / 나의 모든 게시글 열람 및 편집 가능 하루 실천 → 1 도장 게시글 작성하면 캘린더에 그 날 제로웨이스트했다는 스템프 표시 땅(0개) → 새싹(1개) → 조금 더 자란 새싹(5개) → 꽃봉오리(10개) → 꽃(20개) 캘린더 아래에 월별 n일 표시 게시판 (공유 피드) 전체 게시판: 모든 유저의 모든 게시글 모아둔 게시판. 인기순/최신순 정렬 가능. 자유 게시판: 모든 유저의 공개 게시글 모아둔 게시판. (인증 게시글은 별도) 챌린지 인증 게시판 좋아요❤️ 기능 정보성 정적 데이터 제공 ..

🌿 23/06/12 - 07/06 : Section3 🌿 사용자 친화적이고 안전한 web app을 만들 수 있다. - [자료구조/알고리즘] 재귀 - [사용자 친화 웹] UI/UX - [React] Custom Component - [React] 상태관리 - [사용자 친화 웹] 웹 표준 & 접근 - [네트워크] 심화 - [Backend] 인증 / 보안 - Coz' Mini Hackathon 코드스테이츠의 세 번째 단위기간인 Seciton3가 종료되었다. 벌써 한 달이 지났다니 믿기지가 않는다 ... ^^ ㅠ 시간이 참 빠르다. Section4가 마지막이고 이후엔 두 달동안 프로젝트를 진행하는데 벌써 프로젝트가 성큼 다가온 느낌이라 무섭다. 목표 상기 - 리액트, 타입스크립트 기술스택 사용하는 회사 취업하기..

To-Do List CRUD가 가능한 APP의 디자인 및 기능을 기획하는 시간을 가져봤다. 심플함을 강조하며 메인 팔래트의 색상을 파란색, 회색으로 지정해서 해당 색상들을 이용하여 작업했다. 약 3-4시간 동안 한 결과물인데... 속도가 좀 더 빨랐으면 모든 인터렉션을 구현 할 수 있을 거라는 생각에 아쉽다는 느낌도 든다. 🌱피그마 내용 🌱시연동영상 완성 🌱잘한 점 - header, footer 컴포넌트화 잊지않고 활용 - 햄버거 버튼 눌렀을때 모션 부드럽게 나온다 - 하단에 카피라이트 써서 뭔가 더 완성된 것처럼 보이는 부분 - 목록 아래로 스크롤 했을 때 목록 부분만 스크롤이 되는 부분 ( -> 목록을 컴포넌트화하고 사이즈 맞춰서 프레임을 씌워서 해결했다. 예전에 했던 건데 기억이 안나서 다시 찾아보..