라이언 코딩일기

[jQuery] 자주 사용하는 기능 정리

아직 일본은 jQuery가 파워가 있는 듯하다. js와 react만 공부해서는 취업에 불리할 것 같아 울며 겨자 먹기로 공부하는 중이다. 이 글은 유튜버 '깡코딩' 님의 제이쿼리 "이거 보면 끝! 자주 사용하는 제이쿼리 정리(입문자용)"이라는 강의를 토대로 정리한 글이다. 기본 설정 jQuery는 JavaScript와 완전 다른 언어가 아니라, js를 보다 편하게 사용하기 위해 제작된 라이브러리이다. 이를 사용하기 위해서는 필요에 따라서 아래의 방법 중 한 가지 간단한 사전작업이 필요하다. jQuery 홈페이지에서 파일 다운로드한 후 프로젝트 폴더에 삽입 jQuery cdn 검색 후 필요한 코드 script 태그로 불러오기 현재 jQuery는 1,2,3 번대 버전이 존재하며, 각각 지원하는 기능이나 호환..

[React] react-icons 사용후기

react-scroll과 마찬가지로 포트폴리오 성능개선 작업을 하며 react-icons라는 라이브러리를 사용해 보았다. 기존의 fontawesome을 이용한 아이콘들을 react-icons로 교체하는 간단한 작업이었다. 사용법 또한 매우 간단하다. 기본적인 사용법은 타 라이브러리들과 마찬가지로 공식 사이트에 매우 친절하게 나와있다. https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that..

[일본어 웹 용어] 복사하기, 붙여넣기, 자르기, 덮어쓰기

-복사하기 (copy) コピー -붙여 넣기 (paste) ペースト or 貼り付け [はりつけ] -복사&붙여 넣기 (복붙 -- copy & paste) コピーアンドペースト（コピペ） -자르기 (cut) 切り取り [きりとり] -덮어쓰기 (overwrite) 上書き [うわがき]

[일본어 웹 용어] 프론트엔드,백엔드,인프라 엔지니어

-프론트엔드 엔지니어 フロントエンドエンジニア -백엔드 엔지니어 バックエンドエンジニア -인프라 엔지니어 インフラエンジニア 출처 : https://t-cr.jp/article/10d1795b90aa9b1c8

[React] react-scroll 사용후기

오늘 포트폴리오 기능개선을 하면서 기존의 a태그를 없애고 싶은 마음에 react scroll이라고 구글링을 해보았다. 그중 가장 유력해 보이는 기능이 react-scroll이라는 라이브러리였던 것 같아 사용해 보았다. react-scroll 예시 사용법은 간단했다. npm install react-scroll react-scroll을 저장하고, import { Link } from "react-scroll"; 사용하고자 하는 컴포넌트에 위의 Link 태그를 불러온다. ** react-router의 Link와는 다른 태그이다. {item.link.toUpperCase()} 마지막으로 Link태그를 이용한다. Link태그에는 다양한 속성값이 존재하는데, 대부분 to, spy, smooth는 필수적으로 사용하..

[CSS] 디자인을 강조해주는 Glassmorphism & Claymorphism

디자인에는 답이 없다지만 유행은 있는 것 같다. 그래서 2023 디자인 트렌드에 대해 알아보았더니 글래스모피즘(Glassmorphism)과 클레이모피즘(Claymorphism)이라는 기법이 나왔다. 글래스모피즘은 반투명 유리를 덧대어 놓은 듯한 효과를, 클레이모피즘은 점토같이 말랑말랑한 촉감을 주는듯한 효과를 준다. 두 기법의 공통점은 '입체감에서 오는 강조효과'이다. 위의 두 이미지는 글래스모피즘과 클레이모피즘 효과를 자동으로 생성해 주는 사이트이다. 유용해 보이니 링크를 남겨놔야겠다. glass(위) : https://css.glass/ clay(아래) : https://hype4.academy/tools/claymorphism-generator 화려한 디자인도, 심플한 디자인도 모두 좋지만 과연 사..

[Git, Github] gh-page를 이용해 React 프로젝트 배포하기

저번 주말에 한국에서 시킨 맥북이 왔다. 근 30년간 윈도우만 사용하다가 Mac OS를 처음 접해본지라 당황스럽기만 하다 ^^;; gh-page란 정적인 웹 호스팅을 도와주는 노드 패키지 중 하나이다. 순서 깃허브에 저장소 생성 프로젝트 생성 프로젝트 터미널 -> 노드매니저를 통해 gh-pages 인스톨 ( npm i gh-pages ) 원격 저장소와 로컬 저장소 연결 ( remote add origin 저장소주소 ) package.json 파일에 http://사용자 이름.github.io/저장소 이름 추가하기 ( "homepage" : "http://mediumryan.github.io/mini-game-demo" ) package.json 파일의 script 내부에 "predeploy": "npm r..

[React] 영화 목록 + 검색기능

이번 프로젝트는 어제 공부했던 search bar 기능을 복습할 겸 만들어봤다. TMDB API를 통해 영화 데이터를 받아오고, 검색창을 추가해 사용자의 검색값에 맞게 해당 목록을 필터링해 주었다. 이번엔 저번과 다르게 영어가 아닌 한글로 필터링을 해보았다. 뭔가 훨씬 어렵고 특별한 무언가가 더 필요할 줄 알았는데 아니었다. import styled from 'styled-components'; import { useState } from 'react'; import { InputGroup, Form } from 'react-bootstrap'; // import components import NowPlayingItems from './../Components/NowPlayingItems'; const..