봉보로봉봉

얼마 전에 1월 동안 운영했던 올해까치를 서비스 종료했다. 리팩토링 막 배포했을 때는 긴 이미지 로딩으로 사용자 경험이 좋지 않았다. 프론트 assets/images 폴더에 이미지를 직접 넣어서 로딩하도록 했는데 같은 이미지인데도 웹에 업로드한 url로 가져오는 것이 로딩이 더 빨랐다. (이 부분에 대해서는 이유를 찾아봐야 할 것 같다.) 수정했어도 여전히 기대하던 속도보다 느려서 레이지 로딩을 적용하기로 했다. react progressive graceful image라는 라이브러리를 사용해 이미지가 완벽히 로딩되기 전에는 저용량의 placeholder를 보여주고 로딩이 완료되면 본 이미지를 보여주도록 했다. 기존 이미지는 아무리 줄여도 용량이 작아지지 않아서 디자이너님께 작은 사이즈의 이미지를 별도로..

원티드 주관 겨울인턴 회사에 지원해 프론트엔드 과제를 진행했다. 월요일 10시부터 목요일 10시까지 3일의 기간동안 진행됐고, 원본 레포에 PR을 보내 제출했다. 아래는 작성한 PR 내용이다. GitHub repo 필수 수행 항목 1. any 를 사용하지 말고 Type을 지정해 주세요. 컴포넌트와 데이터에 필요한 Type을 선언해 지정해주었습니다. 에러를 띄우지 않는 부분에서는 타입스크립트가 타입을 추론할 수 있도록 했습니다. Type은 /src/types 폴더에 위치해 있습니다. 2. 컴포넌트를 분리하고, 적당한 폴더를 만들어 파일들을 배치하세요. /src의 하위 폴더들을 생성하여 파일을 위치시켰습니다. /apis : api 통신과 관련된 파일을 담는 폴더입니다. /hooks : 커스텀 훅을 담는 폴더..

올해까치 올해까지?"올해까치" 까치와 함께 올해 목표를 세워보고 알찬 한해를 보내보세요. thisyearkkachi.netlify.app 프로젝트 소개 신년 목표를 세우고 6개월 뒤 리마인드 하고 싶은 사람을 위한 신년 목표 1개월 시즌 메일링 서비스 제작 기간 : 22.12.09 - 12.28 (약 3주) 서비스 기간 : 22.12.28 - 23.1.31 (약 1달) 팀원 : Design 1명, FE 2명, BE 1명 협업방식 툴 : 피그마, 노션 회의 : 첫 주는 기획 회의를 위해 2-3일에 한번 다 같이 회의 진행, 그 후 단체 회의는 1주에 한 번 진행. 포지션 별로 회의가 필요할 때 개별적으로 약속을 잡아 회의 진행 사용언어 및 개발환경 FE : Vite, React.js, Typescript,..

치킨을 향해 출발 슬랙 커뮤니티 채널에서 보고 상품도 받고 알고리즘도 열심히 풀어보자는 마음으로 참가했다. 마지막 상품인 치킨을 보고 꼬박꼬박 풀었지만 보너스 도장 받는 법을 몰라서 도장이 모자라 치킨은 아쉽게 되었다.. 🥲 그래도 다른 상품들을 여러개 받아서 행복했다...⭐️ 별최몇 주마다 4문제씩 주어졌고 난이도도 다양했다. 2주차부터 별3개가 나오길래 얼마 안 있다가 별5개가 나와서 나는 하나도 못풀겠구나 싶었는데 별2,3개 문제가 자주 나왔고 기억이 맞다면 최고 난이도는 별4개까지 였다. 난이도는 점점 올라가다가 중간쯤에 초기화된 후 다시 올라갔다. 챌린지 기간동안 별3개까지는 어떻게든 풀어보려 했지만 나의 최대는 별 2개까지였던 것 같다........ㅎ.......😭 해설을 봐도 모르는 사람 나..

⭐️모두에게 롤링페이퍼 쓰러 가기 JUSTCODE 6기 롤링페이퍼 JUSTCODE 6기 롤링페이퍼 토이 프로젝트입니다. justcode-6th-rolling-paper.vercel.app 🤔 프로젝트를 시작하게 된 이유 수료식을 앞두고 동기들과 이야기를 하다가 롤링페이퍼를 하는 건 어떻냐는 이야기가 나왔다. 프로젝트를 또 만들기에는 시간이 모자라다고 생각해서 있던 서비스를 이용하기로 했다. 구글에 롤링페이퍼로 검색했을 때 제일 상단에 나오는 서비스를 이용해보려고 했는데 내가 원하던 방식이 아니었다. 롤링페이퍼를 서로 써주려면 동기들 모두가 서비스를 가입하고 자신의 보드를 만들어야 했다. 이렇게 되면 모두들 롤링페이퍼 작성에 참가하지 않을 것 같아서 시간이 촉박하지만 일단 만들어보기로 했다. 🛠 프로젝트 ..

저번에 만들었던 토이 프로젝트에 페이지를 더 추가하고 버그를 고쳤다! 반응형 깨지는 부분 수정 message 페이지 추가 HashRouter로 라우터 변경 저번에는 빨리 배포하느라고 반응형을 추가했음에도 특정 디스플레이에서 깨짐이 있었다. (내 폰... 아이폰 mini 12.. 🥲) 그래서 반응형을 수정했다. 링크를 공유했을 때 썸네일도 뜨도록 index.html에 meta태그도 추가했다. 작성한 메세지를 볼 수 있도록 하는 message 페이지를 추가했다. 파이어베이스에 추가했던 데이터들을 받아와서 작성자의 이름과 메세지들을 보여주는 페이지이다. 메세지가 있는데 작성자의 이름이 빈 문자열이라면 익명이라는 이름으로 변경하여 출력했고, 메세지가 없는 사람들은 보이지 않도록 했다. 지금은 내 친구들의 메세지..

🛠 사용 기술 및 기간 22.10.20 - 22.10.21 react react-dom react-router-dom react-scripts dotenv firebase styled-components styled-reset react-icons js-confetti 🏗 프로젝트 구조 public : 파비콘과 이미지 파일 폴더 src : index.html과 package.json 등 중요 파일 폴더 src/pages/home : 랜딩 페이지와 메인 페이지 파일 폴더 src/pages/form : 설문 페이지와 설문 제출 완료 페이지 파일 폴더 src/styles : 전역 스타일 파일 폴더 👉 프로젝트 실행 방법 터미널에서 프로젝트를 클론 받습니다. git clone https://github.com/..

✅ 과제 해당 월에 예약 가능한 목록을 보여줍니다. 예약자, 이름, 예약 시간, 예약 종류를 이용하여 예약합니다. 중복 예약은 불가합니다. 노쇼 예약자는 예약이 불가합니다. 예약 번호나 예약자 이름으로 예약 목록 조회가 가능해야 합니다. 🗓 진행 기간 기간 : 2022.10.15 ~ 2022.10.19 🔗 레포 주소 및 배포 링크 깃헙 레포 배포 링크 🏗 프로젝트 파일 구조 public/data: Mock 데이터 폴더 src/pages/reservation: 예약 페이지 파일 폴더 src/pages/inquiry: 예약 조회 페이지 파일 폴더 src/utils: 함수 파일 폴더 src/styles: 전역 스타일 폴더 🛠 적용 기술 JavaScript React.js React 관련 라이브러리 react-..