개발이야기/Web
다시 또 다시, 개인 웹사이트 제작 회고
다시 또 다시, 개인 웹사이트 제작 회고
2023.12.21예스피씨를 만들기 전, Svelte와 SvelteKit을 사용해서 처음 완성하려고 했던 건 개인 웹사이트였습니다. 기존에 만든 것이 3년 전에 만든 것치곤 부실하여 부족한 점이 많았고, HTML과 CSS, JavaScript를 이용한 순수 정적 웹사이트임에도 불구하고 속도가 빠르지 않아 개선할 필요가 있었습니다. Jekyll과 같은 정적 사이트 생성기를 사용한 것도 아니라서 유지보수가 어려웠던 건 덤이고요. 그래서 당시 개편에서는 다음과 같은 부분을 목표로 했습니다. SvelteKit 프레임워크에 익숙해지기: 웹 프레임워크를 사용하는 것이 처음이라, 문서가 잘 정리되어 있고 체감상 React와 비교했을 때 진입장벽이 낮게 느껴진 SvelteKit을 선택했습니다. 물론 지금은 React 공식 문서도 잘 정..
팀원 모두가 돋보였던 2023 SW중심대학 공동해커톤 참여 후기
팀원 모두가 돋보였던 2023 SW중심대학 공동해커톤 참여 후기
2023.07.16저희 학교는 2021년에 신규 선정되어, 2022년부터 공동 해커톤 참여 자격이 생겼습니다. 그래서 참여를 원했지만 21년도에는 참가 자격이 없었고, 22년도에는 휴학생도 참여할 수 있는지 명시되어 있지 않아 다음을 기약할 수 밖에 없었습니다. 그런데 23년도 공지를 보니, 휴학생도 참여 가능한 것으로 명시되어 있어 드디어 참여 기회가 생겼습니다. 해커톤 준비 단계 대학 내 선발전: 교내 해커톤이라는 이름의 시험 대학 내 소프트웨어 계열 학과의 입학 인원이 275명이니까, 개발자 4명 정도는 금방 채울 것이란 예상은 당연했습니다. 그런데 아무래도 평소 저조했던 다른 행사들의 참여율 때문인지, 아니면 휴학생이 정말 참가할 줄은 몰랐던 것인지 교내 해커톤이라는 이름의 선발전이 급하게 잡혔습니다. 때문에 급히..
시작은 반이랬어요, 예스피씨 개발 이야기
시작은 반이랬어요, 예스피씨 개발 이야기
2023.03.10지난 코드 포 코리아 컨퍼런스가 끝나고, 지난 2017년 세월호, 2018년 백석 온수관 파열 사건 등에 꾸준히 관심을 갖고 때로는 관련 해결책을 개발과 함께 조합하여 고민하기도 했던 점들이 '시빅 해킹'으로 불리기도 한다는 점을 처음 알게 되었습니다. 2018년 이후로는 특별히 사회 문제에 민첩하게 행동하는 개발자로 살지는 못했는데, 올해 하반기에는 SPC 불매 운동 바람이 불면서 간만에 사회 문제와 밀접한 프로젝트를 시작하게 되었습니다. 이 글은 그렇게 내놓은 예스피씨와 그 주변의 이야기를 해보고자 합니다. 처음부터 하려고 했던 것은 아니었어요 사실, 전에도 남양유없 아이디어를 차용한 사이트를 제작하겠다는 분이 계시기는 했습니다. 그래서 한동안 굳이 만들지 않고 기다리고자 마음을 굳게 먹고 있었는데,..
Firefox의 Project Fission이란?
Firefox의 Project Fission이란?
2021.04.03본 글은 Mozilla 재단에서 제공하는 Mozilla Wiki 웹 사이트의 게시글을 번역한 것입니다. 원 게시글의 라이선스는 CC-BY-SA 3.0 Unported이며, Mozilla Wiki 라이선스 정책 상 CC-BY-SA 3.0 Unported 혹은 이후 버전을 사용할 수 있으므로 이 글은 하단 라이선스 표기와 관계 없이 CC-BY-SA 3.0 Unported로 배포됩니다. 전체 기여자 및 원본 글은 여기에서 확인하실 수 있습니다. Fission은 Mozilla가 구현한 Firefox의 웹사이트 격리 체계입니다. 사이트 격리는 보안 기능의 일종으로 방대한 범위의 보안 버그로부터 추가적인 보호 기능을 합니다. 사이트 격리는 웹 페이지, 웹 프레임 등을 안전하게 샌드박스에 담아 각각을 격리하여 Fir..
browser_specific_settings
browser_specific_settings
2021.01.23본 글은 Mozilla Developer Networks Web Docs의 browser_specific_settings 페이지를 번역한 내용입니다. MDN 문서 라이선스에 따라 CC-BY-SA 2.5 라이선스가 적용됩니다. (하단 라이선스 표기와 무관합니다.) MDN의 기여자 분들께서 작성해주셨습니다. (기여자 명단) 또한 Mozilla의 MDN 지역화 정책 변경으로 인해 블로그에 올리는 것이므로, 이후 번역이 가능하도록 변경될 경우 최신 반영 사항은 모두 MDN에 반영하며 블로그에는 반영하지 않습니다. 한국어 번역본의 내용은 어떠한 경우에도 보증하지 않으며 MDN의 지역화 정책에 변동이 없으면서도 요청이 있을 때에만 업데이트된 문서 내용을 반영할 것입니다. 따라서 되도록 원본 문서를 참고하시기 바랍니..
부가 기능, 그리고 부가 기능 ID
부가 기능, 그리고 부가 기능 ID
2021.01.23본 글은 Mozilla 재단에서 제공하는 Firefox Extension Workshop 웹 사이트의 게시글을 번역한 것입니다. 원 게시글의 라이선스는 CC-BY-SA 3.0 Unported이며, Mozilla.org 라이선스 정책 상 CC-BY-SA 3.0 Unported 혹은 이후 버전을 사용할 수 있으므로 이 글은 하단 라이선스 표기와 관계 없이 CC-BY-SA 3.0 Unported로 배포됩니다. 전체 기여자 및 원본 글은 여기에서 확인하실 수 있습니다. Firefox 부가 기능은 다른 Firefox 부가 기능과 구별하기 위한 각각의 ID가 있습니다. 이 글은 WebExtension API를 이용하여 제작된 부가 기능에 add-on ID가 어떻게 작동하는지에 대한 내용을 설명합니다. Firefox..
[Apache 2.4/PHP 7.2] 파일 업로드 크기 늘이기
[Apache 2.4/PHP 7.2] 파일 업로드 크기 늘이기
2018.11.12지난 번 PHP Opcache 설정 때, 같이 진행한 것이 있는데 NextCloud의 파일 업로드 제한을 푸는 것이었습니다. 보통 웹에서 설정을 변경하는 작업을 진행할 경우 코드가 꼬이거나 잘못 입력되는 문제로 인해 제대로 설정되지 않는 경우가 많습니다. 따라서 php.ini 파일을 수정해 주어야 하는데, 다음 폴더에서 진행할 수 있습니다.(Apache 2.4 기준입니다. 아마 NGINX의 경우에는 nginx 관련 폴더가 /etc/php/7.2/에 있을 수 있고, 아니면 fpm에서 수정해주시면 될 것 같습니다.)/etc/php/7.2/apache2 php.ini 파일에서 수정해주어야 할 것은 다음과 같습니다.* 코노리 님 블로그에서 일부 참조했습니다. 원본을 보시고자 하시는 분은 해당 링크로 이동하여 주..
[Apache 2.4/PHP 7.2] Opcache 활성화하기
[Apache 2.4/PHP 7.2] Opcache 활성화하기
2018.11.11* 본 글에 쓰인 Opcache 설정 값은 NextCloud 공식 문서 저장소에서 가져왔습니다. CC-BY 3.0 Unported. 기존에 Pydio를 사용하고 있을 시절에는 DB를 SQLite가 아닌 MariaDB를 사용하고 있었기 때문에 큰 속도저하를 겪지 않고 있었습니다. 하지만 Pydio를 지우고 업데이트를 하는 과정에서 DB가 꼬였고, 결국 쓰던 MariaDB는 꼬인 채로 방치되었습니다. 어차피 DB를 쓰고 있던 게 Pydio밖에 없었고, 어차피 hubiC이 느려서 정기 결제를 포기했기 때문에 굳이 무거운 Pydio를 쓰지 말고, 작은 서버에 가볍다고 소문난 OwnCloud 계열의 NextCloud를 쓰기로 했습니다. SQLite 3을 지원하고, Pydio보다 강력해서 저에게는 딱 맞는 제품이다..
pbSpace 웹 페이지 개설:PureCSS 일부 버그 수정
pbSpace 웹 페이지 개설:PureCSS 일부 버그 수정
2018.07.26PureCSS는 Javascript를 사용하지 않는 드롭다운을 지원합니다. 개인적으로 따로 구현해서 쓸 수도 있겠지만, UI 색상이나 디자인이 맘에 들어서 부분적으로 사용하게 되었습니다. 그런데, 구현하고 보니 화면에서 드롭다운 메뉴 영역이 있는 아래 부분은 마우스를 가져다 대면 드롭다운 메뉴가 뜨면서 화면에 멀쩡히 보이는 드롭다운 아래 링크를 클릭할 수 없는 현상이 일어났습니다.태그를 제거하고 태그에 결합하거나, 소스를 Pure 전체 CSS에서 메뉴 전용 소스로 변경해 보는 등 별 삽질을 다 했습니다만, 결론적으로 해당 부분에 position:absolute를 주는 것이 해법이었습니다.그러고 나니 margin-top 값을 -로 지정해주지 않으면 너무 많은 공백이 발생해서 채워줬습니다.그동안은 항상 Pu..
테스트 서버 - Let's Encrypt 인증서 갱신 및 TLS 설정변경
테스트 서버 - Let's Encrypt 인증서 갱신 및 TLS 설정변경
2018.07.25제 테스트 서버에서는 CloudFlare를 사용중인 관계로 인증서 갱신을 하려면 CloudFlare CDN을 잠시 꺼두고 써야만 합니다. 이걸 자동화하는 스크립트도 있긴 합니다만, 복잡해서 적용하지 않고 오랜만에 오류가 나지 않는 환경에서 인증서를 갱신했습니다.직전에 인증서를 교체할 때는 모든 방법을 동원해도 계속 HTTPS로 리다이렉팅되는 오류가 있어 갱신에 실패했고, 결국 갖은 방법을 동원하여 진행하였는데 그때의 악몽으로 HTTPS 리다이렉팅은 적용하지 않았습니다. 보안 취약점이 되는 것은 알지만, 익숙해지는 데로 다시 적용할 계획입니다.참고로, Certbot을 이용한 인증서 갱신은 단순히 sudo certbot을 쳐서 해도 옵션에 나오므로 굳이 명령어를 외워두실 필요가 없습니다.(중간에 선택하라 나..