개발야옹

position

positon property는 요소의 위치를 결정하는 속성이다. top, bottom, left, right 속성들을 함께 사용하여 요소의 위치를 지정할 수 있다.

position property의 값으로는 아래 다섯개의 값을 가질 수 있다.

1. static

2. relative

3. absolute

4. fixed

5. sticky

position 속성의 각 값들에 대해 살펴볼 것이다.

1. static

static은 position 속성의 기본 값으로 position 속성값을 지정하지 않았을 때와 같다. 일반적으로 요소 배치 순서에 따라 배치되며 bottom, left, top, right, z-index속성들에 대해 아무런 영향을 받지 않는다. 

따라서 static은 왼쪽에서 오른쪽, 위에서 아래로 배치되며, 부모 요소 내의 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다.

2. relative

relative는 요소를 문서의 흐름에 따라 배치를 한다. static과 다르게 자기 자신을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다. 그렇기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 동일하다. static과 relative의 차이는 좌표 프로퍼티(right, top, bottom, left)의 동작 여부 뿐이다.

3. absolute

relative와 static과 다르게 요소가 일반적인 문서의 흐름에 따라 위치하지 않는다. 부모 요소 또는 가장 가까이 있는 조상 요소 (static 제외) 를 기준으로 좌표 프로퍼티 ( top, bottom, right, left )만큼 이동한다. 즉, position이 relative, absolute, fixed 로 선언되어 있는 가장 가까운 부모 또는 조상 요소를 기준으로 요소의 위치가 결정된다.

만약 부모 또는 조상 요소가 static인 경우 body tag를 기준으로 위치하게 된다. 

다른 요소가 먼저 위치를 점유하고 있더라도 뒤로 밀리지않고 위에 덮어씌운다. ( 이런 특성을 부유 또는 부유 객체라고 한다. )

4. fixed 

부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티( top, bottom, right, left )을 사용하여 위치를 이동시킨다. 

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

아래 사진의 빨간네모에 위치한 버튼 처럼 항상 고정된 자리에 위치하는 것들은 fixed를 사용하면 된다.

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤되는 조사오가 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, left, bottom의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않는다.

➡️ 많이 사용해본 적이 없어서 잘 이해가 가지 않는다. 다음에 더 자세히 알아봐야 겠다.

문제

ANIMAL_INS 테이블은 동물 보호소에 들어온 동물의 정보를 담은 테이블입니다. ANIMAL_INS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, INTAKE_CONDITION, NAME, SEX_UPON_INTAKE는 각각 동물의 아이디, 생물 종, 보호 시작일, 보호 시작 시 상태, 이름, 성별 및 중성화 여부를 나타냅니다.

동물 보호소에 들어온 모든 동물의 정보를 ANIMAL_ID순으로 조회하는 SQL문을 작성해주세요. SQL을 실행하면 다음과 같이 출력되어야 합니다.

답안

SELECT * from ANIMAL_INS ORDER BY ANIMAL_ID

들어가기전

이번에 인턴을 하면서 인증서를 검증하는 툴을 만드는 업무를 맡게 되었다..! 두둥탁 !

node.js 잘 모르지만 일단 뚱땅뚱땅 열심히 해봐야지 하고 코드 작성하는데..! 

두둥 ! client단에서 파일을 업로드하면 req.body안에 파일이 들어있을 줄 알았는데 아무것도 받아오지 못한다 !! 쿠광!

응애 개발자 결국 stackoverflow에 질문을 남기게 되는데..!

Node.js File 받아오기

file, image, 제목, 내용 등을 입력하여 DB에 저장하는 페이지가 있다고 할 때 formdata에 담아서 전송을 해야한다.

처음에는 이것도 몰라서 무작정 업로드된 파일을 body안에 넣었으나 제대로 동작하지 않았다. 

FormData는 XMLHttpRequest 전송을 위해 특수하게 설계된 객체이기 때문에 특정한 조작을 하지 않은 이상 문자열화가 불가능하다.

내 React Code는 아래와 같았다.

