본문 바로가기

MENU

리엑트로 구구단게임 만들기 React - Zerocho (webGame) 2.구구단 리액트로 구구단 게임을 만들어보자! 아래 내용은 zeroCho님의 강좌를 기본으로 합니다. 리액트에서는 바뀌는 부분을 state로 한다. 바뀌는 부분을 이해한다는건 리액트에서 굉장히 중요하다. 구구단 게임에서 바뀌는것을 생각해보자 문제 부분( 5 곱하기 4 는?) 에서 5부분 과 4부분 사용자가 답을 입력할 인풋 그리고 문제 결과를 알려줄 '정답' 과 '땡' 부분 (1)5 곱하기 4 는? (2) 입력 (3)"땡","정답" 바뀌는 부분을 state에 넣어보자 constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Mat.. 더보기
[GDG]데일리 만년 주니어 19/02/16 [천민호 - PUBG] Get Started, 프론트 엔드 개발[천민호 - PUBG] 고대 프론트엔드 개발 HTML -> Web browserCSS browser - > serverURL과 HTML은 1:1 대응옛날 프론트엔드 개발의 환경과 작동원리에 대해서 설명 근대 프론트엔드 개발 고대의 문제점3가지 변하지 않는 내용도 중복해서 받음 서버에 요청을 한 후 응답이 있을때까지 Blocking 새로운 HTML을 보여주려면 새로고침이 필요 문제점을 해결하기위해 Ajax Ajax가 등장함으로써 서버로부터 응답이 올때까지 안기다려도 된다는 변화 2004년에 구글에서 Ajax기술로 적용된 구글메일등장대 Ajax 시대가 열리고 웹사이트는 점점 복잡해짐 단순히 HTML을 보여주는 것이 아니라 효율적으로 관리해줄 도구가 필요 현대 프론트엔드.. 더보기
[GDG]데일리 만년 주니어 19/02/16 [하조은 - 레이니스트] 문과적시점에서 프로그래머 [하조은 - 레이니스트] 프로그래밍은 문과스럽다.띄워쓰기로 의미를 전달 - 프로그래밍은 커뮤니테이션을 하기위한 도구 코딩은 글쓰기와 비슷하구나라는 생각이 들어서컴공 도전 융합형 인재를 노린다! 프로그래밍은 문제를 해결하는 강력한 도구인턴과정중 배운것 내가 무엇을 모르는가?를 배움 생활코딩, Freecodecamp 등으로 인강들음로켓펀치나 링크인 에 프로필관리 직장이 아닌 직업을 택하자!회사가 나를 증명하지 않는다 스스로를 증명하자! 좋아하는 업을 선택하고 직장 대신 업계를 선택코드모아 - 사이트 더보기
[GDG]데일리 만년 주니어 19/02/16 [조형재 - 열두시반] 웹 개론과 함께 배우는 정적 배포 방법 [조형재 - 열두시반] 썸노트 서비스 운영미디어 스타트업 열두시반 CTO 웹 페이지 열심히 만들었는데 다른 사람한테도 보이게 하려면 어떻게 하지? 클라이언트 VS 서버 클라이언트 - 크롬,익스플로러다서버로 요청 서버에서는 클라이언트에게 응답?해준다. 서버(cloud)는 클라우드다 서버 컴퓨터 DB WAS - 웹어플리케이션서버의 약자(노트,장고 등 을 왓스를 만드는 언어) 정적 웹사이트 배포리엑트AWS 호스팅AWS첫배포대기완료 구글 파이어 베이스 배포(유튜브에 검색) 웹개발자 로드맵 - X 일단 시작하세요 몰라도 만들 수 있습니다. 더보기
[GDG]데일리 만년 주니어 19/02/16 [김종찬 - 네이버] 고학점 대신 개발자 커뮤니티를 택한 이야기 [김종찬 - 네이버] 학점을 고학점으로 받으려고 하는 것보단 보통을 원했다. 어떻게 커뮤니티를 만났나? 전문화된 기술자들이 공유를 안할 주 알았지만 오프라인 커뮤니티를 가보니 많은 공유가 이뤄지고 있다.구글 대학생 해커톤을 참석하고 경험자체가 너무 좋았고, 즐거운 경쟁을 경험 했다.1학년 새내기였지만 GDG 커뮤니티 리딩을 시작했다. 커뮤니티를 꾸려가는 경험(새내기였지만 적극적으로 커뮤니티에 참여하고 고학년 선배들과도 같이 행사등을 참여했다.) 위 내용을 보면 적극적인 자세를 가지기를 추천하고 리더로써 자리를 가져보는걸 추천했다.주변 사람들을 같이 꿈꾸는 사람들이 많다면 실력이 폭발적으로 늘어날것이다. 어떻게 커뮤니티를 활용했나? 가장 최신의 기술 트랜드와 도구.. 더보기
06 - Ajax Type Ahead 12345678910111213141516171819202122232425262728293031323334353637383940414243const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = [];fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { // he.. 더보기
05 - Flex Panels image gallery 5번째 강의시간에는 CSS의 Flex를 통해서 이미지 갤러리를 만들어보는 시간이다. CSS에 Flex는 한국에서는 거의 사용하기 힘든 속성이다. 왜냐면... 익스플로러 상위버전에 사용 가능하기 때문에사용하기 쉽지 않다.그래도 알아두어야 나중에나 응용을 할 수 있기때문에 안쓴다고 해서 넘어가지 말자.https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90 MDN에서 css flex를 찾아본 결과이다. 자세히 나와있으니 모르시는 분들은 한번씩 읽어보면 좋을꺼 같다.자바스크립트의 토글을 이용해서 클라스를 추가하고 제거하고를 이용해서 효과를 주고 .. 더보기
04. Array Cardio Day 1 4 - Array Cardio Day14번째 시간에는 어떠한걸 만드는게 아니라 배열을 어떻게 다루는가에 대한 강의 였다.filter(), map(), sort(), reduce()4가지 함수로 총8가지 조건에 대한 풀이를 보여준다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven,.. 더보기

티스토리툴바