분류 전체보기124

• 

  [Tars] 회고록 4일차 (emotion Props) 설이 끝나고 오랜만에 다시 공부를 시작하였다. FooterBtn 팀원들 코드리뷰를 하고 요런식으로 공통으로 사용되는 버튼을 저번처럼 합성컴포넌트가 아닌 props를 이용해서 만들었다. export default function FooterBtn({ text, cancleText, shape, blur, transparent }: FooterBtnType) { return ( {cancleText ? ( {cancleText} ) : null} {text} ); } props가 많아서 나중에 줄이는 방법을 다시 생각해 봐야겠다. emotion props 내리는 법 FooterBtn에서 blur를 props를 내려주면 버튼의 opacity:40%으로 설정해야 되는 부분이 있었는데 인라인으로 엘리먼트에 그대로.. 프로젝트/Tarss 2024. 2. 15.

• 

  [Tars] 회고록 3일차 오늘은 설날이여서 집에 도착하니깐 밤 10시쯤 되었다. 그래도 평소에 하던 아침 루틴을 하고 프로젝트에서 지금까지 width: 500px로 맞추어서 작업하던걸 모두 width: 360px로 변경을 하였다. 개발자모드 - 모바일환경 몰랐던 사실인데 개발자 모드에서 아래의 버튼을 눌러서 보는거랑 안 눌러서 보는거랑 css가 다르게 작동하였다. 팀원의 작업물을 확인하다가 화면 크기를 줄였는데 잘리길래 언급을 해줬는데 저 버튼을 눌러야 진짜 모바일 환경처럼 변하는거라서 css가 다르게 작동한다는 거였다. Tars 프로젝트는 웹을 고려하지 않기 때문에 앞으로 작업할 때 저 버튼을 항상 누르고 작업을 해야겠다. 2시간 밖에 공부를 못 했지만 그래도 쉬는날에 조금이라도 공부한게 뿌듯하다. 프로젝트/Tarss 2024. 2. 10.

• 

  [Tars] 회고록 2일차 정기회의 안건은 대부분 내가 개발하다가 생각나는걸 적어서 함께 이야기를 나뉘고 코드리뷰를 하고있다. 1. px, rem 구분 팀원들의 코드리뷰를 하는데 px와 rem이 혼용되고 있었다. 둘 중 하나로 통일하지 않으면 기본 폰트 크기가 변경되었을 때 UI가 깨질 수 있다. 말로만 하면 까먹을 수 있을 것 같아서 한 팀원의 작업물을 직접 크롬의 기본폰트크기를 변경해서 어떻게 UI가 깨지는지 보여줘서 rem으로 통일 될 수 있도록 하였다. 2. defalut width 나는 max-width를 600px로 잡고 개발을 하였는데 다른 팀원분들은 width를 360px로 잡고 개발 중 이였다. 피그마상으로는 360px이 맞는데 나는 저번 회의때 디자이너분이 600으로 잡고 개발을 하자고 했었던 걸로 기억을 해 서.. 프로젝트/Tarss 2024. 2. 8.

• 

  yarn berry 사용시 .yarn 내부파일이 저절로 삭제되는 현상 yarn, vite를 통해서 프로젝트를 생성하고 eslint, pretter를 사용하고 있는데 프로젝트 중간에 자꾸 .node_modules 폴더가 좀비처럼 재생성되고 .yarn에 있는 파일이 저절로 삭제되는 현상을 겼었다. 특히 .yarn 내부의 파일이 삭제되는지 모르게 PR을 해서 다른 팀원분들이 .yarn/eslint/package.json이 삭제되어서 eslint를 사용을 못 하셨다. (이후 빠르게 package.json을 만들어 PR을 올렸다.) 첫 번째 시도 https://meoweundi.tistory.com/39 .yarnrc.yml 파일에 yarn/nodeLinker가 'node-modules'로 설정되어 있었다면 node_modules이 자동으로 생성된다고 한다. 근데 프로젝트 내부에 .. 개발/버그일지 2024. 2. 8.

• 

  [Tars] 회고록 1일차 항상 프로젝트가 시작되고나서 정신없이 달리고 나면 머리속에 남는 것이 없었다. 그래서 회의록을 통해서 내 머리속에 제대로 기억되길 바라며 매일 회의록을 작성하겠다. 진행상황 현재 프로젝트는 디자인나왔고 프로젝트 세팅이 다 끝나고 각자 맡은 역할과 공통적인 부분을 만들기 시작하는 시기이다. 나는 프론트엔드 팀장을 맡아서 노션에 팀에 관한 규칙과 일정을 정하고 일주일에 2번씩 회의를 하고있다. 팀장을 맡으면서 가장 중요하게 생각하고 있는 부분은 코드리뷰이다. 반드시 다른 사람들의 PR에 메시지를 작성하게 하여 모두 다른 팀원의 코드를 꼼꼼히 읽으며 피드백을 하도록 하고있다. 공통 컴포넌트 제작(공통 버튼) 자주 사용되는 하단 버튼을 공통 컴포넌트 제작을 하였다. 처음으로 합성 컴포넌트 방식으로 제작을 하였는.. 프로젝트/Tarss 2024. 2. 7.

