[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

[RESAT] 3일차 미션 - 타이머 만들기

오늘은 RESAT 파밍 챌린지 3일 차다.어제 미션은 페이지 클론 코딩이었는데 오랜만의 클론 코딩이었고,더군다나 HTML, CSS로만 만들어야 하는 게 꽤 귀찮은 작업이었다.그래도 오늘부터는 JS를 활용한 기능을 구현하는 거라 UI는 크게 신경 쓰지 않아도 되겠다! 오늘 미션은 [타이머 만들기]다. 미션 내용- 시간을 입력할 수 있는 영역 만들기- START 버튼을 누르면 1초씩 빠지도록 구현- STOP 버튼을 누르면 시간이 멈추고, 다시 START 버튼을 누르면 그 시간에서 1초씩 흐르도록 구현- RESET 버튼을 누르면 시간, 분, 초가 모두 00으로 초기화되도록 구현 이번 미션은 지난 미션과는 다르게 Javascript로 실제적인 로직을 구성해서 기능을 구현하는 미션이었다. 타이머 라고 한다면 스톱..

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

[RESAT] 2일차 미션 - 미니인턴 클론코딩

오늘은 RESAT 파밍 챌린지 2일 차다.오늘부터 본격적으로 코드를 통해 미션을 해결하고 결과물을 제출해야 한다.오늘 미션은 [클론 코딩]이다. 미션 내용- HTML, CSS를 활용해 미니인턴 메인 페이지 클론하기- 이미지 슬라이드 (캐러셀) 기능은 구현하지 않음 프론트엔드 개발자라면 해봐야 하는 UI 라길래 뭘까 했었는데 시작부터 클론코딩이다사실 이게 제일 힘든 거 같다. 나는 React를 주로 사용했기에, React로 만들면 되지 않을까 싶었는데혹시나 해서 어떤 스택으로 작업해야 하는지를 물어보니 '가급적' HTML, CSS, Javascript만 사용해서 해달라고 하기에내 나름의 고난의 길을 걸어가야 했었다... 진짜 React 익숙해지면 바닐라 자바스크립트는 진짜 어색해지는 것 같다.  구현 중점..

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