오늘 공부

우아한테크코스 3기 프론트엔드 선발과정의 최종 테스트를 경험하고 작성한 후기입니다. 12월 19일 토요일 우아한테크코스 3기 선발과정의 마지막 단계인 최종 테스트가 치러졌다. 사실 프리코스를 시작할 때만 하더라도 이전 기수에서 그래 왔듯이 최종 테스트는 오프라인으로 볼 줄 알았다. 그래서 프리코스 3주 차 미션은 오랜만에 노트북을 꺼내 미리 세팅을 하며 진행해야겠다는 생각도 했다. 하지만, 코로나가 점점 심해지더니 결국 프리코스 마지막 미션 안내와 함께 최종 테스트는 온라인으로 진행한다고 공지해주셨다. 요약 방식은 프리코스와 동일 (미션 저장소 Fork -> branch 생성 -> 요구사항에 맞춰 구현 -> 미션 저장소로 Pull Request -> 미션 완료 메일 보내기) 각자 집에서 온라인으로 진행 ..

우아한테크코스 3기 프론트엔드 선발과정에 포함된 3주간의 프리코스에 참여하고 작성한 후기입니다. 글을 쓰는 지금은 이미 최종 테스트까지 끝났지만, 많은 것을 배운 3주 였기에 뒤늦게라도 프리코스 후기를 남겨본다. 각 미션에 대한 자세한 내용은 링크된 저장소에서 볼 수 있으니, 매주 미션을 진행하며 공부한 내용위주로 작성할 것이다. 이 글이 미래에 우아한테크코스에 지원하게 될 누군가에게 도움이되면 좋겠다. 1주 차 - 숫자 야구 게임 목표: 함수와 메서드를 분리 요구사항 들여쓰기 depth 2까지 함수는 한가지 일만 하도록 최대한 작게 이런 제약사항을 두고 코드를 짜본 것이 처음이라 즐거운 경험이었다. 들여쓰기 depth를 최대 2로 맞추는 것은 생각보다 어렵지 않았다. 첫 번째 미션의 기능이 많은 편이 ..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 4주차 미션 구현 기능 Todo App API를 이용하여 TodoList 구현하기 할 일 목록 불러오기 할 일 추가하기 할 일 완료여부 토글하기 할 일 삭제하기 특정 사용자의 할 일 전체 삭제하기 Users 컴포넌트를 만들고 선택된 사용자의 할 일 보여주기 API가 느린 경우의 인터렉션 처리하기 미니 트렐로 - 드래그 앤 드롭으로 할 일 완료여부 토글하기 (추가) ErrorUI 컴포넌트 만들기 구현하며 신경쓴 부분 기존 미션 코드를 참고하지 않고 빈 파일에서 하나씩 구현하며 지난 미션 내용들 복습하기 2주차 세션시간에 배운 시멘틱한 HTM..

지난 금요일 3시 우아한테크코스 3기에 1차 합격했다는 메일을 받았다! 우아한테크코스는 1, 2기에 웹 백엔드 분야만 모집했었는데, 이번 3기를 모집하며 웹 프론트엔드 분야가 추가되었다. 프론트엔드 개발자가 돼야지! 하고 생각만 했지 뭐부터 공부할지 막막해서 프론트엔드 로드맵도 찾아보고, 채용공고에 기술 스택에 React가 많이 보이니 React도 좀 건드려보고... 역시 기본기가 너무 부족한 것 같아 Javascript 스터디도 참여해보고 하던 중 아주 혹하는 소식이었다. 이미 졸업을 했기 때문에 긴 교육기간이 마음에 걸려 지원하는데 고민을 조금 했다. 하지만 오히려 아직 취직 안 한 지금이 이런 교육 프로그램에 참여해 걱정 없이(전혀 없는 건 아니지만...) 공부만 할 수 있는 마지막 기회라는 생각이..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 3주 차 미션 API를 이용하여 움짤 검색기 만들기 async ~ await 사용하기 검색창에 debounce 적용 검색 히스토리(중복 X, 히스토리를 선택하여 검색) 구현 하기 1. 움짤 검색기 만들기 처음엔 아래와 같은 boilerplate가 주어진다. 간결하지만 검색을 할 수 있는, 실제 작동하는 코드이다. 함수 내 모든 코드가 연결되어 있는데, 한 뭉치지만 하는 일이 많다. ;(function() { document .querySelector('#search-keyword') .addEventListener('keyup', func..

이 글은 생활코딩의 React class & function style coding 수업을 듣고 정리한 내용입니다. 수업내용 React는 class와 function 두 가지 방법으로 작성할 수 있다. class 방식은 React의 모든 기능을 사용할 수 있지만 해당 문법을 모두 알아야 하고, function 방식은 간편하지만 state를 만들거나 life cycle API를 사용할 수 없이 상위 컴포넌트가 시키는 일만 해야 했다. 하지만, hook이 도입되면서 function 방식도 내부적으로 상태(state)를 다루고, 라이프 사이클에 따른 작업을 정의할 수 있게 되었다. 그러면서 함수형의 간편함은 그대로 가진다. 생활코딩의 React class & function style coding 수업은 같은..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 2주차 미션 미션 내용 할 일 추가, 삭제, 완료 기능 추가 InputTodo 컴포넌트화 TodoCount 컴포넌트 추가 Event Delegate 커스텀 이벤트 localStorage에 할 일 저장 구현 결과 미션 진행하며 배운 것 할 일 삭제 시 삭제할 할 일이 todoData 중 어떤 것이지 알기 위해 데이터 속성을 이용했다. this.createTodoHTMLString = ({ text, isCompleted }, index) => { return ` ... Todo 삭제 ` } this.deleteTodoEvent = $targ..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 1주차 미션 (필수) TodoList 컴포넌트 작성하기 (추가-1) error 처리하기 (추가-2) 한 페이지에서 TodoList 컴포넌트 여러개 만들어 보기 (추가-3) Todo에 isCompleted 필드 추가하고 완료된 항목에 삭선 처리하기 (추가-4) setState() 함수 만들고 상태변화 시 새로 렌더링하기 학습포인트 컴포넌트의 역할과 구조 이해하기 this 다양한 오류 발생 상황에 대한 error 처리 모든 상태 변화는 setState()에서! 첫 미션은 어렵지 않아서 온라인세션 끝나고 그 날 밤에 다 해서 올렸다. 너무 쉬운..