개요
학교에서 진행하는 모각코 프로그램을 통하여 프로젝트 진행 및 공부를 계속 이어나가며 블로그 포스팅을 하게 되었다. 프로젝트에서 맡은 부분은 Front-end 부분으로 React를 사용하여 진행을 하게 되었다. React를 오랜만에 봐서 그런지 기억이 잘안나는 부분도 많아 구글링을 동반하며 다시 복습을 하며 공부를 진행하였고 개발하는 과정에서 새로운 지식도 늘었다.
React Material-UI 사용방법
React를 통한 개...
아래 링크를 통해 파이토치로 시작하는 딥러닝 기초 수업을 수강한다.
https://www.boostcourse.org/ai214/joinLectures/25076
평소 관심을 어느정도 가지던 AI 분야에 대한 공부를 학교 학회를 통하여 시작하게 되었다.
우선 강의에서는 도커(Docker)을 이용하여 환경 세팅을 하는데 이는 이전 포스팅인 Docker 포스팅을 참고하면 된다.
Docker 란?
도커(Docker)는 리눅스 컨테이너에 여러 기능을 추가함으로써 애플리케이션을 컨테이너로서 좀 더 쉽게 사용할 수 있게 만들어진 오픈소스 프로젝트이다.
기존의 가상화 기술은 하이퍼바이저를 이용해 여러 개의 운영체제를 하나의 호스트에서 생성해 사용하는 방식! 이러한 여러 개의 운영체제는 가상 머신이라는 단위로 구별되고, 각 가상 머신에는 우분투(Ubuntu), CentOS 등의 운영체제가 설치 되어 사용된다. 각종 ...
GraphQL이란?
GraphQL 은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어입니다. 기존의 웹 혹은 모바일 어플리케이션의 API 를 구현 할 때는, 통상적으로 REST API 가 사용됩니다. 기존의 REST API 를 사용하여 API 를 구현을 한다면, 우리가 클라이언트사이드에서 어떠한 기능이 필요 할 때마다 그때 그때 새로운 API를 만들어주었어야 했습니다.
query {
account(id: "1") {
...
Styled Components
추후 포스팅 예정..
UseAxios
axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행한다.
const useAxios = (opts, axiosInstance = defaultAxios) => {
const [trigger, setTrigger] = useState(0);
const [state, setState] = useState({
loading: true,
error: null...
UseNotification
const useNotification = (title, options) => {
if (!("Notification" in window)) {
return;
}
const fireNotif = () => {
if (Notification.permission !== "granted") {
Notification.requestPermission().then((per...
UseScroll
유저가 스크롤해서 어디를 지정하거나 지나쳤을 때 나타나게 함
const useScroll=()=>{
const[state,setState]=useState({
x:0,
y:0
});
const onScroll=()=>{
console.log(window.scrollY);
setState({y :window.scrollY},{x :window.scrollX});
};...
UseFadeIn
서서히 나타나게 만든다. 말그대로 fadein
const useFadeIn = (duration = 1, delay = 0) => {
const element = useRef();
useEffect(() => {
if (element.current) {
//우리가 원하는 DOM을 가리킴
const { current } = element;
current.styl...
UseBeforLeave
기본적으로 탭을 닫았을 때, 실행되는 페이지이다.
const useBeforeLeave = (onBefore) => {
if (typeof onBefore !== "function") {
return;
}
const handle = (event) => {
const { clientY } = event;
if (clientY <= 0) {
onBefo...
