우리 fisa 2기 '클라우드 서비스 개발' 22주차

어후 .. 

 

전날 서울에 결혼식이 있어서 어릴적 친구들 만나서 한잔했더니 너무 힘들다 ㅎㅎ.. ㅋㅋ

 

 

---

일상얘기

이번 한 주도 정말 정신없게 산 거 같다. 정처기 하느랴 ~ 프로젝트 하느랴 ~ 코테 공부하느랴 ~~ ㅋㅋㅋ

 

 

저번에 내가 말했던 우리 프로젝트만의 색깔을 들어내기 위해서 설득을 한다고 했다.

 

결과적으로는 설득은 성공했고, 조금 더 지도에 많은 기능들이 들어가면서 지도 기반 프로젝트의 힘이 실리고 있다 !! ㅎㅎ

 

그 과정에서 가상으로 어떤 일이 발생할 것이라는 말을 좀 했었는데 너무 가상으로만 생각하면 추상적인 느낌이 많이 날까봐

 

실제로 어떻게 흘러가는지 보여주기 위해서 우리가 자체 POS기를 제작해보았다.

 

 

 

그 결과, 실제로 데이터를 받을 수 있게 되었고 이를 활용해서 우리팀의 POS기를 제작했다.

 

프론트부터해서 백앤드까지 만들어 보며 공부도 하고 좋은 시간이었다 !!

 

아직은 완전히 만들어지지 않아서 공개는 나중에 하도록 하겠다 !!

 

 

 

 

이제 우리 프로젝트를 위한 페이지 제작이 막빠지에 들어왔다. 현재 대부분 어플리케이션을 위한 페이지는 끝이 났고

 

관리자페이지를 만들고 있다.

 

처음에는 위의 이미지처럼 관리자페이지를 만들려고 했으나, 관리자 페이지는 온전히 컨트롤 할 수 있는 행 부분을 잘 보여주면 되기 때문에 위의 검색창과 등록 버튼이 차지하고 있는 비율을 확 줄여주면 좋겠다는 주변사람들의 피드백을 받았다. 그래서  웹에 올라와 있는 관리자 페이지의 형태를 보고 수정을 했다.

 

 

그 결과, 위의 사진과 같이 수정을 했다 !!  훨씬 더 깔끔하고 관리자가 이용하기에 직관적이게 되었다 ㅎㅎ

 

이렇게 관리자 페이지가 거진 완성이 되었다. 

 

이제 남은 것은 고객센터인데 이 역시 관리자페이지처럼 제작을 해보려고 한다.

 

그리고 다음 주 부터 본격적으로 백이랑 연결하면서 진행할 예정인데 1차적인 완성이 기대가 된다.

 

 

이 번 주에도 결혼식이 있었다. 

 

나의 어릴적부터 지내던 친구의 여동생의 결혼식이었다 ㅋㅋㅋㅋ

 

이 친구도 가족끼리 다 친해서 온 가족들 그리고 우리 엄마 아빠까지 참여하셨는데 이번 결혼식은 서울에서 해서 버스를 대절해서 오셨다 ㅎㅎ

 

ㅋㅋㅋㅋ 웃긴건 그 버스 내부에서 맥주랑 술 등등이 있어서 우리 가족님들은 한잔 하시면서 올라왔다더라구요 ㅋㅋ

 

그리고 나도 3주전에 결혼한 친구와 그 친구들을 또 다시 만났다.

 

결혼식이 끝난 후, 그 친구들이랑 같이 맛있는거 먹으러 갔다 ㅎㅎ

 

 

서울 을지로 쪽에 있는 소고기집에 갔었다 ㅋㅋ 완전 flex 했지만, 사실 이날 우리 가족님들이 부산 내려가기전에

 

재밌게 놀아라고 30만원을 지원해주셨다 ㅋㅋ 그래서 이렇게 완전 플랙스 하게 먹어 보았다.

 

맛은 정말 맛있었고 술도 완전히 달았다 ㅋㅋ 그결과ㅠ

 

이렇게 ㅋㅋㅋㅋ 3주전에 결혼한 친구 집에 집들이 까지가서 눈물의 여왕까지 보고 왔다 ㅋㅋㅋㅋ

 

우리들 만나면 왜이렇게 마시냐 진짜 ㅋㅋㅋ...

 

