Dev-diary29 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이다. 텍스트 몇 자랑 gif 넣지 뭐 .. 라고 생각했으나 결과물은 꽤 빈약해보였다 🤔 😨 진짜 안일한 생각이었다 !! 개인적으로 아쉽기도 하고, 스크롤 애니메이션 공부도 할겸 메인페이지 전체를 수정하게 되었다. 그리고 프로젝트를 더 적극적으로 소개하려고 한다 !! 메인페이지는 첫인상을 좌우하니까 중요하다 !! 📎 참고 레퍼런스 UI 컴포넌트가 많은 우리 프로젝트랑 잘 맞겠단 생각을 했다 !! 😊 스크롤 이벤트로 인해 스크린 전체의 이미지가 부드럽게 바뀌는 것도 마음에 들었고, 특히 저 서서히 튀어나오는한 애니메이.. 2022. 2. 26. 자꾸 까먹는 Git 명령어 모음 📌 Git 로컬 저장소 branch 이름 변경하기 git branch -m [기존 브랜치 이름] [새로운 브랜치 이름] 📌 Git 원격 저장소 branch 이름 변경하기 추가 | git push origin [새로운 브랜치 이름] 삭제 | git push origin --delete [기존 브랜치 이름] / git push origin :[기존 브랜치 이름] 2022. 2. 23. 22.02.22 타입스크립트의 시작 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 2. 22. 리팩토링 : 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. HTML .env 변수 넣기 (feat. React) 🔊 HTML script 태그에 env 변수 넣기 테스트 용으로 써오던 카카오 map api 자바스크립트 키를 env 파일에 넣어 관리하기로 함. 진즉에 했었어야 했는데 방관. 새로운 api 키를 발급받아서 교체해주었다. 이미 깃헙에 올라간 코드는 삭제할 수 없으니, 발급받은 테스트용 api키를 파기하지만 절대 이런 실수는 용납안됨 ..! 👀 ❗ 오늘의 교훈 : 중요한 설정은 잊지말고 초기에 해주자. 1. dotenv 설치 2. .env 파일에 키,값 넣어주기 (리액트만의 규칙 있음) 3. gitignore 폴더에 .env 추가 1. npm install dotenv 2. // HTML // .env REACT_APP_KAKAO_JAVASCRIPT_KEY=leeKey .env 변수 이름 반드시 REACT.. 2022. 2. 14. 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. 이전 1 2 3 4 다음