// React - FileUplader.js

    const handleSubmission = (e) => {
        e.preventDefault();
        if(isSelected === false){
            alert("load the file");
        }
        else{
            const formData = new FormData();
            formData.append("certificate",selectFile);

            // API CALL
            fetch("http://localhost:8080/upload", {
                method: "POST",
                body: formData,
                headers : {
                    "Content-Type" : "multipart/form-data"
                }
            }).then((response) =>response.json())
            .then((result)=>{
                console.log("Success : ", result);
            })
                .catch((error)=>{
                    console.error("Error : ",error);
                });
        }
    };

사용자가 File을 업로드하고 submit button을 누르면 "http://localhost:8080/upload"로 요청을 보낸다. 이전에 사용자가 업로드한 파일을 formdata 객체에 넣어주고, 해당 객체를 body에 넣어 전송해준다. 

이렇게하면 body에서 바로 받아올 수 있을 것이라고 생각했으나 ! 결과는 {} ..

아래는 내가 작성했던 server.js 코드였다.

/upload 로 post 요청이 들어오면 req.body에서 사용자가 보낸 데이터를 받아올 수 있을 것이라고 생각 했으나 결과는 {} 였다.

app.use(cors()); 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));

app.post('/upload', async function(req ,res){
    try {
        const file = req.files; // undeifined
        const bodyData = req.body; // {}
        console.log("file : ",file);
        console.log("bodyData : ",bodyData);

        res.status(200).send({
            message: "FILE RECEIVED!"
        });
    } catch(error){
        res.send("ERROR")};
});

파일을 받아오기 위해서는 "multer" OR "express-fileupload"를 사용해야 했었다. !!!!

나는 multer를 사용하여 아래와 같이 코드를 작성하였다.

const multer = require('multer');
const upload = multer({
    dest : "public/"
});

app.post('/upload', upload.single('file'), function(req ,res) {
	// 중간코드
});

multer middleware를 사용하여 사용자로부터 받아온 파일을 public/ 폴더에 저장시킨다. 

이후 app.post ('/uploac'... ) 코드 안에 해당 저장된 파일을 다시 읽어와 처리를 하는 식으로 코드를 작성하였다.

아직 제대로 이해하고 짠 코드가 아니라서 다음에 더 자세히 해당 middleware에 대해 알아볼 것이다.

다음에는 express-fileupload를 사용해봐야지.

PKI ( Public Key Infrastructure )

PKI ( = 공개키 기반 구조 )는 디지털 증명서의 생성, 관리, 배포, 사용, 저장 및 파기, 공개키 암호화의 관리에 필요한 역할, 정책 등 일련의 절차들을 집합한 것이다.

통신에 관계된 당사자의 신원을 확인하고, 전송되는 정보의 유효성을 확인하기 위한 엄격한 증거가 필요한 활동에 대해 요구된다. 즉, 암호화와 복호화키로 구성된 공개키를 이용해 송수신 데이터를 암호화하고 디지털 인증서를 통해 사용자를 인증하는 시스템을 말한다.

공개키 암호의 사용화를 위해서는 무엇보다도 키의 생성과 인증이 필요하며 이런 것들에 대한 분배와 안전한 관리를 위한 체계가 필요하다. 이 시스템을 PKI라고 한다.

PKI는 일반적으로 인증기관(CA) 및 등록 대행 기관 (RA)을 구성한다. 

인증기관 (CA)는 아래와 같은 서비스를 제공한다.

- 디지털 인증서 발행

- 디지털 인증서 유효성 검증

- 디지털 인증서 폐기

- 공개 키 분배

RA는 디지털 인증서가 요청되면 제공된 정보를 확인한다. RA가 정보를 확인하면 CA가 디지털 인증서를 요청자에게 발행할 수 있다. 

[ + ] 더 많은 내용을 노션에 정리했지만 나중에 시간이 된다면 여기로 조금 더 정리해서 옮겨와야지 ! 

출처 : 

https://datatracker.ietf.org/doc/html/rfc5280

https://www.ibm.com/docs/ko/ibm-mq/7.5?topic=ssfksj-7-5-0-com-ibm-mq-sec-doc-q009900--htm