백엔드 개발자가 Djnago fullstack 사이드 프로젝트를하며 ( html, css, vanillaJS 그리고 JS프레임워크 )

서론




웹 개발 환경에서 FE 개발자와 BE 개발자는
상대의 업무를 서로 이해하게된다면 
좀 더 총괄적인 서비스의 흐름과 병목지점을 파악할 수 있다.

때문에 이 둘의 협업 과정은 자연스럽게
Full-stack을 지향하고 있는 과정이라고 생각한다.


24년 12월부터
Django fullstack 사이드 프로젝트를 시작했다.




본론

시행착오

  • python django 코드 뿐 아니라
    html + css + js도 함께 커버하기에
    작업에 상당한 context switch가 있었다.


  • 머릿속에 그린 것을 도식화나 문서화하지 않고
    무작정 뛰어들었기 때문에 
    디자인 중인 화면을 확인할 곳이 없었다는 흠이 있었다.

    특히 wireframe, 화면설계서가 없으니까 
    백엔드 작업시 하나의 기능을 완성하기 전까지
    제대로 빌드가 되지 않기 때문에 
    dribble이라는 디자인 사이트를 많이 참고했다.

중복 작업과 반복 작업

  • 중복, 반복 작업
    django template language에서 상속을 지원하기 때문에
    베이스 템플릿을 상속받아서 페이지를 제작할 수 있다.

    템플릿에서 내부에서 여러번 쓰이는 컴포넌트가 불편하다면
    공통 컴포넌트를 만들어주면된다.

    그러나 컴포넌트를 FE 프레임워크 레벨 정도로 관리하기는 쉽지 않다.
    공통 컴포넌트를 관리하려면
    프레임워크의 틀을 따라가야하는데
    이 시점이 프론트엔드 프레임워크 선정을 할 타이밍이라고 생각한다.


JS로 모든 것을 control한다는 것의 간결함

  • FE UI 프레임워크에서는
    html로 작성한 class, id 명을 js에서 검색하여 따르기보다
    js로 직접 동적으로 문서 객체를 생성한다.

    참조하기도 간편하고
    관리하기도 쉽다.



  • js는 bom(부분적으로)과 dom을 컨트롤 할 수 있다.






결론


결국 아주 간결한 landing page 외에는
JS 기반 프레임워크를 사용해야한다.




나는 왜 바로 FE 프레임워크로 뛰어들지 않았나?


더 깊고 가파른 학습을 위해


컴퓨터공학이나 소프트웨어학과의 교육 커리큘럼도 그렇고
프레임워크 이전에 프레임워크를 작성한 프로그래밍 언어를 먼저 배운다.

예를 들어, django를 배우기 이전에 python을 학습한다.
django를 배우며 쓴다는 것은
wsgi 환경의 서버 위에서 서빙되는 웹 애플리케이션 프로그램을 제작한다는 것이고
python의 gil과 동적타이핑 특징이 그대로 적용된다.


그리고
프레임워크 - 프로그래밍 언어 밑에 
보다 근본적인 프로그램의 동작 단위를 다룬
프로세스, 스레드가 있으며 이를 지원하는 OS가 있다.


따라서 나는.
곧바로 "인기있다고" 일컬어지는 FE 프레임워크를 설치하는 것보다

  • html css js +
    bom(브라우저 창에 접근하고 조작하는 메서드/인터페이스),
    dom(웹 페이지 컨텐츠를 조작하는 메서드/인터페이스),
    event(window event, form event, keyboard event, mouse event 등등...)
    와 같은 기본적인 요소들과

  • 웹 브라우저가 무엇을 하는지?

  • JS가 무엇을 하는지?

  • 그리고 FE 프레임워크는 어떤 면에서 vanillaJS보다 유리한지?

  • FE 프레임워크별로 어떤 특징이 있는지?

를 학습한 뒤
인기있는 프레임워크가 아닌
적재적소의 프레임워크를 찾아 학습하는 방식이
훨씬 깊게 웹 생태계를 이해할 수 있다고 생각했기에
html + css + js가 별개의 파일로 관리되는 구조를 먼저 학습했다. 



프레임워크별 특징을 알고 가자

FE 프레임워크, BE 프레임워크의 구성 방식별로 
렌더링 방식의 차이 때문에
렌더링 방식에 잘 맞는 서비스의 용례가 각각 있다.



신속하게 시작하기



언제나 프로그래머는 "실천가"이므로
"행동력" + "코딩 근육" 을 기를 수 있는 프로젝트를 당장 시작해야한다 !


리누스 토발즈
"Talk is cheap, Show me the code"







 



댓글

댓글 쓰기

이 블로그의 인기 게시물

실무진 면접 경험으로 정리하는 백엔드 (1) : 에듀 테크 기업 면접