다음에 만나면 좀 적게 먹자고 해야겠다 ㅠㅠ

 

 

그렇게 열심히 놀고 동생집에서 자고 나는 또 바쁜 하루를 보내기 위해 수원으로 열심히 내려왔따.

 

근데 어! ? "네이버" 가 보였다!!

 

뭔가 육안으로 보는 건 처음인 느낌이었다 처음맞나 ?? 아무튼 네이버의 시그니쳐 색상 초록색이 건물에도 녹여져 있다는게 너무 신기하고 멋졌다 !!

 

나도 나중에는 네이버도 갈 수 있는 막강한 개발자가 되고 싶다는 생각을 했다.

 

할 수 있다 !! 💪

 

 

---

공부 얘기

 

1. 이번 주 배운 것

 

요즈음 프론트 앤드에서 많은 것들을 복습하고 공부하고 있다.

 

최근에 배운 두 가지가 있는데 공유해보고자 한다 

 

바로 이미지 조작을 위한 image 객체와 Too many re-renders에러에 관한 것이다.

 

image 객체를 활용한 이미지 조작

 

현재 우리 프로젝트에서 카드 이미지를 가지고 활용하는 부분이 있다. 이때 카드의 이미지를 크롤링해서 가져오게 되는데

 

카드마다 조금 형태가 다르다. 어떤 것은 새로로 되어 있고 어떤 것은 가로로 되어 있다.

 

그러다보면 이미지의 형태에 따라 ui가 변할 수도 있게 된다.

 

이를 해결하기 위해서는 가로일때 새로일 때 분리해서 적용해줘야 하는데 이를 활용하기 위해서 image객체를 사용한다.

 

 const img = new Image();

 

이는 img라는 이름으로 Image() 객체를 생성한다.

 

그리고 이 이미지 객체의 메서드인 src를 사용해서 이미지 주소를 지정해준다.

 

const img = new Image();
        img.src = src;

 

이렇게 하면 img에 src가 담기게 되고

 

img.onload

 

이를 활용하면 img가 실행이 되면 ~~ 이라는 것까지 준비가 된다.

이렇게 한 뒤에 본격적으로 가로형일때 새로형일때 구분해주는 조건문을 활용하면 된다.

 

if (img.width > img.height) {
                // 이미지가 가로형일 때
                setImageClass('h-[80px] md:h-[100px] mt-[1px] md:mt-[30px]');
                setImageGapTop('gap-[30px] md:gap-[100px] top-[50px] md:top-[40px]')
                setTitleSum('mt-[30px]')
            } else {
                // 이미지가 세로형 또는 정사각형일 때
                setImageClass(' ml-[25px] md:ml-[30px] h-[120px] md:h-[150px]');
                setImageGapTop('gap-[55px] md:gap-[130px] top-[25px] md:top-[40px]')
                setTitleSum('mt-[50px]')
            }

 

그렇다면 최종적으로 

 

useEffect(() => {
        const img = new Image();
        img.src = src;
        img.onload = () => {
            if (img.width > img.height) {
                // 이미지가 가로형일 때
                setImageClass('h-[80px] md:h-[100px] mt-[1px] md:mt-[30px]');
                setImageGapTop('gap-[30px] md:gap-[100px] top-[50px] md:top-[40px]')
                setTitleSum('mt-[30px]')
            } else {
                // 이미지가 세로형 또는 정사각형일 때
                setImageClass(' ml-[25px] md:ml-[30px] h-[120px] md:h-[150px]');
                setImageGapTop('gap-[55px] md:gap-[130px] top-[25px] md:top-[40px]')
                setTitleSum('mt-[50px]')
            }
        };
    }, [src]);

 

이렇게 useEffect 훅을 이용해서 src가 바뀔때 마다 랜더링을 하게 되고 img.onload 함수가 작동하게 된다.

 

그리고 내가 원하는 조건을 활용해주면 되는 것이다.

 

그 결과로 가로와 새로 각각 ui가 바뀌게 되고 손쉽게 다룰 수 있게 된다 !!

 

 

Too many re-renders.에러

 

관리자 페이지를 만들다가 만난 문제를 해결하다가 오랜만에 발견한 에러였다 !!

 

 

이 코드를 보면 onClick = {forUpdateModal(user)} 로 작성을 했다. 나는 user이라는 객체를 매개변수로 담고 실행시키고 싶었다. 그렇기 때문에 저렇게 하면 되겠지 ~ 라고 했는데

 

 

