[TIL] 221220

Write page 만들기

이미지 프리뷰 만들기

https://nukw0n-dev.tistory.com/30

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

 

사진 업로드 input type="file" css

https://helloinyong.tistory.com/275

input type="file" 커스터마이징 하는 방법

 

input과 label 연결했는데 오류

a form label must be associated with a control

/* .eslintrc.json */

{
	// ...
  "rules": {
		// ...
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "labelAttributes": ["htmlFor"]
      }
    ]
  }
}

https://leo-xee.github.io/Error/eslint-label/

Error: A form label must be associated with a control.

 

eslint 규칙 해제했는데 오류

Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events

 

참고 링크

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

[HTML] 📚 폼(Form) 태그 종류 💯 정리

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-input%ED%83%9C%EA%B7%B8-file-%EC%97%AC%EB%9F%AC%EA%B0%9C%EC%9D%98%EB%8B%A4%EC%A4%91-%ED%8C%8C%EC%9D%BC-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0

[HTML] 📚 input 태그 파일 다중 선택하기

https://velog.io/@dody_/react-input-typefile-%EC%9D%B8-%EA%B2%BD%EC%9A%B0-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%ED%95%98%EA%B8%B0

[react] 파일 올리기 기능인 input type="file" 스타일링 하기

 

https://handhand.tistory.com/283

[React] File API 를 이용한 Input 컴포넌트 만들기

https://developer-talk.tistory.com/567

[React]파일 업로드 구현

https://helloinyong.tistory.com/275

input type="file" 커스터마이징 하는 방법

 

사진 대신 폰트 어썸 이용하기

https://www.daleseo.com/react-font-awesome/

React에서 Font Awesome 사용하기

https://velog.io/@asroq1/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-FontAwesome-%EC%89%BD%EA%B2%8C-%EC%93%B0%EB%8A%94-%EB%B0%A9%EB%B2%95

[React] 리액트에서 FontAwesome 쉽게 쓰는 방법!

 

폰트어썸 넣은 Link div들 grid 정렬하기

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

grid-template-columns - CSS: Cascading Style Sheets | MDN

https://goddino.tistory.com/246

[css] grid 반응형 layout 적용

 

슬라이더

https://velog.io/@pixelstudio/React-Slick%EC%9C%BC%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

React-Slick으로 캐러셀 구현하기

https://programmer93.tistory.com/34

slick slider 사용법 및 옵션 (반응형 포함) - 삽질중인 개발자

https://ryurim.tistory.com/110

[항해99 81일차] 2022.05.26 TIL (slick slider arrow 버튼 커스텀)

슬라이더 구현 중 eslint 오류

slick-carousel should be listed in the projects's dependencies, not devDependencies

https://github.com/SimulatedGREG/electron-vue/issues/423

'electron' should be listed in the project's dependencies, not devDependencies · Issue #423 · SimulatedGREG/electron-vue

나중에 코드 주석달아서 블로그에 따로 올리기!!!

 

MSW(mock service worker)

https://www.daleseo.com/mock-service-worker/

MSW로 백앤드 API 모킹하기

https://itchallenger.tistory.com/292

리액트 테스트 : MSW를 사용하여 HTTP Requests 모킹하기

 

신원님코드 -> mock api 공부하기

src/api/core/axios.js

import axios from "axios";

// 인스턴스 생성
export const instance = axios.create({
  baseURL: "",
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
});

// 요청 타임아웃
instance.defaults.timeout = 2500;

//인스턴스 request header Authorization 설정
// TODO - localStorage 방식 미확정
instance.interceptors.request.use((config) => {
  if (config.headers === undefined) return;
  const token = localStorage.getItem("id");
  config.headers["Authorization"] = `${token}`;
  return config;
});

도메인이 다르면 통신이 안 되도록 하는 것

CORS 정책으로 완화해서 백에서 설정을 하면 괜찮음

프론트 쪽에서 처리는 이렇게

    "Access-Control-Allow-Origin": "*",

 

오늘 한 일

figma wireframe 수정

 

write page view + 사진 업로드 구현

- label 없이 type이 file인 input을 두면 너무 못생겨서 css를 손보고 싶었다.  label의 htmlFor 속성과 input의 id 속성을 똑같이 주면 input에 display:none을 해도 label을 클릭하면 마치 input을 클릭하는 것처럼 구현되며 스타일을 수정할 수 있다. label 대신 button을 쓰면 스타일을 변경할 수 없다고 한다. 그런데 label에 onClick 이벤트 함수를 달면 < Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events > 이렇게 label은 button이나 input과 다르게 non-interactive 한 요소이므로 onClick을 쓸 수 없다고 한다. 일단 github에 issue로 남겨놓고 다음 작업으로 넘어갔다.

+ input에 multiple 속성 추가해서 사진 여러 개 업로드할 수 있게 하기

*사진 업로드 관련 코드 나중에 정리

 

Home page 게시글 하나하나가 될 집 모양 아이콘(클릭 시 상세 페이지로 이동)을 폰트 어썸으로 만들었다. 패키지를 설치하고 크기와 색상을 지정하는 데는 얼마 안 걸렸는데 정렬하느라 시간이 오래 걸렸다. 백그라운드 색을 넣고 보더 선을 넣고 flex로 끙끙거리다가 grid로 하면 된다고 해서 적용했더니 바로 해결됐다.

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 130px));
  grid-gap: 20px;

언제나 문제가 되는 중요한 정렬! grid 사용하기!

 

Slider 만들기

React Slick이라는 라이브러리로 Slider를 만들었다. 아직 prev, next 버튼의 위치가 마음에 안 들지만 나중에 고쳐야겠다. 슬라이더가 어떻게 동작하는지는 배웠다. 원래 기본 스타일은 슬라이드를 dot 점으로 넘기게 하는데 우리 디자인에 맞게 화살표로 바꿨다. 스타일을 직접 커스터마이징해야 한다. 또 버튼 정렬 때문에 한참 걸렸다.

 

내일 할 일

메인 페이지 tab메뉴, 모달로 전체 카테고리 보여주기

디테일 페이지 + 페이징

유효성 검사 + form help text 배우기

기능 모두 구현

 

이제 너무 잠 온다. 내일은 진짜 하루 종일 집중해서 다 해야 한다! 끙끙거리며 만드느라 한참 걸렸지만 나중에 대폭 수정될 예정이다. 아직 갈 길이 멀다. 개인 과제였으면 적당히 했을 텐데 팀 과제니 적당히 할 수 없다... 나는 병아리지만 최선을 다 해보자ㅠㅠ 내일도 이렇게 링크만 겨우 남겨놓게 될 것 같다.

요 며칠 정말 화나는 일이 많다. 여기 운영진들을 무슨 기준으로 뽑고 어떻게 관리하는지 모르겠다. 말을 꺼내기 전에 수강생의 입장에서 한 번이라도 생각해보고 말했으면 좋겠다. 응원과 공감을 못 할 거라면 침묵이 낫다는 걸 정말 모르는 걸까? 아니면 자신의 입장과 이해관계를 챙기기만 급급해서 다른 사람이 안 보이는 걸까? 매니저 분들이, 상대방의 이야기를 진심으로 귀 기울여 들어줬다면 많은 것들이 달라졌을 거라는 생각에 씁쓸하다.