글

웹 접근성 WAI-ARIA

웹 접근성 웹 페이지의 html에서는 시각장애인들을 위해  Tab의 조작으로 태그를 이동한 뒤 음성 안내 매세지를 들을 수 있는 기능을 제공한다. 이와 같은 기능들을 웹 접근성이라고 함. WAI-ARIA HTML 태그에 추가적으로  W3C에서는 WAI-ARIA라는 기술로 웹 접근성을 지원한다. https://www.w3.org/WAI/ARIA/apg/patterns/ 디자인 패턴 가이드라인이 있다. 1. html 태그 속성으로 role을 정의하여 html 요소의 역할을 표현한다. 2. aria- 접두사가 붙은 속성으로 스크린리더가 어떤 작용을 할지 표현할 수 있음. aria-live 속성으로 페이지를 새로고침하지 않고 바뀌는  동적 변경 사항에 대해서 알려줄 수 있다.
댓글 쓰기
Read more »

신속하게 Vanilla JS, React JS, React Native 학습하기(feat.노마드코더)

이미지
< 빠른 학습엔 3분할 뷰 >   JS와 JS 프레임워크를 독파하고있다. 새로운 언어나 프레임워크를 학습하는 데 있어서 탐구자형 ~ 실속형의 스펙트럼이 있다면 이번 러닝 사이클은 전부 실속형에 치중했다. Vanilla JS https://cpusuite.blogspot.com/2025/02/djnago-fullstack-html-css-vanillajs-js.html Django fullstack 사이드 프로젝트를 하면서 기초적인 html + css + js를 학습했는데 웹 브라우저의 기초인 만큼 vanilla js를 좀 더 체계적으로 기억하기 위해 노마드 코더의 vanilla JS 2주 챌린지를 신청했다. Python 기반으로 개발을 했었기 때문에 js의 동적 타이핑 문법이 이질적이지 않았고 맨 땅에 헤딩식으로 진행한 사이드 프로젝트의 html + css + js 경험 덕에 이틀 안에 50% 이상의 강의를 수강했다. 3일째 되는 날, 수강을 전부 끝내고 남은 React JS, React Native를 실습 할 예정이다. JS Framework로 작성한 소스 코드는 곧 JS로 변환되어 실행되기 때문에 프레임워크 학습 이전에 선행하는 것이 좋다. React JS Frontend Framework html로 작성한 class, id 명을 js에서 검색하여 따르기보다 js로 직접 동적으로 문서 객체를 생성한다. 참조하기도 간편하고 관리하기도 쉬우며 raw value를 하드코딩하는 것을 줄여 개발자의 실수를 줄인다.  react   React element의 interaction. element 생성, event listener 등록 등 react-dom React element를 html에 두는 역할. React Native 메타(구 facebook)에서 만들고 관리하는 오픈소스 모바일 애플리케이션 프레임워크. Typescript(JS확장)으로 개발할 수 있고 Flutter처럼 iOS Android 2가지 플랫폼을 동시에...
댓글 쓰기
Read more »

라우팅 프로토콜, AS, IGP, IGRP, EIGRP

라우팅 프로토콜 라우터 간 통신 방식을 규정하는 통신 규약. 다음 3가지 클래스가 IP 네트워크에 널리 사용된다. 링크 스테이트 라우팅 프로토콜을 통한   내부 게이트웨이 라우팅 경로 벡터 OR 거리 벡터 프로토콜을 통한   내부 게이트웨이 라우팅 외부 게이트웨이 라우팅    BGP 경계 경로 프로토콜    자율 시스템 사이에서    트래픽을 교환할 목적으로 인터넷에 쓰임. AS(Autonomous System) 인터넷에 대한 라우팅 정책을 대표하는 하나 이상의 네트워크 운영자의 통제 하에서 각기 연결된 인터넷 프로토콜 라우팅 접두사의 모임이다. 인터넷은 ISP의 라우팅 정책만을 주시한다. 인터넷이 주시하는 ISP 는 공식적으로 등록된  (ASN, 자율 시스템 번호) 를 소유하고 있다. 2007년까지 16비트였다가 -> RFC 4893에서 32비트의 AS 번호 도입.  IGP 내부 게이트웨이 프로토콜은 1개의 라우팅 도메인 안에서 라우팅 정보를 교환한다. EX ) OSPF, RIP, IS-IS, EIGRP IGRP Cisco 사에서 발명한 거리 벡터 내부 게이트웨이 프로토콜(IGP). 자율 시스템 내  라우팅 데이터를 교환 할 목적으로 라우터 가 사용하는 프로토콜이다. 대역폭 , 지연, 부하 MTU, 신뢰성을 포함하여 개별 경로에 여러 개의 메트릭을 지원하며 2개의 경로를 비교할 때, 이 메트릭들은  미리 설정된 상수들을 사용해서 수정할 수 있는 공식을 이용하여 하나의 메트릭으로 병합된다. EIGRP(구 IGRP) IGRP 업그레드 버전. IGRP에서 고려했던 대역폭, 처리 능력도 이용할 뿐 아니라 네트워크 토폴로지 변경 후 생기는 불안정한 라우팅을 최소화 하는 고급 거리 벡터 라우팅 프로토콜이다.
댓글 쓰기
Read more »

