Phot_o_matic Programming

State of CSS 2022 - Google I/O 1. Cascade Layers 2. Subgrid Grid lines made available for children and grandchildren. 3. @container (aka Container Queries) (가장 기대하고 있는 기능 중 하나) /* establish a container*/ .day { container-type: inline-size; container-name: calendary-day; } @container calendar-day (max-width: 200px) { .date { display: block; } .date-num { font-size: 2.5rem; display: block; } } Col..

Programming 2022. 5. 30. 11:30

New for the web platform - GoogleIO 2022 해당 글의 내용들을 담은 예시 구현 코드는 여기서 확인할 수 있다. 각각의 속성에 맞게끔 html 파일들을 따로 작성하였으니, 직접 눈으로 확인하고 싶은 분들은 확인하면 좋을 것 같다. (container query처럼 몇몇 속성들은 아직 지원하지 않는 브라우저가 있으니, 주의해야 한다.) UI 1. accent-color Customizable theming for base UI form controls 기본으로 제공되는 input들에 대한 강조 색상을 지정할 수 있다. color-scheme 속성에 대해서도 자동 조정 값을 제공한다. (light / dark mode) :root { color-scheme: light dark;..

Programming 2022. 5. 27. 17:05

요즘 한창 유행인 포켓몬 빵. 없어서 못 산다는 포켓몬 빵... 도대체 정말 팔기는 파는 건지 궁금하다. 구경이라도 해야 빵을 사고, 옛날 추억 회상 겸 띠부씰도 모을텐데... 너무 답답한 마음에 그냥 내 개인 띠부씰 모음집을 앱으로 만들기로 했다. (가질 수 없다면 부셔버리겠...) 사실 앱을 만들어보는 건 처음이라, 비교적 익숙한 React 기반으로 가능한 방법을 사용했다. React Native 자체도 처음이거니와, 한국판 포켓몬 워들은 아직까지 본 적이 없어서 어떻게 구현해야 할 지부터 기획해야했다. 나는 원조 포켓몬 게임을 아주 재밌게 90년대생이므로, 포켓몬 골드/실버 이후로는 취급을 하지 않는다. 하지만 역시 제일은 원조 151마리라하였다. 그래서 이번 워들 단어사전은 151마리의 포켓몬으로..

Programming/React 2022. 4. 15. 15:09

react에서 비동기를 다루는 방법은 다양하다. javascript 언어니까 당연히 Promise, async & await으로 처리가 가능하다. redux를 사용하고 있다면, redux saga, thunk 등 다양한 미들웨어가 제공된다. 하지만 이런 것들로 서버의 상태를 관리하기란 여간 어려운 일이 아니다. 아래의 이유들로 앱과 서버 간의 관계 및 상태를 말할 수 있을 것이다. 원격에 위치한 곳에 저장. 앱이 소유하거나 제어하지 않음. 데이터 가져오기 및 업데이트를 위해서는 비동기 API가 필요. 다른 사람들과 함께 사용해서, 나도 모르는 순간에 업데이트 될 수 있음. 앱에서 사용하는 데이터가 OUTDATED 상태가 될 가능성 가짐. 기본적인 React Query 형태 함수형 컴포넌트 내에서 Hook..

Programming/React 2021. 5. 24. 23:13

python을 한참 익히는 중이지만, 내가 어떤 알고리즘을 짜는 데에 있어 필요한, 정말 웬만한 것들은 모두 다 자체적으로 지원을 해 주는 것 같다. 이번 글에서 다루게 될 collections 또한 그 중 하나이다. collections를 사용하게 된 곳은 "완주하지 못한 선수"를 찾아내는 문제에서였다. 마라톤 경기를 한다고 가정하였을 때, 참가자 목록이 주어지고, 완주한 사람들의 목록이 주어지게 된다. 이 때, 참가자 목록에는 있지만 완주한 사람들 목록에는 없는 사람, 즉 마라톤 경기에서 완주하지 못한 사람은 누구인지를 찾아내는 문제였다. def check_not_completed_runner(participants, completions): #participants는 참가자 목록 ['Chris', ..

Programming/Python 2021. 1. 16. 01:34

어떠한 문자열이 주어졌을 때, 주어진 문자열의 가운데만 뽑아서 출력하는 문제였다. 1. 문자열의 길이가 홀수인 경우 ex) spoon -> o 2.문자열의 길이가 짝수인 경우 ex) iPhone -> ho 일단 문제를 처음 보았을 때, 문자열의 길이를 홀수/짝수로 나누어서 주고 있기 때문에 각각의 경우에 따라 분기하는 것이 필요하다고 생각했다. def string_middle(str): length = len(str)#인자로 받은 문자열의 길이 isOdd = length % 2#나머지가 1이면 홀수인지?에 대한 값은 True, 0이면 짝수로써 False 값 여기까지 진행하여, 현재 주어진 문자열이 홀수 길이인지 짝수 길이인지를 구별해주었다. 남은 것은, 각 경우에 가운데 글자를 어떻게 정의할 것인가였다...

Programming/Algorithm 2021. 1. 12. 00:13

Pytest - python test framework -v 옵션은 verbose로 추가적인 정보를 보고 싶은경우에 추가 1. Fixture 테스트 코드들에서 공통으로 사용되는 함수 또는 코드들을 작성할 떄 유용. 테스트의 기반이 되는 기초 환경 구성에도 유용. 사용방법 #conftest.py 라는 명칭으로 작성하면, 다른 test 파일들이 알아서 참조하게 됨 import pytest @pytest.fixture #fixture로 선언할 코드들을 아래에 작성 def supply_AA_BB_CC(): aa=25 bb=35 cc=45 return [aa,bb,cc] #test_basic_fixture.py #전혀 다른 파일에서도 fixture를 공유하기 때문에 위에서 작성한 함수를 바로 사용할 수 있다. i..

Programming/Python 2020. 8. 13. 17:25

앞선 게시글에서는 두 가지 방법으로 웹 설문 영상 응답 문항에서 사용할 영상에 대한 처리를 진행보았다. 썸네일 이미지 추출과 업로드와 동시에 자체적으로 인코딩을 시키는 방법이었는데, 두 가지 방법 모두 적절하지 못한 것으로 판단했다. 그렇기 때문에 새로운 방법을 강구하였고, 해결책으로 제시된 방법에 대하여 작성해보려고 한다. 미디어 파일의 업로드 요즘엔 대부분의 미디어 파일을 스마트폰에서 생성하고 소비한다. 웹 설문 응답 시에도 마찬가지일 것이다. 어차피 스마트폰으로 생성한 미디어 파일들을 usb든 클라우드 서비스든 한 번 거쳐서 pc로 옮긴 뒤 브라우저에서 업로드해야만 하는 불편함이 있다. 이런 불편함을 개선할 수 있다는 것이 이번 기능의 장점이 될 것이다. 카카오톡 공짜 인코딩 서비스(?) 카카오톡으..

Programming 2020. 7. 23. 18:51