혜르미온느

TMI. 자꾸 날리는 바람에 이 주제 관련 포스팅만 몇 번째 쓰는지 모르겠다 ㅠㅠ 리액트 공식 홈페이지에서는 create Potals를 다음과 같이 설명하고 있다. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Potals는 부모 컴포넌트의 DOM 계층 구조의 밖에 존재하는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다는 의미이다. 이게 무슨 의미일까? 내 식대로 해석해보자면 다음과 같다. 게임을 많이 하는 편은 아니지만 RPG게임에서 미션을 받으면 [ㅇㅇ으로 이동하세요. 포털을 이용하면 더욱 빠릅니다]와 같..

google I/O라는 것이 있다. 말 그래도 구글에서 개최하는 것으로 매년 개최되는 개발자 컨퍼런스와 같은 것이다. 나는 직접 듣지는 않고, 이제 실시간으로 들으신 고수분들께서 정리해 놓으신 것을 확인하며 냠냠 먹는 편인데, 이번에 CSS가 좋은 기능을 많이 탑재하는 것 같다 개인적으로 FE는 CSS를 아예 배제하고 살아가는 분야는 아니라고 생각하여 CSS의 동향같은 부분은 파악하려고 하는 편이다. 그런데 이제 다 정리하려고 하니 너무 많은 부분들이 있어서 흥미롭게 본 주요 기능들의 요약과 관련 정보 URL을 첨부해두려고 한다. 체크해 둔 부분을 더 자세하게 알고 싶으면 하단 URL에서 확인하면 된다 color-mix() : 색상 혼합하기 기능. 괄호 안의 컬러들을 서로 조합시켜주며, % 조절도 가능하..

이전에 스토리 북에 관하여 포스팅을 한 적이 있다. 당시에는 스토리북이 무엇인지 몰라 알아보고자 하는 용도로 포스팅을 하였고, 여전히 스토리북을 직접 구현해본 적은 없다. 인터넷을 항해하던 중 스토리북 작성을 하면서 마주한 문제를 정리한 블로그가 있어 메모 목적으로 저장해두려고 한다. ✔️ 이전에 작성한 스토리북 포스팅 URL https://hyermione.tistory.com/17 storybook ui란? 만약 우리가 IT계열이 아닌 그 어떤 다른 직업을 가지고 있다고 가정할 때, storyBook이라는 말을 처음 듣는다면 어떤 생각이 떠올랐을까? 나는 단연 이야기, 혹은 동화책 등에 관한 내용일거라 생 hyermione.tistory.com https://hyermione.tistory.com/1..

gitignore은 말 그대로 git에 올리는걸 무시해주는 설정을 말한다. 예를들어 node_modules 혹은 access 키 등 노출을 하면 안되거나 용량이 크거나 혹은 기타 등등 불필요한 모든 파일이 이에 해당한다. 방법 1 git repository를 생성 할 때, 파일을 함께 만들어준다. 방법2 최상단에 .gitignore파일을 만들고, 하단의 형식에 맞게 직접 작성해준다. # 파일 제외 (파일명.확장자) 파일명.txt # 현재 경로에 있는 파일만 제외 (다른 경로의 동일한 파일명은 추적) /파일명.txt # 특정 경로안의 특정 파일 제외 폴더명/파일명.txt # 특정 폴더안의 파일 전부 제외 폴더명/ # 해당 확장자 파일 전체 제외 *.txt # 예외 !제외할 파일명.txt 방법3 최상위에 ...

지난번에 npm 설치 관련 권한 에러에 대해서 해결하는 방법을 포스팅 한 것이 있다. https://hyermione.tistory.com/78 npm 전역 설치 시, 권한 거부 해결방법 1 오랜만에 react 테스트를 하려고 vsCode를 열었다. 근데 왜인걸 npm install을 하려는데 안된다..! 왜지 옛날에는 잘 되었는데???? npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/n.. hyermione.tistory.com 해결은 되었으나 포스팅에서 언급한 것 처럼 매번 관리자 권한으로 설치해야하는 어려움이 있다. 하단의 캡쳐에 보이는 것 처럼 sudo를 통해서 명령어를 한 번 실행하였고 제대로 설치됨을 확인하였..

