Lieto

React를 오랜만에 사용을 하면서 (약 7개월 전 사용..) 그간 잊고있던 React에 대한 개념들을 다시 정리를 해보아야겠다. Lieto Project를 시작하며 간단한 API(kakao api)를 연결하는데 뭔가 어떻게 컴포넌트에 반영을 해야할지 React의 좋은

React는 컴포넌트별로(더 편하게)함수를 짤 수 있기 때문에 컴포넌트의 재사용에 유리하다.그런데 안의 데이터 값이 달라지면서 컴포넌트가 재사용 되었을 때 유의미 하지 않겠는가?즉, 입력 데이터가 다른 각각의 컴포넌트를 개발할 수 있다.각각의 컴포넌트에 시리즈 이미지,

React.js를 사용해 프론트단을 작성중인데 해당 공연장의 Lat, lng를 비밀로 해주기 위해 env파일에 저장해 오픈소스에 올리는 일이 없도록 하고자 하였다. Module not found: Error: Can't resolve 'path' in '/Users/u

가로 방향 무한 슬라이드를 구현하면서 Img를 어떤 폴더에 넣을지를 고민하게 되었다! 어떤 곳에 Img를 넣어야 더 좋을까??public directory=> 정적 파일을 넣는 디렉토리(index.html, img등)src directory=> 개발하며 작업하는 파일

Inline vs Block 요소 >Block요소는 여러개를 연속해서 쌓을경우 자동으로 다음줄로 넘어간다 좌/우 양쪽으로 늘어나 부모요소의 너비를 가득 채운다. (기본 가로 값은 꽉 채우기) >Inline요소는 여러개의 요소를 연속해서 입력해도 다음줄로 자동으로 넘

무한 스크롤을 구현하며 useRef에 대한 내용이 나와서 정리를 한번 해보자!Ref: referencequerySelector대신 사용이 가능useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음즉, useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는

컴포넌트가 꽤 많아지면서 (메인 컴포넌트 6개..ㅎㅎ..많나?..) 컴포넌트를 한번에 다 가져오지 않고 나누어서 import해오면 좋겠다 라고 생각을 했다.그래서 동적인 Import를 가능하게 해주는 React.Lazy를 사용해봤다.Lazy Loading 이란? 게으른

필자는 반응형 캐러셀 즉, 무한 슬라이드를 만들었다! 각 연주자분들의 프로필이 옆으로 넘어가며 쭉 보여지면 좋을 거 같다고 생각을 했다. 그럼 어떻게 이를 구현할 것인가 고민을 한 흔적을 작성해보겠다!먼저 필자는 Swiper를 선택했다. 그 기준에는 2가지 이유가 있다

무한슬라이드를 구현한 것까진 좋은데..API을 아쉽게도 많이 사용할 일이 없었다..그래서 데이터를 가져올때 무한스크롤의 장점을 살리지 못한 거 같아 아쉬웠다. 무한 스크롤을 css정도만 적용했기 때문에 성능을 위해서 이미지를 동적으로 로딩해오면 되겠다!라고 생각했고