• 

  yarn berry란 yarn berry란 node.js를 위한 새로운 패키지 관리 시스템으로 기존의 npm yarn v1의 패키지를 개선하여 빌드 시간을 단축시켜주고 개발과정에서 안정성을 높여줄 수 있습니다.yarn v2부터는 yarn berry라고 합니다.1. yarn berry의 기능1) 기존의 방법NPM은 node_modules폴더를 이용해서 의존성을 관리하는데 이 폴더의 구조는 매우 큰 공간을 차지하고 있다는 단점이 있습니다.만약 여러 패키지들이 의존하는 모듈을 모두 설치한다면 node_modules구조는 매우 깊어지고 무거워집니다. 이 문제를 해결하기 위해 NPM, yarn v1에서는 각 패키지가 의존하고 있는 패키지들을 최상단으로 끌어올리는(호이스팅) 방법을 사용하여 중복 설치된 패키지를 최.. 개발 2024. 2. 2.

• 

  프로젝트 초기 세팅 (with yarn berry, vit, react, typescript, emotion...) 새로운 프로젝트를 시작하면서 내가 자신이 없었던 프로젝트 초기 세팅을 드디어!! 새롭게 경험할 수 있었다. 이번에는 반드시 초기세팅에 대한 두려움을 없애버리고 자신감있게 초기 세팅을 할 수 있도록 정리를 해보았다. 스택 TypeScript: 정적 타입 분석을 통한 안정적인 코드 작성을 위해 사용 React: 컴포넌트 기반 개발 및 SPA 구축을 위해 사용 emotion css: 컴포넌트 기반 스타일링을 위해 사용 Redux Toolkit : 복잡한 상태 관리를 위해 사용 PWA: 네이티브 앱과 같은 사용자 경험을 주기 위해 사용 Axios: 간결한 http 통신 코드 작성을 위해 사용 Framer Motion: 리액트 기반 애니메이션 라이브러리로, 서비스 내의 다양한 애니메이션 구현을 위해 사용 yarn.. 개발 2024. 1. 29.

• npm & yarn 명령어 비교 이번에 npm에서 yarn으로 바뀌게 되면서 익숙하지 않은 yarn의 명령어를 정리하고자 이렇게 글을 작성하게 되었습니다. 1. 명령어 표 명령어 및 기능 npm yarn 프로젝트 초기화 npm init yarn init dependencies 설치 npm install yarn 패키지 설치 npm install [package] yarn add [package] dev 패키지 설치 npm install --save-dev [package] yarn add --dev [package] 글로벌 패키지 설치 npm install -g [package] yarn global add [package] 패키지 제거 npm uninstall [package] yarn remove [package] dev 패키지 제.. 개발 2024. 1. 22.

• 

  타이탄의 도구들 타이탄의 도구들을 읽으면서 내가 기억하고 실천하고 싶은 것들을 모아보았다. 0. 세계 최고들이 매일 실천하는 것들 이 책을 읽어야 하는 이유 “당신의 등을 두드리며 격려해 줄 사람이 필요한가? 그에 적합한 인물이 이 책에 담겨있다. 정신 번쩍 나도록 세차게 빰을 때려줄 사람을 원하는가? 그에 적합한 수많은 인물들이 또한 여기에 있다. 당신의 두려움과 불안에 대한 명쾌한 설명이 절실한가? 당신 삶을 빠르게 바꿔놓을 계기가 필요한가? 좋다 이 책에서 모두 찾을 수 있을 것이다.” 이 책은 나에게 필요한 적합한 타이탄을 선택하여 가르침을 받을 수 있는 모음집이라고 생각된다. 타이탄이란 각 분야에서 성공을 이룬 인물들을 말한다. 이러한 타이탄들도 공통점을 가지고 있다. 타이탄의 공통된 습관 80% 이상이 매일 .. 일상/독서록 2024. 1. 22.

• 

  한 박스에서 이미지와 비디오 엘리먼트 서서히 변하게하기 문제 마우스를 올렸을 때 화면이 서서히 변하는 걸 하고 싶다. transition만 추가하면 될지 알았는데 생각보다 오랜 시간이 걸렸다. 스택 React, styeld component, typescript 코드 분석 관련없는 코드는 삭제하고 왼쪽화면 관련된 코드만 남겼다. 컴포넌트 화면에 마우스를 올리면 숫자가 1씩 증가하여 화면을 변경시키는 로직이다. const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = (event: React.MouseEvent) => { setTimeout(function () { setLeftNum(leftNum + 1); }, 100); return ( {leftScreenData.. 개발/개발일지 2024. 1. 22.