개발자 포트폴리오 준비

 

이런 모습인데, 배포를 안해서 링크를 걸고 싶어도 걸 방법이 지금 당장은 없다.

나중에 배포하면 링크 걸어보겠다.

 

디자인은 최대한 심플하게 정했다.

원래 미적 감각이 없는 사람이 괜히 꾸며보겠다고 이것저것 하면,

예뻐지진 않고 괜히 지저분해지기만 하는 것 같아서...

 

기술스택들 그림은 icons8에서 가져왔는데,

색을 내 마음대로 지정할 수도 있어서

색이 좀 다른 것들은 직접 바꿨다.

 

Blog 부분은 지금 이 블로그 링크와, 나중에 깃 허브링크를 걸 예정이다.

 

근데 MyBatis는 SQL 매퍼라는 기술로 만들었고,

JPA는 ORM이라는 기술로 만들었다는데 

둘이 합쳐서 한번에 부를 용어가 참 애매한 것 같은데 뭐 없나...?

애매해서 DBMS Controller라는 애매한 이름으로 결론지어버렸다...

 

맨 위 우상단에 Introduce ~~ 등의 글씨들은 버튼인데,

누르면 해당 카테고리 위치로 이동되게 JS를 이용해서 만들었다.

 

해당하는 화면으로 이동하는 알고리즘은 배운 적은 없는데,

적당히 구글링해서 알아내서 써먹었다.

const buttons = document.querySelectorAll('[type="button"]');

buttons.forEach(el => {
    el.addEventListener('click', () => {
        const article = document.querySelector('article.' + el.className);
        window.scrollTo({
            top: article.getBoundingClientRect().y + window.scrollY - header.clientHeight,
            left: 0,
            behavior: 'smooth'
        });
    })
})

각 카테고리는 HTML에서 article 태그를 이용해서 만들어져있고,

화면 우상단의 버튼들은 button타입의 input태그를 이용해서 만들어져있다.

그리고 항상 하는 생각인데 자바의 람다식이랑 js의 화살표 함수는 정말 편하다.

만드신 분 이름은 모르지만 늘 감사하게 생각하고 있습니다.

 

HTML과 CSS, JS를 배우면서 항상 하는 생각인데,

누군가 어떤 디자인을 요청하면 그대로 만들어줄 능력은 어느정도 있다고 생각하는데,

나 혼자서 UX/UI적으로 뛰어난 디자인을 구상하는 게 사실 만드는 것보다 더 어려운 것 같다.

 

미적 감각을 딱히 살면서 사용해본 적이 없어서,

경험이 없어서 그런 건지..?

이런 부분은 계속 하다보면 해결될거라 믿고 열심히 해봐야겠다.