next js 14 + tailwindCSS폰트적용하기 2 이번에 포트폴리오 사이트를 만들면서 로컬 폰트가 아닌 눈누에서 제공하는 폰트는 어떻게 사용해야되나하면서 여기저기 찾아보다가 방법을 터득해서 까먹을까봐 작성합니다. globals.css@tailwind base;@tailwind components;@tailwind utilities;@font-face { font-family: "PretendardVariable"; src: url(/src/app/_fonts/PretendardVariable.woff2);}@font-face { font-family: "LOTTERIACHAB"; src: url(/src/app/_fonts/chab.otf);}@font-face { font-family: "LeferiPoint-BlackA"; src: ur.. 기업프로젝트 회고 이번엔 꼭 취업해야지 하고 이력서만 넣다가스나이퍼 팩토리의.. 기업 프로젝트 기업 중에 KT에 보고 홀려서 신청하게 되었으나KT는 못했고 다른 기업 프로젝트를 진행하게 되었다..! 24.08.27 ~ 24.09.27 기업프로젝트 회고 펄핏이라는 기업인데 ai를 이용해서 신발을 추천해주는게 주제였어서ai를 이용한 프로젝트를 어디가서 해보나싶어 좋은 기회가 되었다. 브랜치 전략은 gitflow 기준으로 하되 pr과 코드리뷰는 github flow전략을 사용했다. 1주차이미 기획과 디자인은 다 나와있는 상태로 요구사항 정리, style 작업을 진행했다.내 목표는 api가 이미 나와있다는 가정하에 스타일 작업을 수요일까지 끝내고 목요일부터 api 연결이였으나기업에서 아직 api가 다 완성되지 않아 금요일까지.... Github Action을 이용한 AWS S3로 자동 배포하기 항상 버셀이나 네트리파이로 프론트 배포를 진행했었는데 aws s3로 배포해보는 경험도 필요하다 생각이 들어서이렇게 기록용으로 하나씩 써봅니다.. 1. Github Action 이용하기배포할 레포지토리에 접속후액션을 클릭하고 node.js configure 클릭을 해준다. 누르게 되면 아래와 같은 화면이 뜨게 된다.on: push: branches: [ "develop" ] pull_request: branches: [ "develop" ]develop 브랜치에다 push를 해주면jobs 아래의 작업들을 실행하겠다는 뜻임 strategy: matrix: node-version: [18.x, 20.x, 22.x] # See supported Node.js .. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1주차 ✅ 이번주 배운 내용자바스크립트 기본문법, 타입스크립트 기초, 리액트 기초 자바스크립트 기본 문법템플릿 문자열const name = '철수';const helloTemplate = `${name}야, 머해`;console.log(helloTemplate); 템플릿 문자열은 기존의 큰 따옴표나 작은 따옴표 대신에 백틱 기호로 문자열을 정의하는 방법을 말한다.템플릿 문자열은 변수를 대입할 수 있다는게 가장 큰 장점이다. 화살표 함수es6에서 새롭게 등장한 함수 선언 방법이다.1.일반함수function printHello() { retrun 'hello'; } console.log(printHello()); //hello 2.화살표 함수매개변수가 없을 때const printHello = () => { re.. RESTful API란 프로젝트를 마치고 회사 지원을 하려고보니 우대사항에 RESTful.. 이 들어가는 공고가 많아서제대로 알아보고자 작성했다! 🤔 RESTful API이란?RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안정하게 교환하기 위해 사용하는인터페이스이다.RESTful API는 안전하고 신뢰할 수 있으며 효율적인 소프트웨어 통신 표준을 따르므로 정보 교환을 지원한다! 🧐 REST의 정의REST(REpresentational State Transfer)는 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이다. 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 상태 전달(sta.. React websocket을 이용한 1:1 채팅 만들기 엉엉 울면서 구현한 채팅 레지고. WebSocket이란??웹소켓은 웹 앱과 서버 간의 지속적인 연결을 제공하는 프로토콜이다. 이를 통해 서버와 클라이언트간에 양방향 통신이 가능해진다.HTTP와는 달리, 웹소켓 연결은 한 번 열린 후 계속 유지되므로, 서버나 클라이언트에서 언제든지 데이터를 전송할 수 있다. 이때 데이터는 패킷(packet) 형태로 전달되며, 전송은 커넥션 중간과 추가 HTTP 요청 없이 양방향으로 이뤄진다!이런 특징 때문에 웹소켓은 온라인 게임이나 주식트레이딩 시스템 같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합하다 사용하기webSocket 연결 const [messages, setMessages] = useState([]);const webSocket = useRef(nul.. React 파일 이미지 최적화 하기 react-image-file-resizer 메인프로젝트를 통해서 이것저것 참 많이 써본것 같다.이번엔 이미지 파일 리사이저를 통해 이미지 최적화를 해보겠따. 이미지 리사이징이 왜 필요한가? 🤔이미지 용량이 큰 경우엔 서버와 DB에 부담을 줄 수 있고 프론트에서 이미지를 느리게 불러오기 때문에 이미지 용량이 크다면 서버와 DB에 부담을 줄이며 프론트에서 이미지를 빠르게 보여줄 수 있게 리사이징이 필수라고 나는 생각한다! 메인 프로젝트에서는 사진업로드가 많은 서비스이다 보니채팅에서는 굳이 용량이 크고 사이즈가 클 필요가없다는 생각이 들어 리사이징을 진행하기로 했다 react-image-file-resizer는 이미지 리사이징, 인코딩을 위해 사용한다. base64 혹은 blob으로 변환이 가능함base64 인코딩이 뭐유..?진짜 말 그대로 풀면 6.. CSRF토큰이뭔데이렇게저를괴롭히는건가요 메인프로젝트를 진행하면서 나를 힘들게하던 CSRF토큰에 대해 알아보자. 쿠키에 대한 아주 기본적인 개념은쿠키🍪여기에 작성해두었다. 쿠키와!!! CSRF쿠키에 별도로 설정을 하지않는다면, 크롬을 제외한 브라우저들은 모든 HTTP요청에 대해서 쿠리를 전송하게 된다. 그 요청에는 HTML문서 요청, HTML 문서에 포함된 이미지 요청, XHR 혹은 Form을 이용한 HTTP 요청등 모든 요청이 포함된다. CSRF(Cross Site Request Forgery)는 다른 사이트에서 유저가 보내는 요청을 조작하는 공격이다예) 이메일에 첨부된 링크를 누르면 내 은행계좌의 돈이 빠져나가는 방식의 해킹클라이언트가 자신이 하고싶은 행동에 대한 명령을 내렸는데, 해커가 페이지를 바꿔치기 하는등의 방법으로 해킹을 시도하기.. 메인프로젝트 개발회고 드디어 메인프로젝트 개발 회고를 작성한다! 24.05.02 ~ 24.06.04 메인 프로젝트 회고 합동 프로젝트 이후 바로 시작한 메인프로젝트다 옷장공유 서비스라는 취지로 만들게 된 coatycloset왜 coatycloset이냐 물으면 그냥입니다. 처음엔 결제도 넣고 커뮤니티도 넣어서 하자!였다. 하지만 프로젝트 기간은 4주.. 페이지도 많고 구현해야할 기능도 많았음 1주차기획 + 디자인2주차백엔드에서 api를 만들때까지 시간이 있으니 css를 후딱 만들고 msw를 이용해서 목 데이터를 만들어 api 통신이 되는지 테스트 하는 기간이였다.3주차 - 4주차백엔드에서 만들어낸 api로 갈아끼우고 테스트 하고 4주차에 마무리였음 하지만... 예상대로 되면 좋았겠지만생각보다 api는 더뎠고 csrf 토큰과 .. React Hook Form를 활용해 폼 관리 하기 + zod 이전 프로젝트에서는 formik과 yup이라는 유효성관리 라이브러리를 사용했는데이번에는 react hook form 그리고 zod를 사용해보았다. React Hook Form이란?Performant, flexible and extensible forms with easy-to-use validation.사용하기 쉬운 유효성 검사를 통해 성능이 우수하고 유연하며 확장 가능한 양식을 제공합니다. React Hook Form을 사용해서 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있다.React Hook Form을 사용하면 폼 컴포넌트의 상태 및 유효성 검사를 관리하는 데 필요한 코드 양을 대폭 줄일 수 있음폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 명시적인 이벤트 핸들러를 작성할 필요 .. 리액트로 OAuth 소셜로그인 구현하기(구글,네이버,카카오) 이전 프로젝트에서는 무작정 카카오소셜로그인 하나만 구현했엇는데 이번 기회에는 OAuth가 뭔지부터 공부하고자 작성해본다. ❓OAuth가 뭐야OAuth란 Open Authorization의 약자로, 인터넷 사용자들이 자신의 자격 증명(사용자 이름과 비밀번호)를 공유하지 않고도 웹 사이트나 애플리케이션이 사용자 정보를 접근할 수 있도록 하는 인증 프로토콜이다.제3자 애플리케이션 접근 허용사용자들이 자신의 소셜 미디어 계정(구글,페이스북 등)을 통해 다른 웹사이트나 애플리케이션에 로그인 할 때, 이를 가능하게 하는 것이 OAuth이다. 사용자는 자신의 자격증명을 공유하지 않고도 제3자 애플리케이션이 필요한 정보에 접근 할 수 있도록 승인한다. API 접근 권한 부여개발자들이 OAuth를 사용하여 다른 서비스.. React-Query 사용하기 이전에 강의를 들으면서 강사님이 리액트 쿼리를 한번은 써보는게 좋다는 얘기를 하신적이 있었는데 한번 써봐야지 생각 해뒀다가이번 프로젝트를 통해 제대로 써보면서 공부하는 계기가 되었다.❓React-Query가 뭐야? 공식문서에는 다음과 같이 React-Query를 설명하고 있다.TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.T.. 이전 1 2 3 4 다음