에듀 테크 기술 면접 시간 내어 이력서를 꼼꼼하게 봐주시고 서류상으로는 회사에서 원하는 background라고 생각해주셔서 느낌이 좋았다. 최근 본 면접들 중 가장 깊이있는 질문을 해주셨고 오답과 대안에 대한 설명도 해주셔서 배워갈 수 있었다. 아쉽게도 합격하지 못했지만 좋은 면접 경험이었기 때문에 다음 면접에서 더 견고한 답변을 위해 정리해보았다. 질문&답변&더 나은 답변 일반 질문 이직 사유? 경영상의 이유로 인한 권고사직, 프로덕트 개발과 프로덕트 피벗 과정의 공백기 회사의 이 직군에 지원하면서 뭘 기대하는지? 거의 혼자서 개발을 해왔는데 다른 관점의 의견을 들을 기회가 없었다. 여러 개발자의 의견을 듣고 내 의견에 태클을 걸며 같이 발전하면 좋겠다. 공백기에 뭐하고 있는지 ?  1. django template과 admin, 그리고 오픈소스 wysiwyg를 사용하여 블로깅 서비스 사이드 프로젝트하면서 풀스택 공부중이다. 2. 현업에서 줄곧 이미 구축된 ci/cd를 사용해오고있었는데 직접 구현을 학습하기 위해 github action workflow를 공부하고 있음.  기술&개발 관련 관리형 서비스를 쓰지 않고 aws ec2를 쓴 이유 ? - 비용문제 vpc 어떻게 설정했나? - production region은 모든 ip에 대해서 열고   development region은 사무실 개발 pc와 사무실 기기들의 ip만 접근가능하도록 함 nginx ssl 적용했다고 하는데, 인증서 뭐 사용했나? - 'let's encrypt'사용했는데 생각이 안나서 대답못함. socketio에는 wsgi or asgi? - wsgi vs asgi 차이점에 대해서 답변함. django vs fast api ? - 동기, 비동기 서버 기반과 기타 feature에 대해서 답변함. - django에서 기본 제공되는 템플릿, admin,ORM과 미들웨어들 - fastapi는 기타 기능들을 따로 붙여서 써야한다고 답변, django도 ...
Read more »

Blogger 커스터마이징 : CSS 수정 (sticky-header)

이미지
sticky-header, centered-top-container sticky animating 삽질1 google blogger의 템플릿 테마중 하나인 Contempo에서는  스크롤을 어느 정도 내린 상태에서 다시 올리면 상단의 검색창이 내려와서 스크롤을 다시 내릴 때까지 유지된다. (이 "어느 정도"에 해당하는 값은  기본 테마의 javascript에 코딩 되어있을 것으로 추측한다.) css 수정 후 이 부분에 문제가 생겨서 내릴때에도 올릴 때에도 계속 검색창이 내려오고 사라졌다를 반복한다. < 페이지 최하단 모습 > 데이터를 색인하여 찾을 때는 유용한 기능이라고 생각하지만 검색 기능은 이미 블로그 최상단에 존재한다. 따라서 해당 기능을 제거하기로 했다. scroll event를 감지하고 그에 따라 html이나 css문서를 수정하는 작업은  javascript가하는 일이다. html 편집기를 통해 코드를 살펴본 결과 이 javascript 코드는 외부 cdn 서버에서 가져오는 것 같다.  javascript 코드를 직접 건드려야되나 싶어서 구글링 해 본 결과 간단하게 css 코드를 수정해서 없앨 수 있었다. sol) sticky-header 제거 https://joshua-dev-story.blogspot.com/2020/04/blogger-remove-sticky-header.html FE, Publishing 에서는 '고정 헤더'라고 부르고 있는 이 태그의 css를 수정하면 된다. display 옵션을 none으로 바꿔서 기존 요소의 block을 전부 없애고 기능까지 해제해버리는 것. 이 sticky header를 보이지 않게하는 방법은 opacity를 0으로 만들거나 visibility를 hidden으로 할 수도 있지만 display : none 옵션이 가장 확실해보인다. 수정 후 여전히 scroll 이벤트에 따라 DOM의 변경이 일어나는 것 같지만 sticky header는 더이상 보이지 않는다. 삽질2...
Read more »

Intel 14th gen CPU의 칩 충돌 사태와 해결 방법

이미지
https://internalize-stride.blogspot.com/2024/10/14th-gen.html 글을 참고. 나도 14세대 인텔 CPU의 구매자고 현재까지 피해를 보고있다. 원인 24년 7월 22일에 인텔이 충돌 문제의 근본 원인을 찾았다고 발표함. 원인은 최소 작동 전압(Vmin)의 이상(불안정성)이며 이로 인해 CPU 품질 저하현상이 나타난다. address incorrect voltage requests to the processor that are causing elevated operating voltage. 잘못된 전압 요청을 프로세서에게 요청하고 이 요청은 높아진 작동 전압을 유발한다. 최소작동 전압 증가. 현상 높은 전압 이벤트는 시간이 지남에 따라 누적될 수 있으며 결국 프로세서를 손상시키고 시스템이 중단되거나 충돌하게 된다. 영향 프로세서 목록   (사진 from 인텔) 대책 바이오스 업데이트에 맞춰 마이크로코드 수정 패치하였다. 최신 마이크로코드 업데이트 0x129에서는 voltage request Vmin를 1.55V 이상으로 높여서 비정상 현상을 겪고있는 프로세서를 방어적으로 완화한다. 패치 후 성능 영향 여부 아스테크니카의 인텔 인용에 따르면 대부분의 경우 패치의 영향을 받지 않을 것이라 했으나 소수의 벤치마크 하위 점수와 개별 게임에서 '보통' 정도의 속도저하가 나타남. 패치 방법 및 제품 보증 소프트웨어 업데이트로 배포되지 않음. 윈도 업데이트 / 제조사 독점 소프트웨어 / 수동 설치를 통해 패치한다. 수동 설치의 경우 제조업체 웹사이트로 가서 패치 파일을 수동으로 다운로드해서 설치. 전압과 관련된 CPU 손상은 돌이킬 수 없기 때문에 빠른 조치가 필요하다. Intel은 대상 품목의 품질보증기간을 2년에서 5년으로 늘렸다. GIGABYTE 마더보드의 경우 패치 방법 내가 쓰고 있는 GIGABYTE 마더보드 기준으로 패치 방법은 다음과 같다. 1. GIGABYTE 홈페이지에서 본인의 마더보드 모델에 맞는 ...
Read more »