요즘 노드를 통해 백엔드에 도전하고 있다.

mysql을 통해 DB연결을 하고 api를 만들어서 웹페이지에서 호출을 해줬다.

"code": "ECONNREFUSED"

오류가 발생되었다.

맥에서 발생되는 경우가 있다는거 같은데,

설정 파일 (나의 경우 index.js)에서 

client: "mysql"의 connection안에
host: "localhost" -> host: "127.0.0.1"

host를 localhost에서 127.0.0.1로 변경을 해주었다.

{
  "code": "ER_NOT_SUPPORTED_AUTH_MODE",
  "errno": 1251,
  "sqlMessage": "Client does not support authentication protocol requested by server; consider upgrading MySQL client",
  "sqlState": "08004",
  "fatal": true
}

"code": "ER_NOT_SUPPORTED_AUTH_MODE",
  "errno": 1251,
  "sqlMessage": "Client does not support authentication protocol requested by server; consider upgrading MySQL client"

이번에는 위와 같은 오류가 발생되었다.

(맥 초보라 윈도우 그림판처럼 이용할 수가 없다...ㅠㅠ 세상답답...모자이크로 지저분하게 가린 터미널...ㅋㅋ)

맨 아래 선명한 부분만 참고.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '1234!!';

MySQL을 실행 한 뒤  위와 같이 UserName, Server Host, Password를 넣어준다.

그 후 조회하면 정상적으로 DB를 불러올 수 있다 :)

이미지의 갯수가 3개 이상일 때

자동으로 줄 바꿈 되어 보여주고 싶었다.

가로로 배치가 되고, 

정렬 역시 가로로 되고 있다.

컴포넌트 구조

ViewList.jsx - MainPlace.jsx

MainPlace를 ViewList에서 import해서 뿌려주고 있고,

ViewList에서는 map형태로 호출을 해주고 있다.

const Wrapper = styled.div`
  display : grid;
  grid-template-columns : repeat(3, minmax(100px, auto));
  grid-gap: 100px;
  padding : 50px;
  width : 80%;
  padding-top:70px;
`

function MainViewList(props){
  
  return (
    <Wrapper>
      {data.map((place, index) => {
        return (
          <MainPlace key={index.toString()} place={place}/>
        );
      })}
    </Wrapper>
  )
}

map을 뿌려주는걸 전체적으로 감싸는 부분<Wrapper>에서 

grid속성을 추가해준다.

이 중에서 중요한 속성은 

요거인데, 만약 이부분을 따로 부여하지 않으면

grid를 사용해도 무용지물이다.

위에 첨부한 코드처럼 하면, 

대이터를 가변적으로 불러와도 정렬이 예쁘게 되는 걸 볼 수 있다.

리액트에서 이미지를 불러오는 걸 시도했다.

json파일에 이미지 경로를 넣고 

그 경로를 화면에서 img 태그의 src에 넣어줬는데, 

이미지를 제대로 불러오지 못하는 현상이 발생되었다.

다양한 경로를 시도해봤으나 실패.

상대경로다보니 어느곳을 기준으로 잡아야 할 지 감이 안왔다.

App.js인지, index.html인지, json인지 직접 뿌려주는 화면인지..

기준은 index.html이 되는 것이 맞다.

나는 src안에 img 폴더를 두고 그걸로 사용했는데, 이렇게 하면 안된다.

ondex.html이 위치한 public 내에 이미지 폴더를 넣어서 사용해줘야 한다.

이렇게 하면 src - data내의 json파일에서

"../img/place/2-01.jpg"

이런형태로 경로를 넣어주면 json을 뿌려주는 곳에서 정상적으로 보여진다.

main.jsx에서 바로 불러올 때에도 이런식으로 쓰면 보여진다.

사용할 이미지가 한두개 라면 어디에 위치해 있건간에 

import를 사용해서 처리가 가능했겠지만, 

이미지는 이미지 폴더에 넣어주는 것이 중요할 듯하다.

폴더구조를 따로 잡아본 적이 없다보니 이런 실수가 발생되었는데,

data폴더는 import로 불러오기 때문에 저렇게 배치를 하긴 했는데, 

다른 사람 프로젝트로 구경해봐야겠다.

img태그에서 막힐 줄은 상상을 못했는데,

아직도 배울게 너무 많다 ㅎㅎ

글 리스트가 있을 때 해당 글을 클릭하면 해당 페이지로 이동이 되는 기능을 만들려고 한다.

props를 통해 데이터를 전달하는 것 까지는 이해가 되는데, 

onClick이벤트에 대한 정리가 잘 되지 않아 이 부분에 대한 흐름만 정리해본다.

코드는 길어질 수 있으니 import부분과 export 부분 생략 후 작성했다. 

아래 코드 작성을 해둔걸 한 눈에 볼 수 있게 하나의 이미지로 만들어봤다.

🌼 PostListItem.jsx

//PostListItem.jsx

function PostListItem(props){
  const { post, onClick} = props;
  
  return ( 
    <div onClick={onClick}>
      <p>{post.title}</p>
    </div>
  );
}

div를 클릭했을 때 props를 통해 받아온 onClick을 사용한다.

🌼 PostList.jsx

//PostList.jsx
//import PostListItem을 해준다. 

