ougi FE

저는 예전부터 유용하게 사용하던 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란?데이터를 저장합니다브라우저가 종료될 때까지 데이터가 존재합니다세션이 종료되면 없어집니다소멸 타이밍이 존..