Giter Club home page Giter Club logo

wanted-pre-onboarding-challenge-fe-1's Introduction

wanted-pre-onboarding-challenge-fe-1 (프리온보딩 프론트엔드 챌린지 8월)

3ab0cb54

프리온보딩(Pre-Onboarding)

  • 프리(Pre) = 미리, 사전에
  • 온보딩(Onboarding) = 신규 직원이 조직문화, 업무에 빠르게 적응할 수 있도록 돕는 과정

계기 🔥

  • 과락하지 않는 코드를 작성하고싶기 때문
  • 좋은 코드와 나쁜 코드의 기준을 알고 싶다.
  • 기술 과제 면접 질문 대비
  • 백엔드 기술자가 작업하는 것과 프론트엔드 개발자가 작업하는 차이를 알고싶어서
  • 커리어 쌓기

소개 🙋

  • 3년차 막 지난 백엔드 개발자
  • 프론트엔드 기술도 조금씩 다룸
  • 3년동안 검색엔진, 웹 프로젝트, 웹 데이터 크롤링 프로젝트 경험

TODO 📚

Assignment 1 - Login / SignUp

  • /auth 경로에 로그인 / 회원가입 기능을 개발합니다
    • 로그인, 회원가입을 별도의 경로로 분리해도 무방합니다
    • 최소한 이메일, 비밀번호 input, 제출 button을 갖도록 구성해주세요
  • 이메일과 비밀번호의 유효성을 확인합니다
    • 이메일 조건 : 최소 @, . 포함
    • 비밀번호 조건 : 8자 이상 입력
    • 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 해주세요
  • 로그인 API를 호출하고, 올바른 응답을 받았을 때 루트 경로로 이동시켜주세요
    • 응답으로 받은 토큰은 로컬 스토리지에 저장해주세요
    • 다음 번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트 시켜주세요
    • 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트 시켜주세요

Assignment 2 - Todo List

  • Todo List API를 호출하여 Todo List CRUD 기능을 구현해주세요
    • 목록 / 상세 영역으로 나누어 구현해주세요
    • Todo 목록을 볼 수 있습니다.
    • Todo 추가 버튼을 클릭하면 할 일이 추가 됩니다.
    • Todo 수정 버튼을 클릭하면 수정 모드를 활성화하고, 수정 내용을 제출하거나 취소할 수 있습니다.
    • Todo 삭제 버튼을 클릭하면 해당 Todo를 삭제할 수 있습니다.
  • 한 화면 내에서 Todo List와 개별 Todo의 상세를 확인할 수 있도록 해주세요.
    • 새로고침을 했을 때 현재 상태가 유지되어야 합니다.
    • 개별 Todo를 조회 순서에 따라 페이지 뒤로가기를 통하여 조회할 수 있도록 해주세요.
  • 한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현해주세요
    • 수정되는 Todo의 내용이 목록에서도 실시간으로 반영되어야 합니다

추후 수정 및 공부할 점 👨‍💻

  • 공부
    • Componet의 개념 파악
    • 더 좋은 비즈니스 로직 구조 공부
    • React 라이프사이클
    • Typescript 의 문법 및 동작 구조
  • 수정
    • 프로젝트 구조 변경
    • 프로젝트 디렉토리 단순화

wanted-pre-onboarding-challenge-fe-1's People

Contributors

applan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.