wosrncoding

보호되어 있는 글입니다.

저번 포스팅에 이어, 밑의 교재 chapter 4 부분을 공부해보려고 한다https://product.kyobobook.co.kr/detail/S000208993133 초보자도 프로처럼 만드는 플러터 앱 개발 | 이정주 - 교보문고초보자도 프로처럼 만드는 플러터 앱 개발 | 누구나 5주 만에 쉽고 빠르게 배우는 플러터 앱 개발의 모든 것만약 어느 날 갑자기 혼자서 플러터로 앱을 개발해야 한다면, 여러 가지 어려움에 직product.kyobobook.co.kr 1) ui작업 (위젯) - 위젯은 플러터에서 ui를 구성하는 기본 단위- 플러터 앱 개발은, 위젯이라는 레고 블록들을 이리저리 결합하고 반복해서 사용하는 작업의 연속- 선언형 ui : 플러터의 위젯은 바깥으로부터 입력된 필드 값과 상태에 따라 다르게..

https://product.kyobobook.co.kr/detail/S000208993133 초보자도 프로처럼 만드는 플러터 앱 개발 | 이정주 - 교보문고초보자도 프로처럼 만드는 플러터 앱 개발 | 누구나 5주 만에 쉽고 빠르게 배우는 플러터 앱 개발의 모든 것만약 어느 날 갑자기 혼자서 플러터로 앱을 개발해야 한다면, 여러 가지 어려움에 직product.kyobobook.co.kr 본격적인 대회 작업물 개발 전 마지막으로, 이 책의 챕터 3/4를 보고 개발에 들어갈 예정이다 데일리 캣츠 앱 -> 고양이 사진 리스트 조회, 상세 조회, 업로드, 댓글, 좋아요, 신고 등의 기능 구현 예정화면 구성 -> 사진 리스트 화면, 사진 상세 화면, 사진 업로드 화면컴포넌트 구성 -> 사진 리스트화면 : 앱바(제..

- 이미지 5개를 롤링해보여주는 액자 앱을 만들 것이다- 좌우 스와이프하여 이미지 변경이 가능하고, 이미지가 특정 시간이 지나면 자동으로 롤링되는 기능- PageView 위젯 (가로 또는 세로로 스와이프해 화면에 보이는 위젯을 변경하도록 해줌) , Timer (주기적으로 작업 반복 시에 사용), StatefulWidget (지금까지 stateless위젯만 다뤘는데, 이번에 stateful 다뤄볼 것) 1. 사전지식 : 위젯 생명주기- 위젯이 화면에 그려지는 순간부터, 삭제되는 순간까지의 주기를 의미 (1) StatelessWidget- 지금까지 작성한 위젯들은 모두 이 형태였음.- 해당 위젯을 사용하면, 생성자가 실행되어 build()함수를 필수로 오버라이드 하도록 함- 플러터의 모든 위젯은 widget..

폴더구조 : screen(스크린 전체에 해당되는 위젯들을 모아두는 폴더) / component(스크린을 구성하는 데 공통으로 사용될만한 위젯들을 모아두는 폴더) / model(모델을 따로 모아둠) / const(상수들 모아둠)+ model 폴더는 보통 애플리케이션의 데이터 구조나 비즈니스 로직을 정의하는 곳입니다. 이 폴더에는 앱에서 다루는 데이터를 표현하는 클래스들이 들어가게 된다 플러그인 추가하는 법 : pubspec.yaml 파일->dependencies 에 원하는 플러그인을 추가하고, pub get 버튼을 눌러주면 등록한 플러그인 사용 가능  (pub get 버튼을 누르면 플러그인 뿐만 아니라 pubspec.yaml 에서 설정한 모든 요소를 현재 프로젝트에 적용 가능)  - 위젯 -> 위젯 내부에..

