[Wecode 40일차] 절대경로설정법, 컴포넌트분리, 소셜로그인기능

1. 몇일째 css 작업을 하느라, 진이 다 빠졌다. 프로젝트 막바지여서 그런지.. 구현해야할 기능이 몇개 남았는데....

토욜까지 완성할 수있을 듯 싶다.

 

반응형으로 맞추다 보니, 틀어지는 일이 다반사...

리스트화면 반응형으로 구현간 호버가 역으로 먹히는 현상이 발생했다.

원인은 기존의 DB에서 불러온 이미지 형태를 background:cover 로 설정하다보니, 꽉찬상태에서 반응형으로 줄이다보니, 리스트가 한줄로 나타나면서 깨지는현상이 발생했다. 

해결은 background-size : auto 200%; 로 원래 기능을 구현했다. 

 

2.  컴포넌트 분리

메인화면 리스트 컴포넌트(음식사진, 식당이름, 음식종류)를 디테일화면에서 사용하고, 크기, 위치만 변동했는데,

이미지가 자꾸 깨지고 컨트롤하기 어려운 상황이 발생했다. 

이런 경우는 멘토님께서 컴포넌트를 분리할 것을 권유하셨고, 바로 조치하였다.

 

3.  카카오 모빌리티 안세원 개발자님의 세션

오늘은 안세원님의 세션을 위코드측에서 마련해주셨고,  좋은 말씀들을 많이 해주셨다.

같이 피자먹으면서, 카카오 개발문화에 대해서 알아본 좋은 시간이 었다.

백엔드 =>소프트웨어 공학 컨설턴트 => 안드로이드(프론트) 현업에서 다양한 경험을 쌓으셨다.

 

4. 리액트 상대경로를 절대경로로 지정하는 방법

package.json에서 script 부분에 설정을 한다.

script부분은 개발자가 커스텀해서 사용할 수 있으며, script에 있는 build를 실행시키면, root 디렉토리에 build폴더가 생성되고 

여러가지 내용들이 있다. 이부분은 리액트에서 빌드할때, 파일을 하나로 합치는 역할을 하며, 개발자도구-소스에서 확인 할 수 있다

"scripts": {
    "start": "REACT_APP_ENV=development NODE_PATH=./src react-scripts start",
    "build": "REACT_APP_ENV=production NODE_PATH=./src react-scripts build",

위와 같이 NODE_PATH=./src 부분을 적어주면 된다.

그리고 리액트에 개발모드를 명시해주는데 REACT_APP_ENV=development 이렇게 작성하면 개발모드, production이면 상업모드 이다. 이부분은 빌드에 명시해준다.

 

현업팁>

config.js파일을 만들고 커스텀 설정을 하는데, 상업용, 개발용에 따라 다르게 작동하게 하고자할 때, 아래의 느낌으로 작성해서 사용한다.

if(env === 'dev'){
    ADDRESS= "http://10.58.3.141:9000/"
}else if(env === 'prod'){
    ADDRESS= "http://aws.10.58.3.141:9000/"
    console.log = () => {}; //콘솔로그 덮어버리기
}

하나의 프로젝트에서 2명이 나눠서 하나의 프로젝트를 진행하는데, 다른 곳에 서버 붙여서 사용해야할때, package.js 파일을 아래와 같이 작성해준다. 

script
"start:admin" : "REACT_APP_ENV=admin
"start:main" : "REACT_APP_ENV=main

5. 소셜로그인 구현