RAILEND
ModuleNotFoundError: No module named 'flask'
도커 세팅을 연습하던 중에 만난 에러 대충 이런 과정으로 가상 환경에서 app.py를 실행했는데 flask 모듈을 찾지 못했다. python -m venv venv source venv/bin/activate pip install flask python app.py 구글링을 해봐도 해결책을 찾지 못했는데 python3 app.py 허무하게도 python3로 바꿔주니 정상적으로 실행되었다...
React defaultProps
리액트에서 제공하는 defaultProps 속성을 통해 props의 기본값을 지정할 수 있다. Examples.defaultProps = { name: "", age: 20 }; function Examples({ name, age }) { return ( ); } 함수형 컴포넌트의 경우 자바스크립트의 기본값 매개변수 할당을 통해 props의 기본 값을 지정할 수도 있다. function Examples({ name = "" , age = 20 }) { return ( ); } 그렇다면 굳이 defaultProps을 사용해야 할 필요가 있을까? 관련 내용을 찾아보니 클래스 컴포넌트에선 생명주기 메서드가 서로 다른 스코프를 갖기 때문에 defaultProps를 사용했다고 한다. 함수형 컴포넌트가 대세인 지..
2021-01-20 TIL
Facts (사실, 객관) 여전히 운동을 꾸준히 하지 못하고 있음 요즘 집중력이 크게 떨어짐 면접에서도 떨어짐 함수형 프로그래밍에 대해 학습하는 중 Feelings (느낌, 주관) 작년처럼 열을 올렸던 적이 있었나 싶을 정도로 운동을 하고 싶다는 생각이 들지 않는다. 운동 파트너가 없기 때문인가, 나이가 들어서인가... 간혹 헬스장에 갈 때마다 1년 동안 끌어올렸던 수행 능력에 크게 미치지 못하는 것을 느끼곤 의욕이 한 풀 더 꺾인다. 밤낮이 바뀐 생활 패턴 또한 도움이 되지 않는다. 운동을 해야 할 이유는 한 가지인데, 하지 못하는 이유는 셀 수 없을 정도로 많다. 생각하지 말고 그냥 해야 한다. 요즘 집중력이 크게 떨어짐을 느낀다. 너무 복잡하게 생각하지 말고 옳은 방향인지만 판단하고 즉시 행동하는 ..
2022-01-15 TIL
Facts (사실, 객관) 엘리스 SW 엔지니어 트랙 12주 차 마무리 주제: 상태관리, 테스팅 Feelings (느낌, 주관) 이번 주는 상태관리, 테스팅에 대해 학습했다. 테스트에 대해선 한 주동안 학습 계획이 잡혀있었던 걸로 기억하는데 변경이 된 건지, 하루 분량만큼의 강의만 제공됐다. 처음 리액트를 배울 때 useState를 먼저 사용하고, 나중에 리덕스를 배우게 되면서 개인 프로젝트에는 리덕스를 적용했었다. 이번 주차 학습을 통해 이번 기회에 기존에 사용해보지 못한 useContext와 useReducer를 배울 수 있었다. 마치 useContext와 useRducer를 합친 것이 리덕스처럼 느껴졌다. 교육 과정에는 포함되지 않았지만 react query나 18 버전에 포함될 suspence에 ..
이벤트 복습하기
이벤트는 브라우저의 윈도우 객체 내에서 발생하는 사건을 말한다. 클릭, 스크롤, 커서의 움직임 등 다양한 이벤트를 감지할 수 있다. 특정 객체에서 발생하는 이벤트를 감지하기 위해서는 addEventListener 메서드를 사용하면 된다. 객체에 존재하는 onclick과 같은 이벤트 핸들러 프로퍼티를 사용해도 되지만, addEventListener를 사용하면 하나의 이벤트의 여러 개의 핸들러를 추가할 수 있는 장점이 있다. 게다가 removeEventListener로 핸들러를 제거할 수도 있다. (HTML tag의 어트리뷰트로 핸들러를 등록해줄 수도 있지만, 이 방법은 그다지 권장되지 않는다. HTML 파싱이 먼저 끝난 후에 스크립트가 실행될 수 있도록 자바스크립트 코드를 HTML과 분리시키는 것이 바람직..
2022-01-07 TIL
Facts (사실, 객관) 최근 개발자로서 첫 면접을 볼 기회가 있었다. Feelings (느낌, 주관) 개발자로서 첫 면접이라 떨렸고 한편으로는 설레기도 했던 면접이었다. 지금까지 배웠던 내용을 나름대로 정리하면서 준비했지만 안타깝게도 잘 대답하지 못했다. 어설프게 알았기 때문에 잘 대답하지 못한 것들이 대부분이었다. 그동안 나름 깊게 학습하려고 노력했는데, 말로만 그렇게 해왔던 사실을 깨닫게 된 경험이었다. 특히 이벤트 전파나, 배열 메서드, 리액트에 대한 배경 지식에 대해서 충분히 잘 대답할 만큼 알지 못했던 아쉬움이 크지만 지금부터라도 잘해야 한다. 어설프게 알고 있던 내용들을 정리해야겠다. 최근 리액트 강의를 들으면서 새롭게 접하게 된 내용이 많다. 마치 미들웨어와 같이 동작하며 예외처리를 해주..
attribute와 property의 차이
HTML에서 attribute와 property라는 단어를 자주 접하게 된다. 최근 면접에서 관련 질문을 받기 전까지는 이 둘의 개념을 혼용하거나, attribute는 주로 html 태그에 들어가는 속성으로, property는 자바스크립트 객체에 들어가는 속성으로 생각해왔다. 제대로 된 답변을 못하고 검색을 해보니 둘 사이에는 명확한 차이가 존재했다. 출처 링크를 따라가면 더 자세한 설명을 볼 수 있다. 차이 attribute는 html 문서의 태그에 포함된 속성을 일컫는 말이고, property는 DOM 요소에 포함된 속성을 일컫는다. html 문서 내 attribute는 정적이고, 렌더링 엔진에 의해 생성된 DOM에 포함된 property는 그 값이 변할 수 있다.
인라인 요소에 padding, margin이 적용될까?
인라인 요소에는 박스 모델에 적용되는 width나 height과 같은 CSS 속성을 적용할 수 없다. 그래서 padding, margin 같은 속성도 붙일 수 없다고 생각했었는데 알고 보니 사실이 아니었다. padding과 margin을 좌우에만 적용할 수 있다는 글을 보았다. 과연 팩트일지 테스트를 해보려 한다. 인라인 요소에 패딩 적용하기 예상과 달리, 좌우뿐만 아니라 상하로도 잘 적용된다. 인라인 요소에 마진 적용하기 그렇다면 마진은 어떨까? 그러나 자세히 보면, 인라인 요소에서 margin은 좌우로만 적용된다. 결론 인라인 요소에 패딩을 적용할 수 있다. 마진은 좌우로만 적용된다.
map()과 forEach()차이
forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (출처: MDN) forEach()는 주어진 콜백을 각 요소에 대해 한 번씩 실행해준다. map은 callback 함수를 각각의 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다. (출처: MDN) map()은 주어진 콜백을 각 요소에 한 번씩 실행하여 새로운 배열을 생성한다. 차이 새로운 배열을 반환하는 ..