코드로 대화하기

안녕하세요! 저번 글에서는 Dom Node와 Element 기초에 대해 알아보았는데요 이번에는 활용하는 방법을 알아보겠습니다. * createElement() 원하는 태그를 생성합니다. var child = document.createElement('div'); * appendChild() 자식 노드 리스트 중 마지막 자식으로 삽입시켜줍니다. var parent = document.querySelector(".parent"); var child = document.createElement('div'); parent.appendChild( child ); * remove() 엘리먼트를 삭제합니다. var parent = document.querySelector(".parent"); parent.remove..

안녕하세요! 오늘은 RN 빌드 시 메모리 관련 에러를 해결겠습니다. java.lang.OutOfMemoryError: GC overhead limit exceeded 해당 에러는 CPU 사용량중 98%이상 GC가 작동되는 경우 GC Overhead limit exceeded가 발생이 됩니다. android/gradle.properties에서 아래와 같이 메모리를 늘려주면 됩니다. # Default value: -Xmx10248m -XX:MaxPermSize=256m # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 org.gradle.jvmargs=-Xmx4096m ..

오늘은 RN에서 이미지를 서버에 보내는 방법을 알아보겠습니다. 먼저 기기 안에서 이미지를 가져오기 위해 라이브러리를 사용합니다. react-native-image-crop-picker Select single or multiple images, with cropping option www.npmjs.com ImagePicker로 가져온 이미지 데이터를 아래 obj 형태로 만들어 그대로 서버에 넘기면 끝입니다. :) import ImagePicker from 'react-native-image-crop-picker'; ImagePicker.openPicker({ multiple: false ,mediaType:'photo', compressImageQuality : 0.6}).then(images => {..

.env 프로젝트를 하다 보면 google, kakao api key값 같은 민감한 정보를 관리햐야할때가 있습니다. 해당 정보를 그대로 노출하면 보안에 문제점이 생기기 때문에 이번 시간에는 env에 대하여 알아보겠습니다. 환경변수 설정 위 경로에 .env파일을 만들어줍니다. src폴더 안에 만드는게 아닙니다! .env파일 안에는 원하시는 정보를 적으시면 됩니다. 꼭 REACT_APP_으로 시작해야 합니다 REACT_APP_KAKAOMAP_API_KEY=---- 활용 jsx안에서 사용하는 방법과 html안에서 사용하는 방법이 있습니다. 먼저 jsx같은 경우 아래와 같이 process.env. 뒤에 사용합니다. {process.env.REACT_APP_KAKAO_API_KEY} html같은 경우 %%사이에 ..

object에서 개수 제한을 하고 싶을 때 사용합니다. 방법 1. 1. key값 배열을 반복문을 돌며 새로운 객체에 넣어줍니다. let test = {a:0, b:1, c:2, d:3, e:4, f:5}; function sliceObj(obj, sliceCount){ let newObj = {}; for(let i=0 ; i sliceCount-1){break}; let key = Object.keys(obj)[i]; newObj[key] = obj[key] } return newObj } console.log(sliceObj(test, 2)) 방법 2. 1, key값을 배열에 넣습니다. 2. 만약 제한된 수 보다 많다면 spli..

delete뒤에 object의 key값을 넣으면 지워집니다. let test = {a:0, b:1, c:2} delete test.a; console.log(test); MDN사이트입니다. delete 연산자 - JavaScript | MDN delete 연산자는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다. developer.mozilla.org

slice([begin[, end]]) begin부터 end까지 자른다. * end는 포함되지 않는다. * end가 없을 경우 begin부터 끝까지 자른다. let array = [0, 1, 2, 3, 4, 5]; array = array.slice(2); // 2부터 끝까지 console.log(array); // [2, 3, 4, 5]; let array2 = [0, 1, 2, 3, 4, 5]; array2 = array2.slice(2, 5); // 2부터 5까지 console.log(array2); // [2, 3, 4] splice(start[, deleteCount[, item1[, item2[, ...]]]]) start부터 deleteCount만큼 자른다. * deleteCount가 없을 ..

https://www.npmjs.com/package/@hellojh/easy-media-calc @hellojh/easy-media-calc 반응형 스타일링을 calc를 반복적으로 사용하게 되면 가독성이 떨어집니다. www.npmjs.com 회사 퍼블리셔분들이 리액트 반응형 퍼블리싱을 할 때 "calc(100vw * (---/428))"가 반복적으로 사용되는 것을 보았습니다. 반복을 줄이고자 js파일을 만들어 자주 사용되는 스타일링 코드를 함축시켰습니다. 두 개의 인자를 받고 그 인자들을 calc형태로 뿌려주는 형태로, 코드는 어렵지 않습니다. function Width(elPx, totalPx){ return (`width:calc(100vw*(${elPx}/${totalPx}));`); } 누군가 ..

오늘은 인터랙션 코딩이나 vanila javascript 프로젝트를 할 때 많이 활용하는 Node와 Element에 대해 알아보겠습니다. Node? Element? 노드와 엘리먼트의 차이점을 알기 위해서는 노드가 무엇인지를 먼저 알아야 합니다. Main Hello World 위 코드를 살펴보겠습니다. 일반적으로 봤을 때는 html엘리먼트들과 텍스트, 주석들이 있습니다. 노드 관전에서 보겠습니다. 은 와 자식 노드들이 있습니다. 는 이라는 노드가 있고, 는 , , 노드들이 있습니다. 그리고 안에는 Hello World라는 노드가 있습니다. html의 모든 태그들을 노드이고, 주석/텍스트들 또한 노드입니다. 노드란 여러 가지 DOM 타입들이 상속하는 인터페이스입니다. 노드 타입들 중 하나가 Element입니..

지금까지 memo와 useMemo를 알아보았는데요 마지막으로 useCallback에 대해 살펴보겠습니다. 개념 공식문서입니다. useMemo는 값을 저장했던 반면 useCallback은 함수를 반환합니다. memoization이란 반복되는 결과값을 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법입니다. 형태는 두 번째 배열 안에 있는 값이 변할 때 첫 번째 콜백 함수를 반환합니다. 예시 실제 코드를 보며 더 자세히 알아보겠습니다. // App.jsx function App() { const [value, setValue] = useState(""); const [count, setCount] = useState(0); const returnSumCount = () => { return c..