본문 바로가기

분류 전체보기

 (75)
[Challenge / day-28] Bootstrap 레이아웃 오늘의 공부범위 : 49강 내용(Part4. ch1. 4강) 목차 1. 그리드시스템 2. bootstrap 레이아웃 구현 #1. 그리드 시스템 (1) 컬럼그리드 부트스트랩에서는 교육과정에서 배운 것과 같이 12칼럼(웹페이지 기준)을 사용하여 컬럼그리드를 적용한다. 컬럼그리드를 적용할 때 상하 그리드는 어떻게 적용해야하는지 궁금해서 찾아보았는데... 저번에 가볍게 공부한 것보다 조금 더 제대로 공부할 수 있었다. 개인적으로 도움이 된 순서로 링크를 남겨본다. 제대로 모르고 쓰게되면 개념을 모르는 상태에서 감으로 구성하는 것보다 못한 결과물이 나올 수 있으므로... 적용하려면 최소한의 사용방법과 개념은 제대로 숙지하고 사용해야겠다. https://beautifulcss.com/archives/1368 Bea..
[Challenge / day-27] 디자인 토대로 레이아웃 구현하기 오늘의 공부범위 : 48강 내용(Part4. ch1. 3강) 목차 1. 디자인에 따라 컴포넌트 제작 오늘은 큰 목차는 하나지만, 소 목차로 React Router를 사용하거나 class diagram을 이용하는 과정이 포함되어 있다. 지금까지 잘 만들어온 디자인을 토대로 앱 개발의 뼈대인 컴포넌트 제작을 성공적으로 마치는 것이 오늘의 목표이다. 대략 이런식으로 CLI를 너무 잘 활용하셔서 하셨는데 docs pwd docs ll docs cp react_component_diagram.plantuml ~/personalWorkspace/dutchpay-fastcampus/docs docs cp sequence_diagram.plantuml ~/personalWorkspace/dutchpay~fastcamp..
[Challenge / day-26] 개발환경 구축 오늘의 공부범위 : 46,47강 내용(Part4. ch1. 1-2강) 목차 1. AWS amplify 2. 개발환경 셋업 #1. AWS amplify 저번에 소개한 AWS amplify를 제대로 활용하기 위해서는 amplify CLI를 설치해야한다고 해서 설치하려고 하였다. 나는 몇 달 전에 가입해둔 것이 있기 때문에 가입하는 것은 생략하고 바로 강사님 따라서 console 화면까지 잘 들어갔다. 그런데, AWS 홈에서 amplify를 직접 검색해서 들어가보니 다음과 같은 화면이 나와서 잠시 당황했다. 어라..? 저는 CLI 설치하고 싶은데요..? 스튜디오랑 호스팅은 아직 안할건데 ㅠㅠ 어떻게 하는지 헤메다가 링크를 강의자료에서 주신 것 같아서 주신 링크로 들어오니 AWS docs 쪽이랑 연결되어서 다행..
[Challenge / day-25] React Router 소개, Recoil 소개, Style 소개 오늘의 공부범위 : 강의 36-8강(Part3. ch2. 6-8강) 목차 1. React Router 소개 2. Recoil 소개 3. Style 소개 오늘 세 개나 소개해야하므로 강의내용을 중심으로 간단하게만 소개해보고 나머지 내용은 공식문서를 항상 읽는 것을 명심해야한다!!(강사님의 가장 중요한 가르침~!!) 오늘 공부도 시작~~ #1 React Router 소개 React Router는 응용프로그램의 URL을 관리하고 URL을 기반으로 다양한 콘텐츠를 표시할 수 있는 널리 사용되는 라우팅 라이브러리이다. React Router는 전체 페이지를 다시 로드하지 않고도 탐색할 수 있는 단일 페이지 응용프로그램(SPA)을 만들 수 있도록 도와준다. 하는 일을 요약하면 다음과 같다. History 스택을 관..
[Challenge / day-24] 기술셋 선정하기 - DevOps, AWS amplifier 소개, React 소개 오늘의 공부범위 : 강의 33-5강(Part3. ch2. 3-5강) 목차 1. 기술셋 선정하기 - DevOps 2. AWS amplifier 소개 3. React 소개 #1 기술셋 선정하기 - DevOps (1) DevOps 란? Development + Operation의 합성어로서, 소프트웨어 개발에서 배포까지.. 전달(delivery) 과정을 자동화 하고 빠르게 하여 결국에는 비지니스의 가치를 높일 수 있도록 하기 위한 개발 환경이나 문화를 말한다. DevOps는 기존의 소프트웨어 개발 방식과 운영 방식을 통합하여 빠른 속도로 소프트웨어를 제공하고, 신속하게 문제를 해결하며, 고객 요구 사항을 빠르게 수용하고 반영하는 것을 목표로 한다. DevOps는 기존의 소프트웨어 개발 방식에서 개발팀과 운영팀..
[Phaser.js] Magic eightBall, Race day 굉장히 간단한 프로젝트 두 개를 실습해보는 시간이었다. 게임을 만들기 전에 뭐 준비운동 정도랄까 #1 Magic eightBall Magic eightBall이 무엇이냐... 이런 단순한 포츈텔링 게임이다. 아니꼬운 말을 쓴 걸 아는지... 다시 뽑으란다.. 미안하다고 했는데도.. 자는걸 다시 생각해보란다 ㅋㅋㅋㅋㅋ(현재 시각 새벽 3시 22분) 진짜 랜덤으로 아무말이나 나옴을 알 수 있다. 고도화된 AI라면 얼른 자라며 나의 건강을 걱정해줄텐데 get embedded code에서 설마 이걸 짠 로직을 볼 수 있나 해서 눌렀는데 이런 블로그 글에 임베딩하는 코드다. 새벽이라 정신이 없는건지 ㅋㅋㅋㅋ 개발자도구를 한 번 열어봤다. 오 그래도 정말 쉬워보이는 클론코딩 소재를 찾았달까.. ㅋㅋㅋㅋ figcap..
[Phaser.js] Learn Javascript Conditionals 기초는 끝고 intermidiate 부분이다. 컨디셔널스? 조건문에 대한 내용인 것 같다. 내가 완성하지 못한 게임(앞으로 X라고 칭해야겠다.)에서 조건문을 정말 많이 사용했었다. 만약 캐릭터가 장애물에 부딪힌다면? 어떤 일이 일어나는지 조건문으로 설정해줬었다. 장애물이 사라지고 플레이어는 콤보카운트가 0가 되버리도록 만들었다. 점프가 1초 안에 눌려야하는데 0.45초와 .0.55초 사이에 눌리면 어떻게 되는지 그 밖의 시간에 눌리면 어떻게 점프하는지도 조건문으로 설정했다. 타이밍에 맞게 누른 경우 super jump가 되어서 더 멀리 나아가도록. 게임에서 많이 사용할 내용이므로 가볍게 복습하면서 이번시간에 공부해보자. #1 If Statement 음... If문의 완전 기초 구성부터 배울줄은 몰랐다....
[Challenge / day-23] 기술셋 선정하는 기준, 프론트엔드 기술셋 선정하기 오늘의 공부범위 : 강의 31,2강(Part3. ch2. 1,2강) 목차 1. 기술셋을 선정하는 기준 2. 기술셋 선정하기 - 프론트엔드 오늘의 블로깅 모습..!! #1 기술셋을 선정하는 기준 1. 올바른 기술셋 선정하기 새로운 기술들이 정말 빠른 속도로 나오고있는 요즘 시대에 어떤 기술셋을 사용할지 선정하는 것은 더욱 중요한 문제가 되었다. 프론트엔드라는 개념도 잘 없던 예전에는 패러다임이 되는 기술이 거의 한 두개 정도 였을텐데 요즘은 기술 하나에 같이 사용되는 라이브러리만해도 한 두가지가 아니기 때문에 더더욱 중요한 문제이다. 2. 올바른 기술셋이란 무엇일까? 내가 사용하고 싶은 기술이 아니라, 시스템 요구사항을 충족하는데 적합한 기술! 3. 올바른 기술셋 선정이 중요한 이유 기술셋 선정에 따라 개..

티스토리툴바