- 플러터 프레임워크의 세 계층 : 임베더 계층(로우레벨) - 엔진 계층 - 프레임워크 계층- 스키아 엔진 사용 : 대부분의 크로스플랫폼 앱 개발 프레임워크들은 웹뷰 혹은 각 플랫폼의 ui 라이브러리 사용 / 반명 플러터는 웹뷰를 사용하지 않고 직접 스키아 엔진을 사용하여 화면에 ui를 그려냄- 이 때 새로 렌더링이 필요한 위젯들만 렌더링하기에 다른 크로스플랫폼 앱 개발 프레임워크에 비해 높은 성능- rn의 경우, 자바스크립트 브릿지를 통해 플랫폼과 통신, 플랫폼의 ui를 그대로 사용- 반명 플러터는 위젯을 스키아 엔진에 직접 그려내고, 필요한 제스처 및 이벤트를 브릿지를 통하지 않고 실행 - 더 빠름 플러터 프로젝트를 생성하고, 에뮬레이터 (기기 없이 테스트하는 가상머신 환경) 도 생성해주었다 그리고 ..

이번에 나가게 된 대회에서 플러터를 사용하게 되어서, 연휴동안 공부를 진행할 예정이다 https://product.kyobobook.co.kr/detail/S000200473539 코드팩토리의 플러터 프로그래밍 | 최지호(코드팩토리) - 교보문고코드팩토리의 플러터 프로그래밍 | 인프런 NO. 1 플러터 강사와 함께 왕초보 실력을 현업 수준으로 끌어올리기저자는 왕초보 실력을 현업 수준으로 끌어올리기를 목표로 이 책을 썼습니다. 배운product.kyobobook.co.krhttps://goldenrabbit.co.kr/2024/06/05/flutter-%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%84%A4%EC%B9%98-%EC%9C%88%EB%8F%84%EC%9A%B0-%EB%A7%A5-%E..

이번 구름톤 프로젝트에서는, api를 모듈화하고 커스텀훅으로 만들어서 사용하였다 1) apis 폴더 안에 instance.ts 파일에 axios instance를 create해서 만들어둔다 이때 백엔드 측에서 준 base url은 노출을 막기 위해 env파일에 넣고, gitignore에 넣는다 (이렇게 하면 env파일의 내용이 깃허브에 올라가지 않기 때문에, 협업 프로젝트라면 프론트 팀원들간에 env파일에 변경이 있을 시 따로 알려준다 / vite를 사용한 경우 env파일의 환경변수 이름이 VITE_로 시작해야한다) 2) apis 폴더 안에 axios instance를 사용해서 원하는 api 메소드 (get 등) 를 사용하는 코드를 작성한다 (그런데 구글링을 하다보니 async await에서 try-ca..

구글링 했을때는 1)cmd에서 ipconfig 입력해서 나온 값 중 2)Ipv4 에 해당하는 값:port번호 로 접속하면 된다고했는데 어째서인지 되지 않았다 그러다가 우리 팀 프엔 오빠에게 물어봤더니 한큐에 해결되었다 우선 npm run 할때, 그냥 npm run dev 말고 npm run dev — —host 로하면 주소가 두개 뜨고, 두개 중 밑 주소가 위의 2)형식으로 뜨는데, 이 주소로 접속하니 잘 되었다 위의 network 옆에 적힌 주소로 접속하면 된다 (이때 노트북의 와이파이와 같은 와이파이로 접속해야함)

저번 구글 솔루션 챌린지 때 중간회고들을 남기지 못한게 아쉬워서,, (솔챌 끝나면 쫙 정리해서 써야지~ 라고 했으나,, 안쓰게됨,,, 우리에겐 늘 다음 프로젝트가) 이번에는 개발 중간중간 짧게나마 진행상황과 배운점들을 남겨두려고 한다 우선 체계없이 냅다 개발하던 (업무 방식도 코드자체도,,,모두) 저번 프로젝트와는 달리 이번엔 경력 짱짱한 프로 프엔님과 협업을 하게되어서, 제대로 된 프론트 개발 협업에 대한 경험이 가능했다 1) 프로젝트 시작 전 기술스택을 모두 정하는 것의 이점과 효율성에 관하여 우선 개발 전에 위와 같이 기술스택을 모두 정하고 초기세팅을 진행했다 리액트 프로젝트 생성 후 필요한 패키지들을 처음에 모두 받아서 main에 푸쉬를 해두고 설치된 파일들의 모음인 node_modules는 gi..