[기초부터 완성까지, 프런트엔드] FE 주니어에게 추천합니다.
2022. 8. 18. 00:55
서평
이 책을 찾기 전.. 개인적으로 프론트엔드 공부를 하면서 여러 서적을 봤다. React를 다루는 기술, Do it! React Native, 모던 자바스크립트 Deep Dive 등 근 2년동안 프론트엔드에 관한 여러 책을 보았던 내가 부족했던 점이 무엇인지 생각해봤다. 너무도 당연한 기본기가 부족이였다. 내가 그동안 라이브러리나 프레임워크 사용을 그냥 써왔나? 라고 느껴서 현타가 왔었던 시간이 있었다. 절망의 계곡을 깨닫고 난 후, 기초적인 부분을 케어하기 위해서 고민을 많이했었다. 그래서 나에게 지금 필요한 것이 무엇일까 생각했고 이것에 딱 알맞는 책을 찾아서 서평을 적어보았다. 🤗 이 책이 필요했던 내 상태(?) 내 현재 상황을 생각하고 다음과 같이 정리했다. 이론적인 내용은 어느 정도 감이 잡힌 상..
자동 문자 전송 시스템 만들기
2022. 8. 18. 00:47
개발
깃허브 프로젝트 링크를 들어가서 확인하면 코드를 볼 수 있습니다. 프로젝트를 선택한 이유 작년 3월부터 멋쟁이사자처럼 8기 멤버 모집을 하게 되었다. 당시 지원자 수는 약 90명 이상 되는 상황 이였으며, 신청 폼에는 연락처를 입력받아 서류 합격, 면접 안내 등 여러가지 내용에 대해서 문자로 안내를 했어야 했다. 운영진은 총 4명으로 여러가지 방법을 생각해보았지만 결국 최선의 방법은.. 인원수 대로 n분 하는 뿐 이였습니다. 중간에 연락처 적으면서 꺼버린 실수로 자주 일어나서 정신나갔다. 그리고 무엇보다 연락처를 하나하나 저장해서 전달하는 자체가 너무도 번거로웠고, 카카오톡 친구로도 떠서 불편했다... 탈락자분들도 많은데.. 애매모한 상황.. 그래서 작년 2020년 3월때를 생각하여, 이번에는 어느 정도..
멋쟁이사자처럼 시간표 앱 만들기 #5 (최종)
2022. 8. 18. 00:44
개발/React
해결 개발 현황 Auth 인증 페이지 생성 ( 운영진, 멤버 코드 분리 ) Auth 인증 Logic 구현 ( URL 접근 X , Redux State 이용) 따로 계정생성을 해서 만들지 않은 이유는 큰 필요성을 느끼지 못했다. 멤버와 운영진의 코드를 따로 분리시켜 화면을 달리하는 방법을 선택했다. ** 왜냐하면 멤버가 출석체크 관리 페이지에 들어가면 크나 큰 오류이기 때문!** 인증방식 Redux를 활용하여 간편한 인증절차를 만들었다. 접속 코드 { setcode(e.target.value) }} /> 이 페이지는 🦁멋쟁이사자처럼 at 순천향대학교 출석부 입니다. 접속하기 해당 코드에서 인증페이지에서 폼에 대한 구성 현황이다. 코드를 입력받는 부분에 onChange 함수를 인라인으로 구현하여, Value..
멋쟁이사자처럼 시간표 앱 만들기 #4
2022. 8. 18. 00:42
개발/React
해당 프로젝트는 이곳 에 들어가시면 확인 가능하며, 개인 미니 프로젝트 입니다. 완료 구현 총 출석 현황 리스트 페이지 구현 출석현황 페이지 이동 버튼 SidePanel_Header에 추가 왼쪽 / 오른쪽 스크롤 구현 *하루만에 2번이나 갈아엎은 피땀눈물 가득했던 AttendanceList 페이지였다. * 바둑판 UI가 얼마나 구현이 힘들고, 고려해야 할 사항이 많은지 느꼈다...^^ 나는 행/열 둘 다 계속 변화되어서 적용되는 페이지를 구성해야 했다. 사실 모양 상 테이블 형식의 표 모양이기 때문에... table 태그를 이용해서 구성을 시작했다. 이 선택은 고통의 시작이였다. 페이지 구성방식에 대해서 간단하게 과정을 적어보도록 하겠다. 종합 출석 리스트 구현하기 - 이용 사실이 table 태그는 정말..
멋쟁이사자처럼 시간표 앱 만들기 #3
2022. 8. 18. 00:39
개발/React
파일 구성 파일 디렉토리에 대해서 간단하게 구상하여 명시해보았다. 파일 Components 및 Redux 구성 📦src ┣ 📂components ┃ ┣ 📂AuthPage ┃ ┃ ┗ 📜AuthPage.js ┃ ┗ 📂MainPage ┃ ┃ ┣ 📂MainPanel ┃ ┃ ┃ ┣ 📜AttendList.js ┃ ┃ ┃ ┣ 📜MainHeader.js ┃ ┃ ┃ ┣ 📜MainList.js ┃ ┃ ┃ ┗ 📜MainPanel.js ┃ ┃ ┣ 📂SidePanel ┃ ┃ ┃ ┣ 📜SideFooter.js ┃ ┃ ┃ ┣ 📜SideHeader.js ┃ ┃ ┃ ┣ 📜SideList.js ┃ ┃ ┃ ┗ 📜SidePanel.js ┃ ┃ ┗ 📜MainPage.js ┣ 📂redux ┃ ┣ 📂actions ┃ ┃ ┣ 📜schedule_a..
멋쟁이사자처럼 출석부 앱 만들기 #2
2022. 8. 18. 00:37
개발/React
필요 기능 정리 혼자 진행하는 토이 프로젝트이니 기본 UI구성에 대해서 고민을 많이 했다. 멤버 정보가 보여야 할까? 벌금 자동 계산? 페이지가 몇개? 필요점을 정리를 해봤는데, 참고 할 만한 UI를 찾기 어려웠다. 날짜 선택(세션 날짜)을 하여서 해당 세션 출석체크가 필요함. 벌금 등에 대해 기준을 세워서 벌금을 자동으로 계산해야함. 벌금을 냈으면 정산하여 벌금을 감하는 시스템이 필요함. 지금까지는 여기까지의 구성만 생각해보았다. 개발 중 필요한 구성이 생긴다면 추가 할 예정이다. 페이지 구성하기 나 같은 경우 2가지나 1가지 페이지를 통해, Panel을 나누어서 화면에 띄울 생각이다. 간단하게 Adobe XD를 통해서 레이아웃을 만들어보았다. 멤버 리스트 페이지 왼쪽에는 아기사자 멤버 리스트, Cli..
멋쟁이사자처럼 출석부 앱 만들기 #1
2022. 8. 18. 00:35
개발/React
운영진 스터디 중.. 멋쟁이사자처럼 9기 운영진 스터디 활동을 진행하면서, 2020년 1월 1일자를 시작으로하여, 벌써 2주차에 접어들었다. 각자 선정한 기술 스택을 가지고 운영진들끼리 팀을 꾸려서 공모전 나갈 수준의 실력을 키워서 준비중이다. 프레임워크 및 언어를 선택하여 각자 서로 다른 부분을 공부하고 있다. Django REST API, Node.js, React.js, Flutter 정도를 각자 다루고있다. 결국에는 단순하게 이론 및 실습 공부를 해도 실전에서 사용 할 수 있을까? 라는 의문이 들었던 참에, 같이 스터디를 진행하는 운영진 팀원이 토이프로젝트를 제안했다. *배운지 2주밖에 안됐는데 가능하려나..? *라는 고민이 먼저 들었다. 진행하자고 하는 프로젝트 주제가 흥미롭고 간단해보여서 토이..
DND 6기 회고
2022. 8. 18. 00:30
회고
🤗DND를 시작하기 전.. DND를 시작하기 전에도 원래 개발 커뮤니티에 참여하는 걸 좋아했다. SOPT 29기, UNIT UPF, 멋쟁이사자처럼 대학 8/9기 등.. 그러나 21년 하반기에는 건강 상의 이유로 개발 커뮤니티 활동은 쉬고 깊이 있는 공부를 위해 프로그래머스 데브코스 과정에 집중하여 마무리했다. 그러면서 2022년 02월 대학 졸업을 하게 되었고, 취준 기간을 자소서와 코테, CS 공부 등 이렇게 시간 보내기는 아쉽다고 생각했다. 그래서 다른 개발 커뮤니티에 가입해 새로운 프로젝트도 진행해보고 싶어서 찾던 중, Wanted에서 공고가 올라온 걸 확인했다. 보자마자 신청서를 썼고 Web Frontend로 신청했다. DND를 선택한 이유? 이유는 크게 3가지였다. 2개월이라는 짧지만 알찬 구성..