ougi FE

저는 얼마 전 아이디어페스티벌을 하다가 같은 팀인 친구가 profile 이미지 설정을 구현하다가 어떻게 할지 몰라 고민하는 모습을 보고 같이 조사를 해보다 알게 된 Cropper.js에 대해서 소개해보겠습니다✂️ Cropper.js? 어떤 라이브러리일까?Cropper.js는 이미지를 자르는 기능을 지원해주는 라이브러리 입니다예를 들어 사진을 게시물에 올릴 때나 프로필 사진을 설정할 때 이미지를 원하는대로 잘라서 원하는 부분만 올리신 적이 있으실 겁니다 이 기능을 구현할 때 사용됩니다🎯어떻게 사용할까!!!npm install cropperjs # npmyarn install cropperjs # yarn먼저 cropper.js를 설치해줍니다 먼저 기본적인 html..

오늘은 제가 개발을 할 때 없으면 어색하고 이상해서 개발하기 힘들 정도인 없어선 안될 Prettier에 대해 말씀 드리겠습니다!📌 Prettier 그게 뭔데?파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 도구 입니다이 도구가 코드 스타일을 정리해주어서 팀원들과 일관된 코드 스타일을 갖을 수도 있고 클린 코드를 작성할 수도 있습니다탭, 공백, 세미콜론, 따옴표 등등을 알아서 수정해줍니다🎯 사용법 (Node npm 방식)npm install --save-dev prettierprettier 설치해주기npx prettier --write . # 전체 파일npx prettier --write yourfile.js # 특정 파일코드 포맷할 파일 지정해주기🎯 사용법 (VSC 확..

저는 예전부터 유용하게 사용하던 ESLint라는 도구를 소개해드리고 싶어서 이렇게 글을 작성하게 되었습니다 이 도구가 무엇을 도와주는 도구인지 어떻게 사용하는지 설명 드리겠습니다혹시 코드가 문법상으로 오류가 있는데 오류가 안나서 힘들었던 경험이 있나요? ESLint를 이용하면 더 이상 힘들어하지 않아도 됩니다!!📌 ESLint가 뭘까?ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미입니다 즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구입니다++ 코드 스타일 정리🎯 사용법 npm init -y # package.json 파일 생성npm install eslint --save-dev..

저는 소프트웨어마이스터고등학교 4개가 모이는 토크콘서트를 얼마 전 다녀왔습니다 그 곳에서 친구들과 명함을 주고 받다가 친구의 명함에 Tailwind CSS라는 것이 있는 것을 보곤 무엇인지 궁금증이 들어 이렇게 글을 써보게 되었습니다📌 Tailwind CSS란?Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크입니다이미 만들어진 유틸리티 클래스를 이용하기 때문에 시간을 많이 절약할 수 있습니다유틸리티란?유틸리티는 특정한 작업이나 기능을 수행하도록 설계된 작은 코드 조각을 의미합니다. CSS에서는 요소의 스타일을 간단하게 정의하는 단일 속성 클래스를 지칭하며, 이를 통해 반복적인 스타일링 작업을 간편하게 처리할 수 있습니다.ex)// css...

저는 프로젝트를 하다 채팅기능을 구현하게 되어서 어떻게 구현해야 할지 열심히 찾아보다가 알게 된 WebSocket을 소개 드리겠습니다!!WebSocket💬이란 무엇인가??서버와 클라이언트가 연결을 끊지 않고 유지하면서 양뱡향 소통이 가능하게 하는 기술입니다 이것을 이용하여 실시간 데이터 교환을 할 수 있기 때문에 실시간 채팅, 주식 등을 구현할 때 많이 사용됩니다HTTP 통신방법과 WebSocket의 차이점WebSocket 프로토콜은 접속 확입에 HTTP를 사용하지만, 그 후의 통신은 WS라는 프로토콜을 이용합니다Header가 작아서 overhead가 적다는 특징이 있습니다장시간 접속을 전제로 하기 대문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다더불어 데이터의 송신과 수신에 각..

