티스토리

Note.

검색하기

블로그 홈

Note.

thiporia.tistory.com/m

조용히 좋아하는 것을 남기는 곳입니다.

구독자: 0

방명록 방문하기

주요 글 목록

이상적인 코드 스플릿팅 이상적인 코드 스플리팅 전략 1. 크리티컬 경로 최적화 초기 로드 중요성: 사용자가 처음 사이트에 접근할 때 필요한 최소한의 코드만 로드합니다. 메인 라우트 분할: 가장 자주 방문되는 경로의 컴포넌트는 초기 번들에 포함시키고, 그 외 라우트는 지연 로딩합니다. 2. 사용자 상호작용 기반 로딩 동적 컴포넌트 로딩: 사용자 상호작용이 필요한 컴포넌트는 React.lazy를 사용하여 필요할 때만 로드합니다. 페이지 내 대형 컴포넌트 분리: 대형 컴포넌트나 복잡한 컴포넌트는 별도의 청크로 분리합니다. 3. 서드 파티 라이브러리 분리 헤비 라이브러리 분할: 크기가 큰 서드 파티 라이브러리는 별도의 청크로 분리합니다. 조건부 로딩: 특정 기능이나 사용자 그룹에만 필요한 라이브러리는 조건에 따라 로드합니다. 4. 라.. 공감수 0 댓글수 0 2023. 11. 27.
Volta??? Volta는 JavaScript 명령줄 도구를 관리하는 번거로움 없는 방법입니다. 왜 Volta를 사용해야 하는가? 혹시 특정 버전의 node를 설치하고, 프로젝트를 진행하다가 다른 프로젝트로 넘어갔을 때, node 버전 불일치로 install 조차 되지 않았던 경험 있지 않으신가요? 아니면 node 버전이 낮아서 경고가 발생했던 적은요? 이런 연유로 프로젝트 자체 빌드 및 실행조차 해보지 못하신 적이 있으시다면, 우리는 Volta를 사용하는 것을 적극 고려해 보는 게 좋아요. 일반적으로 회사 프로젝트들은 각각의 고유한 node 및 yarn 버전을 사용하고 있습니다. (물론 잘 관리해서 일괄 관리되는 곳도 있을 수 있어요.) 작업 간의 node 버전을 바꾸기 위해서 재설치를 하거나 기존의 nvm을 활용하.. 공감수 0 댓글수 0 2023. 10. 5.
Reactjs hooks 를 통한 비교 이해 Reactjs 구현체에서 활용 중인 비교와 구현 코드 package/react-conciler/src/ReactFiberHooks.new.js/areHookInputsEqual ... 아래는 실질 비교부 for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) { if (is(nextDeps[i], prevDeps[i])) { continue; } return false; } return true; } is? Object.is // Object.is 폴리필 function is(x: any, y: any) { return ( (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) //.. 공감수 0 댓글수 0 2022. 5. 30.
Typescript - 기본타입 아래 내용은 강좌를 들으며 공부한 내용을 요약 정리한 자료입니다. Types number: 11, 11.23, -550 -> integer, float 을 포함 string: 'hi', "hi", `h` boolean: true, false -> 참과 거짓을 다룸 값이 두 개 뿐 object: { age: 30 } -> 모든 자바스크립트 객체는 모두 객체 타입이지만, 타입스크립트에서는 조금 더 구체적인 객체도 있음.리터럴 또는 생성자 필요 array: [1,2,3] -> 어떤 자바스크립트의 타입도 저장할 수 있는 구조 tuple: [1,2], [1, “admin”] -> 길이 및 타입이 고정 된 배열 enum: enum { NEW, OLD } -> 열거 목록 제공, 라벨들은 0부터 시작하는 숫자로 변환되.. 공감수 0 댓글수 0 2022. 4. 24.
[Testing-library] render.. ? append? 오늘은 회사에서 테스트 관련해서 대화를 나누고 있었어요. 팀원: 저희 테스팅 라이브러리 제약사항 있나요? 저: 없는데요.. 만약 더 나은게 있으면 추가하면 됩니다. 왜용? 팀원: 아.. enzyme 쓰고 싶어지네요 저: ?? ?? 상황은 이러했다.. // 만약 jest + enzyme 조합이었다면? describe('SomeComponent test', () => { let component const setup = (val) => { component = mount // {value} } beforeEach(() => { setup() } afterEach(() => {component = null}) it('default', () => { expect(component.text()).toBe(expe.. 공감수 0 댓글수 0 2022. 3. 30.
Dockerfile 명령어 Dockerfile → 이미지를 만드는데 필요한 모든 단계가 기술 되어 있음. app의 소스코드 저장소의 루트 디렉토리에 포함되어야 함 // 아래 이어지는 명령어들은 순차적으로 수행된다. FROM node:12-alpine MAINTAINER Seonyeong Jang LABEL “group”=”FE” USER root ENV TZ=Asia/Seoul ENV CP=/data/app/linewalks RUN npm install —global pm2 RUN mkdir $CP ADD *.js* $CP/ WORKDIR $CP CMD pm2 start ecosystem.config.js && tail -f /dev/null CMD ["supervisord", "-n"] FROM 해당하는 node:12-alpin.. 공감수 0 댓글수 0 2022. 1. 17.
redux] async 를 어떻게 처리 하는게 좋을까? async 를 처리하기 위한 다양한 것 중에 나는 무엇을 써야할까? thunks? saga? observables? Thunks are best for complex synchronous logic (especially code that needs access to the entire Redux store state), and simple async logic (like basic AJAX calls). With the use of async/await, it can be reasonable to use thunks for some more complex promise-based logic as well. (썽크는 복잡한 동기 논리(특히 전체 Redux 저장소 상태에 액세스해야 하는 코드)와 간단한 비동.. 공감수 0 댓글수 0 2021. 11. 14.
text-decoration is not woking? CSS2-w3c 해당 요소가 inline 요소인지 확인. inline 요소라면 display: inline-block로 변경 후 시도 공감수 0 댓글수 0 2021. 10. 7.
답이 없다.. axios handler를 만들어 놨는데,, 고장이 하나둘 끝도 없이 난다.. next js 내에서 cookie를 사용하려고 nookies를 사용하기로 하고, getInitialProps에서 ctx로 핸들링하도록 하고.. axios 에서도 jwt를 효율적으로 쓰게 해봤는데도, 에러는 끝도없다.. 권한에러는 잡았는데,, 이제는 api 호출에러... 하... 언능 고쳐야겠다.. 공감수 0 댓글수 0 2021. 10. 1.
왜 text-overflow ellipsis 가 동작하지 않는거지?? 가끔 그럴 때가 있습니다.. 잘 사용하던 친구가.. 동작하지 않을 때가.. 물론 제대로 알고 사용하던게 아니라서 그런 것이겠지요 이번도 그랬습니다. text-overflow: ellipsis; 가 동작을 하지 않는 문제였습니다. 처음에는 mdn text-overflow를 보며 작성합니다. .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 여기서 문제는 위 코드들이 문제가 아니였어요.. code-sandbox 위와 같은 문제와 넘치는데 ellipsis가 적용되지 않는 문제가 있었어요! 그래서 다시 mdn을 살펴봤습니다. The text-overflow property only affects content that is.. 공감수 0 댓글수 0 2021. 8. 21.
2021.06.30 curl: 곱슬곱슬하다, 말다, 몸을 웅크리다. twitchy: 실룩실룩, 불안해하는(jittery), 홱 움직이는, 까딱 하는 batty: 약간 제정신이 아닌 fishbowl: 어항, 사방에서 빤히 보이는 것, 프라이버시가 전혀 없는 장소, 유치장 turn out: 나타나다, 뒤 돌다 certainly: 물론입니다. neighbor: 이웃의 tired of: ~에 싫증난 upside-down: 뒤집힌 fur: 털, 모피 faint: 기절하다 far away: 먼 곳에 pointy: 뾰족한 공감수 0 댓글수 0 2021. 7. 1.
자식 요소가 focus 되었을 때 부모도 효과를 받고 싶다면? 간혹 가다 그런 경우가 있다. 자식요소가 focus 되었지만, 효과는 부모요소가 받아야 하는 경우가 있다. 예를 들어 form 내부에서 input 자식 요소가 있어서, 해당 요소가 :focus 되었을 때 부모요소의 border 라던가 background-color가 변경되는 경우가 있다. 이런 경우 지식이 부족했던 나는 isActive 라는 불필요한 변수를 만들어서 제어하려 했다. 꼭 error를 클래스로 작성해서 주는것처럼... 하지만 정말 좋은 방법이 있었는데!!! 바로 :focus-within 이라는 녀석이다. 아래 mdn을 들어가면 간단한 설명과 예시가 있다. 아래 양식의 값을 채워주세요. 이름: 성: form { border: 1px solid; color: gray; padding: 4px; .. 공감수 4 댓글수 0 2021. 6. 17.
jest] react-redux useSelector testing. 문제 발생(jest 테스트 중) react-redux를 사용하는 중에 useSelector를 호출하는 영역에서 아래와 같은 에러가 발생했다. could not find react-redux context value; please ensure the component is wrapped in a 문제 해결을 위해서 찾아보니 useSelector의 mock이 필요할 것으로 판단이 되었다. 그리고 그 mock에는 store도 mock으로 연결되어야할 것 같았다. 문제 해결 import * as reactRedux from 'react-redux' ... let useSelectorMock let useDispatchMock ... useSelectorMock = jest.spyOn(reactRe.. 공감수 0 댓글수 0 2021. 3. 25.
e.target vs. e.currentTarget 특정 element를 제어해야하는 경우가 생겼다. value 154,300 대략 위와 같은 형태에서 section 에 onclick이벤트를 적용했다. 그리고 아래와 같은 형태의 함수로 핸들링을 시도했다. const handleSection = (e) => { // something console.log(e.target) } 처음에는 e.target.dataset으로 진행을 했다. 근데 아래와 같이 나왔다.. DOMStringMap {} 당황스러웠는데.. 의도한 건 해당 객체에 indexNumber라는 키가 있어야 했는데... 그래서 찾아보니 결국 e.target vs. e.currentTarget을 보게 되었다... 깨달은 것을 간단 정리로 마무리한다. 아래 두 사항의 기본 전제는 이벤트가 어디에 바인딩.. 공감수 0 댓글수 0 2021. 3. 25.
rollup.config.js with sass 기본 설정 gist.github.com/thiporia/49eb6672ad209ab1a2e05af49dab6a1d basic rollup-config-js with sass basic rollup-config-js with sass. GitHub Gist: instantly share code, notes, and snippets. gist.github.com 나중에 간편하게 설정하려고 임시로 남겨둡니다. 공감수 0 댓글수 0 2021. 2. 15.
position: absolute의 무서움. 나는 position: absolute를 참 좋아한다. 상위 fixed, absolute, relative, sticky를 만나기 전까지 찾아가는 집요함을 좋아한다. 물론 그로 인해 의도하지 않은 문제를 만날 때도 있지만..... position .. absolute.. position은 5개의 값을 지닐 수 있다. static, relative, absolute, sticky, fixed 이렇게 총 5개를 말이다. 오늘 말하고 싶은 대상은 물론 단 하나 absolute지만 말이다. 그 특징을 알아보고 무서움을 알아보자. 아는 특징이라고 해봐야 딱 두개다... 첫번째! 난 멈추지 않아. fixed, absolute, relative, sticky 를 만날 때 까지는! 얘는 참 어마무시한 아이인데, 무려 .. 공감수 0 댓글수 0 2021. 2. 2.
border-box vs. content-box 간단정리 사실 글 볼 필요 없다. 아래 사이트로 가자. 간략한 정리만 본다면 몰라도.. box-sizing mdn 누구나 매번 작업할 때마다 헷갈리는게 있다. 내게도 몇 개 되는데, 그 중 하나가 box-sizing이었다. 그래서 나중에 다시 찾게 될까 간단하게 남겨놓고자 한다. border-box vs. content-box width, height 100px, border 5px, padding 10px border-box 5(border) + 10(padding) + 85(100px - 10px - 5px) = 100px(계산된 width, height px); 요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다. content-box 5(borde.. 공감수 0 댓글수 0 2021. 2. 2.
개발 중 필요한 것을 정리해두자. react 사용 중 media query(반응형) 적용 필요 시 react-responsive 참고 사이트 react 사용 중 다국어 지원 필요 시 react-i18next(다국어) 참고 사이트 공감수 0 댓글수 0 2021. 1. 19.
UUID가 필요 할 경우! function generateUUID(fmt) { // Public Domain/MIT var d = new Date().getTime();//Timestamp var d2 = (performance && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported return fmt.replace(/[xy]/g, function(c) { var r = Math.random() * 16;//random number between 0 and 16 if(d > 0){//Use timestamp until depleted r = (d + r)%16 | 0; d = Math.f.. 공감수 0 댓글수 0 2020. 10. 21.
window.addEventListener in enzyme. window.addEventListener를 모킹해야하는 상황이 생겼는데, 도저히 어떻게 해야 아름답게 될지 감이 오지 않았다... 그래서 찾아보니 아래와 같은 식으로 작업을 하는 것 같다! const map = {} // addEventListener mock function window.addEventListener = jest.fn((event, callback) => { map[event] = callback })위와 같이 처리할 경우 map 안에 mount하는 컴포넌트 내부에서 addEventListener로 처리하는 것들이 모두 설정되게 되는데, 이 점을 활용해서 이벤트 등록이 정상적으로 되어있는지 파악하는 것이 가능하다. 공감수 0 댓글수 0 2020. 10. 20.
왜 대소문자를 구분을 하지 못하니!!!(feat. Git) 요점! git config core.ignorecase false 와 git mv source destination 안녕하세요 :) 오랜만에 글을 남기네요! 오늘 물망초에 남기는 글은 제가 최근에 겪은 일을 잊지 않기 위해 남깁니다. git config에 git config core.ignorecase 옵션이 있습니다. 왜 있을까요? 제가 오늘 지옥을 경험한 얘길 들려드리며 저도 잊지 않기 위해 기록하겠습니다. 사건의 제목: 아니!! 왜 폴더에 대문자를 뺐는데!!! import에 에러가 안나는거야!?! nextjs 로 작업 중에 저는 무의식 중에 대문자를 사용하여 폴더명을 짓게 되었습니다. components/Post 음 좋아 Post에 만들어질 애들을 다 때려박아 볼까? 음 Comment, Conten.. 공감수 1 댓글수 1 2020. 8. 12.
React-native: com.android.builder.testing.api.DeviceException 안녕하세요 :) 심심풀이로 react-native를 만지작 거려볼까하여. 환경 구축을 진행중에 마주한 문제 해결에 관한 내용을 짤막하게 적습니다. 우선 현재 상황은 react-native 환경설정을 참고하여 설정 중이었고, 이미 Android studio 설정 및 기타 모든 설정은 진행한 후였습니다. 저는 Redmi8이 있어서 디바이스로 실행을 해볼까하는 상황과 안드로이드 스튜디오를 통해서 AVD로 실행을 할까 고민하다 AVD와 디바이스를 usb로 연결해둔 상태였습니다. 그리고 yarn run android(yarn react-native run-android)를 수행하였는데, FAILURE: Build failed with an exception. * What went wrong: Execution f.. 공감수 0 댓글수 0 2020. 7. 11.
그냥 잊지 말아야 할 것. 내가 무언가를 물어보았을 때 상대는 내가 아는 만큼 설명을 해줘야 하니.. 그 또한 골치가 아프겠구나, 무엇을 묻고 답을 듣기 전에 내가 어느정도 알고 있는지를 파악하자. 공감수 0 댓글수 0 2020. 5. 26.
Hanoi tower const hanoi = (disc, src, aux, dst) { if (disc > 0) { hanoi(disc - 1, src, dst, aux); document.writeln('Move disc ' + disc + ' from ' + src + ' to ' + dst); hanoi(disc - 1, aux, src, dst); } }; hanoi(3, 'Src', 'Aux', 'Dst');공략 1. 먼저 위쪽에 있는 원반들을 보조 기둥으로 옮겨서 바닥에 이는 원반을 드러나게 만든다. 2. 이렇게 계속 재귀를 돌게되면 가장 바닥에 있는 원반이 목적기둥으로 이동할 수 있게 된다. 3. 마지막으로 보조 기둥에 있는 .. 공감수 0 댓글수 0 2020. 1. 12.
단순로직 테스트. function isValidByArray(arg) { if (arg instanceof Array) { if (arg.filter(e => typeof e !== "number").length === 0) { return true; } } return false; } function setSymbol(num, sym) { if (typeof num !== "number") { throw new Error("Parameters is wrong."); } let strNum = String(num); let strFraction = ""; if (strNum.indexOf(".") !== -1) { // 소수점인 경우. const splitNum = strNum.split("."); strNum = spl.. 공감수 0 댓글수 0 2019. 12. 4.
React.js v16.x 라이프 사이클에 대해서(기본만.) 최근 면접 질문에서 해당 질문이 있었는데... React.js 경험이 있으시다고 들었습니다. Lifecycle에 대해서 알려주시겠어요? 듣고 답변하려고 보니; 머릿속에 떠오르는 게 웬걸... v13.x 라이프사이클이 떠오르는 게 아닌가... 멘붕.. 아.. constructor 호출 후에 componentWill .. 아니 getDerivedStateFromProps.. 어 그러니까 여기서 또... render가.. 하고 답변해서 보기 좋게.. 하하하 경험은 각설하고 왜 물망초에 남기는지는 기억하기 위해서입니다. 기준 : React.js v16.x ( 라이프사이클 순서는 위에서 아래로입니다.) Mount 시점(초기 컴포넌트 마운트 과정) constructor getDerivedStateFromProps .. 공감수 0 댓글수 0 2019. 11. 21.
최근 면접을 보면서 느낀 점. 최근에 면접을 볼 기회가 생겨서 몇 군데 면접을 보면서 느낀 점을 간략하게 남겨두고, 계속 기억하기 위해 글을 남깁니다. 기본적으로 자신이 잘해야하는 HTML, CSS, Javascript 는 정말 잘해야죠. : ) 하.. 정말 이 말씀이 가슴깊이 와 닿았어요. "너 정말 노력해야 해!." 이 말씀을 해주시는 것 같아서 면접관님께 너무 감사한 마음이 들었어요. 다시 깨닫는 계기가 되었거든요. 면접을 보시고 면접을 보고 난 후 다시 한번 돌아보는 계기를 가지고 거기서 또 배워나갔으면 좋겠다. 면접을 보고 문제를 정리하고 답에 대해서 고민은 했지만 깊게 생각하지 못한 제 자신이 너무 부족했다. 생각했습니다. 이번 면접을 보고 부족한 점에 대해서 기입해봤습니다. 그리고 하나하나 다시 공부하고 있어요. 호이 스.. 공감수 0 댓글수 0 2019. 11. 10.
[ES6] const ? 불변아니였어? 제목이 조금 그렇죠? ES6에 들어와서 const에 대해서 왜 const로 선언된 배열이나 객체는 내부 값이 변경 가능한가? 라고 생각했던 적이 있어서 글을 써봅니다. 아래 코드를 보시죠 : ) const qux = 3; qux; // 3 qux = 5; // Uncaught TypeError: Assignment to constant variable. const baz = 'Hello!'; baz; // "Hello" baz = 'Hi!'; // Uncaught TypeError: Assignment to constant variable. (*역시 const인가 좋아!) const foo = { name : 'foo', age: 23 }; console.log.. 공감수 0 댓글수 0 2019. 10. 31.
Primitive Types 내일 면접이 있지만 ㅠ.. (어차피 글 안써도 이직 첫 면접이라 망할거 같습니다...) 오늘은 해당 카테고리의 글을 쓰는 날이구요! 원시자료형을 작성하는 날입니다!!!!! 와 너무 재밌다!!!!!!!(* 정말입니다!) 오늘도 머릿속에 지식을 넣고, 잠깐만 봐도 기억나기 위해 작성을 시작합니다. (*글의 내용은 다른 분들의 글을 보고 제가 읽기 편한 순서로 정리하거나, 이해한 부분에 한해서만 작성합니다.) 원시자료형의 종류 숫자(number) 문자열(string) 불린(boolean) null undefined Symbol(ES6) 원시자료형의 특징 1.원시자료형은 통상 리터럴로 작성하며, 다른 방식으로도 사용가능합니다! (* 리터럴(literal)이란 확실히 고정된 값을 의미하는 것이라 생각되며, 상수(.. 공감수 0 댓글수 0 2019. 10. 30.
Array 채우기와 랜덤 추출! ZeroCho님 강좌를 보다가 생각보다 괜찮은 것들 그리고 나중에 쓸만한 것이 있어서 글 남깁니다. 1. 1차원 배열을 만들고 값을 숫자로 채워 넣는 경우! // 배열 값 채우기! /* 1. Array()로 1차원 배열 생성 2. fill()로 undefined로 채움 3. map으로 갯수만큼 반복하면서 index를 이용해서 1부터 값 할당. */ let numArr = Array(45).fill().map((e, index) => index + 1); 2. 1차원 배열에 있는 값들 중에 원하는 갯수만큼 랜덤으로 추출하는 법 // 랜덤 번째 값을 원하는 갯수만큼 추출 /* 1. randomNums를 선언한다. ( 랜덤번째 값을 담을 배열 ) 2. while을 numArr.length 값을 비교하면서 수행.. 공감수 0 댓글수 0 2019. 10. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.