react
-
[Svelte] Svelte에서 Javascript 없이 검색어 하이라이트 구현나는야 개발자/Svelte 2023. 2. 21. 11:43
오늘은 svelte로 프로젝트를 진행중에 검색어 하이라이트 기능 구현이 필요해 javascript로 검색을 해보았지만 쉬이 답을 얻지 못하였고, 이것 저것 시도해보다 진짜 감동의 쓰나미가 폭풍처럼 휘몰아치듯 너무 감격받아서 포스팅을 안할 수가 없었다. 먼저 Svelte에 대해 간략하게 소개해 드리자면, Rich Harris와 그 팀원들이 만든 Frontend Framework이며 "Not a monolithic Javascript library" 많은 분들이 하도 React, Vue에 익숙해져서 그런지.. 다 javascript 기반의 프레임워크라 생각하는 것 같다.. 하지만, Svelte는 Svelte 언어 그 자체이다. Svelte.js 이런 표현은 맞지않다. 아무튼 지금부터 기록할 내용이 이해가 되..
-
[React] react-router-dom | useParams, useSearchParams나는야 개발자/React 2022. 11. 18. 17:35
두고두고 써먹을 나만의 메모장 react-router-dom의 최신 기능 | useParams와 useSearchParams | 기록해 보자구 !! 먼저 URL주소에는 우리가 흔히 알고있는 파라미터 | 도메인주소/parameter1/parameter2/... 쿼리 | 도메인주소/parameter1?key1=value1&key2=value2&... 위의 두 가지 형태가 있다. 1. 파라미터로 연결되는 주소는 메뉴에 depth가 있는 형태 일 때 주로 사용된다. 예 | 쇼핑몰에서 상의 라는 상위 카테고리가 있고, 그 아래에 아우터라는 하위 카테고리가 있을경우 URL : 도메인주소/상의, 도메인주소/상의/아우터 와 같이 쓰일 수 있다. 2. 쿼리는 어떤 경우에 주로 사용하는가? 특정 값으로 조회되는 형태 일 ..
-
[React] 무작정 윈도우 11 구현해보기 !!나는야 개발자/React 2022. 11. 9. 09:55
/* * 주니어개발자의 리액트 이해를 위해 * 무작정 아무거나 만들어보기 시즌 1 !! * * 주제 : 윈도우 11 */ 1. 배경화면(실제 윈도우 화면) 평소 저는 화면 2개를 이어서 하나의 화면 처럼 보고있어서 마치 엄청 긴 모니터처럼 화면이 나오네요..? 아무튼 희생양(?)이 될 디자인입니다 !! 2. 윈도우의 기본적인 시스템을 이해하기 !! 윈도우에서 가장 중요한건 폴더 구현일 것이라 생각을 해 보았습니다. 더블클릭시 폴더가 열려야하며.. 이미 열린 창은 또 열리는것이 아니라 포커스를 주고, 폴더 내에서의 주소 변경과 이동.. 그리고 파일의 실행.. 기타 등등.. 사실 더 깊게 들어가면 지금의 나로써는 거의 불가능에 가까운 일이 되겠지만, 기본적인 모양새만 한 번 만들어보려고 해보았습니다. 3. ..
-
Mac MongoDB connection failed나는야 개발자/React 2022. 6. 6. 00:45
1. 사건의 발단 - Error Occured React 입문 막바지를 향해 달려가고 있다. Window와 Mac 환경에서 각각 구현해보느라 시간이 다소 걸렸는데.. Window의 경우에는 Node.js나 MongoDB / Community / Compass 크게 막히는 것 없이 진행이 잘 되었다. 하지만, Mac은 조금 달랐다. 아직 익숙하지 않은 것도 한 몫 하겠지만, 책에서는 일일이 모든 발생가능한 에러를 다뤄주지 않는다 !! 당연히 개발자라면 에러가 발생했을 경우 스스로 찾아 해결하는 능력이 중요하다고 생각하지만, 아직은 많이 어렵다.. 본론으로 들어가서, 위의 이미지는 Mac 환경에서 MongoDB를 설치하고 $mongo를 실행하면서 발생한 오류다. 이 오류의 내용부터 나와 비슷한 오류가 발생한..
-
[01] Node.js 설치 / React 시작하기나는야 개발자/React 2022. 4. 25. 17:26
이제 리액트를 배워야해서 정리를 하면서, 익혀보도록 하겠다 ! 시작에 앞서 React 홈페이지에서 시작하는 방법을 쭉 한 번 읽어 보았다. ( React : https://ko.reactjs.org/ ) 1. Node.js 설치 읽다 보니 create react app을 배우기 위해서는 node.js가 필요하다고 한다. 그래서, 우리는 다시 돌아와 Node.js부터 설치를 해보자 !! https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트로 이동을 하여 OS에 맞는 Node.js를 설치해 주면 되겠다. 설치 후에는 ..