웹 개발9 [디벨로퍼] 채용 사이트 프로젝트 16 3.19포인트 사용 페이지를 작업했다. 슬라이드 부분은 embla 라이브러리를 가져다가 썼는데, 알고보니까 다른 슬라이드 부분도 다 이 라이브러리를 쓰는 것 같다. 이전에는 carousel 단어를 잘 몰라서 그냥 react-scroll 이런 식으로 검색해서 하나 가져다가 썼었다. 이전 부분을 다시 작업해야 하나 많이 고민되긴 한다... 근데 아마 귀찮아서 그냥 둘 것 같다. 만드는 과정에서 의미가 있는 것이지 100% 똑같이 만들 생각은 없으니까 ㅋㅋ 계속 작업하면서 느끼는 것이 웹 사이트가 어떤 식으로 만들어지는지 전혀 알지 못했는데, 이제서야 조금씩 감이 잡힌다는 느낌이 든다. 하나의 웹사이트에도 기능이 정말 많다는 것을 느끼고 있다. 물론 간단하게 랜딩페이지 정도만 만들고 끝내는 경우도 많지만, .. 2025. 3. 21. [디벨로퍼] 채용 사이트 프로젝트 15 [포인트 페이지]feat: 공통 레이아웃 추가(좌측 네비게이션)feat: 페이지 추가(포인트 적립, 내역)feat: 다이얼로그 추가(포인트 미션 가이드, 포인트 정책) ---- 포인트쪽 페이지를 작업하고 있다. 이제 더보기 항목에 나온 페이지 쪽이랑... 검색 페이지 쪽을 해주면 프론트단은 어느 정도 끝나지 않을까 싶긴 하다. 클론코딩 방식으로 그냥... 던져지는 기획/디자인을 그대로 따라 만들고 있다. 완전 실무 스타일로 개발중... 내 입장에서 웹 사이트가 이렇게 공수가 많은지 몰랐는데... 양에 질리는 것 같은 느낌이... 아무튼 지금 시점에서는 FE 개발을 많이 해보면 도움이 된다고 생각하고 있다. 하나씩 개발해보자... 2025. 3. 18. [디벨로퍼] 채용 사이트 프로젝트 14 [프로필 페이지]feat: 공통 레이아웃 작업(좌측 컨트롤러) feat: 다이얼로그 추가(네트워크 연결, 이름 변경, 휴대폰 번호 변경, 비밀번호 변경, 회원 탈퇴)feat: 페이지 추가(추천 네트워크 설정, 알림 설정, 계정 관리) ---- 작업을 하면서 내가 CSS에 많이 약하다는 생각이 들었다. 주로 차크라UI에서 래핑해놓은 컴포넌트를 가져가다 쓰다보니, CSS적 사고 방식이 낯선 것 같다. 보통 다른 프레임워크에서는 속성이 안 먹으면 공식문서에서 찾아보다가 문제가 해결되는 식이다. 근데 차크라UI 쪽에서 커스텀이 안 되는 부분은 CSS를 건드려야 하는데, 계속 그쪽 공식문서만 보고 있으니까 일이 진척이 안 된다... 생각보다 CSS쪽이 FE개발의 복병인 것 같다. UI개발 분야의 속도는 결국 .. 2025. 3. 17. [디벨로퍼] 채용 사이트 프로젝트 13 feat: 검색 다이얼로그 추가 feat: 커뮤니티 커피챗 뷰 추가(우측) feat: 나의 게시글 페이지 추가 change: 헤더 버튼 라우팅 처리change: 마이페이지 라우팅 처리change: 커뮤니티, 마이페이지 반응형 UI처리change: 내 활동 페이지 뷰 추가(받은 제안 및 설정, 기본 이력서, 마이 포인트) 프론트엔드 개발에서 가장 어려운 부분은 '반응형UI'라고 생각한다. 단순 UI개발은 배치만 슥슥해도 작업이 되는데, 반응형UI 개념이 낯설어서 시간이 한참 걸리는 것 같다. 앱 개발에서는 '휴대폰' '테블릿' 정도로만 화면을 나누고, 그 마저도 처리를 안 하는 경우가 많다. 근데 웹에서는 반응형UI가 기본..이라 PC용, 모바일용... 사이즈별 대응에 굉장히 민감하다고 느꼈다. 솔직히.. 2025. 3. 16. [디벨로퍼] 채용 사이트 프로젝트 12 마이페이지쪽 프로필을 작업했고 내 활동 페이지는 개발중에 있다. 개발을 하다보면 뭔가 질리는 느낌이 들 때가 있는데, 좀 쉬다가 다시 하면 재밌는 것 같다. 하나씩 꾸준히 작업해보자. 역시 개발은 꽤나 재밌는 것 같다. 한동안 안 하다가 해서 그런가...? FE개발도 점점 할만한 느낌이 드는 것 같다. 2025. 3. 16. [디벨로퍼] 채용 사이트 프로젝트 11 [작업 내용]1. 다이얼로그 추가(글 작성, 글 작성 중단, 팔로워, 추천)2. 포스트 상세페이지 추가 3. 프로필 페이지 추가(프로필/게시글 탭) 이전에 개발했던 내용 정리해서 올림. 2025. 3. 15. [디벨로퍼] 채용 사이트 프로젝트 10 [연봉 페이지]feat: 연봉 그래프 툴팁 추가 feat: 연봉 그래프 우측 예상 연봉 정보 추가 feat: 채용 정보 추가(적극 채용중인 회사, 연봉 업그레이드 포지션)feat: 반응형 UI작업 feat: 커뮤니티 rootLayout 추가(좌측 부분) feat: 소셜 페이지 추가(작업중) ---- FE개발에서 가장 어려운 부분(?) 중에 하나는 반응형UI인 것 같다. 앱 개발 내에서 상태처리에 따른 View 보여주기와 크게 다르진 않지만, 뭔가 더 복잡한 느낌이 있다. 원티드 페이지를 따라 만들다보니, 뷰를 배치하는 능력도 점점 생기고 있다는 것이 느껴진다(Flutter에서 배치하는 것과 비슷하면서도 다름) 원티드 내부적으로 포인트 부분, 커뮤니티 부분 등이 있는데 백엔드 쪽을 어떤 식으로 작업할.. 2025. 3. 12. [디벨로퍼] 채용 사이트 프로젝트 9 feat: 상단 메뉴 - 더보기 메뉴 추가feat: 연봉 정보 페이지(작업중) ---- 1. Flutter로 개발을 할 때 width, height 값을 안 줘서 속성이 안 먹을 때가 있다. React개발을 할 때도 마찬가지인 듯 싶다. 이럴 때는 처리하는 뷰에 Background 값을 주고 잡힌 사이즈를 보면서 width/height값을 조정해야 한다. 부모 태그를 변경하면 될 때도 있다. 2. 오브젝트를 가운데로 가도록 만드는 방법(flex 내부 양 옆에 Spacer 넣어주기)물론 이거 말고도 align-items로 동작할 때도 많다. 해도해도 안 먹을 때 사용해보자. 연봉 페이지 작업하고 포인트 화면을 작업할 예정이다. 2025. 3. 10. [디벨로퍼] 채용 사이트 프로젝트 8 [회사 정보 페이지]feat: 우측 팔로우 버튼 반응형 처리feat: 다이얼로그 추가(올해 입사자 평균연봉, 평균 근속연수) feat: 데이터소스 페이지 추가 feat: 헤더 추가 메뉴 부분(작업중) align-content determines the spacing between linesalign-items determines how the items as a whole are aligned within the container. 1. Row 내에서 아이템을 가운데에 배치할 때는 align-items, 수직적으로 아이템을 가운데 배치할 때는 align-content를 사용하면 된다. 2. JSON 정보를 바탕으로 컴포넌트를 출력해야 할 때, Object.entries 함수를 사용하면 된다. json의.. 2025. 3. 9. 이전 1 다음
