web
-
[ 모던 리액트 : Deep Dive ] - 01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트web 2023. 12. 6. 06:47
🚀 클로저 ✅ 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합 = 변수가 코드 내부에서 어디서 선언되었는지를 조합해 코딩하는 기법 ✅ 스코프 = 변수의 유효범위. 스코프에 따라 어휘적 환경이 결정된다. - 전역 스코프 - 함수 스코프 : 함수 블록 내부 실행이 아니라면 전역적 작동 -> 함수 레벨 스코프를 갖는 var가 아닌 블록 레벨 스코프를 갖는 let으로 수정하면 된다. ✔️ 클로저와 useState // 클로저 function Counter () { var counter = 0 return { increase: function () { return ++counter }, counter: function () { console.log(' counter에접근!' ) return counter } ..
-
[ 리액트 ] 데이터를 효과적으로 관리하는 방법에 대하여 - 리액트 쿼리와 커스텀 훅web 2023. 7. 21. 00:00
어떠한 서비스를 만들어도, 클라이언트와 서버의 구분없이 활발한 것이 바로 '데이터 관리'라고 생각한다. 잘하는 클라이언트가 되려면 구조를 잘 짜는 클라이언트가 되어야한다고 생각하는데, 결국 구조를 잘 짜려면 '데이터를 어떻게 가져와야하는지'에 대한 고민이 필연적이다. 이번 프로젝트에서는 서버로부터 가져와야할 데이터가 정말 많았고, 그래서 서버 데이터를 어떻게 가져오고 가공할지에 대한 고민이 많았다. 결론적으로는 (1) 리액트쿼리를 이용, (2) 커스텀 훅으로 패칭하는 방식으로 구현을 했다. 그 이유는, 서버에서는 한 페이지에 해당하는 데이터를 한 번에 보내주는데, 클라는 컴포넌트를 최대한 쪼개야했기 때문이다. 서버가 보내주는 데이터를 있는 그대로 사용할 수 있는데, 굳이 setState로 담아 데이터를 ..
-
리액트 스타일 라이브러리 (StyledComponents, Stitches, Tailwind) 비교web 2023. 6. 14. 03:32
리액트에서 컴포넌트를 스타일링할 때 사용할 수 있는 방식은 굉장히 다양하다. 일반적인 CSS, Sass, CSS Module, styled-components 등 다양한 스타일 방식이 존재한다. 그동안에는 가장 선호된다는 스타일 라이브러리인 styled-components를 많이 이용해왔는데, 리액트 스타일 라이브러리 중에서도, StyledComponents, Stitches, Tailwind에 대해 알아보고 비교해보고자 한다. Styled Components 스타일드 컴포넌트란 '컴포넌트 이름을 쓰듯 스타일을 지정하는 것'을 의미한다. 스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이러한 방식을 CSS-in-JS라고 부르고, 이런 방식의 라이브러리는 정말 많지만 CSS-in-J..
-
리액트의 데이터 관리 React Query vs Asynchronous Recoilweb 2023. 5. 8. 05:38
들어가며 리액트의 서버 데이터 관리란? 리액트의 데이터 관리 방법에 대해 알아보기 이전에, '데이터 관리'란 무엇인지 짚고 넘어갈 필요가 있다. 데이터 관리란 변화하는 데이터들을 관리하는 것인데, 상태의 초기 값을 저장하거나, 현재 상태의 값을 읽거나, 새로운 데이터로 상태를 업데이트 하는 등의 행위를 일컫는다. 데이터 관리는 곧 상태 관리라고 보아도 무방하다. 많은 상태들 중에서도 서버에서 받아오는 서버 데이터의 상태를 관리하는 것이 데이터 관리이기 때문이다. 리액트에서 관리해야하는 상태들은 크게 내부 상태와 서버 데이터가 있을 텐데, 오늘은 그 중에서도 서버 데이터를 관리하는 방법에 대해 집중적으로 공부해보자. 기존의 서버 데이터 관리 (1) state와 props 리액트에서 상태를 관리할 때에는 s..
-
리액트 반응형 완벽 구현하기web 2023. 4. 23. 19:00
유저들이 사용하는 사이트를 위해서는 반응형이 꽤나 필수적이다. 어떤 기기에서 접속해도 잘리지 않고 잘 보여야하기 때문. 오늘은 리액트로 구현한 반응형에 대해 이야기해보려고 한다. 반응형을 구현하는 것은 사실 어렵다기 보다는 귀찮은 일에 가깝다. 여기저기 찾아보아도 아주 정확한 값을 제공하는 곳이 없기 때문이다. 반응형을 구현하기 위해서는 아래의 두 가지 테스크를 수행해야한다. (1) globalStyle 미디어쿼리 적용 (2) svg 이미지 width 값 적용 데스크탑 뷰 반응형 (1) globalStyle 미디어쿼리 적용 리액트로 초기세팅을 마쳤다면 보통 globalStyle파일을 만들었을 것이다. 그렇지 않더라도, html에 다음과 같이 미디어쿼리를 적용하면 된다. 이 프로젝트의 경우는 rem단위를 ..
-
프리티어 오류 해결하기web 2023. 4. 16. 19:49
근 몇 달간 프리티어가 동작하지 않기 시작했다. vscode를 아무리 삭제하고 재설치하고, 리로드를 해도 똑같은 오류가 났다. 결국 해결해내어 이 글을 쓴다! 시도했던 모든 방법을 작성해보았다. 만일, 웬만한 구글링으로도 해결하지 못했었다면 맨 아래의 방법을 참고하길 바란다! 필자 역시 웬만한 구글링으로는 프리티어 오류가 해결되지 않아 몇 달동안 에러를 달고 작업을 했었는데, 가장 마지막 방법으로 오류를 해결했다. 내가 겪었던 오류는 아래와 같다. (1) Default Formatter 변경하기 단축키 control + , 를 눌러서 설정에 접속한다. default formatter를 Prettier - Code formatter로 설정을 변경한다. (2) Format on Save 변경하기 단축키 co..
-
[리액트/자바스크립트] S3파일 다운로드web 2023. 4. 2. 21:00
음악 관련 프로젝트를 진행하면서 파일을 다운로드해야하는 기능을 구현해야하는 상황, 음악 파일을 다운받아서 재가공할 수 있는 점이 가장 큰 기능 중 하나였기 때문에 반드시 파일 다운로드 기능을 구현해야했다. 하.지.만. 정말 몇 날 며칠을 해보아도 해결하지 못했다. 구글링해서 나오는 코드들을 그대로 따라쳐보아도 성공한 적이 없었다. 다운로드를 해도 빈 껍데기 파일만 다운되거나 하는 식이었다. 결국 그대로 따라치는 코드들은 소용이 없었고, 검색해서 나온 모든 글을 다 섭렵하며 이해를 하고 나서야 코드를 짤 수 있었다... 우선 전체 코드는 다음과 같다. 버튼이 위치한 컴포넌트 const { data: fileLink } = useQuery(["beatId", download], () => getFileLin..
-
비동기 작업의 이해web 2023. 3. 26. 17:10
리액트를 공부하다보면 동기, 비동기에 대한 이야기를 정말 많이 접할 수 있지요, 특히 데이터 패칭을 시작하면 자바스크립트 비동기 작업에 대해 반드시 짚고 넘어가야하더라고요 그래서 오늘은 비동기 작업에 대한 이야기를 해보려고 합니다. 사실 비동기는 그렇게 어려운 내용이 아닙니다. 비동기란? 예를 들어, 과제가 1부터 10까지 있는데, 과제 1을 하는데에는 막 3시간이 걸리고, 과제10을 하는데에는 10분이 걸린다고 칩시다. 그럼 우리 생각에는 과제 10을 먼저 할 수도 있는 거잖아요, 그런데 동기는 그런 거 없이 정직하게 하는 거에요. 과제1시작해요, 끝나면 과제2시작하고요 끝나면 과제3하고 이런식입니다. 그런데 비동기는 이렇게 순서대로 하지 않아요. 앞에 작업이 끝났든 안 끝났든 다음 테스크를 할 수 있..