Negative Margin padding이나 border에는 음수가 적용되지 않지만 margin에는 있다. margin을 음수로 주면 부모 element 영역을 벗어날 수 있게 된다. 또한 형제 element를 가깝게 끌어당길 수도 있다. margin은 해당 엘리먼트의 위치만 바꾸는 것이 아니라, 다른 element 간의 갭을 조절할 수 있다. 음수 값을 주게 되면 형제 element는 가까워지게 된다. 또한 음수값으로 인해 해당 element가 이동한다면, 그 이동한만큼 형제 element들도 따라서 이동을 한다. 포지션에 영향을 미치는 다른 프로퍼티(e.g. transform: translate)와 달리 마진은 다른 엘리먼트의 포지션에까지 영향을 미치므로 이를 주의해야 한다. 만약 아래처럼 전체적으..
pseudo-classes element의 현재 상태에 따라 적용되는 css (e.g. hover, focus) button:hover { color: blue; } pseudo-elements 해당 element의 sub element이면서, 우리가 명확히 만든적 없는 DOM element를 타겟하는 경우. (e.g. placeholder, before, after) input::placeholder { color: green; } /* p element 안에, text가 시작되기 전 앞에 핑크색 대시를 추가 */ p::before { content: '-', color: pink; } selector - children, descendent의 차이 /* only children */ p > a { c..
공통점 둘 다, 사이트 URL에 대응하는 HTML을 생성하고 SEO를 향상시킨다. Static Rendering 차이점은 static rendering은 빌드 타임에 일어나고, server rendering은 유저가 요구할 때마다 일어난다는 것이다. 미리 빌드 타임에 각 URL에 대한 모든 HTML 파일들을 다 만들어 놓고, s3나 웹서버에 push 해놓고 유저가 요청할 때 미리 만들어둔 것을 전송한다. 예를 들어 s3 cloudfront를 사용하면 요청이 오면 cloudfront를 사용해 캐시된 버전이 있는지 확인하고 없으면 s3 요청을 한다. 장점 모든 요청 가능한 리퀘스트에 대응하는 응답을 다 만들어둔다. 그렇기 때문에 당연히 응답 속도가 매우 빠르다. 단점 요청 가능한 리퀘스트를 미리 예측할 수 ..
Query 디폴트 useQuery와 useInfiniteQuery를 사용한 쿼리 인스턴스는 기본적으로 캐시 데이터를 stale로 취급한다. (staleTime이 기본적으로 0) stale query는 아래와 같은 조건에서 자동적으로 refetch 된다. 새로운 쿼리 인스턴스가 마운트했을 때 (refetchOnMount) 예를 들어 데이터를 fetch하는 컴포넌트가 있고, 이 컴포넌트가 다른 데에서도 마운트되면 캐시된 데이터를 쓰는게 아니라 그 때 또 다시 refetch한다는 뜻. 윈도우가 refocus됐을 때 (refetchOnWindowFocus) 네트워크가 다시 연결됐을 때 (refetchOnReconnect) refetch interval 설정을 해줬을 때 (refetchInterval) useQu..
React에서 form의 validation을 도와주는 라이브러리이다. 이 라이브러리는 기본적으로 uncontrolled component를 베이스로 하지만 controlled component에 대한 지원도 하고 있다. react hook form의 장점은 가볍고, 다른 디펜던시가 없으며, ref를 기반으로 하여 다른 UI 라이브러리와 호환이 잘된다는 것이다. 가장 간단한 형태 const { register, handleSubmit } = useForm(); 여기서 register는 해당 컴포넌트의 값을 트래킹하고 validation을 하기위해 react hook form 라이브러리에 등록한다는 뜻이다. input을 등록하려면 아래처럼 ref에 register을 넘겨주면 된다. 이 때 중요한 점은 반드..
Case 1 - dependency array 없이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }) 문제점: 데이터를 불러온 후 setData를 하고 있기 때문에 리렌더링되고, 그러면 useEffect이 또 실행되므로 무한 루프가 발생한다. Case2 - dependency array 있이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }, []) 개선..
resolutions package.json에 resolutions라는 필드가 있는데, 여기서는 package.json에 있는 의존성들의 특정 버전이나 range를 지정할 수 있다. package.json에는 일반적으로 semantic versioning을 사용하여 range로 패키지 버전을 설정하는데 왜 커스텀 버전을 설정할 필요가 있는걸까? 예를 들어 프로젝트가 A 패키지에 의존하고 있다고 가정하자. 그런데 A는 또 다른 패키지인 B에 의존하고 있다면, 여기서 B에 서브 의존성(또는 하위 의존성)이 있다고 할 수 있다. package.json 파일에는 우리가 직접적으로 의존하고 있는 A의 버전만 관리할 수 있을 뿐, 간접적으로 의존하고 있는 B에 대해서는 지정하지 않는다. 만약 A의 package.j..
글로 정리해서 쓰면 좋은데 일단 자료만 갖고 있는 것들을 여기에 모아뒀다가 시간 날 때 작성할 예정 클린 코드 https://www.youtube.com/watch?v=edWbHp_k_9Y&list=RDCMUCeg5g-vWgtgzQ0cYNV2Cyow&index=4 https://engineering.linecorp.com/ko/blog/line-securities-frontend-3/ https://goongoguma.github.io/2021/06/05/How-to-use-React-Context-effectively/ https://www.npmjs.com/package/react-hook-popup 클린 코드 관련한 좋은 영상을 봐서 회사에 적용해보려고 했던 것을 before/after 형식으로 적..
링크: https://everyanalytics.github.io/web-analytics-handbook/blog/2021/09/04/flutter-fb-analytics-plugin Flutter 플러그인으로 ecommerce 이벤트 보낼 때 생긴 일 | Web Analytics Handbook 이 글은 Flutter 플러그인으로 ecommerce 이벤트를 보내는 방법에 대한 내용이 아닙니다. 제가 겪은 이슈를 공유하는 차원의 글이며 세부적인 구현은 들어있지 않으므로 감안하고 봐주시면 감사하겠 everyanalytics.github.io 이번에 오픈소스 컨트리뷰션 아카데미에서 쓴 글 중 하나. 회사에서 플러터 플러그인으로 구글 애널리틱스에 이벤트를 보내려고 했는데 안드로이드만 누락되는 이슈가 있었던 ..
현상 module not loaded TypeError: Cannot read property 'OverView' of undefined at Module../src/views/pages/MyTravelDetail/TravelTabs.tsx A파일에 enum을 정의해놓고 B파일에서 그 enum을 import해서 사용하고, B파일에서 default export한걸 A에서 import하고 있는 상황이었는데, 런타임 모듈 에러가 발생. A파일, B파일 모두 .tsx 파일. 해결 circular module import의 문제일 수 있다는 글을 보아서 A파일의 enum을 B파일로 옮김. 그래서 A파일만 B파일을 import하게 했더니 해결됨. Ref https://stackoverflow.com/question..
https://everyanalytics.github.io/web-analytics-handbook/docs/handbook/google-analytics-basics/what-is-the-difference-between-ua-and-ga4 👆 이 글은 2021 오픈소스 컨트리뷰션 아카데미에서 react analytics provider 팀으로 참여하면서, 핸드북에 내가 작성한 글이다. 구글 애널리틱스 관련 글을 찾아보면 UA와 GA4가 혼용돼 있어서 어떤 차이점이 있는지 평소에 궁금했었기에 작성해보았다.
Step In 함수 호출이 있으며, 함수가 호출된 줄로 돌아가서 결과를 리턴할 때까지 호출된 함수 몸통으로 들어가서 한줄 한줄 시행한다. Step over 함수 호출이 있으면 블랙 박스처럼 함수가 어떻게 실행되었는지는 보여주지 않고 리턴된 결과만 보여준다. Step out step in으로 함수 안에 들어간 상태에서 step out을 누르면 함수 몸통의 남은 부분을 실행하는 부분을 보지 않고 함수가 리턴된 부분으로 step out하겠다는 뜻이다.
현상 CRA with typescript로 만든 프로젝트에서 eslint랑 prettier 설정을 한 상황. 그런데 라이브러리에서 인터페이스를 임포트 하려는데, 그런 건 찾을 수가 없다며 eslint의 import/named 에러가 발생한다. 분명 그 위치에 인터페이스가 존재하는 것도 맞고, vscode도 그걸 인지하고 있는데 왜 eslint가 못찾겠다고 하는지 계속 헤맸다. .eslintignore에 node_modules를 추가 안해서 그런가 했는데 어차피 기본적으로 무시하게 되어 있다고 한다. (https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file) 해결 깃헙 이슈와 스택오버플로우에서 workaround를..
현상 프로젝트가 한 폴더에 두개 존재하는 상황 project1 / package.json project1 / project2 / package.json project1은 라이브러리고, project2는 데모 폴더로 project1이 빌드된 걸 보고 그걸 임포트해서 데모를 띄우는 식. project2의 package.json 내에서 이런 식으로 가져다 씀. 밑에 react랑 react-dom도 중복된 패키지 방지용으로 https://ko.reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react 문서에 나와있는대로 해결한 것. "dependencies": { "@project1": "file:..", "@types/node": "^12.0.0"..
스코프랑 클로저에 대해 전에도 정리했었지만, 이번엔 렉시컬 환경이라는 개념과 함께 정리하려고 한다. Lexical Environment의 개념 Lexical Environment는 코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다. 즉 우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment 라는 객체에서 식별자 이름을 키로 찾는다고 보면 된다. 실행 컨텍스트(execution context)와의 관계? 실행 컨텍스트는 실행하고 있는 함수를 트래킹하기 위한 특별한 자료 구조다. 현재 실행하고 있는 함수 내의 현재 변수 상태와 this의 값 등을 저장하고 있..
- Total
- Today
- Yesterday
- 리덕스
- useEffect
- 자바
- SQL
- Conflict
- linkedlist
- 알고리즘
- GIT
- Session
- rxjs
- c언어
- oracle
- jQuery
- Data Structure
- package.json
- Redux
- 깃
- getter
- Prefix Sums
- 개발 공부
- youtube data api
- 포인터 변수
- Java
- 제네릭스
- this
- CSS
- react
- 인스턴스
- JavaScript
- til
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |