author-pic

Elli Jeon

All Posts

[react] styled-components에서의 우선순위 문제

Posted on September 28, 2021

사건 개요오늘도 즐겁게 스크림도르 코딩을 하던 중에 동료의 작업을 수정하다가 이상한 일이 발생했다. 코드로 함께 보자.기본적으로 나는 page에다가 BaseTemplate을 두어서 여기에서 header 밑의 main container의 구조를 잡고 작업한다. 해석해보자면 이러하다, Base template…

Read full post

[Javascript] Intersection Observer API (ft.react)

Posted on September 13, 2021

1. 개요라매개발자님이 주최하신 팀 프로젝트 그룹에서 만난 팀원분들과 한 달여에 걸쳐 만든 여행지 소개 페이지 (instagram…

Read full post

[React] TDD의 필요성과 JEST

Posted on September 12, 2021

React에서 TDD의 필요성과 JEST & RTLTDD의 필요성JEST의 기본적인 사용법RTL의 기본적인 사용법1. TDD…

Read full post

[React] redx-saga의 필요성

Posted on August 25, 2021

redux-saga의 필요성과 그에 대한 생각 정리1. redux-saga의 용도react : UI를 컴포넌트 기반으로 제작하고 애플리케이션의 상태를 화면으로 랜더링할 수 있게 해줌redux : 애플리케이션의 전역 상태를 효과적으로 공유하고 관리 / UI -> Action -> Reducer -> State문제 발생 !! "클릭 하면 api…

Read full post

[React] Login과 관련된 개념

Posted on August 21, 2021

로그인 프로세스를 이해하는데에 필요한 개념 정리1. 쿠키, 세션, 캐시, 스토리지쿠키 : 컴퓨터에 저장되는 작은 기록, 정보 파일 (개인 소장용 방문일지)세션 : 서버쪽에 저장되는 정보 파일웹 캐시 : 이미지 같은 용량이 큰 파일을 그때그때 서버에서 가져오면 부하가 심하니 따로 공간을 마련해서 컴퓨터에 저장로컬 스토리지, 세션 스토리지 : 둘 다 HTML…

Read full post

[Git] 깃허브 페이지 이용하여 빌드하는 법 (+404에러 해결)

Posted on July 23, 2021

깃허브 페이지를 사용하여 빌드, 배포하는 법 (+404 에러 해결)…

Read full post

[VsCode] import 절대 경로 만들기

Posted on July 23, 2021

VS code에서 import 절대 경로 만드는 법react에서 워낙 import를 많이 쓰다보니 일일히 상대경로로 가져오는 것이 힘들어 방법을 찾아보았다.root 디렉토리에 jsconfig.json을 만들어준다. (vscode 공식문서에 따르면 이 파일이 있는 위치가 root 디렉토리가 된다고 한다.)이러면 이제 src를 기준으로 파일을 import…

Read full post

[React] redux의 작동 방식 (1)

Posted on July 18, 2021

Redux의 작동 구조해당 글은 redux를 사용하려면 어떤 식으로 파일을 구성해야하는 지에 대해 기억하기 위해 쓰인 글인 만큼 구체적인 작동 방식은 다음의 포스트를 확인하는 것을 추천한다.redux 적용하기1. redux의 핵심 A.R.Sredux…

Read full post

[CSS] SCSS에서 기억해야 할 문법

Posted on July 13, 2021

SCSS에서 기억할만한 것들 정리SCSS의 문법에 대해 이미 정리가 잘 되어 있는 페이지가 존재한다. SCSS 문법 총정리문법을 총망라해둔 사이트니 나중에 자세히 정독해보아야겠다. 여기에는 기억해야할 개념 몇가지를 적고 간다. 1. 여러가지 기호 들@(함수), $(변수) , #{}(어디서나 변수 쓰게 해줌), &(부모 치환)SCSS…

Read full post

[React] useReducer Hook 이해하기

Posted on July 12, 2021

useReducer Hook에 대한 이해어떠한 것에 대해 이해하기 위해 가장 중요한 것은 탄생한 목적과 목표에 대해 이해하는 것이다. 그러한 사실에 입각하여 react의 useReducer Hook에 대해 이해해보고자 한다.useReducer의 목표useReducer는 무엇을 이루고자 할까?useState와 비교했을 때, useReducer…

Read full post

[React] react component hierarchy를 design하는 법

Posted on July 08, 2021

리액트 컴포넌트 구조를 정석대로 디자인해보자이번에 react를 사용해서 to-do-list를 구현하려다 막상 트라이해보려고 하니 어디서부터 시작할지 막막했다. 그래서 컴포넌트 구조를 어떻게 짤 지를 설명해주는 기초적인 기사를 하나 정리해보려고 한다. 어찌보면 당연한 이야기이지만 정리해서 기억해두려는 것을 목표로 글을 써본다. 기사에서 소개하는 react…

Read full post

[React] styled-components를 이해해보자

Posted on July 07, 2021

Styled-Components를 이해한대로 정리해보기이번에 css in js를 한 번 공부해보자는 생각을 가지고, 가장 많이 쓰이는 라이브러리인 styled-components를 공부해보았다. 그렇게 내가 이해한 바를 최대한 글로 남겨보려고 한다. 조금은 두서가 없어도 이해 바란다.styled-components의 결과물styled-components…

Read full post

[Git] Git 명령어(command) 정리해보자 (1)

Posted on July 06, 2021

Git 명령어 정리 (1)그동안 Github를 사용하면서 Github Desktop을 주로 사용해서 개발을 진행했었는데, 이번에 프로젝트를 진행하면서 이 기회에 Git을 CLI를 통해 써보자고 마음을 먹었다. 그래서 한 번 지금 배운 Git Command들을 한 번 정리해보는 시간을 가지려고 한다. Github에서 clone…

Read full post

[FreeTalk] Starting Blog

Posted on July 04, 2021

이번에 짧게 영화 서치 페이지를 만들면서 느낀게 많았습니다... 가장 큰 문제점은 역시 미리 계획을 세우지 않으니 중구난방 식으로 개발을 한다는 것이었습니다. 이거 해야지 저거 해야지 하고서는 까먹는 것도 일상이었구요.그래서 블로그를 통해 제가 공부한 것을 정리해볼까 합니다. 이제 개발 공부를 한지…

Read full post

JavaScript Regular Expressions and the Test() Method

Posted on January 06, 2019

Video at YouTube. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien nisi, consequat nec dolor ut, lobortis vestibulum nunc. Nulla facilisi. Suspendisse leo urna, pulvinar ut…

Read full post