본문 바로가기

study

 (52)
[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는 기존의 소프트웨어 개발 방식에서 개발팀과 운영팀..
[Challenge / day-23] 기술셋 선정하는 기준, 프론트엔드 기술셋 선정하기 오늘의 공부범위 : 강의 31,2강(Part3. ch2. 1,2강) 목차 1. 기술셋을 선정하는 기준 2. 기술셋 선정하기 - 프론트엔드 오늘의 블로깅 모습..!! #1 기술셋을 선정하는 기준 1. 올바른 기술셋 선정하기 새로운 기술들이 정말 빠른 속도로 나오고있는 요즘 시대에 어떤 기술셋을 사용할지 선정하는 것은 더욱 중요한 문제가 되었다. 프론트엔드라는 개념도 잘 없던 예전에는 패러다임이 되는 기술이 거의 한 두개 정도 였을텐데 요즘은 기술 하나에 같이 사용되는 라이브러리만해도 한 두가지가 아니기 때문에 더더욱 중요한 문제이다. 2. 올바른 기술셋이란 무엇일까? 내가 사용하고 싶은 기술이 아니라, 시스템 요구사항을 충족하는데 적합한 기술! 3. 올바른 기술셋 선정이 중요한 이유 기술셋 선정에 따라 개..
[Challenge / day-22] class diagram 실습 오늘의 공부범위 : 강의 30강(Part3. ch1. 7강) 목차 1. React component 생성 팁 2. class diagram 실습 솔직히 챌린지 초반에는 의무적으로 하는 기분도 많이 들었는데, 저번에 sequence diagram 실습 이후로 점점 뿌듯한 기분도 들고 새로 배우는 것들이 많아서 기분이 좋은 것도 있어서 더욱 열심히 참여하게 되었다. 오늘은 클래스 다이어그램을 그려보자. 그러기에 앞서서 컴포넌트를 만드는 법을 알려주시면서 디자인패턴도 소개해주시고 🥹🥹🥹 이번 시간도 명강이다 명강!! 집중해서 따라가보자~!!! #1. React component 생성 팁 페이지 별로 컴포넌트를 정의하는데, UI 디자인을 살펴보면서 공통적인 요소가 있는지 파악해서 반복적으로 사용할 수 있는 요소..
[Challenge / day-21]Architecture diagram, Sequence diagram 실습 오늘의 공부범위 : 강의 28강,29강 내용(Part3. ch1. 5강,6강) 목차 1. Architecture diagram 실습 2. Sequence diagram 실습 이번 시간에는 먼저 배웠던 두 가지 다이어그램을 실습해보면서 차이점도 느껴보고 조금 더 이론에 대한 깊은 이해를 할 수 있는 시간을 가져보겠다. 아 분명 아키텍쳐 다이어그램 실습에 관해서 정말 잘썼는데 한숨 자고 일어났더니 다 날아갔다...하.. #1. Architecture diagram 실습 결과물이 좀 초라해 보일 수 있지만, 향후 발전가능성이 있는 결과물임을 참고해주기 바란다. Architecture diagram은 두 가지만 기억하면 일단 그릴 수가 있었다. 1. 구성요소 나열하기 2. 구성요소 간 상호작용 그리기 이번에 L..

티스토리툴바