오늘도 디벨롭✨ 오늘도 디벨롭✨

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다. 1. class 구조 class User { constructor(매개변수1, 매개변수2..) { // 함수 역할 // 로직 } 메서드명() { return 로직; } } 2. 컴포넌트 생성(SPA 방식) 1. index.html의 안에 모든 내용이 그려진다. 2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가 3. 공통으로 사용..

매일 취업 공고를 보다. 신입을 뽑는 취업 공고가 많이 없지만 그래도 취업 공고를 통해 인사이트를 많이 얻을 수 있을거란 생각에 매일 취업 공고를 하나씩 수집했다. 모든 회사가 나에겐 레벨 5로 느껴질 만큼 준비할 게 여전히 산더미 같이 느껴졌지만, 정말 다양한 도메인이 있다는 것을 알게 되서 즐거웠다. 여러 공고를 취합해보면 분명히 내게 부족한게 무엇인지 내가 적용할 수 있는 건 무엇인지 점점 더 빠르게 캐치할 수 있게 될 터. 공고를 볼 때 이런 점들을 항상 생각하고 고민하면서 봐야겠다고 다짐한 한 달이었다. 또비인후과 실화냐 2월에 지속되던 어지럼증을 참지 못하고 다녀왔던 이비인후과를 3월 초에 또 가게 되었다. 이번에는 귀 뒤에 볼록하게 혹같은게 튀어나와서 였는데 심지어 아프기까지했다. 의사..

✅ 오늘의 작업 내역 1. single, multiple 버전 예제 준비하기(100%) 2. README 작성하기(100%) 🔍 먼저 짚고 넘어가는 오늘의 깨달음 동일한 UI인데 실행되는 로직만 다른 경우, prop 조건에 따라 컴포넌트 하나로 해결이 가능하다는 사실을 잊지 말자. 폼도 그렇고, 오늘 준비한 아코디언도 그렇고.. 컴포넌트를 재사용할 수 있는지 항상 먼저 생각해 보기! (single 버전과 multiple 버전을 각각 만들었다가 이거 정말 비효율적이다! 를 느끼고 난 자의 회고록..) 0. 아코디언 UI를 준비한 이유 요새는 모바일로 웹이나 앱 사용을 많이 하는데, FAQ만 보더라도 아코디언 UI로 이루어져 있는 곳들이 많다. 작은 화면 속에서 빠르게 내용을 확인할 수 있는 게 편리해서 잘..

✅ 오늘의 작업 내역 1. 정렬 메뉴 버튼 active 상태 변경(100%) 👾 (이슈 처리) 새로고침 후에 바로 로고를 클릭하여 "/" 경로로 이동하는 경우 변경된 active 상태가 반영되지 않는 이슈 👾 (이슈 처리) 모바일 뷰에서 sortPath가 없는 경우 셀렉트 박스 label값이 null이 되는 이슈 💡 구현 결과 1. 정렬 메뉴 버튼 active 상태 변경 기존 정렬 메뉴 버튼의 active 상태는 NavigationBar 컴포넌트 내의 상태값을 통해 관리되고 있었다. 이를 쿼리 스트링 값에 따라 actvie 값이 적용될 수 있도록 변경이 필요했다. 처음에는 active 상태를 관리할 상태값을 useSortFilter 커스텀 훅에 넣어야 하나 고민했다가 해당 커스텀 훅이 처리하는 기능의 경..

✅ 오늘의 작업 내역     1. detail css 작업(70%)         1-1. 프로젝트 정보 섹션         1-2. 탭 메뉴  스타일 작업은 tailwind를 사용합니다.🎨 오늘 작업할 시안💡 구현 결과 1. 프로젝트 정보 섹션1-1. 프로젝트 정보 섹션 구조 portfolio detail 개인 포트폴리오 사이트 포트폴리오 설명 배포 사이트 깃허브 스택 스택  👀 스타일을 작업하며 고려한 점데스크탑 폰트 사이즈반응형 작업 시 프로젝트 제목/내용과 버튼의 배치모바일뷰 이하로 화면이 작아졌을 ..

✅ 오늘의 작업 내역 1. 상세 보기 버튼에 detail.html 연결 2. detail.html 마크업 진행(10%) 1. 상세보기 버튼에 detail.html 연결 태그에 직접적으로 url을 연결해 줬다가 동적으로 portfolio 요소를 생성하고 있으니 페이지 이동도 자바스크립트로 처리해 주는 게 맞다는 생각이 들었다. 문제는 동적으로 요소가 추가되는 경우 추가되지 않은 요소는 DOM에 존재하지 않아 이벤트 핸들러를 바인딩할 수 없는 이슈 1)를 마주하게 되었다. 👾 이슈 1) Uncaught (in promise) project.is:170 TypeError: Cannot read properties of null (reading 'addEventListener') button에 id를 주고, ..

포스팅을 작성할 때 통일감을 주고 싶어서 템플릿처럼 구성을 동일하게 만들어 작성하고 있었는데, 매번 작성할 때마다 일일이 지정해 주는 게 부담되던 찰나 티스토리 서식 버튼을 발견하게 되었다. 세상에나. 당장 만들어보자. 🧐 서식 설정 하기 1) 블로그 관리 - 콘텐츠 - 서식 관리 탭에 접속합니다. 2) 서식 관리 페이지의 서식 쓰기 버튼을 클릭해 주세요! 3) 원하는 템플릿 형식으로 서식을 구성하고, 우측 하단의 완료 버튼을 눌러 서식을 저장합니다. ✅ 사용 방법 글쓰기 버튼을 누르고 에디터 상단에 미트볼 메뉴를 클릭하면 서식 버튼을 확인할 수 있습니다. 서식 버튼을 클릭하면, 방금 저장한 서식 리스트를 확인할 수 있고, 원하는 서식을 클릭하면 적용 완료~! ⚠️ 참고로 제목까지 템플릿처럼 적용이 되지..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다. 📚 (사이트) 가이드 투어/온보딩 투어란? 가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다. 오늘 알아볼 기..