프로그래밍/Portfolio Log47 [디벨로퍼] 채용 사이트 프로젝트 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. [NFT Furniture Store] 블록체인 포트폴리오 [작품 이름] NFT Furniture Store Furniture Wallet [작품 소개] NFT Furniture Store는 가구 교환권 NFT를 민팅하여 구매, 판매, 사용할 수 있는 플랫폼입니다. 가구 교환권을 사용하면 메타버스 환경에서 사용할 수 있는 가구를 얻을 수 있습니다. Furniture Wallet을 사용하여 트랜잭션 사이닝, 송금, 계정 복구 등의 작업을 수행할 수 있습니다. 메타버스 환경과 디앱을 제공하는 NFT Furniture Store, 크롬 익스텐션인 NFT Furniture Wallet으로 구성되어 있습니다. [개발 기간] 2023.12.10~2024.01.30 [주요 기능] 1. 회원가입과 로그인 2. 비밀번호 찾기 3. 프로필 - 프로필 수정 - 팔로우 기능 - 방명.. 2024. 1. 30. [Portfolio Log] NFT 가구점 17 오랜만에 글을 쓴다. 사실 개발은 계속 하고 있었는데 귀찮음이 도져서 기록으로 남기지 않았다. 영상 하나 찍어서 올리고 글 20줄 쓰는데 얼마나 걸린다고 그걸 안 하고 있는지 ㅎㅎ;; 트랜잭션 사이닝 처리 이후에, 활동 정보를 출력하도록 처리했다. 활동 항목을 클릭하면 다음과 같은 화면이 나온다. 클라이언트에서 요청한 트랜잭션 요청을 사이닝하고 이에 따른 응답을 전달하는 부분이 작업되었다. (정확히는 app -> background -> content-script -> client로 전달) 트랜잭션 이벤트가 쌓이는 경우 뱃지 수를 카운팅 하고 있다. 또한 트랜잭션 처리 중에는 로딩을 처리하도록 수정했다. 그 외에도 트랜잭션이 쌓인 경우에 대한 처리, 팝업 중복으로 안 뜨도록 처리, 트랜잭션 감지(stor.. 2024. 1. 15. [Portfolio Log] NFT 가구점 16 연락처, 북마크, 네트워크, 계정 등에 대한 storage 처리를 추가했다. Chrome Extension Local storage로 개발을 하기에는 빌드가 너무 오래 걸려서, 인터페이스 함수를 만들고 config 값에 따라 처리를 분기했다. (웹 스토리지와 익스텐션 스토리지를 분기하여 사용) 아마 익스텐션 설정으로 빌드하면 크롬 익스텐션 로컬 스토리지를 이용하게 될 것이다. 또한 계정 생성/임포트시 니모닉 정보로 계정을 생성하는 코드를 작성했다. 이 부분 역시 로컬 스토리지를 연동해놓아서 정상적으로 동작한다. 니모닉 정보는 따로 저장하지 않는다. 중간에 계정을 생성하는 부분은 미리 10개 계정에 대한 정보를 미리 생성하고 로컬에 저장하는 식으로 처리한다. (아마 메타마스크도 이런 식으로 처리하지 않았을.. 2024. 1. 8. 이전 1 2 3 4 5 다음
