개발자로써 새로운 소프트웨어를 제작하는 경우, 그 소프트웨어가 꼭 가져야만 하는 필수적인 기능이 있다. 핵심이 되는 기능은 우선적으로 구현하고 되는지 먼저 확인하는 것이 합당하다. 기술 구현의 타당성은 물론이고 UI/UX와 고객 경험적인 측면도 미리 검증하기 위해 이렇
Koans를 브라우저에서 실행하는 것으로 과제를 시작할 수 있습니다.파일 브라우저를 이용해 JavaScript Koans 폴더로 들어가 KoansRunnner.html을 더블클릭합니다. VS Code에서 Open In Browser 기능을 이용해도 좋습니다.첫번째 에러
앞서 충분히 HTML/CSS을 연습했나요? 이제는 본격적으로 웹 애플리케이션의 목업을 만들어봅시다. 이번 과제 제목은 트위틀러(Twittler)입니다. 트위틀러는 Twitter의 클론으로, 나만의 SNS를 만들어본다고 생각하면 좋겠습니다.여러분들이 예를 들어 VS Co
누구나 한번쯤은 웹사이트의 회원가입을 진행해보신 경험이 있을거다. 가입 과정을 거치다보면, 사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우가 생긴다. 예를 들어 다음과 같은 경우가 있다.특정 값은 반드시 입력해야 합니다비밀번호는 특정 자릿수 이상이
이제 JavaScript를 이용해서 Twitter가 실제로 작동되도록 만들어봅니다. Interactive web application을 만들면서 Front-end 개발의 전반적인 과정을 연습할 수 있는 좋은 기회입니다.repo 구조를 파악합니다.index.html이 불
이전에는 배열 메소드가 브라우저에서 자체적으로 지원되지 않던 시절이 있었습니다. 보다 나은 방법으로 배열이나 객체를 다루기 위해 라이브러리, 즉 배열이나 객체를 다루기 위한 도구 모음집을 만들었습니다. 이번 스프린트 우리가 배열, 객체를 다루는 라이브러리 Underba
이번 스프린트는 재귀를 이용해 브라우저에서 제공하는 주요 기능 중 하나인 JSON.stringify 함수를 직접 구현할 것입니다.이전 강의에서 JSON.stringify는 객체를 JSON으로 변경하는 메소드인 것을 배웠습니다. 이 함수를 직접 구현하기 위해서는 재귀 사
이번 과제에서는, 기업용 애플리케이션에서 흔히 볼 수 있는 트리구조를 표현한 UI를 직접 구현해봅니다.repository 주소 에서 fork 및 clone 후 Pull Request로 제출하세요우리가 최종적으로 만들어야 할 결과물은 result.html 을 통해 미리
OpenWeather API 를 통해 날씨 정보를 가져올 수 있어야 합니다.가져온 데이터를 DOM을 이용해 웹 앱에 표시할 수 있어야 합니다.다음 데이터는 필수입니다.현재 온도현재 날씨선택한 도시웹 앱은 사용자 입력을 받아 도시를 선택할 수 있어야 합니다.테스트 케이스
=> 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술=> 웹페이지의 이동없이 필요한 데이터만 전송하는 기술ex) 나 : ( 너튜브에서 ) 나 이 동영상 보고 싶어요. 동영상 보내주세요~너튜브 서버 : ㅇㅇ 보내준다!!이 때, 서버에 원하는 데이터를 요구하는 방식
이번 Sprint는 앞서 익힌 JavaScript를 Koans의 형태로 익히는 시간입니다. 화살표 함수나, 구조 분해 할당과 같은 최근에 주로 쓰이는 문법을 익힐 수 있는 기회입니다. 이와 함께 Modern JavaScript Koans를 통해 this 및 call,
객체 지향 프로그래밍의 특징 중 하나는, 현실 세계의 모델을 코드로 옮기는데 유리하다는 것입니다. 그리고 특별히 이번 시간에는 다형성과 상속에 대해 다룹니다.먼저 해당 개념을 충분히 이해하고 여러분이 이해한 바를 정리한 후, 실제로 코드로 작성하는 시간을 갖게 됩니다.
위 그림에서 댄서(빨간 점)가 춤을 추고 있는게 보이시나요? (저게 춤추고 있는 게 맞냐구요? 네, 받아들이세요)이 Sprint를 통해 객체 지향 프로그래밍의 다형성(polymorphism)의 특징을 코드로 직접 구현할 수 있습니다. DOM과 CSS를 연습할 수 있는
비동기 상황을 가장 쉽게 만들어 볼 수 있는 방법은 바로 타이머 API를 이용하는 방법입니다. 이미 Pre Course를 통해 setTimeout setInterval 등의 타이머 API를 사용하는 방법을 익히셨을겁니다.API가 뭔가요? API의 사전적 의미는 이후에
다시 브라우저 환경을 떠나 node.js 환경, 그중에서도 fs module을 살펴봅시다. 브라우저 환경과는 다르게 node.js 앱은 내 컴퓨터에서 직접적으로 실행되므로, 파일을 불러오거나 저장하는 등의 액션이 가능합니다. fs(File System) module 사
비동기 요청의 가장 대표적인 사례를 꼽으라고 한다면, 단연 네트워크 요청을 들수 있겠습니다. 다양한 네트워크 요청 중, URL로 요청하는 경우가 가장 흔합니다. 이를 가능하게 해주는 API가 바로 fetch API입니다.한가지 예를 들어봅시다. 아래는 여러분들이 흔히
이번 과제는 클라이언트와 서버 등의 웹 아키텍처를 구성하는 여러 스프린트의 출발점으로서, 여러분들의 동료들과 같이 채팅을 할 수 있는 chat application의 클라이언트 부분을 만들어 볼 것입니다. 서버는 이미 AWS에 구축/배포되어 있는 코드스테이츠 Chatt
이번 과제는 클라이언트에서 서버까지의 구조를 알아보는 여정의 일부입니다. 지난번에 만든 Chatterbox client-side app은 이미 만들어진 AWS 서버와 연결했다면, 오늘부터 진행할 스프린트에서는 이전의 서버를 떼어내고 여러분이 Node.js를 사용해 만들
이번 시간에는 Twittler를 React 버전으로 재구성해봅니다. 이 스프린트의 목적은 완성을 시키는 것이 아니라, React를 충분히 이해하는 데 그 목적이 있습니다. 그러므로, 앞서 강의에서 던진 질문의 해답을 찾는 데에 이 스프린트를 활용하기 바랍니다. (솔로로