이러한 오류가 나면서 rendering이 무한 반복이 되고 있다라며 에러 설명글이 있었다.

 

처음에 이걸 보는 순간 아차 싶었다..!! 과거 자바스크립트를 배울 당시 onClick ={콜백함수}를 해줘야 한다는 강사님의 말이 기억났다.

 

그래서 바로 그렇게 바꿨더니

 

오류 없이 정상적으로 작동이 되었다.

 

원인을 파악해 보면

 

일반 함수를 넣을 경우 랜더링 되는 과정에서 그 함수가 바로 호출이 되어 버린다. 나는 onClick 즉, 클릭 했을 때 작동해야 할 함수가 곧바로 나의 의지 상관없이 실행되는 것이다. 그러면서 값이 만약에 달라지게 되면 무한랜더링이 발생하는 문제까지 발생하게 된다.

 

이렇게 onClick의 기능을 제대로 하지 못할 뿐 더러 무한 랜더링이라는 잠재적인 오류도 있기 때문에

 

React에서는 이러한 구문 자체를 막아 놓았다.

 

이를 해결하고자 onClick={콜백함수} 를 적용함으로써, 내가 클릭시에 작동 될 수 있도록 한 것이다.

 

2. 이번 주 시행착오

 

이번 주의 시행착오는 프로젝트로 인한 불규칙적인 생활패턴이다 ㅋㅋㅋ 

 

물론 곧 끝나가고 있고 이러한 생활이 계속 이어지는 것은 아니지만 현재 정처기 공부에 회사 지원 그리고 코테 등 같이 하고 있기 때문에

 

정신이 너무 없다 ㅋㅋ ㅠ

 

우선은 최선을 다해서 진행하고 있지만 쉽지만은 않다 !

 

프로젝트 외의 공부 비중이 많이 줄었지만 꾸준함 역시 중요하기 때문에 꾸준히 하면서

 

최대한 나의 시간을 쪼개어서 잘 조절 해보는 것이 현재로써 가장 최선이다.

 

 

3. 앞으로 어디에 적용

 

-image 객체를 활용한 이미지 조작-

 

앞으로 풀스택 개발자로 성장하기 위해 프론트 앤드를 다루는 것도 매우 중요하다. 

 

그런 의미에 있어서는 이러한 하나하나의 디테일을 다루는 능력은 매우 중요하다고 생각한다. 

 

꾸준히 디테일에 신경 쓰면서 내가 원하는대로 마음껏 프론트앤드를 다룰 수 있는 그날까지 최선을 다해 공부할 것이다 ㅎㅎ

 

-Too many rendering-

 

프론트 앤드를 잘하기 위해 자바스크립트의 원리를 파악해 놓으면 향후 문제가 생기더라도 바로 찾을 수 있는 능력이 생기게 된다.

 

매번 이러한 오류가 있을 때마다 그 원인과 해결방법을 공부하고 기록을 함으로써 자바스크립트를 더욱 잘 활용하는 프론트앤드 개발자가 되도록 최선을 다할 것이다. 

 

4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표

 

-정처기- 

현재로써 프로젝트 다음으로 매우 중요한 시험 중 하나이다 ㅋㅋ 이제 다음 주면 시험인데 조금 더 비중을 둬서 시험을 잘 칠 수 있도록 최선을 다하자 

 

-프로젝트-

이제 다음 주면 본격적으로 연결을 하고 AWS를 활용해서 프로젝트를 작동시킬 예정이다. 기대가 된다!!

 

-코테-

이번 주도 2개 밖에 안 했네요 ㅎㅎ ,ㅜ 정처기가 끝나면 곧바로 다시 4개 이상으로 지금보다 훨씬 많이 할 예정이다.

 

-프론트-

현재 프로젝트하면서 많은 공부를 하고 있지만 개인 공부도 중요하다고 생각한다. 정처기랑 프로젝트가 어느정도 정리가 되면 이 역시 제대로 시동을 걸어볼까한다.

 

-백앤드-

저번에 우리팀이 jwt를 잘 적용해 놨는데 나는 아직 이 개념을 정확하게는 모르고 있다. 코드리뷰를 보면서 내것으로 만들도록 해보자

 

다음 23주차도 퐈이팅이다☀️