오늘은 제가 얼마 전에 간단한 메모 어플리케이션을 만들며 편리하게 사용했던 json-server의 사용법에 대해 다뤄보겠습니다 정말 간단하고 유용해서 다들 사용해봤으면 좋겠습니다 그럼 먼저 json-server가 무엇인지 알아볼까요?🔧 json-server란?json-server는 json파일을 활용해사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다서버가 개발되기 전이나 공부를 할 때 사용하기 좋습니다REST API Mock Server실제 서버를 대신하여 가상의 API 응답을 제공하는 도구입니다. 이를 통해 개발자는 실제 서버가 준비되기 전에 API를 테스트하거나 프론트엔드 작업을 진행할 수 있습니다. Mock Server는 미리 정의된 가짜 데이터를 ..

저는 요즘 프로젝트를 진행하면서 저장소(LocalStorage와 SessionStorage)를 제대로 활용하지 못하고 있다는 생각이 들었습니다. 그래서 조금 더 깊이 이해하고자 이렇게 글을 쓰게 되었습니다. 그리고 쿠키도 비슷한 기능을 가지고 있는 것으로 알고 있어 쿠키까지 조사하게 되었습니다.💾 LocalStorage란?데이터를 저장합니다도메인 별로 남아있습니다시간 제한이 없습니다 브라우저가 꺼져도 남아있습니다값을 지우려면 직접 삭제해야 합니다장점저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다단점HTML5 미만의 브라우저에서는 지원을 하지 않습니다💾 SesstionStorage란?데이터를 저장합니다브라우저가 종료될 때까지 데이터가 존재합니다세션이 종료되면 없어집니다소멸 타이밍이 존..

저는 최근 이 단어를 자주 들었는데 뜻은 대충 알고 있었지만 장단점이나 차이점을 더 자세히 알고 싶어 이렇게 글을 쓰게 되었습니다📌SSR(Server Sider Rendering)이란? 서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말합니다 보통 MPA에서 SSR로 렌더링합니다서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠릅니다전통적인 웹은 대부분 SSR이었다고 합니다장단점장점첫페이지 로딩속도가 빠릅니다검색엔진 최적화가 가능합니다단점서버가 과부하될 수 있습니다렌더링될 때마다 화면이 깜박입니다초기로딩 이후 페이지 이동 시 CSR보다 속도가 느립니다TTV(Time To View, 사용자가 화면을 보는 시점)와 TTI(Time To Interact, 사용자..

오늘은 제가 React를 공부하기 시작했을 때 처음 봤는데 아직까지 패키지 매니저에 대해 알지 못하고 사용하고 있어 이렇게 글을 쓰게 되었습니다  패키지매니저란?패키지매니저는 개발에 필요한 여러 패키지를 설치하고 또 수정하고 업데이트하는 등 작업을 편리하게 해주는 도구입니다그리고 패키지들을 의존성 있게 관리해줍니다쉽게 말하자면 프로젝트에 사용되는 패키지를 쉽게 관리하고 설치해주는 하나의 도구라고 할 수 있습니다  🏆 패키지 매니저 중 대표 3가지npm패키지매니저의 시초라고 하고 node.js에 내장이 되어 있기 때문에 추가적인 설치는 필요하지 않습니다그리고 모듈들을 직접 개발하지 않고 다른 사용자가 만들어놓은 다양한 모듈을 다운로드하여 이용할 수 있습니다그리고 가장 오랜 시간 많은 사용자들이 사용을 해..

저는 이번 주 선배님들과 스터디를 하다가 선배님들이 모두 번들링에 대해 한번씩 이야기 하시는 것을 들었습니다번들링이 무엇인지 물어보셨지만 저는 대답을 하지 못하여서 아쉬웠습니다 다음에는 더 당당하게 답 하기 위해 이렇게 관련된 내용들과 함께 글을 쓰게 되었습니다 ㅠㅠ🏗️ 빌드(Build)란?코드가 브라우저에서 실행될 수 있도록 변환되는 과정입니다 그렇다면 대체 왜? 빌드를 해야 할까요?바로 웹 사이트가 로드되는 속도를 빠르게 하고 웹사이트를 효율적이게 하기 위해 입니다!!그렇게 하기 위해서는 번들링(Bundling)이라는 작업을 필요시 합니다 그렇다면 이제 번들링에 대해 알아야 겠죠? 💐번들링(Bundling)이란?파일 크기를 줄이고 여러 파일들을 하나로 묶는 것입니다 번들링을 하면 네트워크 요청 수..