프론트앤드 개발을 하다보면 각 컴포넌트간의 데이터 교환을 해야하는 상황이 정말 많다. 가장 보통은 props로 하위 컴포넌트에 데이터를 전달해 주는 방식을 택할 것이다. 다만 전달하려는 데이터가 컴포넌트의 하위의 하위에서만 쓰인다면 props는 한 곳에서 사용되기 위하여 여러개의 컴포넌트를 거쳐야 할 것이다. 혹은 전달하려는 데이터가 여러 컴포넌트에서 필요로 하는 정보라면 같은 데이터를 각각의 컴포넌트에 중복적으로 내려주어야 할 것이다. 물론 상태관리 시스템을 이용하여 데이터를 저장하는 것도 하나의 방법이지만, 이러한 불필요한 공수를 줄이기 위해 react에서 직접 기본기능으로 제공하는것이 있었으니 바로 react context이다. - context 사용 시, 장점 react context를 이용하면 ..

오랜만에 react 테스트를 하려고 vsCode를 열었다. 근데 왜인걸 npm install을 하려는데 안된다..! 왜지 옛날에는 잘 되었는데???? npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules/npm/node_modules/ansi-align npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/ansi-align' npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_..

빠름의 민족인 우리는 웹사이트가 조금만 느려도 매우 화를 내며 사이트를 이용하지 않는다.( = 는 나) 그래서 프론트앤드 개발자는 성능에 민감하게 반응하는 편이라 사이트가 무거운 것을 두고 볼 수가 없다.(이것도 나) 여러 코드를 통해 SPA를 개발하고 나면 웹팩을 이용하여 번들링 하고, 번들된 자바스크립트 파일을 html에서 불러와 실행하는 코스는 웹을 공부해본 사람이라면 몰라도 아는(?) 개념이다. 번들링이란 여러 작업 코드를 하나의 파일로 병합해주는 것을 의미한다. 그런데 코드가 점점 많아지면 번들 파일도 함께 커지면서 성능이 현저하게 느려질 수 밖에 없다. 여담으로 현직에서 보면 라이브러리를 사용하길 싫어하는 개발자들을 꽤나 만날 수 있는데, 많은 라이브러리 혹은 무거운 라이브러리를 사용하게 되면..

리덕스 공식 홈페이지에 가면 이런 말이 있다. A Predictable State Container for JS AppsGet Started 바로 자바스크립트를 위한 예측 가능한 상태의 저장소라는 의미이다. 프로그램의 몸집이 커질수록 여러가지의 상태와 컴포넌트들이 생겨나고, 이들이 서로 유기적으로 얽혀있어 거대한 복잡도를 가지게 된다. 리덕스는 이러한 복잡성을 해소해주고, 상태들을 예측 가능하게 해준다는 의미이다. 1. 단 하나의 상태를 갖는다. 하나의 객체(store) 안에 프로그램에서 필요한 모든 상태를 넣는다. 2. 예고없이 상태값을 변경하는 행위를 사전에 차단한다. (읽기 전용이다) dispatcher/reducer를 통해서만 객체를 수정할 수 있으며, 스테이트 값이 바뀔 때 마다 각 상태 사용처..

console이란 JS를 실행 시, 실시간으로 에러 메시지 혹은 정의한 어떤 것들을 출력해주는 기능을 말합니다. 가장 많이 사용하는 대표적인 예는 console.log가 있어요. console API란 콘솔 API는 개발자가 사용할 수 있는 디버깅 기능을 제공하는데, 상단에서 언급한 변수의 값을 기록해주는 console.log도 그 예 중에 하나이며, 이 뿐만 아니라 다양한 메소드로 디버깅을 도와줍니다. 동작 방식은 브라우저마다 조금씩 다른 부분이 있지만 console API 명세에 일관적인 동작 방식이 정의되어 있어 최신 브라우저는 조금의 차이는 있겠지만 거의 같은 동작을 따르고 있습니다. console methods 1. console.assert() 첫 번째 매개변수가 false인 경우 메시지와 스..