function PostList(props){
  const { posts, onClickItem } = props;
  
  return ( 
    <div>
      //📌리스트를 뿌려 줄 땐 이곳에서 map을 사용해서 뿌려준다.
      {posts.map((post, index) => {
      
        return (
          <PostListItem 
            key={post.id} 
            post={post}
            onClick={() => {
              onClickItem(post);
            }}
          />
        );//📌return end
        
      })}//📌map end
    </div>
  );
}

주석이 눈에 띄지 않아 📌표시로 강조해봤다.

리스트는 map으로 뿌려주는데, 그 안에서 PostListItem을 사용하면서 값을 보내준다. 

PostListItem에 보내는 값.

1. key : 글을 구분하기 위한 값으로 props에서 받아온 post의 id를 보내준다.

2. post : post 데이터 자체를 보내준다. map으로 뿌렸기 때문에 각각 개별데이터를 받아서 뿌려주는 느낌.

3. onClick : 함수를 사용해서 props에서 받아온 onClickItem함수를 사용하는데, 값은 post데이터를 보내준다.

🌼 MainPage.jsx

//MainPage.jsx
//import PostList
//import { useNavigate } from 'react-router-dom'; 
//페이지 이동을 위해사용. 설치 필요.

function MainPage(props){
  const navigate = useNavigate();
  
  return ( 
    <div>
      <PostList 
        post={data}
        onClickItem={(item) => {
          navigate(`/post/${item.id}`);
        }}
      />
    </div>
  );
}

처음 보내는 곳에서는 navigate를 import해서 가져와준다.

PostList에 보내는 값.

1. post : import에서 생략했지만, 실제 data를 보내준다. 위 코드 원문에서는 data라는 이름의 json파일을 사용했다.

2. onClickItem : PostList에서 onClickItem을 호출하면서 post를 넣어줬다. 즉 item = post라는 것. item.id를 가져와서 해당 글로 이동을 하게 해준다. 

여기서부터는 단순 나의 생각 정리를 위한 글.

나름의 해석을 담아 정리하자면.

A-B-C라는 화면이 있고, A에서 B를, B에서 C화면을 보여준다 가정.

1. A에서 B를 사용(화면에 담는다) :  data 보내줄게. onClick을 쓸거면 item을 같이 보내줘. 그러면 내가 그 번호에 대해 이동시켜줄게.

2. B에서 C사용 : A를 통해 받은 데이터가 있는데, C한테는 id는 구분해서 주고, data도 같이 줄게. 너도 onClick쓸거면 A꺼 onClick을 보내주는데, item담아서 보내달라고 하니까 그렇게 써야돼.

3. C : 난 그냥 보내준 onClick 그대로 쓸게.

라고 나름 정리를 해봤다..

여기서 드는 의문들..

여기서 엄청 헷갈리는 게 바로 2번이다...

A > B > C로 순차적으로 데이터가 흘러간다 생각했는데, B에서는 오히려 A에게 돌려준다. (아, return느낌으로 받아들이면 되나..?)

음..굳이 표현을 하자면, C에선 B호출 B에선 A호출이라 생각하면 간단한 것도 같은데..

C는 B가 보내준 onClick을 그대로 쓰니까 간단명료..

그럼 B도 A가 보내준 걸 그대로 써야지 왜 함수를 호출해서 받은 데이터를 다시 줄까 생각해봤다.

혹시, B는 map을 통해 여러개가 생성되니까 A입장에선 1번데이터인지, 2번데이터인지 구분을 하기 위해 받아온 개별 데이터를 넣어서 호출해주는 건가? 그렇다면 단건을 뿌려주고 받을 때에는 단순 호출만으로 되는건가?

+ 회사에서 codesandbox를 통해 테스트 하면서 확인한 걸 추가로 남겨본다.

codesandbox테스트 보기

B에서 onClick={onClick(data)} 와 같은 형태로 사용할 경우 화면이 최초 랜더링 될 때만 콘솔로그 호출이 된다.

원하는 기능이 랜더링 시가 아닌 onClick 이벤트 시 콘솔로그호출이 되어야 하기 때문에 

onClick={() => { onClickItem(items.content);  }} 과 같은 형태로 사용해야 한다. (전에 배웠던게 이제야 떠올랐다..)

그리고 리액트의 흐름이 이해가 되지 않았던 것을 js로 비슷하게 구현해봤다.

const data = {
    "no":1, 
    "startString":"글번호는 ", 
    "endString":"입니다."
};

console.log(MainPage(data)); //📌글번호는 11입니다.

function MainPage(data){ return PostList(data); }

function PostList(data){
 //📌받은 data의 첫문자 + 계산한 no + 끝문자 더해서 반환
 return data.startString + PostListItem(data.no) + data.endString;
}

function PostListItem(no){  return no + 10; }

아침에 문득, 데이터 흐름이 되돌아 간다는 느낌을 받았는데, 

js로 구현해보니 얼추 비슷한 느낌이다. js에서 return느낌으로 받아들이면 될 것 같다.

아직은 리액트 문법이 익숙하지 않기 때문에 그런 흐름이 생소하게 느껴지는것이리라..

이런 포인트가 몇가지가 있어서 리액트가 어렵다고 느껴지는 거 같은데

계속 생각해서 이해를 하거나, 얜 원래 그런애구나. 하고 익숙해지거나 

암튼 친해지내자 리액트야..

궁금증이 담긴 글은 숙제라고 태그 달아놓고, 나중에라도 정리해서 올려야겠다.