라이언 코딩일기

[React] Recoil 사용후기

Recoil은 React의 전역 상태 관리 라이브러리 중 하나이다. React를 개발한 facebook 팀에서 만들었고, 그 때문인지 호환성도 아주 좋은 것 같다. Install npm install recoil 사용전 install RecoilRoot import { RecoilRoot } from 'recoil'; RTK의 Provider와 같이 App 컴포넌트를 RecoilRoot 컴포넌트로 감싸주고 시작한다. Atom import { atom } from 'recoil'; export const item = atom({ key : 'item_state', default : [ { id : 0, name : 'zero', checked : false, }, { id : 1, name : 'one',..

[일본어 웹 용어] 각종 언어 및 라이브러리

HTML : エイチティーエムエル (ハイパーテキスト・マークアップ・ランゲージ) CSS : シーエスエス (カスケーディング・スタイル・シート) JavaScript : ジャバスクリプト jQuery : ジェイクエリー TypeScript : タイプスクリプト React : リアクト React-native : リアクトネイティブ Redux : リダックス Recoil : リコイル React-Query : リアクトクエリー axios : アクシオス Styled-components : スタイルドコンポーネント Framer-motion : フレーマー・モーション

[React] gh-pages를 이용한 배포

gh-pages는 무료로 웹 호스팅을 도와주는 고마운 라이브러리이다. 사용법도 쉽고, 개발자라면 모두 갖고 있을 github와 연동이 된다는 점이 마음에 들어 꾸준히 사용하고 있다. Main Page Install npm install gh-pages --save-dev 사용전 터미널에 해당 코드를 입력, install 해준다. homepage 설정 "homepage" : "https://{내 github 아이디}.github.io/{프로젝트 이름}" React로 작업을 하는 경우, 프로젝트 폴더 내부에 package.json 파일이 있는 것을 확인할 수 있을 것이다. package.json 파일에 위와 같이 코드를 작성, 호스팅 될 homepage 주소를 작성해 준다. 명령어 추가 "predeploy"..

[React] framer-motion 사용후기

framer-motion이라는 react 라이브러리를 사용해 봤다. css만으로 표현하기에 복잡하고 힘든 애니메이션을 쉽고 간편하게 표현할 수 있도록 도와주는 멋진 라이브러리라고 생각한다. Main Page Install npm install framer-motion 여느 라이브러리와 마찬가지로 터미널에서 install 후 사용한다. 기본 특징 import { motion } from 'framer-motion'; hi (X) (O) framer motion은 기본적으로 motion이라는 키워드를 사용한다. 위와 같이 div태그는 motion.div 형태로 표현해야 애니메이션을 적용할 수 있게 된다. ** motion을 import 하는 것도 잊지 말아야 한다! Variants import React f..

[React] 포트폴리오 만들기

취업을 위해 나만의 포트폴리오를 만들어 보았다. 프로젝트에 사용한 주요 라이브러리는 아래와 같다. react-router-dom -- 페이지 관리 recoil -- 스테이트 관리 styled-components -- 스타일 관리 react-icons -- 아이콘 framer-motion -- 애니메이션 생성 완성본 영상 css 스킬이 부족한 나에게 framer-motion은 그야말로 단비 같은 라이브러리이다. 덕분에 다이나믹한 표현도 손쉽게 할 수 있고, 사용하기에 불편함이 없었다. 그리고 이번 프로젝트에는 recoil을 이용해 state 관리를 해보았다. 개인적으로 RKT보다 사용하기 쉬웠고, selector 기능이 마음에 들었다. 마지막으로, media-query 및 css-style, typogra..

[React Native] 내가 만든 첫 모바일 앱 ToDo List

React Native에 대해 공부하고 있다. 처음부터 공식 사이트를 뒤적거리기엔 역시 부담이라 가볍게 무료 강의부터 찾아보았다. 조금 오래된 강의지만 다행히도 Nomad Coders에 무료강의가 있었고 십분 활용할 수 있었다. ** 해당 앱은 Expo / create-expo-app을 활용해 만들었다. 간단한 모바일 투두앱 React Native는 정말로 React와 유사했다. 그리고 실질적으로 300줄 남짓한 코드로 이런 깔끔한 앱이 만들어진다는 것도 놀라웠다. 하지만 초기 설정이나, 상황에 따라서 필요한 컴포넌트를 불러오는 등 어려운 점도 많이 있었다. 그래도 내 손으로 직접 모바일앱을 만드는 날이 오다니, 감격이었다. 노마드코더스의 리액트 네이티브 강의 링크 https://nomadcoders.c..

[일본어 웹 용어] HTML 태그 모음 [1]

1. `` - HTML 2. `` - ヘッド 3. `` - タイトル 4. `` - ボディ 5. `` - 見出し1 6. `` - 段落(だんらく) 7. `` - アンカー 8. `` - 画像() 9. `` - 箇条書きリスト(かじょうがきリスト) 10. `` - リストアイテム 11. `` - ディビジョン 12. `` - スパン 13. `` - ヘッダー 14. `` - ナビゲーション 15. `` - セクション 16. `` - アーティクル 17. `` - サイドバー 18. `` - フッター 19. `` - フォーム 20. `` - 入力フィールド 21. `` - ボタン 22. `` - セレクトボックス 23. `` - テキストエリア 24. `` - テーブル 25. `` - テーブル行(テーブルぎょう) 26. `` - テー..

[jQuery] remove, empty 차이점

jQuery에는 선택한 요소의 내용을 비우는 메소드가 두 가지 존재한다. remove()는 태그와 함께 모든 요소를 비우고, empty()는 텍스트만 비운다. // 아래와 같은 코드가 있다고 가정할때, hi remove() $(.box).remove(); // 아무것도 남지않음 empty() $(.box).empty(); // //태그 정보만 남게 됨