프로그래밍/Portfolio Log40 [디벨로퍼] 채용 사이트 프로젝트 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. [디벨로퍼] 채용 사이트 프로젝트 7 [회사 정보 페이지 작업]feat: 상단 회사 이미지 및 로고 추가feat: 그래프 추가(월평균 급여, 예상연봉, 인원)feat: 우측 팔로우 버튼 처리(hover effect, toast 등)feat: 예상연봉 다이얼로그 추가chore: chartjs-plugin-annotation 추가------ 1. Position을 이용하여 위치 조정하기flutter에서는 Stack위젯 내부에 존재하는 위젯에서 Positioned 위젯으로 위치를 조절했다. React에서 동일한 처리를 하려면 부모쪽에 position: relative를 주고 자식 컴포넌트에서 position: absolute를 준 이후에 left, top, right, bottom 값으로 조정할 수 있다. 2. 차크라UI 내에서 state값에.. 2025. 3. 8. [디벨로퍼] 채용 사이트 프로젝트 6 1. 채용 포지션에서 5개 이상의 공고가 있는 경우 '더보기' 버튼이 나오도록 처리했다.2. chartjs를 사용해서 Column 그래프, Line 그래프를 추가했다(연봉, 월급 그래프) 3. 기업 정보 표 부분을 추가했다. 약 2년 전에 처음으로 chartjs를 접했었는데 솔직히 그때는 FE개발도 처음이었고 JS도 처음이었고... 공식문서 읽는 것도 잘 못했던 것 같다. 지금 생각해보면 장족의 발전인 것 같기도 하고... 실력있는 개발자를 나누는 기준 중에 하나는 '공식문서를 읽는지' 여부라고 생각한다. 공식문서를 참고하여 내가 원하는 부분을 수정할 수 있을 정도의 독해력은 갖춰야 한다. 아무튼 지금보니 chartjs는 엄청나게 잘 만들어진 라이브러리였는데, 내 독해력이 부족한 것을 라이브러리 탓을.. 2025. 3. 7. [디벨로퍼] 채용 사이트 프로젝트 5 회사 상세페이지 쪽을 작업하고 있다. 회사 정보, 채용 포지션, 태그 리스트, 우측 버튼 그리고 그래프 컨테이너쪽만 작업을 미리해뒀다. 아마 그래프쪽은 apexcharts를 사용해서 개발할 듯 하다. 다른 라이브러리랑 하나씩 비교하진 않았다(너무 많아서) 내가 원하는 꺾은선 그래프, 막대 그래프를 추가할 수 있어서 추가했다. 오늘은 별로 개발을 안 했다. 팀노바 유튜브보면서 놀아가지고... 내일은 적어도 오후부터 개발을 시작해야지. 2025. 3. 5. [디벨로퍼] 채용 사이트 프로젝트 4 오늘의 작업1. 오른쪽 뷰 쪽에 정보 아이콘 누르면 나오는 다이얼로그 추가2. 채용 공고 페이지 반응형 UI 작업(하단 채용공고 리스트, 우측 뷰와 중간뷰, 하단 버튼 처리)3. 사진 영역에서 크기가 커지지 않는 이슈 수정(width를 안 주고 min-width를 줬다)4. 오른쪽 뷰 스티키 처리(탈부착 느낌) 솔직히 내 입장에서 모작이라고 해봐야 '별의 커비' '테라리아' 같은 게임이나 '메타마스크 UI' 따라해본 경험밖에 없다. 근데 실제로 잘 동작하는 웹페이지를 Front단으로 구현하려고 하니 은근히 빡세더라. 특히 반응형쪽은 UI자체가 생소한 편이라 신기한 느낌이다. 기본적인 반응형UI 컨셉은 앱 개발쪽도 비슷한 것 같다(뷰 띄워놓고 특정 조건에 맞춰서 보이거나 가리기) 다만 웹 개발쪽이 더욱 민.. 2025. 3. 4. [디벨로퍼] 채용 사이트 프로젝트 3 합격보상금쪽 그라데이션 영역을 추가했다. 북마크 버튼도 있다. relative 속성을 주고 픽셀단위로 옮기고 자르고 하면서 맞추고 있는데, 이게 맞나 싶으면서도 잘 굴러가서 기분이 좋다. 픽셀 단위의 하드코딩으로 조정해야 할 때가 있는 것 같다(꼼수긴 하지만)네이버 지도 API쪽을 연동했다. 네이버클라우드 회원가입해서 결제수단 등록하고 서비스 신청해서 CLIENT-ID를 받으면 된다. 이후에 받은 CLIENT-ID값으로 script 태그에 넣어주면 된다. 내부적으로 id가 map인 요소에 지도를 띄워준다. 지도에 대한 속성 처리 및 이미지 올리는 부분은 다음 글을 참고했다. https://velog.io/@nagosu/React-Typescript%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB.. 2025. 3. 4. [디벨로퍼] 채용 사이트 프로젝트 2 오늘은 메인페이지의 반응형UI를 작업했다(상단 헤더, 채용공고 컨테이너 사이즈, 크기에 따른 이미지 보여주기 등) 앱 개발만 했던 나에게는 생소한 개념인데 TailwindCSS에서 친절하게 사이즈별로 어떤 처리식으로 속성을 먹여야 하는지 준비를 해뒀더라. 기본적으로 모바일 기준의 사이즈로 설정하고 md:~ md사이즈 이상일 때만 어떤 식으로 처리하는 식으로 가능하다. ChakraUI 쪽은 속성을 json 스타일로 잡고서 base: ~, md: ~ 이런 식으로 설정할 수 있다. 간혹가다 CSS가 안 먹히는 경우가 있는데 div 태그에 넣거나, 되는 방식을 찾아서 작업하면 된다. 그 외에 채용공고 상세페이지를 작업하고 있다. 생각보다 UI작업이 쉽지는 않은 것 같다(배치가 어려움...) 2025. 3. 2. [디벨로퍼] 채용 사이트 프로젝트 1 채용 사이트 프로젝트이번에 새로 개발하고 있는 채용사이트 프로젝트이다. NestJS, NextJS로 개발하고 있다. 프로젝트를 시작한지는 2일 되었다. 일단 원티드 홈페이지를 보고 디자인을 따라하고 있다. 똑같이 만들 생각은 없고 디자인/기획상 많이 참고하여 개발할 예정이다. 디자인을 따라서 개발하다보면 프론트/백엔드 개발 실력은 키워질 수밖에 없으니 괜찮다. 클론코딩에 대한 말이 많기는 한데 솔직히 '따라서 만드는 것' 자체가 나쁜 게 아니다. 유튜버 아저씨가 하라는대로 따라치는 수동적인 공부가 나쁜 것이다. 생각해보면 예전부터 게임 모작도 했었고 기존에 만들어진 프로그램 비슷하게 만든 경험이 여럿 있다. 아무튼 '모작' '클론코딩' 자체가 나쁜 것은 아니다(저작권 관련된 부분만 조심하자. 원 서비스.. 2025. 3. 1. 이전 1 2 3 4 다음
