삼바의 성장 블로그

일반적으로 React에서는 부모 컴포넌트와 자식 컴포넌트가 상호작용할 수 있는 수단이 props 밖에 없습니다. 자식을 수정하려면 새로운 props 를 전달하여 자식을 다시 렌더링해야합니다. 하지만 React에서의 상태의 흐름에서 벗어나 직접적으로 자식 컴포넌트의 인스턴스 혹은 DOM 엘리먼트를 수정해야하는 경우도 있습니다. VanillaJS 일반적으로 JS에서 DOM Element를 수정해야하는 경우, 특정 DOM을 지정하기 위해 선택자를 사용합니다. 특정한 DOM요소에 style을 따로 적용하거나 속성 값을 바꾸는등 다양한 작업을 할 수 있습니다. /* 안녕하세요 */ // 예시 const myElement = document.querySelector('#my-id'); myElemen..

{list.map((item, index) => ())} map 함수를 사용하여 DOM Elements들을 만들 경우 key 값이 없으면 Each child in an array or iterator should have a unique "key" prop. 이라는 에러와 만나게 됩니다. {list.map((item, index) => ())} 따라서 우리는 종종 배열의 index 값을 사용하여 key 값을 넣어 에러를 피하곤 합니다. 하지만 이렇게 key 값으로 index 를 넣는 것은 React를 통해 완성된 페이지가 잘못된 데이터를 보여줄 수 있게하는 원인이 됩니다. 왜 index 에 key 값을 넣는 것이 비효율적인 동작을 야기하는지, 그리고 어떻게 해결할 수 있을지 알아봅시다. React 트리 ..

Author: 이즐라 지음 Date: 2021년 5월 11일 Publisher: 넥서스 Score /5: ⭐️⭐️⭐️⭐️ Summary: 짧지만 결코 가볍지 않은 서양 근현대 철학을 이룬 21명의 철학자 이야기 나는 철학과를 나왔지만 주변사람들에게 내가 철학과였다는 것을 말하지 않아왔다. 그 이유를 생각해보면 철학과를 나왔다는 사실만으로 내가 특이한 사람이 되는 것이 싫었었다. 대다수의 개발자들은 철학과를 나오지 않았고 철학을 전공한 사람에 대해 많이 접해보지 못했다. 따라서 나를 누군가는 호기심으로 누군가는 의구심으로 쳐다보았다. 나는 그런 시각이 싫었고 사람들의 호기심과 의구심 속에서 철학을 전공한 것이 개발자로 나아가는 데 얼마나 도움이 되는지 증명하는 것에 자신이 없었다. 정말 부끄럽게도 나는 철..

웹서비스에 https를 적용할 경우, SSL 인증서를 VeriSign이나 Thawte, GeoTrust 등에서 인증서를 발급받아야 하지만, 비용이 발생하므로 스스로 인증기관을 만들어 SSL 인증서를 발급하여 사용하곤 합니다. Ubuntu 18.04에 OpenSSL이 설치되어있어 스스로 서명한 ROOT CA(Self Signed Certificate)를 생성하여 사용하려고합니다. OpenSSL pem과 crt를 발급받는 전체 과정이 포함되어있습니다. 급하신분은 하단 ex. 이후의 스크립트를 복사해서 사용해도 좋습니다. RSA 개인키 생성 # OpenSSL 접속 $ openSSL # 접속 후 OpenSSL> genrsa -out [[원하는 경로]]/[[파일명]].key 2048 # ex. genrsa -ou..

HTML 작업을 하다보면 태그에 margin: 0; padding: 0; 을 설정했음에도 불구하고 1 ~ 5px 의 공백이 생기는 것을 볼 수 있습니다. 우선 해결방법을 먼저 소개하고 왜 이러한 공백이 생기는지 이야기해보려 합니다. 해결방법 두 가지 해결방법이 있습니다. 저는 주로 블록 요소로 속성을 변경시키는 방법을 사용합니다. 블록 요소로 속성을 변경 간단하게 태그에 css 속성으로 display: block; 을 추가하여 해결합니다. img { display: block; } 혹은 태그에 style 속성을 사용하여 해결할 수도 있습니다. vertical-align vertical-align 의 기본 값은 baseline 인데 이 값을 top 혹은 bottom 으로 변경해줍니다. **** 발생 원인 ..

