일단 서버를 만들긴 만들었다.

하지만, 기존 zoom 만들때처럼 저장하면 자동으로 서버가 껏다켜지거나 하지는 않는 모습.

어떤 설정을 해야하나?

 

일단 nodemon, babel 설치

 

이 오류는 npm에서 npm run dev 명령을 실행할 때, dev 스크립트가 없다는 것을 알려주는 오류입니다. 즉, 프로젝트의 package.json 파일에 dev 스크립트가 없는 것 같습니다.

해결 방법은 package.json 파일에 dev 스크립트를 추가하는 것입니다. 예를 들어, nodemon을 사용하여 서버를 실행하려면 다음과 같이 dev 스크립트를 추가할 수 있습니다.

json
Copy code
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}
위 코드에서 "start" 스크립트는 Node.js를 사용하여 서버를 실행하고, "dev" 스크립트는 Nodemon을 사용하여 서버를 실행합니다. 이제 npm run dev 명령을 실행할 때, Nodemon을 사용하여 서버를 실행할 수 있습니다.

 

gpt가 알려줬어 ㅋㅋ

package.json에 추가하니까 잘 되네

 

이제 임시로 만들어둔 서버가 동작할 때 그럴듯한 값을 리턴하도록 해보자.

링크 맵핑은 어떻게 하는게 좋을까?

 

일단 포트폴리오로 리스트를 만들거니까 portfolios 정도면 괜찮지 싶다.

근데 아마 회원마다 다른 포트폴리오들을 추천해줘야 할텐데, 그러면 

http://localhost:3000/portfolios/:id 정도면 어떨까?

비회원도 볼 수 있으니까 ?id='~~' 정도가 나으려나?

 

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(),
    ),
    Expanded(
      flex: 1,
      child: Container(),
    ),
    Expanded(
      flex: 3,
      child: Container(),
    ),
  ],
)

//안드로이드의 weightsum을 Expanded와 flex로 대체한다.

 

옆의 사진처럼 활용하면 박스 가득 사진을 채울수있음.

아래 사진처럼 사용하면 사진에서 보여줄 부분을 정할 수도 있다는데

그건 좀 더 알아봐야할듯. 일단은 오른쪽 사진처럼 적용해두었음.

 

가로 세로 크기비율로 줄 수 있는 AspectRatio라는것도 있다...

        Expanded(

          child: AspectRatio(

            aspectRatio: 2 / 3,

            child: Container(

위 코드처럼 가로세로 비율을 지정해 만들어내는 방식이다.

import 'package:flutter/material.dart';

import 'package:portfolio_gallery/models/portfolio_model.dart';

import 'package:portfolio_gallery/services/api_service.dart';

import 'package:portfolio_gallery/widgets/main/appbar_widget.dart';

import 'package:portfolio_gallery/widgets/main/bottom_widget.dart';

import 'package:portfolio_gallery/widgets/portfolio_widget.dart';

 

import '../widgets/main/drawer_widget.dart';

 

class HomeScreen extends StatelessWidget {

  HomeScreen({

    Key? key,

  }) : super(key: key);

 

  final Future<List<PortfolioModel>> portfolios = ApiService.getPortfolios();

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: const AppbarHome(),

      drawer: const Drawer(

        child: DrawerMain(),

      ),

      bottomNavigationBar: const BottomWidget(),

      body: Column(

        children: [

          Container(

            color: Colors.blue,

            width: double.infinity,

            child: const SizedBox(

              height: 20,

            ),

          ),

          Expanded(

            flex: 2,

            child: FutureBuilder(

              future: portfolios,

              builder: (context, snapshot) {

                if (snapshot.hasData) {

                  return Column(

                    children: [

                      Expanded(

                        child: makeList(snapshot),

                      ),

                    ],

                  );

                }

                return const Center(

                  child: CircularProgressIndicator(),

                );

              },

            ),

          ),

          Expanded(

            child: Container(

              color: Colors.blue,

              child: const Text(

                '잘 나오는지 확인',

              ),

            ),

          ),

        ],

      ),

    );

  }

 

  ListView makeList(AsyncSnapshot<List<PortfolioModel>> snapshot) {

    return ListView.separated(

      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),

      scrollDirection: Axis.horizontal,

      separatorBuilder: (context, index) => const SizedBox(

        width: 20,

      ),

      itemCount: snapshot.data!.length,

      itemBuilder: (context, index) {

        var portfolio = snapshot.data![index];

 

        return Portfolio(

          userID: portfolio.userID,

          portfolioID: portfolio.portfolioID,

          thumb: portfolio.thum,

        );

      },

    );

  }

}

일단 이렇게 작업 되었는데, 예쁘게 다시 만들어야겠다.