[SW3] 1103 오피스아워 (중앙정렬, 정규식, 경로)

Bomin·2022년 11월 14일

[ALICE SW3]

목록 보기

2/4

오피스아워

오피스아워 (프론트엔드 코치님과 질의응답 및 프젝 코드리뷰) 시간에
진행한 질문과 답변을 기록합니다.

1. 아이콘 중앙 정렬 display

Q. 장바구니 안에 아이콘과 설명이 세로 가로 정중앙에 오게하고 싶은데 어떤 방법이 좋을까요? 지금은 display : block; margin :auto 적용 상태입니다.

해당 장바구니 div에 아래처럼 넣어주면 된다.

display: flex;
justify-content: center;
align-items: center;

justify-content: center; 는 가로 중앙정렬이고
align-items: center; 는 세로 중앙정렬이다.

2. 가격데이터 콤마

Q. 가격데이터를 받아올 때 화면에서 3,000원 처럼 콤마를 찍어서 보여주고 싶습니다.

가격데이터를 바꾸는 함수를 짜서 씌우기
-> function 가격콤마찍기() {} 만들기
-> 가격콤마찍기( 백엔드에서 받은 데이터 )원

정규식 (/\B(?=(\d{3})+(?!\d))/g, ',') 을 이용할수도 있고
자바스크립트 toLocalString 를 활용하는 방법이 있다.

// 숫자에 쉼표를 추가함. (10000 -> 10,000)
export const addCommas = (n) => {
  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

// 13,000원, 2개 등의 문자열에서 쉼표, 글자 등 제외 후 숫자만 뺴냄
// 예시: 13,000원 -> 13000, 20,000개 -> 20000
export const convertToNumber = (string) => {
  return parseInt(string.replace(/(,|개|원)/g, ''));
};

3. 경로 오류 이슈 ( Live-server / npm )

Q. db 디렉토리 안에 dummy.js (export { data };) 데이터를 받아와서 화면에 출력하는 중 Live-server 에서는 문제없이 잘 작동하다가

npm start로 서버를 실행해서 테스트 하니 404 오류가 뜨고 더미 모듈을 받아오지를 못합니다. 이유가 뭘까요? 파일 경로가 잘못된 건가요?

그래서 임시로 아래처럼 cart.js 와 같은 폴더에 더미를 하나 더 복사해서 받아와주니 정상 작동합니다.

//경로 오류
import { data } from '../../db/dummy.js';
//더미 같은 폴더 내 복사함, 오류 없음
import { data } from '.dummy.js';

상위 상위 폴더에서 모듈 받아올 때 문제가 있는 걸까요?

답변:
네 맞습니다 :)

보민님께서 실제로 로컬에 돌려보면 아시겠지만, 로컬에서 live server 를 돌리면 의존성이 로컬에 있어서 접근이 가능하지만, npm start 를 하게 되면 의존성이 서버도 같이 생깁니다 ( 그 예로, .env 파일이나 mongoDB 권한이 없으면 실행이 안됩니다) 그래서 db 폴더나 그 상위 폴더는 접근하지 못하는 경우가 종종 생깁니다.

그래서 구조적으로 설계할때 최대한 백과 프론트의 구조를 분리해서 관리해줄 필요가 있어 보입니다!

예를 들면, view 단에 mocks 라는 폴더를 하나 만들어서 거기서 목데이터를 관리해주는것도 좋아보이고, 임시로 cart 폴더안에 들어가는 데이터는 cart 폴더안에서 관리해주는 방식도 나중에 실제 api 가 구축되고 해당 데이터를 덜어낼때 더 편하게 하실수 있습니다!
추가적으로 npm start 라는 명령어는 pakage.json 에 보시면 scripts 라는 부분이 있는데 그 부분을 간편하게 실행시켜 주는 것 입니다!
pakage.json 에 script 부분에 start: '~~" 이 있으면 실제로 npm start 를 하게되면 '~~' 을 실행시킵니다.