Front-End/Project6 코드스테이츠 파이널 프로젝트 회고 배포 링크 깃헙 링크 소개 링크 마지막 프로젝트가 끝났다😭😭😭 2주 프로젝트보다 만족한 점들도 있지만, 또 아쉬웠던 점들도 많았다. 4주 간 진행하며 이번에도 많은 것들을 배울 수 있었으며 이를 정리하는 시간을 가져보려 한다!!! Scraplan(스크랩플랜)이란? 우리 팀의 프로젝트 주제는 지도를 기반으로 해당 장소의 다양한 즐길거리를 큐레이션 형식으로 제공하고, 해당 큐레이션을 이용해 나만의 일정을 편리하게 관리할 수 있는 서비스다. (plan을 scrap 하세요~!) 비회원은 다른 사람의 일정을 구경, 카카오톡으로 공유, 일정을 직접 만들어볼 수도 있다. 거의 대부분의 기능을 사용할 수 있다!! 하지만 저장을 하려면 회원가입을 하도록 유도했다. 후후.. 실제 프로젝트 결과들을 보자면 우선 메인페이지에.. 2021. 5. 1. 2주 프로젝트 회고, My Surpin 코드스테이츠에서 몇 달간의 이머시브 과정을 지나 드디어 첫 프로젝트를 완료했다. 첫 프로젝트인 만큼 아쉬운 부분, 힘든 일이 많았지만 좋은 팀원들 덕분에 2주라는 시간을 재밌게 보낼 수 있었다! 프로젝트에 대한 소개와 느꼈던 점을 정리하기 위해 회고글을 작성해보려 한다. 깃헙링크 (소개 글은 Github에 더욱 자세히 되어있습니닷!) 배포링크 My Surpin🏄♂️ 이란?! 당신만의 북마크를 만드세요! My Surpin는 웹 서핑(Surfing🏄♂️)을 하면서 마음에 드는 사이트를 핀( Pin📌)을 꽂아 고정한다는 뜻을 가지고 있다. 즉, My Surpin = My + Surfing🏄🏼♂️+ Pin📌의 합성어다!! 인터넷에는 정말 유용한 사이트들이 많다! 이런 사이트들을 기억하기 위해 우리는 보통 .. 2021. 4. 1. 첫 React Twittler (+ 개념 정리) 코드스테이츠 과정 중 몇 번이나 만들었던 Twittler를 이번에는 그 유명한 React로 만들어보는 시간이다!!! 공식 사이트에서 몇 번이나 봐도 직접 적용하기가 너무 어렵다... 그래서 과정마다 기록을 남겨 헷갈리는 개념들을 정리해보고자 한다. (기능 구현에만 신경을 써서 CSS는 건드리지도 않았다..ㅎ) React 준비 1. 기존 폴더에 react 설치 npx create-react-app . 2. 실행 npm start Component 폴더 및 파일 생성 만들기 전, 중요한 개념이 있는데 바로 props와 state다. props vs. state 공통점 리액트에서 컴포넌트가 데이터를 다룰 때 사용하는 개념 차이점 props 읽기 전용(값 변경❌) like 함수 인자 부모 컴포넌트가 자식 컴포넌.. 2021. 2. 12. ChatterBox 만들기 ✅ 설명 클라이언트(chatterBox)에서 채팅 입력칸에 이름과 내용을 적어 제출(POST 요청)을 하면, 서버는 그에 대한 응답(저장)을 한다. 그리고 클라이언트는 다시 서버에게 GET요청을 보내 이를 바탕으로 JS에서 DOM을 구현한다. ✍ 배운 것 지금까지 배운 지식들과 새로 배운 HTTP 개념과 node.js를 이용하여 chatterBox를 만들어 봤다. 이전까진 단순히 JS로 HTML을 조작하는 것만 구현했었다면, 이번에는 직접 서버와 클라이언트를 구현하고 서버에서 데이터를 가져와 클라이언트는 이 데이터를 바탕으로 JS로 HTML을 조작하는 것이었다. 프로젝트를 통해 HTTP 통신 방법과, 이를 위한 node.js 사용법을 조금이나마 이해하고 사용할 수 있었다. 1. HTTP HTTP는 인터넷.. 2021. 2. 8. 회원 가입 (feat. 유효성 검사) 유효성 검사(validation) 유효성 검사란, 간단히 말해 어떤 데이터의 값이 유효한지, 타당한지 확인하는 것을 의미한다. 평소에 아주 쉽게 접하는 회원 가입에서 유효성 검사를 이용한다고 한다. ID는 8 글자 이상(영문, 숫자만 포함) 비밀번호는 8 글자 이상(특수 문자, 영어, 숫자 3가지를 포함) 이메일은 꼭 이메일 형식(@를 꼭 입력!)과 같은 것들 등등.. 오늘은 지금까지 배웠던 HTML, CSS, JAVASCRIPT(+DOM)를 바탕으로 회원 가입 페이지를 만들면서 유효성 검사를 공부해보자. HTML, CSS로 UI구성(페이지 만들기) JAVASCRIPT로 유효성 함수 구현 UI 구성 요소에 함수 연결 조건을 만족하는 지 확인하는 피드백 추가 1. HTML,CSS로 UI구성(페이지 만들기).. 2021. 1. 9. 날씨 APP 구현해보기(feat. Open API) 기능 검색창에 원하는 도시를 '영어'로 입력하면 그 도시의 이름, 온도, 날씨 상태, 날씨를 나타내는 아이콘을 알려준다. (참고로 현재 시간이 밤이라 배경이 일정한데, 낮이 되면 배경이 밝게 된다!!) 오늘은 Open API를 이용해 본인의 지역을 검색하면 현재 날씨를 알려주는 앱을 구현해봤다. 부족한 점, 개선해야할 점도 많고 디자인도 맘에 들지 않지만... 일단 깔끔하게 만들고, 기능을 구현했다는 것에 의의를 둘 것이다! 만들었던 과정들을 정리하면서 '분명히 해봤던 건데 기억이 안나네...?' , '처음 보는거네' 했던 것들도 기록으로 남기려고 한다. ⭐중요했던 것 Open API 이용하기 이번 프로젝트에서 이용한 Open API는 OpenWeatherMap 이라는 곳에서 제공해주는 날씨 API이다... 2021. 1. 5. 이전 1 다음
