안녕하세요~ totally 개발자입니다. ListView.builder 이번 시간에는 저번 시간에 다루었던 ListView를 builder를 활용하여 더 효율적으로 만드는 방법을 살펴보도록 하겠습니다. 먼저 앞서 살펴보았던 ListView의 형태입니다. 34번째부터 36번째 줄에 postContainer가 중복되고 있는 것을 확인하실 수 있고, 이것이 3개 정도면 이렇게 진행해도 무방하겠으나 훨씬 더 많은 데이터가 들어가야 하는 상황이라면 이것은 분명 비효율적입니다. 이 한계점을 극복하기 위해서 사용하는 것이 ListView.builder입니다. 위의 화면을 보시면 31번째부터 36번째 줄이 ListView.builder 부분인데 사용하는 방법이 매우 간단합니다. 기본적으로 itemCount와 itemB..

안녕하세요~ totally 개발자입니다. Component with inline template 저번 글에서는 component with inline style에 관해 살펴보았고 이번에는 component with inline template에 대하여 알아보도록 하겠습니다. 이 부분은 template를 직접 지정하여 사용할 수 있도록 도와주는 역할을 하며 간단하게 사용할 수 있습니다. 위의 이미지대로 ng generate component signup --inline-template 커맨드를 터미널에 입력하여 inline-template를 가진 component를 생성해줍니다. 6-8번째에 html 태그를 입력하여 지정할 수 있습니다. 여기에 class 값도 추가하여 css를 적용할 수 있도록 해줍니다...

안녕하세요~ totally 개발자입니다. ListView 오늘 다뤄볼 위젯은 ListView(리스트뷰)입니다. 이 ListView를 사용하면 가로 방향 혹은 세로 방향으로 여러 위젯들을 배치할 수 있습니다. 플러터에서 이 ListView는 GridView와 더불어서 많은 위젯들을 표시할 때 거의 필수적으로 사용되는 위젯이어서 반드시 알고 계셔야 합니다. 앞선 강의해서 보셨다시피 저희는 이미 Drawer 위젯에서 ListView 위젯으로 메뉴를 표시했습니다. 이것을 Scaffold 위젯의 child 즉 메인 부분에 배치하여 적용해보도록 하겠습니다. 보통 페이스북, 인스타그램 등 보시면 스크롤을 하여 포스트를 확인하는 것처럼 이번 시간에는 비슷하게 응용해 보겠습니다. 이제 여러 위젯이 중첩되어 살짝 복잡해지..

안녕하세요~ totally 개발자입니다. GestureDetector 오늘 다뤄볼 내용은 GestureDetector 위젯입니다. 용어 그대로 제스쳐를 감지하는 기능을 가진 위젯이며 사용자의 제스쳐를 인식하기 위해 사용합니다. 이 GestureDetector를 사용할 때에는 인식하려는 범위에 따라 넣어주는 위치가 다르기 때문에 이 부분 주의하셔서 사용하시면 됩니다. 많이 사용하는 제스쳐 속성으로는 onTap이며 나머지 필요한 속성들은 여기에서 참고하시면 됩니다. 이 GestureDetector 위젯을 사용하여 버튼을 눌렀을 때, 밝은 배경을 어두운 배경으로, 어두운 배경을 밝은 배경으로 전환하는 기능을 만들어보도록 하겠습니다. 먼저 9번째 줄의 bool isLightTheme = true; 이렇게 boo..

안녕하세요~ totally 개발자입니다. Component with inline style 오늘 알아볼 부분은 위에 적혀 있는 Component with inline style입니다. 이 부분은 컴포넌트를 생성할 때 스타일을 지정할 수 있게 도와줍니다. 위의 2가지를 비교해보면 다른 부분이 6번째 줄에 나와 있는데 바로 styleUrls: ['./header.component.css']와 styles: [ ] 이 부분이 서로 다릅니다. 즉 이 styles 부분에 바로 css 코드를 적용할 수 있는 것입니다. 이것을 생성하기 위한 커맨드는 ng generate component contact --inline-style 입니다. 저번 시간에 생성했을 때에는 css파일이 같이 생성이 되어서 css파일을 따로 ..

안녕하세요~ totally 개발자입니다. 이번 시간에는 Component에 관해서 살펴보도록 하겠습니다. 여러 개의 Component들로 웹페이지가 구성이 되기 때문에 Component에 대해서 반드시 이해가 필요합니다. 앵귤러에서 component를 생성할 때, 수동으로 하나씩 파일을 만들어서 생성하는 것이 아니라 Terminal을 열어서 현재 프로젝트 경로인지 확인한 뒤, ng generate component 컴포넌트명을 입력해주면 되며, 간단히 ng g c 컴포넌트명으로만 적어서 실행 가능합니다. 실행하면 위의 이미지처럼 app 하위 디렉토리 안에 header라는 컴포넌트가 생성되었음을 알 수 있고 app.module.ts 파일 내에 5번째 줄에 자동으로 import { HeaderComponen..