React hook form에서 특정 타입을 추론하지 못해 as unkown as 를 통해 특정 타입을 강제로 지정해주는 경우가 있었습니다. 이 과정에서 unknown 에 대한 궁금증이 생겼고 이에 대해 정리해보려 합니다. any unknown 타입을 이야기하기 전에 any 타입을 먼저 살펴보려합니다. Typescript의 모든 타입은 any 는 모든 타입을 할당받을 수 있는 타입입니다. 사용자로부터 받은 데이터 혹은 써드 파티 라이브러리 같은 동적인 컨텐츠로 오는 불특정한 값을 컴파일 검사를 하지 않고 사용하고자 할때 사용합니다. 컴파일 중 타입검사를 하지 않으므로 기존의 Javascript 와 같이 작업하기에 용이합니다. 예시 let notSure: any = 4; notSure = "maybe a ..

모든 Declarations(function, var, let, const and class)는 JS에서 모두 호이스팅이 됩니다. 하지만 var 가 undefined 로 초기화(initialization)되는 것과 다르게 let , const 는 초기화되지 않은 상태로 남아있습니다. 이를 어떻게 확인할 수 있을지 예시로 알아봅시다. 예시 const foo = 1; { console.log(foo); const foo = 2; } 블록스코프안의 const foo 가 호이스팅 되지 않았다면 console.log(foo); 의 결과로 1 이 출력되었어야 합니다. 하지만, 호이스팅이 되기 때문에 Uncaunght SyntaxError 가 먼저 발생을 합니다. Uncaught ReferenceError: Cann..

Author: 산드로 만쿠소 지음 | 권오민 옮김 Date: 2021년 1월 23일 Publisher: 길벗 Score /5: ⭐️⭐️⭐️⭐️ Summary: 어떻게 하면 더 나은 프로그래머가 될 수 있을까? Type: Development 소프트웨어 장인정신은 소프트웨어 개발자가 스스로 선택한 커리어에 책임감을 가지고, 지속적으로 새로운 도구와 기술을 익히며 발전하겠다는 마음가짐이다. 소프트웨어 장인정신은 책임감, 프로페셔널리즘, 실용주의 그리고 소프트웨어 개발자로서의 자부심을 의미한다. "너는 어떤 개발자가 되고싶어?"라는 질문을 개발자가 되기 이전부터 많이 받아왔었다. 이 질문에 대한 답으로 나는 항상 "동료들에게 도움이 되는 개발자"라고 이야기해왔다. 부끄럽게도 나는 동료들에게 도움이 되고자한다고..

코드리뷰를 받던 도중, 명령형인가 선언형인가를 생각하고 가능하면 코드를 선언형으로 생각하고 작성하는 편이 좋다는 코멘트를 받아 이를 정리해보려고 합니다. 코드리뷰 file_array: Array 을 받아 file_array 에 값이 들어가 있는지 확인하는 코드를 아래와 같이 작성하였었습니다. const validateRequiredFile = (file_array?: Array) => { const hasFile =!!file_array ? file_array.length !== 0 : false; return hasFile; }; 이를 해석해보자면, 'file_array 가 undefined 라면 false 를 출력하고 file_array 의 크기가 0 일때는 false 아니면 true 를 리턴한다.'..

Javascript와 다르게 Typescript에서는 Enum을 제공합니다. Enum이 무엇인지, Enum을 사용하면 어떤 이점이 있는지 알아봅시다. Enum? enum 은 enumerated type(열거형)을 의미합니다. Enum은 값들의 집합을 명명하고 이를 사용할 수 있게 합니다. 일반적으로 우리가 사용하고 있는 열거자들은 주로 식별자입니다. 예를들면 boolean 을 들 수 있습니다. 많은 컴퓨터언어들에서 사용자들이 새로운 열거형을 정의할 수 있게 하고있습니다. 기존 JS에서는 Enum을 제공하지 않아 상수들의 집합을 정의하고 싶은 경우 이를 해결하기 어렵기 때문에 Enum이 필요했었습니다. 추가적 이점 추가적으로 Enum을 사용하여 얻을 수 있는 이점들은 다음과 같습니다. 상수를 사용할때보다 ..