[원티드] Pre-onboarding Frontend challenge_첫번째 과제

이번주 화요일 첫번째 세션이 있었고 그에 대한 과제가 있었다. 첫번째 과제는 지난 번 사전 과제의 3번 문제를 보강해서 블로그에 작성하는 과제였고, 두번째 과제는 [ React와 History API 사용하여 SPA Router 기능 구현하기 ] 였다. 첫번째 과제는 지난 블로그에 내용을 작성했기에, 이번 글에서는 두번째 과제에 대한 이야기를 해보겠다. 저보고 라이브러리를 만들라구요..? CRA를 통해 구현한 React 프로젝트는 SPA기 때문에 Routing을 위한 라이브러리를 사용했었다. 가장 많이 사용하는게 react-router-dom 이라는 라이브러리인데, 이 라이브러리가 하는 기능을 구현하는 것이 과제였다. - root 주소로 진입했을 때는 root 페이지가 렌더링 / about 주소로 진입했..

• format_list_bulleted Develop/Challenge
• · 2023. 7. 10.
• textsms

[원티드] Pre-onboarding Frontend challenge_사전과제

누군가의 추천으로 말로만 듣던 원티드 프리온보딩 챌린지를 신청하게 되었다. 사실 조금은 가벼운 마음으로 신청했던 것도 있었지만, OT 이후 첫번째 강의를 듣고 나서는 이거 만만치 않은 챌린지가 되겠구나 하는 생각이 들었고, 다시한번 바짝 내 위치에 대해서 경각심을 갖게 됐다. 그래서 사전과제부터 느리지만 빠르게 끌어올려볼까 한다..! 사전과제 이번 프리온보딩에서는 Next.js를 중점적으로 다룬다고 했다. 마침 관심이 있었던 주제고, 회사에서도 Next.js를 이용해서 프로젝트를 진행하고 있으니 많은 도움이 되겠다 싶었는데 사전과제부터 심상치 않았다. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리..

• format_list_bulleted Develop/Challenge
• · 2023. 7. 7.
• textsms

[RESAT] Farming Challenge 프론트엔드 개발자편_epilogue

총 10일 동안 진행했던 RESAT Farming challenge가 종료됐다.엄청 빡세진 않았지만, 그래도 매일매일 정해진 시간 안에 무언가를 해야 한다는 부분 때문에상당히 즐거운 압박으로 다가와서 재밌게 했던 것 같다. 결과적으로 이번 챌린지에서 어떤 부분들이 좋았고, 어떤 부분들이 좀 아쉬웠는지 정리를 해보고자 한다. 전체 미션 돌아보기이번 챌린지는 프론트엔드 개발을 하면서 기본이 될만한 UI를 구축해 보는 미션들로 구성되어 있다.페이지 클론부터 시작해서 로그인 페이지를 만들어 보는 것까지 총 7가지 기능을 구현하는 미션으로 구성되어 있었다. 이번 챌린지를 진행하면서 대략적으로 데이터를 정리해 봤다. [ 가장 재밌었던 챌린지 ] - 5일 차 캘린더 만들기React로 캘린더를 만들 때 라이브러리를 사..

• format_list_bulleted Develop/Challenge
• · 2023. 7. 5.
• textsms

[RESAT] 10일차 미션 : 로그인 UI 만들기

오늘은 RESAT 파밍 챌린지 10일차다.어제는 반응형 네비게이션 바를 만드는 미션이었고,기존에 달력이나 캐러셀 보다는 쉬운 부분이라 빠르게 마무리 할 수 있었다. 오늘 미션은 [로그인 페이지 만들기]다 미션 내용- ID, PW 값을 입력해서 로그인을 할 수 있는 UI 구현하기- 임의로 지정해 둔 ID와 PW 값에 일치할 경우 로그인이 되었다는 팝업 알림이 나오도록 구현- 임의로 지정한 ID와 PW에 일치하지 않을 경우 일치하지 않는다는 팝업 알림 나오도록 구현 이번 미션은 일하면서도 계속 만들었던 부분이라서 금방 할 수 있을 것 같다고 생각했다.좀 걸리는 부분이라고 한다면 팝업 알림이 나오도록 구현하는 부분?사실 이건 alert 메서드 사용해서 해도 되지만, 토스트 팝업 형태를 원해서 이 부분 구성하는..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 30.
• textsms

[RESAT] 9일차 미션 : 반응형 네비게이션 바 만들기

오늘은 RESAT 파밍 챌린지 9일 차다.어제까지는 캐러셀과 관련된 3개 미션을 완료했다.오늘은 [반응형 네비게이션 바]를 만드는 미션이었는데,반응형은 자바스크립트 기능 말고도 CSS가 함께 부여가 되어야 하는 거라 조금 까다롭게 느껴졌다.  미션 내용- 네 가지 메뉴가 있는 네비게이션 바 구현- 화면 크기가 일정 비율 이상 줄어들면 네비게이션 바가 햄버거 메뉴로 변경- 햄버거 메뉴 안에 기존 네 가지 메뉴 네비게이션 바 나타나기 이번 미션은 브라우저의 크기에 따라 네비게이션 바를 다르게 만드는 미션이었다.실제 페이지에서도 굉장히 다양하고 유용하게 쓰이는 부분이라 미션 보자마자 꽤 재밌겠다라는 생각을 했었던 부분이다. 여기서 추가할 만한 부분을 생각해 보면 - 메뉴 호버 애니메이션 사실 아직 많이 생각 ..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 30.
• textsms

[RESAT] 8일차 미션 - 캐러셀 만들기 (3)

