본문 바로가기

Dev-diary/일상13

오늘 배운것들 정리 💡 0부터 원하는 숫자까지 모든 수를 요소로 갖는 배열 만들기 // Array.from()으로 길이가 10, 값이 (0~9)인 배열 생성 const arr = Array.from({length: 10}, (val, idx) => idx); console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr.length); // 10 불러온 데이터의 인덱스를 가진 배열을 한번에 생성 or 삭제해야하는 이벤트가 있었는데 이 때 이 방법을 유용하게 썼다. 더 좋은 방법이 있을 수도 ..?!! 💡 checkbox 타입의 input 태그는 'checked' 속성을 갖는다 체크 X 체크 O 리액트에서 useRef 훅으로 체크박스를 관리해야하나 .. 고민했었는데 .. 2022. 4. 18.
MAU, DAU, MCU, ACU 지표성 언어 정리 ✍🏻 왜 ? IT 기술 뉴스레터를 읽다보니 내가 모르는 약자들이 너무 많이 보이더라. 😂 한번 정리해두면 좋을 것 같아 기록하게 되었다. +그리고 그렇게 어렵지도 않음 !! 📍 MAU [ Monthly Activity User ] 월별 사용자 실제 활동하는 사람의 수를 추적하기 때문에 월별 회원수와는 다른 개념임. 📍 DAU [ Daily Activity User ] 일별 사용자 하루 단위, 실제 사용자 수. 📍 MCU [ Maximum Current User ] 순간 동시 접속자 단순한, 순간의 추이. 📍 ACU [ Average Current User ] 순간 동시 접속자의 평균 순간적으로 접속하는 유저의 평균값. 📍 PV [ Page View ] 페이지 내에서 사용자의 요청 수 한 사이트 내에서 사.. 2022. 4. 7.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (2) 📌 이전 내용 2022.02.26 - [Dev-diary/일상] - 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이 code-designer.tistory.com • Bare-minimum Requirements ✔ 스크롤 이벤트 : up & down 에 따라 위치 이동 ✔ 텍스트, 컴포넌트 transition 애니메이션 추가 ✔ 사용자 후기 볼 수 있는 버튼 구현 ✔ 체험하기 버튼, Footer 디자인 • Advanced Requireme.. 2022. 2. 27.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이다. 텍스트 몇 자랑 gif 넣지 뭐 .. 라고 생각했으나 결과물은 꽤 빈약해보였다 🤔 😨 진짜 안일한 생각이었다 !! 개인적으로 아쉽기도 하고, 스크롤 애니메이션 공부도 할겸 메인페이지 전체를 수정하게 되었다. 그리고 프로젝트를 더 적극적으로 소개하려고 한다 !! 메인페이지는 첫인상을 좌우하니까 중요하다 !! 📎 참고 레퍼런스 UI 컴포넌트가 많은 우리 프로젝트랑 잘 맞겠단 생각을 했다 !! 😊 스크롤 이벤트로 인해 스크린 전체의 이미지가 부드럽게 바뀌는 것도 마음에 들었고, 특히 저 서서히 튀어나오는한 애니메이.. 2022. 2. 26.
리팩토링 : 4주차 플젝 마커 정보창 css 변경 📍 오늘 고칠 문제 웹 전체 분위기에 맞게 간단한 css 변경 --> 가독성을 높이면서 포인트 컬러 적용하기 😨 BEFORE 😊 AFTER 🤨 느낀점과 오늘 하루 정리 프론트엔드의 가장 큰 장점 : 노력한만큼 눈에 보인다 & 디자인 잘 된 컴포넌트보면 보람을 느낄 수 있다. 오늘 2D 도면은 3D화 하는 기술을 가진 기업을 발견했다 !-! 너무 흥미로워서 이것저것 기업에 관한 정보 서치하다 하루를 다 보냈다. 기업 서치하는 건 시간을 정해두고 해야겠다. 꼬리에 꼬리를 무는 질문들을 따라가다 어느새 스타트업 관련 용어를 외우고 있었다. 😓 내일 할 일 ✔ 오늘 쓰던 이력서 마무리 후 지원 ✔ 방 구조 바꾸기 (새 침대 + 𝟃 인테리어) ✔ scratch now 무한 스크롤 기능 설계 ✔ CS 관련 서적 읽.. 2022. 2. 21.
리팩토링 : 4주차 플젝 input 창 텍스트 길이 제한 📍 오늘 고칠 문제 ✔ 장소에 해당하는 제목의 길이를 제한했지만 적용되지 않은 에러 --> 사진을 저장할 때 해당 사진과 장소를 묶어 제목을 정할 수 있게 설계하였다. 이 제목은 태그의 느낌으로 짧게 짓도록 유도하기 위해 텍스트의 길이를 제한해놨었다. input 태그에 max-length 속성을 넣어 13으로 설정했는데 적용이 안되는 문제 발생. --> 분명 설정 당시에 작동이 되는 걸 알고 넘어갔는데, 리팩토링하면서 보니까 안되더라 😂 가끔 적용이 안된다고는 하는데 흠 ... 언제나 동작하게 함수를 만들어 해결하자 !!! 😨 BEFORE 분명 저는 max-length 속성을 넣어놓은 상태구요 .. 동작 안하구요 .. ㅎㅎ 이렇게 되면 사이드바에 탭이 추가될 때 글자가 넘쳐 UI가 무너지는 문제가 발생한.. 2022. 2. 17.
리팩토링 : 4주차 플젝 kakao Map API 마커 상태 관리 (1) 📍 프로젝트가 끝난 후 아쉬웠던 것들 당연히 부족하고, 아쉬운 것들 투성이다. 스스로 자책하기 보단 차근차근 고쳐나가기로 마음을 다잡고 고칠 점들을 리스트업 해본다. 그날 그날 고친 점들을 적고 어떻게 고쳤는지, 또 어떤 식으로 발전할 수 있을 것인지 등을 기록한 리팩토링 로그를 시작한다 👀 ✔ 루트 생성 페이지, 루츠 수정 페이지 : 마커 여러개 (5개 이상) 추가했을 때 화면이 하얘지는 에러 --> 이거 정말 심각한 문제였다. 프로젝트가 거의 끝날 때즈음에 만난 에러라 기간 내에 해결하지 못하고 제출했었다. 😓 심지어 팀원분이 "마커를 여러개 추가하면 화면 동작이 느려져요 !" 라고 알려주셔서 발견하게 됐다. 노트북에서, 혹은 모바일에서 네트워크 부하를 어떻게 감당할까 ?-? 를 고민하지 않은 대가였.. 2022. 2. 16.
Github profile 꾸미기 & 정리 ing 📍 github profille 정리 리스트 ✔ 프로필 미모티콘 생성 ✔ 프로필 README 꾸미기 ✔ 2주 프로젝트 README 정리 ✔ 4주 프로젝트 README 정리 ✔ 2주 프로젝트 리팩토링 ✔ 4주 프로젝트 리팩토링 (ing) 📎 프로필 미모티콘 생성 사회적인 (?) 나의 모습을 그리고싶었는데 캐릭터에 화장하는 게 어렵더라 ㅎ.. 😂 제페토보다는 사람같아서, 만족 ! ^__^ 📎 프로필 README 꾸미기 개인적으로 미니멀한 디자인을 좋아해서 나를 소개할 때 꼭 필요한 정보만 골라 컴팩트하게 구성해보았다. + 공식문서 밥 먹듯 보자는 의미에서 각 언어의 공식문서 링크도 연결해놨다. 😉 📎 2주 프로젝트 README 정리 📎 4주 프로젝트 README 정리 📎 2주 프로젝트 리팩토링 📎 4주 프로.. 2022. 2. 11.
프로젝트 수기 기록을 정리하며. 📍 재정비 시간 본격적으로 취업 준비에 앞서 이전 기록들을 정리하는 시간을 가졌다. 복잡하게 얽혀있던 폴더와 파일들, 어지럽게 적어놨던 메모들, 일기들 ... 📍 프로젝트 수기 프로젝트 초반에 생각나는대로 이것저것 적어놨던 기록. ✍🏻 프로젝트 후반의 기록. ✍🏻 확실히 로직이 정리된 느낌이 강하다. 페이지네이션 구현 로직 💡 lodash의 chunk 메서드를 활용했다. react-grid-layout 쓰기전 redux로 배열 상태 전역 관리할 때 .. 결국 redux를 쓰지 않게 된 그런 슬픈 이야기 😂 서버 API 를 수정하면서 작업 + 보내야할 데이터 많음 = 환장 조합 메모해가면서 진행했다 😉 2022. 2. 10.