GREAM+
21322 ワード
1차프로젝트以降、2차프로젝트と기업협업が行われた.この間は忙しかった.残念なこともたくさんあって、私を成長させるところもたくさんあります.
絵をかく
プロジェクト参加者
プロジェクト期間
テクノロジースタック
tools
プロジェクトの進捗
Planning meeting
チームメンバーが集まって開発の全体的な計画概念を制定し、十分なコミュニケーションを通じて内容を活動に記録します.
Daily Standup meeting
午前10時から10時30分までのスタンドミーティングで、昨日/今日やるべきこと/ブログを共有し、それぞれのプロジェクトに入ります.
Retrospective Meeting
プロジェクト終了後にそれぞれの残念な部分を思い出したきっかけを議事録にまとめた.
実装目標
実施目標は、
基本的な実装
私が担当する実施部分
(詳細ページとリストページ)
1. 리스트페이지 및 상세페이지 레이아웃
2. 쿼리스트링 활용을 통한 리스트페이지 다중필터링 기능 구현
3. 쿼리스트링 활용을 통한 리스트페이지 정렬기능 구현
4. 리스트페이지 필터 드롭다운
5. 상세페이지 캐러셀
6. 상세페이지 관심상품, 시세모달 모달창 내외부 데이터 연동
7. 상세페이지 구매정보 드롭다운 구현
8. 상세페이지 연관상품 구현自分の作業ページを表示
リストページ
詳細ページ
資生堂
興味のある商品
ドロップダウンメニュー
関連製品
コード共有-クエリーを実装!!
最初のプロジェクトで行ったことのないクエリーで、複数のフィルタを実装できます.グーグル無限グーグル検索でいろいろ探しました.
const FILTER_LISTS = [
{
filterType: ['author', '작가'],
idNameList: [
{ 1: 'Kathryn Rice' },
{ 2: 'Antonio Oneal' },
{ 3: 'Dalton Cuevas' },
{ 4: 'LindSay Martin' },
{ 5: 'Emily Clark' },
],
},
{
filterType: ['theme', '테마'],
idNameList: [
{ 1: '추상화' },
{ 2: '구상화' },
{ 3: '팝아트' },
{ 4: '입체주의' },
{ 5: '동양화' },
],
},
{
filterType: ['year', '연도'],
idNameList: [
{ '1970-01-01~1979-12-31': '1970년대' },
{ '1980-01-01~1989-12-31': '1980년대' },
{ '1990-01-01~1999-12-31': '1990년대' },
{ '2000-01-01~2030-12-31': '2000년대' },
],
},
{
filterType: ['price', '가격'],
idNameList: [
{ '0-100000': '10만원 이하' },
{ '100000-300000': '10만원 - 30만원 이하' },
{ '100000-500000': '30만원 - 50만원 이하' },
{ '500000-900000000000': '50만원 이상' },
],
},
{
filterType: ['size', '사이즈'],
idNameList: [{ 1: 'Small' }, { 2: 'Medium' }, { 3: 'Large' }],
},
]; useEffect(() => {
const filterQuery = makeFilterQuery(productFilters);
navigate(`/list${filterQuery}`);
}, [navigate, productFilters]); //완성된 쿼리스트링을 navigate훅을 사용해 페이지 전환
const handleProductFilter = (e, filterTypeQuery) => {
const isAlreadyFilter = productFilters[filterTypeQuery].includes(
e.target.name
); //이미 productFilters에 카테고리에 안에 내부데이터가 있는지 확인해줌
const newQuery = isAlreadyFilter
? productFilters[filterTypeQuery].filter(el => el !== e.target.name)
: [...productFilters[filterTypeQuery], e.target.name];
//isAlreadyFilter를 가지고 productFilters에 카테고리에 안에
//내부데이터가 있는지 확인해주고 걸러냄
setproductFilters(prev => ({ ...prev, [filterTypeQuery]: newQuery }));
//만약에 새로운 카테고리 영역에 데이터가 들어온다면 배열에 추가
};
const makeFilterQuery = productFilters => {
let query = '';
for (let filterType in productFilters) {
const filterIds = productFilters[filterType];
//백엔드에 보내줄 id값
if (filterIds.length > 0) {
query += `&${filterType}=${filterIds.join(`&${filterType}=`)}`;
} //쿼리생성
}
return query.replace('&', '?'); //쿼리가 &...로 시작하므로 첫번째 &를 ?로 바꿔줌
};に感銘を与える
メリット
さまざまなロジックを書くことができるところ:Creamサイトを分析するとき、Webはとてもおしゃれだと思います.特に、複数のボタンのこれらのロジックをどのように処理するかを考える機会がとてもいいです.また、多重フィルタリング機能を実現すると同時に、データをよりよく受信するために非常に良い論理を書くべきだと思います.
スムーズなコミュニケーション経験:プロジェクトを行うときは、バックエンドの姜一さんと度雲さんと一緒にコミュニケーションをとるべきです.最初の項目については、熙沢だけなので通信ができません.しかし、今回のプロジェクトでは、姜日氏も雲氏とコミュニケーションを続け、互いに自分の望むデータ方式について意見を提出し、論理を編成し、受け取ったデータを加工し、使いやすくした.
ライブラリについて考える:ライブラリを使用して体得した点は、ライブラリをよりよく使用するためには、JSについて深く理解する必要があります.ライブラリは便利ですが、すべての設定値が私たちが描きたいUIと異なる場合、どのようにアクセスし、どのように修正するかについて多くの情報を見つけました.基本的には、ライブラリ公式ドキュメントの読み取りが基本で、実装の過程で、基本的なJSロジックも作成してこそ、自分が望むUIに従って出力されたと感じさせることができ、これらの経験は他のライブラリを作成する過程で多くの経験になります.
残念なことに。
チームでどんな役割を果たしましたか。
フロントエンドの開発者として、より自信を持つ機会です。
Reference
この問題について(GREAM+), 我々は、より多くの情報をここで見つけました https://velog.io/@jujihong2/프로젝트-회고-GREAMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol