아쿠의 개발 일지

한화 시스템 부트 캠프 13주차 회고 본문

ETC/한화시스템

한화 시스템 부트 캠프 13주차 회고

디아쿠 2024. 7. 28. 17:36

어린이 할래 그냥

 

이번 주는 그래도 맞춰 적기 위해서 이렇게 나왔습니다. 오랜만에 딱 지킨 업로드 ,, 뭐 약속은 중요한 거니까요

이제 백엔드 프로젝트가 끝나고 어느정도 시간이 생길 줄 알았는데 바로 프론트에 도입하게 됐고,

백엔드보다 프론트가 더 어려운 거 같아요 ,,, 기분 탓일까? 싶은데 사실입니다.

 

예쁘게 만드는 게 제일 어려운 거 같아요 디자인적 감각 가진 사람들을 존경하게 됐습니다 . . . 🧙

 

그래도 오랜만에 이론을 배우다 보니 꾸벅 졸게 되더라구요. 죄송해요 강사님.

아 ,,, 맞아 노션에 정리를 하느라 너무 힘들었어요.

 

너무너무 간단한 거지만 기초가 중요한 거니까 차근 차근 정리를 해 볼게요.

 

제목 태그

 

body가 화면에 보여지는 부분이고, 제목 태그는 h1부터 큰 순서대로 내려가는 것 같습니다

왼쪽에 보여지는 화면이 웹페이지 화면이고 오른쪽에 의해서 나타나는 것이라고 보시면 될 것 같아요,, !

그 외에도 표를 만드는 방법에 대해서 배웠는데요,

작지만 보이잖아요

 

개발새발 정리법

 

iframe

내 페이지에 다른 영상을 보여주고 싶다 ?

<iframe src = "http://www.naver.com"></iframe>
// 간혹 다른 사이트를 보여주고 싶을 때 사용

 

src 안에는 주소를 넣어주면 되는데, 뭐 넣고 싶은 거 넣으시면 됩니다 ,, !

 

폰트 적용

폰트는 https://fonts.google.com/?subset=korean¬o.script=Kore 여기서 사용 했고, 애용하셔요. ㅎㅎ.

 

 

이제 가장 중요한 백엔드와 프론트를 연결하려면 ?

requestParam으로 전달할 때를 말씀 드릴게요 ,, !

보통 from 태그를 통해서 백엔드로 데이터를 전달합니다.

 

값을 보낼 input을 하나 만들어두고, 전송하는 버튼을 하나 만들어둬야 합니다.

input 태그에는 type라는 속성이 있는데, 이게 바뀔 때 마다 어떻게 입력을 받을지 화면이 달라집니다. 

 

text : 일반적으로 글씨
password : 별표로 표시
file : 클릭하면 실제 파일을 선택하는 창이 뜬다
rodio : 하나의 그룹에서 둘 중 / 셋 중에 하나만 선택해야 할 때 (여러가지 안 되고 하나만) name = “다 같게” 해주면 같은 라디오가 되고, 안 맞춰주면 각자 선택이 된다.
checkbox : 여러 개를 체크해야 하는 경우 name = 이름을 같게 해 주고, 체크는 여러 개 할 수 있다.
date = 날짜
reset = 초기화 버튼
button = 기능 없는 버튼
submit = 전송하기 버튼 → 서버로 전송 된다.
　어떻게 ? form 태그에 action과 method 가 있다.
백엔드 서버는 action에 적어주고, http://localhost:8080/test/data
만약 같은 서버라면 /test/data 처럼 절대경로도 가능 method = post / 형식 적어주기
타입이 file이면 백엔드도 requestPart로 받아줘야 해서
enctype = 멀티파트/폼데이터 → 파일이 있을 때 추가 해 줘야한다.

 

통신 시키려고 만든 건데, 색을 맞춰서 따라간다고 생각 하시면 돼요

 

정리

HTML : 화면에 출력될 내용 작성

CSS : 출력될 내용 예쁘게 디자인, HTML이 없으면 아무 의미 없음 → HTML한테 디자인을 적용,

선택자로 HTML을 선택해서 디자인 하는?

 

자바스크립트

컴파일 언어 vs 인터프리터 언어

  • 자바 스크립트 : 인터프리터 언어
  • 자바 : 둘다 가지고 있다. (JDK가 설치 되어 있어야 실행 가능 = 자바의 인터프리터)

자바 스크립트는 단일 쓰레드이다. 단일성 -> 하나의 작업만 가능하다. 작업이 끝날 때까지 다른 작업을 못 하는 것.

 

자바 스크립트의 위치 거의 <body> 아래에 둔다

   <script>
        function test1() {
            console.log("test1");
        }
    </script>
    <script src="script.js"></script>

 

자바 스크립트는 자바와 다르게 변수 생성하는 방법이 다르다

let var1 = 10;
let var2 = "test1";
let var = false;

변수 만드는 법 : let 변수명 = 값;

vaf랑 let의 차이
- var var1 = 10;
- var var1 = 20;
같은 변수 명으로 두 번 만들고 실행하면 원래는 안 되지만 얘는 된다
-> 실행 해 보면 재생성이 된다.

 

var : 재생성 및 재할당 가능

let : 재생성 X , 재할당 가능

 

함수 만드는 방법

 

function 함수이름(매개변수) {
	return 반환값;
}

function test(매개변수) {
	return finc1;
}

// 리턴만 하는 함수면 아래처럼 바뀐다
const f4 = () => "finc1";

 

AXIOS ?

운영 환경에 따라 브라우저간 XMLHttpRequest 객체 또는  Node.js의 HTTP API를 사용한다.

Request의 응답을 자동으로 JSON 형태로 만든다.

 

이 방식으로 백엔드와 연결해서 데이터를 받아오는 작업을 할 수 있다.

예를 들어, 데이터를 받을 때 GET 을 사용하여

        const getProgram = async () => {
            let catacoryId = document.getElementById("search-input").value;
            let url = `http://localhost:8080/program/readCategory?categoryId=${catacoryId}`;
            let response = await axios.get(url);
            programReadCategory = response.data.result;
            console.log(programReadCategory);
            displayPrograms(programReadCategory);
        }

url에 있는 주소를 통해 값을 받아올 수 있다.

위는 ,, 우리 백엔드 프로젝트에 있는 값이다. 저런식으로 받아오면 어떻게 출력 되는지는 아래에서 보여드릴,,,게요 !

아직 put, pacth, delete, post 를 써 보지는 않았고 데이터만 받아오는 작업을 했다.

 

 

카테고리 아이디를 입력 하고 버튼을 누르면 미리 넣어둔 값이 정리되어 나온다.

예쁘게 정리하기 위해서는 CSS를 좀,,, 더 알아야 할 것 같다.

 

일단 배운대로 했다,, !  끝 !

 

그리고 홍보 , , , 

공부를 하면서 뼈저리게 느낀 점은 CS의 중요성이다.

다음 이 책은 네트워크 영역에 대한 기초적인 내용을 다루고 있고, 설명이 너무 잘 되어 있어서 이해하기 쉬웠다.

개발자 취업을 준비 하시거나, 네트워크 기초에 대해서 쉬운 설명으로 이해하고 싶으신 분들은 강력 추천합니다,, !

저도 구매 예정 ㅎㅎ! 

벌써 너무너무 예뻐 ㅎㅎ

 

 

KEEP

 

프론트와 백을 연결하는 과정이 이해가 잘 되지 않았다,, 그래서 일단 냅다 모든 것을 따라 적고

주말에 복습하는 형식으로 가고 있다. 위처럼 다행,,,? 결과를 잘 받아오고 있다. 이런식으로 모르면 멍 때리지 말고 뭐라도 하면,,, 될 것 같다.

백엔드 프로젝트를 다시 살펴보니 이걸 왜 이렇게 짰지? 하는 코드들이 많아서 수정하고 있다.

제발 pull 하고 푸쉬를 하자 ...

팀장님 죄송해요 , , ,

 

이미 다 짰다고 생각하는 코드들을 다시 보는 것도 좋은 것 같다,, 아니 봐야한다.

3일만에 짠 코드가 어떻게 완벽하겠냐,,, 고칠 부분이 백만가지다... 하나씩 고쳐보자 !

 

Problem

 

그냥 내가 문제다. 너무 힘들어서 자격증 시험을 결시했다. 다음 번엔 꼭 붙을게요,,

전쟁터에 어떻게 총알 없이 가요 그쵸? ㅠㅠ 

 

Try

 

좀 똑바로 살아라.

 

이따 와서 썸네일 사진 고치겠습니다 ,, 현재 카페라서 하핫

 

삶은 달걀이고, 나는 감자다.
728x90

'ETC > 한화시스템' 카테고리의 다른 글

한화 시스템 부트 캠프 15주차 회고  (1) 2024.08.25
한화 시스템 부트 캠프 14주차 회고  (1) 2024.08.25
한화 시스템 부트 캠프 12주차 회고  (10) 2024.07.22
한화 시스템 부트 캠프 11주차 회고  (10) 2024.07.14
한화 시스템 부트 캠프 10주차 회고  (4) 2024.07.09
'ETC/한화시스템' Related Articles more