와챠의 우당탕탕 코딩 일기장

~제가 작성한 노션을 블로그에도 옮긴 내용입니다!~목차Pakage Conventionfile, folder name convention폴더명폴더명 예시 1. Pakage Convention🍎 사용 목적 클린 아키텍처의 개념을 요약하면 아래와 같습니다.변경이 용이하고(유연) + 의존성을 줄이고 + 테스트 가능하고 + 유지 관리 쉽게 하기 위한 개념소스 코드를 보는 것만으로 프로그램이 수행하는 작업을 식별할 수 있는 소프트웨어 개발 방법MVVM이란, (Model - View - View Model)으로 로직을 사용자 인터페이스 제어에서 분리하는 소프트웨어 설계 프레임워크입니다.MVVM 패턴을 사용한 클린 아키텍처의 장점은 아래와 같습니다.표준 MVVM보다 테스트 쉬움완벽하게 큐레이션된 분리(가장 큰 장점)..

~제가 작성한 노션을 블로그에도 옮긴 내용입니다!~목차Dart ConventionUpperCamelCaselowerCamelCasesnake_case언더바('-')Lintflutter로 하실 분들 아니면 여기서 Android라던지, ios라던지 키워드를 달리해서 찾아보시면 될 거 같습니다!1. Dart Convention🍎 사용이유: 가독성을 높이고, 서로의 코드를 잘 이해하기 위한 가장 기본적인 언어 규칙입니다.1-1. UpperCamelCaseclass , enunm type, typedef, type parameter 들 일 경우class HttpRequest { ... }typedef Predicate = bool Function(T value);1-2. lowerCamelCase대부분의 변수,..

안녕하세요. 이번 글은 팀 프로젝트가 처음인 분들께 바치는 글입니다... 제가 휴학 때 배운 내용들을 정리해볼 필요가 있었고, 졸업 프로젝트 때 제가 프론트 팀 리더여서 프로트 팀과 협업을 위해 이런 기초적인 내용을 정리할 필요가 있었는데, 잘 만들었다는 칭찬을 넘 많이 들어서 여기도 올려봅니다.^^ 프론트 리더 입장에서 쓴 글이라 프론트 초보자분들이 보시면 딱 좋을 거 같습니다! 플러터 내용이긴 한테 프론트의 큰 툴은 다 비슷할 거 같아서 제가 설명 드리는 내용을 가지고 따로 검색해보시면 될 거 같습니다. 저도 배운지 얼마 안 된 내용이니 틀리거나 이상한 내용이 있을 수 있는데 발견하시면 댓글로 알려주세요 ㅎ.ㅎ 그리고 젤 중요한 사항 코딩이 다양한 방식이 있듯이, 제가 앞으로 안내하는 방향이 정답이 ..

졸프 때 프론트 리더를 맡게 됐다. 사실상... 내가 하겠다고 애원했다. 왜냐면 나는 팀원들과 하고 싶은 게 많으니까~.~ 프론트 기술은 아직 정하진 못했다. 주제에 맞게 정하려고 함. 웹이면 React, 앱이면 Flutter로 생각 중이다. 둘 다 강의를 들어봤는데 둘 다 재밌었다 ㅎㅎ 근데 앱이 더 익숙하긴 함. 나는 안드를 계속 공부해왔고, 안드도 앱인만큼 ui/ux 관련 지식은 플러터랑 비슷하게 적용되니까... 웹이면 그런 기술도 다시 공부해야할듯. 비슷할 거라고 생각은 한다. 암튼 프론트 기술이 정해지면 추가적으로 더 알아보고 팀원들과 공유할 것들 목록을 좀 만들어보고자 한다. 먼저 개발 시 하고자하는 것들 클린 아키텍처: 해당 기술의 클릭 아키텍처는 어떤 식인지, 참고하기 좋은 자료들을 찾아보..

목차 결과물 설명 화면 및 기능 api 패키지 구조 홈 화면 상세 화면 1. 결과물 설명 만들 웹툰 앱은 다음과 같다. 1-1. 화면 및 기능 화면은 홈 화면과 상세 화면으로 총 2개고, 각 화면별 기능은 다음과 같다. 홈 화면 오늘의 웹툰 리스트 확인 가능 리스트 아이템 클릭 시 해당 웹툰의 상세 페이지로 이동 상세 화면 웹툰 설명 / 장르 / 연령가 출력 최신 10화 목록 출력 목록 아이템 클릭 시 해당 회차의 네이버 웹툰 url로 이동 하트 기능: 좋아요 표시 가능 1-2. api 여기서 사용할 api는 다음과 같다. base Url = https://webtoon-crawler.nomadcoders.workers.dev 오늘의 웹툰 목록 받아오기: baseUrl + "/today" 웹툰 상세 정보..

Pomodoro 앱 만들기 타이머 시작 기능: 25분에서 1초씩 줄어들기 타이머 중지 기능: 타이머 일시 멈춤 타이머 재시작 기능: 25분부터 재시작 뽀모도로 한 번 끝나면 아래 숫자 ++ 주석으로 설명 달겠슴다. + Flexible 위젯으로 비율 설정 가능한데, 이를 사용해서 UI를 꾸며보겠다. Flexible( flex: 1, child: Container( decoration: const BoxDecoration(color: Colors.red), ), ), Flexible( flex: 2, child: Container( decoration: const BoxDecoration(color: Colors.green), ), ), Flexible( flex: 1, child: Container( de..

목차 요약 버튼 클릭 시 카운트 증가: Stateful Widget 버튼 클릭 시 Text ui 증가: StatefulWidget + 반복문 buildContext: 부모에서 정의한 Theme을 자식이 사용하게 하기 버튼 클릭 시 ui(Text) 변경: Widget Life Cycle 1. 요약 StatelessWidget: build 메서드를 통해 ui 출력 StatefulWidget: 상태에 따라 데이터 변하고, 이에따라 ui도 변경 widget life cycle을 가지고 있다. setState(): State클래스에서 데이터 변경됨을 알리는 함수, build가 다시 실행됨 BuildContext context: 부모 요소에 쉽게 접근 가능 2. 버튼 클릭 시 카운트 증가: Stateful Widg..

리액트 시작 이유와 마찬가지로 플러터도 공부 시작~~~~ 강의는 노마드 코더의 Flutter로 웹툰 앱 만들기이다.ㅎㅎ 목차 컴포넌트 이름 없는 인자 이름 있는 인자 UI CHALLENGE 헤더 버튼 카드 1. 컴포넌트 1-1, 이름 없는 인자 class Player { String name; Player(this.name); } void main() { var min0 = Player('minWachya'); min0.name; } 1-2, 이름 있는 인자 class Player { String name; Player({required this.name}); } void main() { var min0 = Player(name: 'minWachya'); min0.name; runApp(App()); }..