Project5 MySurpin 프로젝트 회고 My Surpin 🏄🏻♀️🏄🏼♂️ 팀원이 결정되고 아이디어를 정할 때만해도 2주면 넉넉한 시간이니 여러 도전들을 해볼 수 있겠구나 하고 생각했는데 그냥 정말 훅 지나가버렸다. 이번 프로젝트 때 나는 팀장 역할을 맡게 되었고, 프론트엔드 쪽에 집중했다. 페어 프로그래밍은 많이 경험해봤지만, 4명이 함께하는 프로젝트는 처음이었다. 그래서인지 각자 작성했던 클라이언트, 서버 코드를 연결시켰는데 정상적으로 작동했을 때, 그리고 배포 후 팀원들과 우리의 도메인에서 만났을 때 뭔가 당연한 일지만 더 기쁘고 신기하게 와닿았던 것 같다. 팀원들 모두 어려운 점이 생기면 바로 공유하는 분위기이고, 배우려는 의지가 강한 분들로 구성되어 다행이었다. 덕분에 문제가 생겨도 빠르게 해결할 수 있었고, 서로 알려주고 배우면서.. 2021. 3. 28. 포켓몬 게임 만들기 (Javascript, HTML, CSS) 한 줄 소개 🕹 포켓볼을 주워 포켓몬을 잡아 경험치를 쌓고, 레벨을 올리는 게임이다. 주요 기능 1. 로그인 화면 입력한 아이디로 게임을 시작할 수 있다. 아이디는 세 글자 이상으로 지정해야한다. 유효성 검사를 통해 글자수를 확인해 세글자 미만일 경우 입력창이 빨간색으로 바뀌며 다시 입력하라는 피드백을 보낸다. 2. 레벨에 따른 테마 변경 & 경험치 얻는 TIP 일정한 경험치가 쌓이면 레벨이 올라가고, 레벨에 따라 테마가 풀 → 바다 → 숲으로 배경과 포켓몬 타입이 바뀌게 된다. 경험치는 포켓몬을 잡아야 올라간다. TIP 1. 포켓몬 포켓몬이 움직이는 속도는 랜덤하게 지정되는데, 경험치를 속도에 비례하게 증가하도록 설정해둬서 빠른 포켓몬을 잡을수록 더 많은 경험치를 얻을 수 있다. TIP 2. 포켓볼 포.. 2021. 1. 23. 날씨 APP 만들기 (OpenWeather API 활용) HTML, CSS, Javascript와 OpenWeather API 이용해 날씨 APP을 만들어 보았다. 앱에 대해 먼저 소개를 해보자면, 사용자가 검색창에 도시명을 입력하면 해당 도시의 온도, 습도, 풍속 등의 날씨 정보와 현재날짜를 아이콘, 사진과 함께 알려주는 앱이다. OpenWeather API는 날씨와 관련된 정보를 제공하는 API인데, fetch를 이용해 서버 요청을 하는 방식으로 데이터를 받아와 활용했다. 이번에도 HTML & CSS의 디자인적인 부분과 Javascript 부분으로 나누어 새로 알게 되었거나 중요한 부분들에 대해서만 간략히 소개해보려고 한다. 최종 완성본 1. HTML & CSS ✔️ input placeholder 색상 변경 검색창 부분을 input 태그로 만들어줬는데, .. 2021. 1. 5. 회원가입 페이지 만들기 (유효성 검사) 회원가입을 하다보면 대부분 id는 8글자 이상, 비밀번호는 숫자/특수문자/영문자를 조합해서 만들라고 한다. 귀찮아서 대충 입력하면, 다시 입력하라는 경고 문구(?)같은게 나온다. 즉, 정해진 형식에 맞게 입력해야만 하도록 조건을 지정해두고, 조건에 맞지 않는 경우에는 다시 입력하라는 피드백을 주는 것이다. 이렇게 입력값이 '유효한지'를 검사하는게 바로 유효성 검사(form validation)이다. 이런 '유효성 검사'를 통해 회원가입을 하는 웹페이지를 만들어봤는데, 자세한 코드는 생략하고 새로 배운 기능이나 기억할만한 것들만 간략히 정리해보려고 한다. 전체적인 과정은 아래와 같은 순서로 진행했다. 1. 목업 만들기 (HTML, CSS) 2. 유효성 검증 함수 구현하기 3. 요소들에 이벤트 연결하기 1... 2020. 12. 25. twittler 목업 (HTML, CSS 하드코딩) 지난주동안 배웠던 내용들을 바탕으로 twitter와 비슷하게 웹페이지를 구현해보는 연습을 했다. 아직 실제 데이터를 자동으로(?) 넣는 방법은 배우지 않아서 HTML에 몇개의 데이터만 일일이 입력하는 식으로 목업만 완성했다! 완성하기까지의 과정 중 기억해둘만한 부분만 기록으로 남겨두려고 한다. (최종적으로 완성된 모습은 여기👈서 볼 수 있다. Change View를 Full Page View로 하고 보는걸 추천한다) Step1. Framework 먼저 프레임워크를 오른쪽처럼 구상했다. 구성은 크게 header, writing-section, contents-section 세 부분으로 나누었다. ✔️ header : 로고, 새로고침 버튼이 포함된 부분 ✔️ writing-section : 글을 작성하는 부.. 2020. 12. 18. 이전 1 다음 반응형
