7/9 14일차

ssongyi·2022년 7월 8일
0

MOUM PROJECT

목록 보기
14/33

props.. 다들 잘 하는 props 나만 이해하기 어렵다..
오늘도 props를 이해하기 위해 연습해 봤다.
그리고 이미지 업로드를 구현했다.

오늘도 알차게.. 트러블 슈팅했다 ..!


1. export, default, { } 생략

props를 사용해보기 위해 컴포넌트를 하나 만들었다.

const One, const Two 두 개의 컴포넌트를 만들고 export를 시도했는데 ..

둘 다 export가 되지 않았다.

이유를 찾아보니 export 할 때 하나의 컴포넌트만 default 할 수 있었다 !

그리고 이렇게 default 를 사용했을 경우,

import 해 올 때 { } 중괄호가 생략이 가능하다.

그럼 Two 는 어떻게 export 해야할까 ?

애초에 만들때 export 를 앞에 선언하고 만들 수 있었다.
사실 알고는 있었지만 응용력이 떨어져서 .. 알면서도 헤맸다 ..

이런 식으로 default 없이 export 해 올 경우,

중괄호 { } 안에 넣어서 import 해야 한다.


#2. 폴더, 파일 네이밍 문법

조금 뜬금없지만 계속 헷갈려서 확실하게 정리하고 넘어가고자 한다.

< React 기준 >

- folder 명은 앞글자가 소문자인 camel Case로 작성한다.

- file 명은 앞글자가 대문자인 Camel Case로 작성한다.


3. props 부모 --> 자식

예제 1)

여기서 나는 One의 props 를 Two에게 전달해주고자 했다.
하지만 실패했다.

이유는 One의 props를 Two에게 전달해주는 코드도 없을 뿐더러,

이 둘의 관계가 부모 자식 관계가 아닌, 형제 관계였기 때문이다.

props의 성질은 부모 --> 자식 에게 전달해주는 구조를 가졌기 때문에 실행되지 않았다.

예제 2)

이렇듯 ,
practice2 라는 부모 컴포넌트 안에
Test 와 Hello 라는 자식 컴포넌트가 있어서,

practice2 가
---> 자식컴포넌트들에게 각각 name="부모님1", name="부모님2" 라는 값을 전달해주는 것이다.

그렇기 때문에 Hello 라는 자식 컴포넌트가 practice2 로부터 props 를 받아올 수 있게 됐다 !

styled-component 에서도 받아온 { name : 부모님1 } props 로 활용해서 css 를 짤 수 있다 !


4. postman 사용법

나는 이론에 약해서 늘 실습을 해봐야 외우는 것 같다 ..
자꾸 웹에서 500 에러가 나서 내 잘못인가 postman 을 돌려봤다.
그 순서를 잊지 않기 위해 적어보고자 한다.

1. API 명세서 맞춰서 METHOD, URL 작성

2. 애플리케이션의 AccessToken 복사 붙여넣기

복사해서 포스트맨의 Authorization 의 Token에 붙여넣는다.

3. API 명세서대로 data 적기

Send 버튼을 누르면 request가 돌아간다.

4. ERROR

415 에러

잘은 모르겠지만 백엔드 측과 협의해봐야 하는 에러같다.
415 에러 말고도 다른 무수한 에러들이 많이 일어난다.
웹에서 에러가 난 후 포스트맨까지 확인해 봤을 때,
포스트맨까지 에러가 난다면 높은 확률로 백엔드 측 오류이기 때문에 백엔드와 소통해봐야 한다.

Could not send requst

혹여나 API 명세서대로 쓰지 않았거나, ID 값을 잘못 보냈거나, 백엔드 측에서 서버를 닫았거나, API 주소를 잘못 알려줬거나 등등 잘못 SEND 했을 경우 이런 에러가 난다.

404 에러

이것은 페이지가 아예 없다는 뜻이기 때문에 무조건 백엔드 분들께 말씀 드려야 한다!


5. focus, blur

내가 구현하고 싶은 것은

처음엔 textarea 가 비활성화 되어 있다가,

수정하기 버튼을 누르면

textarea가 자동포커스로 깜박거리고,

적용하기 버튼을 다시 누르면 포커스가 비활성화 되는 기능을 구현하고 싶었다.

그렇기 위해서는 우선 textarea에 useRef를 줘야 했다.

그리고 원래는 수정하기 버튼을 누르면 바뀌도록 button onClick에 함수를 줘야했지만,
이미 수정하기 --> 적용하기 css를 바꾸도록 setActive 를 준 상태였다.

그래서 form 데이터로 보내려고 onSubmit 으로 코드를 짰는데 ..
좀 난해해서 나중에 다시 만져봐야겠다.. 우선 지금으로써는 form 으로 updataDesc 를 보냈다.

그리고 삼항연산자와 blur, focus 를 이용해서 actived 여부에 따라 포커스를 on/off 했다 !


6. Image 1장 업로드(프로필)

프로필 이미지 1장을 업로드 하기 위한 함수를 만들었다.

리덕스로 id, fornData, config 를 보냈다.

html의 img는 백엔드에서 내려주는 data 중 img 부분을 넣었다.

1. 백엔드에서 { } 객체 안에 이미지 url 을 넣어주므로 response.data.url 로 데이터를 넣어줬다.

2 - 1. html에서 profileList.imgPath 로 받기 때문에 imgPath : imageUrl 로 받아야 한다.

2 - 2. 이름(imgPath)을 주려면 { } 객체로 감싸야 한다

--> {imgPath : imageUrl} = action.payload

info = 객체 { }
이므로 state.info = action.payload 와 같은 equal(등호)를 써야한다.

* 만약 info : [ ] 였다면? (배열이었다면?)
---> push, filter, map 과 같은 배열이어야만 돌릴 수 있는 함수를 사용해야 한다 !

uploadPhoto 에서 그냥 state.info = action.payload 로 하면,
setProfile 의 데이터 뿌려줄 때와 겹친다.

1 ) ...state.info ?

--> 기존의 state.info 데이터 값을 그대로 유지하기 위해 작성

2 ) ...action.payload ?

--> action.payload = {imgPath : imageUrl} 객체 이므로 중괄호를 벗기 위해 스프레드 문법 사용


7. spread 문법

obj2의 name 값을 변경하고 싶은데,

obj(기존 객체)와는 연결되지 않고(건들지 않고) 독립적으로 값을 바꾸고 싶을 때

{ ...obj } 와 같은 spread 문법을 사용해서 새로운 객체를 만든다.


1. const obj2 = { ...obj, name : "test"}

2. const obj2 = { id : 1, name : hello", name : "test" } // 두 가지가 동일한 문법이다.

JavaScript의 문법상 같은 이름이 2번 반복되면 뒤에 있는 값이 적용된다.

그렇기 때문에 1번과 같은 spread 문법을 사용해서 새로운 객체에, 변경된 값을 적용한다.
= 원본에서 바꾸지 않을 부분은 유지하고, 바꿀것만 바꾼다.

0개의 댓글