Category (80) 썸네일형 리스트형 React, 절대 경로 import 리액트를 사용하다보면 만들어 놓은 컴포넌트를 import 할 때default 값이 상대경로이기 때문에 다음과 같은 경우를 마주하게 됩니다,,import { Button } from '../../components'; 디렉토리 구조가 복잡해질 경우 경로를 일일이 계산하는게 번거롭기 때문에절대경로로 사용하는 편이 간단할 때도 있습니다. 절대경로로 설정하는 방법은 의외로 간단합니다. 1. JavaScript1. 프로젝트 루트 디렉토리에 jsconfig.json 파일 하나를 먼저 만듭니다 (보통 만들어져 있다).{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"]}2. 생성한 json파일 안에 compilerOptions key 값에 "base.. 끄적끄적 입사 5개월차에 정리할 개념들을 한 번씩 나열해보려고 합니다. 1. Web Worker처음 접했을 때 아주 신선한 충격입니다. JS는 싱글 쓰레드지만 브라우저 엔진은 아니라는 사실,, 브라우저에서도 멀티쓰레드를 쓸 수 있다라는겁니다.. 물론 메모리가 한정적이긴 하지만 주기적으로 같은 활동을 하는 netflix나 youtube처럼 영상을 쏘거나 이미지를 전송하는 일들에 있어서는 아주 효율적이라는 겁니다. 2.네트워크 개념들네트워크 개념들이 모호하게 머릿속에 있어서 한 번 다 잡고 들어가보려고 합니다.WAN, LAN, DDNS, DNS, HTTPS, SSL 등등 네트워크 개념이 있으면 도움이 언제나 되는 것 같습니다. 3. C++을 공부해볼까 합니다. 만들어보고 싶은 것들을 한 번 슥삭 해보려고 합니다 하하.. 개발자 모드 Debug Tips 입사한 지 어느덧 4개월이라는 시간이 흘렀습니다! 대부분의 주요한 업무는 유지 보수 였는데요! 그 과정 가운데 디버깅하는 팁들을 공유하고자 합니다 1. Set Break Points by CallBack일반적으로 Ctrl + P, Cmd + P 를 통해 특정 자바스크립트 파일을 열어 중단 포인트를 설정합니다. 하지만 일일이 중단 포인트를 찾는 것이 어려운 상황들은 빈번히 발생하기 마련입니다. 예를 들어 특정 API가 여러 DOM 요소에서 사용된다고 할 때 스크립트 상에서 일일이 설정한다는 것은 쉬운 일이 아닙니다. 이럴 때 사용할 수 있는 다양한 브레이크 포인트들을 알아봅시다. 1. DOM BreakPointElement 패널에서 특정 DOM의 변화를 보고 싶을 때 사용하는 기능입니다. 특정 요소를 우 .. Trouble Shooting, ActiveX z-index Legacy 코드들 가운데 ActiveX를 사용하는 것이 있어 ActiveX가 모달 창보다 화면 상 위에 있어 모달 창이 사라져 보이는 이슈가 발생했습니다. ActiveX 구조가 어떻게 되어 있는 지 모르는 상황에서 z-index로 어떻게 해보려고 했지만 아무리 z-index 값을 바꿔도 해결되지 않아 DOM 조작을 임의로 하드 코딩하기로 결정했습니다. 결국 display를 이용해 모달이 팝업되어 있는 상황에서는 잠시 display를 none으로 바꾸고 모달창이 꺼지면 다시 display를 바꾸는 간단한 작업이었지만,, 처음엔 z-index가 왜 안될까 몇시간 고민했던 것 같습니다. ActiveX를 웹에서 표현할 때는 object 태그로 사용됩니다.https://developer.mozilla.org/k.. IEMode, 개발자모드로 디버깅하는 법 Edge에서 IEMode로 실행 시 개발자도구를 사용하는 법 알아봅시다. 1. Window + r 단축키를 눌러 CMD 실행 2. %systemroot%\system32\f12\IEChooser.exe 입력 후 엔터3. 디버그할 IE Mode 홈페이지 선택4. 개발자 도구 사용 Edge, IEMode 설정, Internet Explorer 오른쪽 위에 더보기를 눌른 후 설정으로 이동합니다.IEMode를 허용으로 바꿉니다!내가 원하는 홈페이지로 이동 후 다시 더보기를 클릭 한후 IE Mode로 로드하면 끗! IE를 써야하는 상황이 생긴다면 Edge를 통해 IE Mode를 사용해보세용! VSCode, Undo Redo UndoCtrl + z Redo (Undo를 다시 Undo)Ctrl + y ReactJS, Reducer useReducer – ReactThe library for web and native user interfacesreact.dev프로토 타입 및 사용법은 위 북마크 참조! Reducer를 언제 왜 사용하는지 알아봅시다. Reducer는 하나의 State에 관련해서 다양한 로직이 있는 경우에 사용합니다. 다음과 같이 To Do 객체에 관 State가 있다고 가정해봅시다. 하나의 State에 Set하는 Event Handler 함수들이 늘어남에 따라 복잡한 로직들이 우후죽순 늘어나게 됩니다. State를 설정할 수 있는 로직들이 쌓이다보면 어디서 state값이 변했는지 알기 어려운 경우가 생기기 마련입니다. 함수 하나를 통해 미리 지정한 인자대로 입력을 받고 State값을 변환하는 것이 Reducer 입니.. 이전 1 2 3 4 5 6 ··· 10 다음
