개발하는 일상

위와 같은 구글 폼 제출을 코드로 자동화해보겠습니다. 아래 링크는 제가 포스팅을 위해 만든 폼입니다.(forms.gle/jqS6 HzBgLVeZ1 nUc7) 설문지 자동화하기 docs.google.com 저처럼 먼저 제출해야 하는 구글 폼과 비슷한 테스트용 폼을 따로 만들어 개발할 때 사용하시길 바랍니다. 자동화가 올바르게 동작하는지 확인하실 수 있습니다. 구글 폼 작동 확인하기 구글 폼은 form 태그를 통해서 데이터를 제출합니다. 하지만 input으로 보이는 부분은 실제로 div 태그로 구성되어 있고, 데이터는 따로 hidden 타입 input에 담겨있습니다. 폼 제출 요청을 하기 위해서는 두 가지 정보가 필요한데요. 어디로 요청을 보낼 것인지 어떤 데이터를 어떤 이름으로 보낼 것인지 를 알아야 합니..

문제 상황 perspective 속성을 사용하다보면 의도와 다르게 이상하게 동작할 때가 있습니다. 저는 문을 만들면서 이 상황을 겪게 되었는데요. 아래의 네모박스에 마우스를 가져가면 마치 문이 열리는 듯한 동작을 하도록 만들었습니다. 처음 동작은 부드럽게 되는 듯 하나, 마우스를 빠르게 왔다갔다 해보시면 perspective가 매우 작게 설정된(매우 가까이 에서 문이 열린) 것 같은 효과가 발생합니다. 원인과 해결 방법 이 문제는 원치않게 perspective가 변할 때 발생하는데요. 보통 perspective의 초기값을 설정하지 않았을 때 이런 문제가 발생하니 이벤트가 발생하지 않았을 때 초기값을 잘 지정해주면 됩니다. 저의 경우는 door-front에서 opend클래스가 추가 되었을 때 transfo..

border-radius: 5px; 가장 많이 쓰이는 사용법일 것 같은데요. 이 사용법은 축약형으로, 실제로는 다음과 같은 속성으로 나눠져 있습니다. 이 문법은 블락의 네 모서리의 border-radius를 한 번에 지정합니다. 그렇다면 저 5px이 의미하는 것은 무엇일까요? 아래의 예시에서 radius값을 조절해보세요! border-radius 값을 늘리면 늘릴 수록 원이 커지는데, 저 원의 반지름이 바로 border-radius에 지정한 값이 됩니다. border-top-left-radius: 5px 10px; border-radius를 원이 아니라 타원형으로도 지정할 수 있습니다. 처음 써준 값이 타원의 수평 반지름, 두 번째 써준 값이 수직 반지름이 됩니다. 아래의 예시에서 horizontal과 ..

결론 React는 불변성에 기반하여 상태 관리를 하고, Vue는 상태가 변하는 것을 허용합니다. 불변성(immutability)이란? 단어를 말 그대로 풀어 보자면 변하지 않는 속성이 됩니다. 하지만 보통 상태 관리에서 말하는 불변성은 선언한 객체(데이터)가 선언 이후 변하지 않도록 관리하는 방식을 말합니다. 아래 코드를 보세요. const obj = { foo: 'hello world!', bar: true, }; // 불변성 위반! obj.foo = 'bye world!'; 선언한 obj의 내부를 선언 이후에 수정하고 있으므로, 이 코드는 불변성을 위반한 코드입니다. React의 상태 관리 이미 선언한 객체가 변해서는 안 된다니, 그럼 대체 상태가 변해야 할 때는 어떻게 ..

이 글은 자바스크립트를 조금 알고, 프론트 프레임워크를 시작한 지 얼마 되지 않은 초보, 입문 개발자의 입장에서 작성되었습니다. 0. 프레임워크가 할 수 있는 일은 모두 바닐라 JS로 할 수 있다 먼저 분명히 해 두고 싶은 점입니다. React나 Vue로 할 수 있는 일은 모두 바닐라 JS(순수 자바스크립트)로 구현할 수 있습니다. 그럼에도 사람들이 프레임워크를 쓰는 이유가 무엇일까요? 1. 데이터의 변화를 화면에 적용하기 쉽다 프레임워크(React)를 개발한 페이스북 페이지를 예시로 들어, 바닐라 JS와 프레임워크의 차이점을 알아보겠습니다. 페이스북 메인화면입니다. 이 화면에서 저의 이름(눈치볼나이)이 들어가는 곳을 파란 네모로 표시해두었습니다. 제가 만약 이름을 바꾼다면, 화면에서 저 세 부분이 바뀌..

파이썬으로 한 번에 여러 파일을 일괄 수정해야 할 일이 생겼습니다. open으로 파일의 일부를 수정할 수 있는 방법을 찾아보았는데, 직접적으로 수정할 방법은 없는 듯 하여 아래와 같이 간접적인 방법을 사용하였습니다. # 수정된 파일 내용이 임시로 저장될 리스트 edited_lines = [] with open(file_url) as f: lines = f.readlines() for line in lines: # 조건에 따라 원하는 대로 line을 수정 if 'have to update' in line: edited_lines.append('updated line') else: edited_lines.append(line) with open(file_url, 'w&#3..