ougi FE

저는 얼마 전 여러 강의를 보다가 우연히 트랜지션이라는 것을 접하게 되었습니다 부드럽게 움직이는 요소들을 보고 아!! 나도 저렇게 부드러운 움직임 구현해보고 싶다! 라는 생각이 들어서 공부를 해보려고 이렇게 글을 쓰게 되었습니다!❓ 트랜지션(transition) 그게 뭘까?CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다속성transition-property: 원하는 애니메이션 속성(color, border-radius, postion) transition-duration: 애니메이션 효과가 실행되는 시간(ms, s) transition-timingfunction: 애니메이션이 적용되는 속도(linear, ease(기본값), ease-in, ease-out, ease-in-out) t..

오늘은 제가 개발을 할 때 없으면 어색하고 이상해서 개발하기 힘들 정도인 없어선 안될 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..

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