ougi FE

저는 Tailwind를 이용해 웹페이지를 구현할 때동적인 스타일링을 구현하기 위해서 종종 삼항 연산자를 사용해왔습니다.하지만 이 방법은 코드가 너무 지저분해진다는 문제가 있었습니다. 오늘은 그 문제를 해결해 줄 수 있는 classnames 라이브러리를 소개해 드리겠습니다.❓ classnames란?classnames 라이브러리는 조건부로 CSS 클래스를 적용할 수 있게 해주는 JavaScript 라이브러리입니다.여러 개의 CSS 클래스를 간편하게 결합하거나 특정 조건에 따라 클래스 이름을 동적으로 추가할 수 있습니다.Tailwind 또는 CSS Modules와 많이 쓰인다고 합니다.장점코드 가독성이 높아집니다.동적 스타일 적용이 쉬워집니다.라이브러리 크기 작아집니다.단점기본적으로 타입이 정해져 있지 않아서..

안녕하세요 오늘은 React-Hook-Form에 대해서 소개해드릴 것인데요 저는 요즘 로그인, 회원가입 페이지를 구현하면서 어떻게하면 효율적으로 form을 관리할 수 있을지 고민이 많았습니다그래서 블로그를 살펴보다가 React-Hook-Form 라이브러리에 대해서 알게 되어 이렇게 글을 적게 되었습니다React-Hook-Form이란?React-Hook-Form 라이브러리는 사용하기 쉬운 유효성 검사 기능을 가지고 있고 확장가능한 form을 제공합니다이 라이브러리를 사용하면 코드가 매우 줄어들고 불필요한 렌더링을 제거해서 성능도 개선이 되는 효과가 있습니다🎯 사용법 저는 기본적으로 React-Hook-Form 사용에 필요한 register함수와 handleSubmit함수를 소개드리고 오류처리, 유효성 검..

오늘은 제가 Context API글을 작성하면서 알게 된 Zustand라는 전역 상태관리 라이브러리에 대해서 설명해보겠습니다❓ Zustand란? Zustnad는 전역 상태 관리 라이브러리 중 하나입니다  작은 패키지 크기와 직관적인 사용법 덕분에 Redux와 Mobx와 더불어 많은 개발자들로 부터 사랑받고 있습니다 불필요한 리렌더링을 최소화하였고 학습곡선이 낮습니다단방향으로 소통하는 React이기 때문에 component의 수가 많으면 복잡하게 props drilling 과정을 거치게 되는데 이렇게 되면 유지보수를 할 때에도 피곤하고 성능이 저하될 우려 또한 존재합니다 Props drilling이란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 중간에 있는 컴포넌트들이 해당 데이터를 직접 사용하..

오늘은 제가 여러 전역 상태관리 라이브러리들에 관심이 생겨서 이렇게 글을 쓰게 되었습니다오늘은 전역 상태관리 라이브러리 중 Context API 라이브러리에 대해서 설명드리겠습니다❓ Context API? 그게 뭘까Context API는 React의 내장 API입니다props를 사용하지 않고도 state를 쉽게 공유할 수 있게 해 줍니다모든 컴포넌트에서 사용할 수 있는 데이터(상태, 함수 등등)를 전달할 때 유용합니다(예: 사용자 로그인 정보, 테마 설정, 언어 설정 등)🔍 장단점장점React에서 자체적으로 제공하는 기술이기 때문에 따로 설치할 필요가 없습니다다른 전역 상태관리 라이브러리들보다 배우기 쉽습니다코드 구성이 간결합니다단점상위 컴포넌트 state가 변화하면 하위 컴포넌트가 모두 리렌더링 된다..

저는 오늘 코딩 테스트를 풀다가 어이없는 실수들을 하면서 제가 했던 실수들을 반성하며 다시 이런 실수들을 하지 않도록 이렇게 글로 남겨보았습니다먼저 이 문제에 대해서 설명 간단히 설명드리자면 배열 안에 최소 값을 뺀 배열을 return 하는 것인데 만약 최소 값을 빼고 남은 요소가 없으면 -1이 있는 배열을 return 하는 문제였습니다 이제 제 실수들을 말씀드리며 저의 첫 번째 트러블 슈팅을 시작하겠습니다!!⚽ 첫 번째 실수 먼저 제가 했던 첫 번째 실수에 대해서 설명드리겠습니다 처음 실수는 문제에 이해에 대한 실수였습니다 이 문제는 제일 작은 값을 빼지만 배열의 순서가 바뀌면 안 되는 문제였습니다 하지만 테스트 케이스는 내림차순으로 정렬이 되어 있는 것처럼 보여서 이런 실수를 하게 되었습니다 일단 제..

저는 얼마 전 블로그를 둘러보다가 React-Query라는 것을 보고 알아보며 정말 좋은 라이브러리라고 생각이 들어서 이렇게 더 잘 정리해서 사용하기 위해 오늘 이렇게 글을 쓰게 되었습니다 React-Query🌸가 뭘까?공식 문서에서는 React-Query를 이렇게 설명하고 있습니다fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리쉽게 말하자면 fetching, caching과 관련된 비동기관련 처리과정을 도와주는 라이브러리입니다 ❓ 왜 사용할까?간편한 데이터 관리( 데이터 가져오기, 캐싱, 동기화 및 업데이트 처리를 간편)실시간 업데이트 및 동기화(서버와 클라이언트의 데이터 일관성 유지)데이터 캐싱(불필요한 요청 감소, 성능 향상)서버 상태 관리(에러, 로딩, 성공 쉽게 ..

저는 얼마 전 여러 강의를 보다가 우연히 트랜지션이라는 것을 접하게 되었습니다 부드럽게 움직이는 요소들을 보고 아!! 나도 저렇게 부드러운 움직임 구현해보고 싶다! 라는 생각이 들어서 공부를 해보려고 이렇게 글을 쓰게 되었습니다!❓ 트랜지션(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가 적다는 특징이 있습니다장시간 접속을 전제로 하기 대문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다더불어 데이터의 송신과 수신에 각..