Develop

고양이와 함께하는 힐링 웹사이트에 대한 개발을 최근에 시작했다.화면 중앙에는 공부하는 고양이가 등장하는데 이 고양이가 가만히 있으면 밋밋할 것 같아 고양이 사진 2장을 통해 고양이가 숨쉬는 듯한 느낌을 구현하려고 한다.고양이가 숨쉬는 듯한 동작을 반복하기 위해 일정 시

현재 Kodeal 이라는 졸업작품을 만들고 있다.이 서비스의 개선을 위해 CRA로 만들었던 졸업작품에 Next.js를 적용시키기로 했다.Next.js는 React의 프레임워크중 하나이다. 대표적으로 SSR를 지원한다.이 외에도 디렉토리 구조를 통한 페이지 기반 라우팅,

styled-component를 next.js에서 사용하려면 약간의 과정이 필요하다.먼저 babel-plugin-styled-components를 설치한다.그후 root 폴더 밑에 .babelrc 파일을 생성해준다.이제 아래와 같이 styled-component 플러그

졸업작품을 진행하던 중 사용자 정보를 다른 페이지에서 활용할 일들이 생겨 방법을 고민해봤다.우선 기존에는 Redux를 이용하여 사용자가 로그인을 완료하면 Redux에 저장한 후 그 데이터를 활용하려 했다.그러나, 이 방법의 심각한 문제점은 새로고침을 하면 Redux의

NFT 마켓과 관련한 새로운 프로젝트를 진행중이다.이 프로젝트의 메인 페이지와 리스트 페이지에서에셋 리스트들을 슬라이딩 형식으로 보여주고 싶었는데, 마침 이전 현장실습에서 사용한 react-slick 라이브러리가 생각났다.이번 포스트에선 React-slick의 설치 및

webpack은 자바스크립트 파일들을 하나로 번들링(묶어서) 사용할 수 있게 해주는 도구(module bundler)이다.즉, 필요한 모든 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 webpack이라 한다.최근의 웹페이지들은 SPA 방식을 선호하며

현재 WebRTC를 이용한 화상회의 프로젝트를 개발중입니다. 해당 프로젝트에서 사용한 WebRTC의 개념과 1:1 통신을 위한 기본적인 연결 과정에 대해 포스팅하고자 합니다. 🖥️ WebRTC란? Web-RealTime-Communication 의 약자로 서버의 개