AWS 리소스를 활용한 Batch 작업 : AWS Batch(EC2) vs Lambda & Eventbridge(구 Cloudwatch)

AWS에서 배치 프로세싱을 구현하는 방법은 batch를 이용하는 방법 lambda를 이용하는 방법 이 있다. Batch를 이용하는 방법 AWS Batch -> AWS EC2 Instance를 의미한다. 이 방법은 ec2를 사용하기 때문에 완전한 Serverless는 아니다. AWS Batch가 Batch 작업을 돌리기 위해 EC2 인스턴스를 Spin up 한다. * live 상태로 만듬을 뜻함 문제는 배치 작업을 하지 않을 때에도 EC2의 최소 공간을 live 상태로 유지해야한다. 이는 배치 작업을 하지 않을 때에도 돈이 나간다는 것을 의미하고 때문에 다음의 방법이 보다 효율적이다. Lambda를 이용하는 방법 Cloudwatch( -> EventBridge )가 스케줄링 엔진으로서 작동한다. AWS Lambda를 Trigger한다. ( cron trigger ) 1. AWS EventBridge console pannel에서 스케줄링 엔진 rule을 추가한다. 2. lambda function을 구현한다. 견고한 배치 작업을 만드는 방법 testing worker chain - 어떤 에러가 발생하는지 - worker chain이 끝까지 도달하는지 - edge 케이스 테스팅을 통해   끝나지 않는 무한 루프를 도는 runaway worker chain,   시작되지 않는 worker chain 방지한다.    무한 루프를 돌 경우 높은 aws bill이 나올 수 있음. retry attempt 조정 asynchronous invocation에서 retry attempt를 0으로 세팅하기. 기본값은 2이다. -> batch lambda가 fail 하더라도 2번 더 실행됨. -> 같은 유저에게 메일이 3번 갈 수도 있음. unprocessed items 처리 가장 요청이 많이 들어오는, 바쁜 production환경에서도 성공적으로 배치 작업이 수행할 수 있게 concurent worker chains 튜닝
댓글 쓰기
Read more »

RDBMS의 파일 저장에 대해서

Binary type은 이미지, 파일, 비디오 파일과 같은 이진 데이터를 저장할 수 있는 저장 공간을 제공한다. (Blob) 일반적으로 이런 파일을 저장하는 서버는 RDBMS를 사용하지 않고 파일을 서빙하는 파일 서버를 따로 둔다. RDBMS는 데이터 집합 간의 Relation과 ACID를 보장하는 작업에 특화되어있기 때문에 파일 서빙 요청보다는 데이터베이스 쿼리와 관련된 트랜잭션을 수용하는 것이 더 이득이다. 이미지와 동영상 같은 크기의 파일을 DB에 BLOB형태로 저장할 시  - 읽기/쓰기 속도가 떨어진다.   파일 전송이 끝날 때까지 DBMS 자원을 소모하므로,   파일 데이터의 연속적인 Fetch 작업에   DB 자원을 소모하는 것은 비효율적임.   파일의 크기는 쓰는 속도에도 영향을 미친다. 그런데 이 Binary Type이 존재하는 이유가 무엇일까? 1. 1MB 미만의 작은 사이즈의 파일을 서빙할 때 2. DB의 보안이 반드시 필요한 파일 데이터. 1의 의미도, 1MB 미만의 파일은 DB에 저장해도 좋다는 뜻은 아니고  그만큼 작은 파일이라도 제한적으로 사용해야 한다는 뜻이다. blob 적용 - raw data를 표현할 때 blob을 사용하는 경우는 찾아보기 힘들었다. 대체 방법 - 낮은 해상도의 단순한 이미지라면   DB에는 단순한 이미지에 대한 메타 정보만 저장하고   메타 정보를 바탕으로 FE or Mobile에서 렌더링하는 것이 이득이다. - 이전 프로젝트에서 Social profile image를 구현할 때   위와 같이 이미지가 단순한 조합으로 이뤄지므로   이를 이용하여 프로필 이미지를 저장하는 파일 서버를 두지 않고    DB의 Profile table에 profile image를 위와 같이 메타정보만 저장했다. 결론 - RDBMS를 꼭 사용해야 할 Use case가 아니라면 파일 서버를 이용한다. - Blob으로 취급할 ...
댓글 쓰기
Read more »

