실용적인 프론트엔드 테스트
4분
프론트엔드 테스트에 대한 고민과 어려움을 다룬 글입니다. 클린 아키텍처에서 설명하는 테스트의 이유와 프론트엔드에서 테스트할 내용, 시각적 요소의 검증 방법, 기능적 테스트 방법, 그리고 Jest와 Cypress의 사용에 대한 내용이 담겨있습니다. 테스트는 비용이며, 시각적 테스트와 기능적 테스트를 분리하고 전문 도구를 고려하는 것이 좋습니다.
BLEX 2022 3월 개발노트
1분
⭐ 추가된 항목 💬 신규 에디터 블록 단위로 작성하는 편의성이 개선된 에디터를 추가합니다. 블록 단위로 미리보기가 지원되며 초보자를 위한 마크다운 도구가 제공됩니다. 현재는 개발중인 단계에 있으며 점진적으로 오류를 수정하고 블록 드래그 앤 드롭, 마크다운 내보내기 등의 기능을 추가할 예정입니다. 여기에서 미리 사용해 볼 수 있습니다. 🔨 개선된 항목 💬 분석 …
![[리뷰] 메타버스를 디자인하라](/resources/media/images/title/2022/3/31/baealex/18_iH4QLPkj.png)
[리뷰] 메타버스를 디자인하라
3분
『나는 리뷰어다』에서 소개된 『메타버스 UX 디자인』은 XR 분야로 진출하려는 게임 디자이너나 UX 디자이너를 대상으로 한 책으로, 초기의 XR 문제점과 XR의 비전, 그리고 애플의 참여 등 XR 산업의 변화에 대해 다루며, 좋은 성과와 실패한 사례를 소개하며 UX의 중요성을 강조한다. 디자이너라면 XR의 미래에 대해 고민할 수 있고, 개발자라면 사용자를 위한 최소한의 배려를 익힐 수 있다.
![[리뷰] 소문난 명강의 : 레트로의 유니티 게임 프로그래밍 에센스(개정판)](/resources/media/images/title/2022/3/6/baealex/3_kYRAolUu.png)
[리뷰] 소문난 명강의 : 레트로의 유니티 게임 프로그래밍 에센스(개정판)
5분
한빛미디어 출판사에서 출판된 '유니티 게임 프로그래밍 입문'은 유니티를 처음 접하는 입문자나 비전공자, 아티스트를 대상으로 한 책으로, 게임 개발에 필요한 기본적인 지식과 함께 수학과 네트워크에 대한 내용도 다루고 있다. 총 7부로 구성된 이 책은 원리 중심의 설명으로 사용자가 스스로 퍼즐을 맞출 수 있도록 도와주며, 프로젝트를 진행하면서 실제로 게임을 만들어볼 수 있는 기회를 제공한다.
GitHub Action으로 Yew.rs 배포하는 방법
2분
YewYew는 React와 유사한 구조를 Rust 기반으로 개발한 프론트엔드 프레임워크로, WASM으로 배포됩니다. Rust 개발환경에서 WASM 빌드 시 필수적으로 실행해야하는 rustup target add wasm32-unknown-unknown 명령어와 GitHub Action을 이용한 자동화 방법에 대해 설명하고 있습니다.
솔로 워커를 읽고
7분
나는 1인 기업에 관심이 많다. 1인 기업은 오롯이 내적 동기에 의해 능동적으로 일을 할 수 있으리라 생각하기 때문이다. 가능하다면 그 시점을 당기고 싶은 마음도 크다. 그러던 중 '솔로 워커'라는 책을 접할 수 있게 되었다. 즐겨보던 weekly D 뉴스레터에서 나눔을 진행하여 신청했는데 감사하게도 읽어 볼 기회가 주어졌다. 솔로 워커 이 책에서는 …
HEY 메일을 사용하면서 느낀점
4분
Hey 메일은 유료 구독 서비스로 개인정보 보호와 메일 분류, 보호된 느낌 등의 장점이 있지만, 뉴스레터의 증가와 모바일 앱의 불편함, 비싼 가격 등의 단점이 있다. 결론적으로 개인 도메인을 이용하여 지속적으로 사용할 계획이다.
![[JavaScript] badland의 상태 관리](/resources/media/images/title/2022/1/21/baealex/1_Z5zBqApg.png)
[JavaScript] badland의 상태 관리
11분
필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …
자바스크립트의 복사
13분
자바스크립트에는 2가지 복사가 있다. 깊은 복사와 얕은 복사다. 이 개념을 이해하려면 자바스크립트의 원시 값(number, string, boolean, undefined, null, symbol)은 변수에 '값'이 저장되고 객체 값은 변수에 '참조 값'이 저장된다는 것을 알아야 한다. 원시 값 변수를 다른 변수에 대입할 경우 다른 변수는 동일한 값으로 저장되지만 객체 값 변수를 다른 변수에 대입할 경우 …
Python으로 웹 프론트엔드 개발하기
17분
Brython은 자바스크립트 대신 파이썬3를 이용하여 웹 클라이언트 사이드 개발을 할 수 있도록 지원하는 프로젝트이다. 이 글에서는 Brython의 사용법과 간단한 예제 코드를 소개하며, 자바스크립트와의 차이점도 다룬다. Brython은 파이썬 문법과 브라우저 API를 모두 사용할 수 있으며, 자바스크립트에서 사용하는 getElementById와 querySelector 메서드도 제공한다. 또한, 타이머 함수인 set_timeout과 set_interval도 지원하고 있다.
VR로 개발하면 어떨까?
6분
VR 기기를 이용한 업무용 소감을 담은 글에서는 VR의 생산적인 활용 가능성에 대한 충격과 기대가 나타납니다. 가격이 상대적으로 저렴하고 미래지향적인 경험을 제공하는 VR의 장점과 코드 작업에 높은 효율성을 제공하는 등의 장점이 언급되었으나, 글쓴이는 급격한 피로감 등의 단점도 경험하였습니다. 글쓴이는 VR에 대한 익숙함이 더 필요하다는 결론을 내리며, VR을 새로운 게임기처럼 사용할 예정이라고 말합니다.
BLEX 2021 10월 개발노트
2분
⭐ 추가된 항목 💬 검색 유입 분석 [설정] > [분석]에서 포털 사이트 유입 경로를 분석하여 사용자가 어떤 검색어를 입력하여 들어왔는지 분석하여 표시하는 부분이 추가됩니다. 💬 광고가 포함된 포스트 포스트 작성시 광고가 포함된 것으로 체크할 경우 리스트에서 AD뱃지가 하단에 표기되며, 본문의 커버 타이틀에서 [유료 광고 포함] 메세지가 추가됩니다. 🔨 개선된 항목 …
Heroku에서 Docker 배포
3분
Heroku를 이용한 토이 프로젝트 배포 방법에 대해 설명하고, Heroku CLI 설치 및 사전 설정, heroku.yml 파일 작성 방법, 포트 설정 등에 대해 다루고 있다.
사이트 보안점검을 해봅시다
5분
https://observatory.mozilla.org/ 모질라에서 제공하는 사이트 보안 점검을 받아보았다. 무심코 그냥저냥 보통 점수가 나오리라 생각했지만 충격적이게도 15점, F 등급을 받았다. 두둥 🥳 사실 보통 점수가 나왔으면 안하고 넘어가려 그랬는데 F는 또 못참지. 어떠한 보안상의 문제가 있는지 각 항목이 의미하는 것은 무엇이며 어떻게 적용하는지 알아보도록 하자. 여기서는 NginX를 활용한다. X-Frame-Options다른 사이트 내의 iframe에 …
NginX를 활용한 Docker 무중단 배포
4분
도커를 이용해 서비스를 운영 중인 서버에서 프론트엔드 컨테이너가 재실행 시 텀이 길어져 배포 후 일정 시간 502 에러가 발생하는 문제를 NginX를 이용해 해결하는 방법에 대해 설명하고 있다. NginX의 upstream을 활용해 백업 컨테이너를 띄우고 번갈아 가며 운영하는 방식으로 무중단 배포를 구현하는 방법을 소개하고 있다.
라즈베리파이 셋팅 A to Z
4분
라즈베리파이를 간만에 상자에서 꺼내었다. 문제는 셋팅하던 기억들도 그 위에 덮여진 먼지처럼 희미했다. 나중에 다시 셋팅하는 순간을 대비해 이 기회에 메뉴얼을 작성해 두고자 한다. 모니터를 일체 연결하지 않고 설정할 것이며 오직 원격으로민 사용할 예정이다. 1. 설치 Raspberry Pi OS # 위 홈페이지에 접속하여 라즈비안 이미지 파일을 다운로드 하자. 3가지로 분류되어 있는데 …
BLEX 2021 8월 개발노트
1분
⭐ 추가된 항목 💬 상단 네비게이션 원 버튼 네비게이션이 불편하고 난해하다는 의견을 받아 변경하였습니다. 사용 빈도가 높은 항목들은 네비게이션 위에 배치했으며 빈도가 낮은 항목들은 자신의 프로필 이미지 클릭시 나타납니다. 💬 포스트 커버 리디자인 예전에 만들어 사용하던 커버를 좀 더 가다듬어 적용하였습니다. 💬 모바일 포스트 네비게이션 모바일에서는 포스트를 추천하거나 댓글로 바로 …
기회를 만드려면
2분
위 영상을 보고 느낀점을 적어보려고 한다. 모든 영상을 보면서 느낀점을 작성하진 않지만, 위 영상을 보는데 뭔가 잊혀졌던 기억이 되살아나 좀 더 강렬하게 각인하기 위해서 작성해본다. 기회는 인간으로부터 위 영상에서는 기회는 사람으로부터 온다라는 말을 한다. 사실 생각해보면 정말 옳은 말이다. 그럼에도 나는 그 사실을 간과하고 있었다. 기회는 나 혼자 노력한다고 생기지 …
인생조언
9분
세상에는 많은 종류의 조언이 있다. 그리고 아래 Kevin Kelly의 말처럼 조언은 법률이 아닌 단지 모자일 뿐이다. 자신과 맞지 않는 모자는 버리고 다른 모자를 쓰자. 이곳은 근래에 찾은 나의 모자 진열대다. 지난번에 올렸던 동기부여 글은 목표를 달성하기 위해 어떻게 독해질 수 있을지에 관한 것이었는데 이번에는 어떻게 좀 더 바람직한 삶을 살아갈 …
BLEX 2021 7월 개발노트
3분
⭐ 추가된 항목 💬 자체 검색 추가 기존 덕덕고를 이용하여 사이트 검색을 진행하고 있었으나 검색 결과의 만족도가 너무나 떨어져 자체 검색으로 전환하였습니다. 성능은 차차 개선할 예정... 💬 검색 내역 조회 추가 사용자가 최근 검색한 내용을 볼 수 있도록 하였습니다. 💬 포스트 모음 페이지 네비게이션 추가 포스트 정렬을 바꾸거나 태그 클라우드에 …
풀사이클을 개발을 해봐야 하는 이유
7분
풀사이클 개발을 하지 말라는 조언에 대한 비판적 시각을 제시하는 글입니다. 개발자를 지망하는 사람이나 신입 개발자는 풀사이클 개발을 경험해보는 것이 좋다는 주장을 하며, 풀사이클 개발의 장점에 대해 설명합니다. 자신이 진심으로 하고 싶은 프로젝트에서 문제에 봉착하면 동기부여가 지속적으로 유지되며, 모든 분야의 문제를 해결해나가는 과정은 매우 재미있습니다. 또한, 풀사이클 개발을 하면 자신이 원하는 대로 개발을 진행할 수 있고, 자신의 역량을 더욱 향상시킬 수 있습니다.
채용공고 작성할때
0분
채용팁으로 알려진 정보 잡코리아, 사람인 채용 정보는 개인적으로는 추천하지 않습니다. 추가로 채용 정보에 복사 & 붙여넣기 한 듯한 양식이나 글이 있다면 거르셔도 됩니다. 그만큼 채용에 관심이 없는 회사라면 개발자에 대한 인식도 부족하다고 보셔야 합니다. 아래는 제가 정기적으로 방문하는 잡플래닛/원티드 검색 조건입니다. 참고하시면 좋을 것 같습니다. 주니어 개발자 채용 정보 · …
BLEX 2021 5월 개발노트
5분
🔨 개선된 항목 💬 다크모드 시스템 테마로 변경되던 사이트 테마를 직접 변경할 수 있도록 다크모드 토글 재추가 추후 다양한 테마를 추가하려고 봤더니 현재 구조로는 어려움이 많아서 변경중에 있습니다. 처음 방문한 유저인 경우에는 이전과 동일하게 시스템 설정을 따라가도록 하였습니다. 💬 사이트 디자인 상당수 수정 뒤로가기시 스크롤이 유지되지 않던 버그 수정 💬 …
자바스크립트 한글 음절 분리 / 음소 병합
13분
회사의 랜딩 홈페이지 제작 중, 한 글자씩 나타나는 애니메이션을 구현하려고 했으나 음소 단위로 변경되어야 했다. 이를 위해 자바스크립트 오픈소스 라이브러리를 찾아 사용하였고, 해당 라이브러리를 사용하는 코드를 발견하여 이를 이해하고 활용하였다. 코드는 글자를 분리하는 함수와 분리된 글자를 병합하는 함수로 구성되어 있으며, 초성, 중성, 종성 등의 인덱스를 계산하여 정확한 값을 반환하도록 구현되어 있다. 이후 초성과 종성이 없는 경우를 처리하는 조건문을 추가하여 정확한 결과를 얻을 수 있었다.