Chaeyeon0 / GreenDay_Study

여은개의 공부 일지
0 stars 0 forks source link

[20240525] 게시판 수정, 로그인 API 불러오기 코드 구현 #27

Open aranlll opened 1 month ago

aranlll commented 1 month ago

전까지 했던 내용 .. (쓰는걸 까먹엇습니댯...제송함니댯..🥲)

  1. 게시판 레이아웃 완성
  2. 입력 칸 코드 작성
  3. 등록 버튼, 입력 후 등록 누르면 보이게 하는 코드 작성

image

image

      <input
        className="input"
        style={{ whiteSpace: "pre-wrap" }}
        onChange={onChange}
        value={text}
      ></input>
      <div>
        <button className="backrock_button" style={{ whiteSpace: "pre-wrap" }}>
          <img
            src="backrock_button.png"
            onClick={() => {
              setOldText({ text });
              setOldText(text);
            }}
          />
        </button>
      </div>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

.input{
  position:absolute;
  left: 275px;
  top:40px;
  width: 1025px;
  padding: 60px;
  padding-bottom: 100px;
  border : 2px solid grey;
  border-radius: 15px;
  font-size: 30px;
  font-family: "Nanum Pen Script", cursive;

}

.input1{
  border-bottom: 2px solid grey;
  padding-bottom: 15px;
  padding-top: 15px;
  font-weight: bold;
  padding-left: 15px;
}
.input2{
  font-size: 25px;
  font-family: "Nanum Pen Script", cursive;
  padding-top: 20px;
}

.input_data_list{
  position:absolute;
  left:275px;
  border-bottom : 2px solid grey;
  border-top : 2px solid grey;
  top: 300px;
  width: 1150px;
  text-align: left;
  padding-bottom: 60px;
}

.backrock_button{
  border: none;
}

.backrock_button img{
  position: absolute;
  left:1300px;
  width:90px;
  top:180px;
  border:none;
}

게시판 수정 🤯

(여기서 부터 오늘 한 내용입니다 !!)

서버에서 데이터 불러오기 위한 axios 를 다시 설치하려고 했는데요 ..?

왜 안되는 건가요 ... ? 찾아봣더니 스크립트 실행 권한을 새로 설정해줘야한다길래

get-ExecutionPolicy
Set-ExecutionPolicy RemoteSigned

이거 두개 powershell에 입력하고 다시 하니 바로 되더라구요?!!

그리고 서버에서 데이터 받아오는 코드를 작성했습니당 !!! 아직은 연동을 안했기 때문에

이링크에서 codingapple1.github.io/shop/data2.json 데이터 불러오는 코드로 작성했어요 !!

  let [userInformation, setUserInformation] = useState([""]);

  useEffect(() => {
    getBoardList();
  }, []);

  const getBoardList = async () => {
    const data = await (
      await axios.get("https://codingapple1.github.io/shop/data2.json")
    ).data;
    setUserInformation(data);
    console.log(userInformation);
  };

그리구 css 로 목록을 나타내보았씁니다 !!!

image

근데 저 회색줄이 왜 자꾸 두개가 나타나는 걸까요 ..? 뭘 고쳐도 자꾸 회색이 두개가 뜨길래 결국 내일로... 잡니닷... 너무 피곤해요 ...🥲