실무진 면접 경험으로 정리하는 백엔드 (3) : 신호 처리 서비스 기업 기술 면접

컬쳐핏 면접 이력서 기반, 자소서 기반 질문이 대부분이었음. 이전에 다녔던 회사들은 어떤 도메인의 사업을 하는 회사였는지 내 직무에서 무엇을 수행했는지 등을 가볍게 질문했다. 1. 자소서에 빠른 러닝커브를 강조해주셨는데, 그런 사례가 있는지?? 멀티미디어 프레임워크인 gstreamer 학습과 짧은 기간내에  새 파이프라인에 대한 시연 및 프로덕션 도입을 수행한 것 2. 백엔드 개발자를 선택한 이유 ai, 데이터 시대에 데이터를 수집하고 컨트롤할 수 있는 것이 중요하다고 생각해서. fe보다 데이터를 직접적으로 컨트롤 할 수 있는 옵션이 있는 곳이 백엔드라고 생각해서. 3. 경쟁 제품에 대해 알아보려면 XXX엑스포를 "참관"만 해도 됐을텐데    굳이 부스로 참여한 이유는?    또 그곳에서 무엇을 배웠는가 ?         경쟁자가 아닌 소비자 입장에서 듣는 피드백은 또 다르기 때문.     우리와 99% 똑같은 방식으로 접근하여 문제를 해결하려는 프랑스 기업이 있었다.     같은 고충을 겪고 있었다.     상대적으로 저렴한 Vision AI로만 경쟁력을 키우려고 했으나     한계가 있었기에 Depth 데이터를 활용할 수 있는 카메라나     센서 활용을 제안했지만 받아 들여지지는 않았다. 4. 쉬는 시간에 주로 뭐하는 지? 독서, 농구, 산책, 생활 운동 5. 스트레스를 해소하는 방법? 반추하지 않으려고 노력한다. 반추보다는 대처 행동으로, 행동으로 옮기려고 노력한다. 6. 휴식 기간 동안 뭐 했는지? Django full-stack side project를 하면서 html+css+js를 학습함. FE Framework로는 아직 넘어가기 전이고 Typescript를 학습한 뒤 넘어갈 예정. 7. 서비스 런칭했을 때 어떤 인사이트를 얻었는지?    human touch가 있...
댓글 쓰기
Read more »

ROS 연동 로봇 프로그램과 일반 로봇 프로그램의 차이

이미지
설계의 차이 ROS라는 생태계 내에서 개발되는 로봇 프로그램은 프로세스를 목적별로 나누고 노드와 노드 간의 데이터 통신을 고려하여 설계한다. ROS와 연동되는 로봇 프로그램은 일반적인 로봇 프로그램과 달리 노드 단위의 프로그램을 작성한다. "일반적인" 로봇 프로그램은 - ROS에 비해 소프트웨어 컴포넌트를 다룰 때 Standard가 부족하고 - 특정 하드웨어 내에서 빌드를 목적으로한 프로그램이다. - 통신 시, 직접 함수를 호출하거나 직렬/UART 통신에 의존한다. ROS 로봇 프로그램은 - Topic을 통해 데이터를 교환하는 Publish-subscribe 모델을 사용한다. - 비동기 통신, 분산적이라는 특징은    분산된 별개의 컴퓨터에서 각각 다른 컴포넌트가 실행될 수 있음을 뜻한다. - 분산 시스템에서도 실시간 통신을 가능하게 하는 ROS의 중요한 요소가    DDS(Data Distribution Service)이다.   Sample Architecture 예시의 그림에서 중앙의 노드는 다른 노드들과의 통신에 있어서 중요한 역할을 한다. "ROS2로 시작하는 로봇 프로그래밍" 교재의 실습 자료에 대입해보면 각 노드의 역할을 다음과 같다. <Topic> - Topic publisher는 현재시간, 변수a, 변수b를 topic으로 publish한다. - Topic subscriber는 이 토픽을 구독한다. <Service> - Service client는 연산자를 서비스 요청값으로 보낸다. - Service server는 연산의 결괏값을 서비스 응답값으로 보낸다, <Action> - Action Client는 연산 결괏값의 누적 한계치를 액션 목표값으로 전달한다. * Aciton에 goal, feedback, result가 있음. 가운데 노드 는 - subscriber로부터 변수 a, b를 - service로부터 연산자를 받아 연산하고, 연산 결괏값을 서비스 응답으로 보낸다. Ac...
댓글 쓰기
Read more »

이 블로그의 인기 게시물

실무진 면접 경험으로 정리하는 백엔드 (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 »