오늘은 RESAT 파밍 챌린지 8일 차다.캐러셀 기능 구현하기의 마지막 일자인데, 이번 미션은 어제 예상했던 미션과는 달랐다dot 미리 안 만들길 잘했다. 미션 내용- 기존 미니인턴 클론 페이지에 이미지 슬라이드 기능 적용하기- 이미지 내부 글은 이미지가 아닌 마크업으로 작성하기 이번 미션은 2일 차에 고생해서 만들었던 클론 페이지에[이미지 슬라이드 기능]을 붙여보는 미션이었다. 어제 예상했던 게 완전히 빗나가긴 했지만, 이번 미션은 생각보다 매우 쉬울지도..?그럼 추가할만한 기능들을 리스트업 해서 이걸 해봐야겠다 ㅎㅎ - dot 만들기- dot 클릭 시 해당 순서에 있는 이미지로 이동 일단 위에 작성한 두 개를 필두로 해서 슬슬 적어봐야지..ㅎㅎ  구현 화면기존에 있는 페이지에 만들어 둔 기능을 적용하..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 29.
• textsms

[RESAT] 7일차 미션 - 캐러셀 만들기 (2)

오늘은 RESAT 파밍 챌린지 7일 차다.어제부터 해서 캐러셀을 만드는 미션이었는데, 어제는 정말 캐러셀 기능에서 딱 필요한 기능이었고오늘은 기본 캐러셀에서 추가 기능들이 적용된 미션이다.  미션 내용- 이미지가 2초 간격으로 자동 슬라이드 되는 기능 구현- 슬라이드 끝 부분에서 슬라이드 이미지가 첫 번째 이미지로 순환 이번 미션에는 어제 추가 기능으로 구현하려 했던 자동 슬라이드의 기능을 구현하라고 되어있었다.예상했으면 미리 해둘걸 싶으면서...여기서 요구하는 조건 외에 나중에 추가하면 좋을 기능을 리스트업 해보겠다. - dot 만들기- dot 클릭 시 해당 순서에 있는 이미지로 이동 이번에는 예상하고 미리 한번 만들어 봐야겠다..!  중점 구현 사항const autoSlide = () => { au..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 28.
• textsms

[RESAT] 6일차 미션 - 캐러셀 만들기 (1)

오늘은 RESAT 파밍 챌린지 6일 차다.지난주까지 클론 코딩, 타이머, 투두 리스트, 캘린더까지 총 4개의 기능을 만들었다.이번 미션은 [캐러셀 만들기]로 총 3일 동안 순차적으로 이어지는 미션인데캐러셀을 3단계로 만드는 거라서 그에 맞게 나눠봤다.  미션 내용- 여러 개의 이미지가 있는 슬라이더 (캐러셀) 구현- 다양한 크기의 이미지가 넣어도 동일하게 동작을 하도록 구현- 슬라이드 양 옆에 화살표를 통해 이미지가 움직이도록 구현 이번 미션은 딱 캐러셀의 기본 기능만 있는 정도였다.이 기능을 구현할 때 가장 중심이 되는 부분은 아무래도[ 버튼을 누르면 이미지가 이동한다]이게 가장 핵심이 되는 기능이 아닐까 싶다.  여기서 요구하는 조건 외에 나중에 추가하면 좋을 기능을 리스트업 해보면 - 자동 이미지 ..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 27.
• textsms

[RESAT] 5일차 미션 - 달력 만들기

오늘은 RESAT 파밍 챌린지 5일 차다.어제 미션은 To-Do List를 만드는 미션이었다.단순하게 할 일만 적는 게 아니라 이것저것 추가 미션이 있어서 조금 복잡하긴 했지만이거 까지는 꽤 괜찮은 것 같다. 근데 이번 미션인 [달력 만들기]가 상당히 빡셀것 같다.. 미션 내용- 캘린더 구현- 화살표를 누르면 현재 월 기준 전 달 혹은 다음 달로 넘어가는 기능 구현- 일마다 선택 가능하고, 선택 시 메모를 작을 수 있는 창 띄우기- 메모 작성 및 저장 기능 구현- 작성한 날짜에는 메모가 있다는 표시가 되도록 구현- 메모를 작성한 날을 누를 경우 이전에 작성한 메모장 노출- 메모장에 기록한 내용 수정 이번 미션은 단순 캘린더를 구현하는 것을 벗어나,일자 별로 메모를 기록할 수 있도록 구현하는 기능도 있었다..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 24.
• textsms

[RESAT] 4일차 미션 - ToDo List 만들기

오늘은 RESAT 파밍 챌린지 4일 차다.어제 미션은 타이머를 만드는 미션이었는데, 그렇게 어렵거나 하지는 않았다.다만 역시나 블로커는 바닐라 자바스크립트...앞으로 더더 복잡해질 것 같은데 시간만 너무 오래 안 걸렸으면 좋겠다... 아무튼 오늘 미션은 [To Do List 만들기]다. 미션 내용- 할 일을 작성하는 영역 구현- 할 일 별로 우선순위를 지정하도록 구현- 할 일과 우선순위를 지정하고 추가 버튼을 누르면 할 일 리스트가 생성- 생성된 할 일은 수정이 가능하도록 구현- 할 일 리스트를 했는지 안 했는지는 리스트 앞 체크박스로 확인- 할 일 리스트를 전체 / 완료 / 미완료로 정렬하도록 구현 이번 미션은 여러 가지 요구 조건이 많았다. 우선 To-Do List에서 가장 기본이 되는 기능은 아무래..

• format_list_bulleted Develop/Challenge
• · 2023. 6. 23.
• textsms