서비스 홍보 페이지를 만들면서 스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다. 라이브러리 선택 구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데, react-reveal 은 마지막 업데이트가 오래되기도 했고 npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다. framer motion 설치 npm install framer-motion 적용 방법 일단 제가 구현하려는 것은 다음과 같았습니다. 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것. 스크롤을 올려서 자식컴포넌트가 ..
문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.
관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..
ref : Flutter & Dart - The Complete Guide [2023 Edition] 23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다. Flutter 프로젝트 생성 터미널의 원하는 경로에서 다음을 입력 flutter create [프로젝트이름] 또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서 flutter new project 를 선택해도 됨 Understanding Types 다트는 type-safe 언어이다. 다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다. 여기서 타입 안전성이란? 프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념 Da..
never 타입을 굳이 쓸일은 없을 수 있지만 개발하다가 나오면 어떤 건지는 알기위해..! never 키워드에 대해서 배워보자 never 란 함수에 void 타입을 붙이듯 return type 으로 쓸 수 있다. 예를 들어 다음과 같다 function myFunc() :never{ } myFunc 이라는 함수는 다음을 만족한다 1. return 을 하면 안된다 2. 함수에 endpoint 가 없어야한다 (둘이 같은 얘기이기는 하다) 여기서 endpoint 가 없어야한다는 것은 함수실행이 끝나지 않는 것이다. while(true) 때문에 함수 실행이 끝나지 않는.. 그런 예시를 생각해보면 되겠다. function 함수() :never{ throw new Error('에러메세지') } 위의 예시를 보자면 t..
rest parameter 먼저 rest parameter 에 대해서 간단히 짚고 넘어가자 function PrintNumArr(...a){ console.log(a) } PrintNumArr(1,2,3,4,5) 위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면 그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다. [LOG]: [1, 2, 3, 4, 5] 그럼 rest parameter 의 타입지정은 어떻게 할까? rest parameter 의 타입지정 array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다. 아래와 같다 function PrintNumArr(...a:number[]){ console.log(a) } Pri..
이전에 type alias 를 이용해서 타입을 변수처럼 저장해 사용하는 방법을 배웠다. 추가로, object 에 타입을 지정할 때 interface 라는 키워드를 이용할 수도 있다. interface interface Student{ name: string } interface Teacher{ name: string, age: number } let 학생: Student = {name:'kim'} let 선생: Teacher = {name:'kim', age:20} interface 는 type 키워드 처럼 사용할 수 있는 키워드이다. interface 의 장점은 extends 를 할 수 있다는 것이다. 예를 들어 위의 코드를 아래와 같이 쓸 수도 있다. interface Student{ name: st..
필드값 타입지정 class 내부에는 object 가 사용할 수 있는 필드값을 만들 수 있다. class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 예를 들어 Person 이라는 class 에 0 값을 가지는 data 라는 걸 만들어놓으면 john 이나 kim 에서 이 data 라는 필드를 사용할 수 있다. 이 때 이 data 라는 필드에 타입을 지정해준다면 다음과 같다 class Person { data :number = 0; } 하지만 굳이 쓰지 않아도 자동으로 number 타입이된다. 타입스크립트는 자동으로 타입지정을 해주기 때문! co..
strictNullCheck 옵션 켜기 tsconfig.json 파일에 들어가서 strict 옵션을 true 로 켜준다. strictNullChecks 만 켜줘도 된다. (strict 안에 strictNullChecks 가 들어가 있다) 변수를 조작하면서 null 인지 체크할 때 유용하다 HTML 파일 script 태그에 변환된 index.js 를 적어서 연결해준다. HTML 찾아 변경하기 h4 제목을 다른 글자로 변경하려고 한다. 위 코드처럼 일단 '제목' 이라는 변수에 document.querySelector 를 통해 title 이라는 id 를 가진 object 를 가져온 후, narrowing 을 통해 null 이 아닌지 체크후에 null 이 아니라면 제목.innerHTML 을 '반갑소' 로 바꿔줬..
함수 type 을 저장하기 함수에 들어갈 파라미터와 return 값의 타입들도 지정할 수 있다고 배웠는데, 이 함수의 타입도 type alias 로 저장해서 사용할 수가 있다. type NumOut = (x : number, y : number ) => number ; 위는 예시이다 NumOut 이라는 타입을 만든건데, 이 타입은 함수를 위한 타입이다. number 타입의 x 와 number 타입의 y 를 파라미터로 받아야하고, return 값이 number 타입이어야한다는 의미이다. 그래서 이 NumOut 이라는 type alias 를 함수에 직접 사용해보는 예시는 아래와 같다 type NumOut = (x : number, y : number ) => number let ABC :NumOut = fu..
지금까지 어떤 변수에 타입을 지정하는 방법에 대해서 배워왔다. 그런데 어떤 변수에 '어떤 값' 이 들어가도록 아예 제한할 수도 있다. const 를 쓸 수도 있겠지만, 내가 어떤 변수에 들어갈 수 있는 값을 2~3개 지정할 수도 있는 것이다. 이럴 땐 Literal Type 을 선언하면된다. Literal Type string, number... 뿐 아니라 일반 값도 타입이 될 수 있다. let name :'홍길동'; 예를 들어서 위처럼 name 이라는 변수에는 '홍길동' 이라는 글자만 들어갈 수 있는 것이다. 이렇게 특정 값만 가질 수 있게 제한을 둘 수 있는 타입을 literal type 이라고 한다. 더 엄격하게 만드는 개념이다. 꼭 1개가 아니어도 된다. let name :'홍길동'|'서다원'; ..
Type Aliases 타입 정의가 너무 길면 타입을 변수에 담아서 쓸 수 있다. Type alias 라고 한다. 여기서 alias 는 '별명' 이라는 의미이다. let 동물 :string | number | undefined; 예를 들어서 위처럼 동물 이라는 타입이 복잡하면 이걸 따로 빼서 변수에 담아쓸 수 있다. type Animal = string | number | undefined; let 동물 :Animal; 이렇게 말이다. 타입을 변수처럼 만들어 쓰는 alias 문법이며, 대문자로 적는게 일반적이다. object 타입 저장하기 type 사람 = { name : string, age : number, } let teacher :사람 = { name : 'john', age : 20 } 위처럼 ..
function plusOne(x :number | string){ return x + 1 //에러남 } 위와 같은 함수가 있다고 보자 x 파라미터는 string | number 와 같은 union 타입인데 숫자 1 을 더하기에는 x 가 string 인지 number 인지 애매하기 때문에 에러를 내게 된다. 따라서 이럴 땐 타입을 하나로 narrowing 해주거나 assert 해주거나 하면 된다. narrowing 에 대해서 먼저 알아보자 typeof 를 이용한 Type Narrowing 타입 narrowing 이란 if 문으로 타입을 하나로 정하는 것을 말한다. function plusOne(x :number | string){ if (typeof x === 'number') { return x + 1..
참고로 수업 들으면서 아래 사이트의 ide 를 이용해 코드를 작성하고 실행시켜보면서 학습했습니다! https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 함수는 두 군데에 타입 지정이 가능하다. 파라미터 return 값 function 함수(x :number) :number { return x * 2; } 그래서 위처럼 x 라는 파라미터를 number 라는 타입으로 지..
이번 프로젝트 로그인 부분을 내가 담당하게 됐는데, 로그인 방식 중에서 카카오 로그인을 구현하게 됐다. 리액트 카카오 로그인에 관련해서 정리된 글들이 많아 개발할 때 참고하면서 진행할 수 있었다. 하지만 까먹지 않고자 한번 정리하려 포스팅해본다. 방식 프론트엔드와 백엔드가 협업하면서 카카오 로그인을 구현하는 방식이 다를 수 있다. 나는 이런 방식으로 했다- 라는 정도로 참고하시면 좋을 것 같다. 나는 프론트엔드 담당이어서 프론트엔드 입장에서 서술해보려고한다. 프론트엔드에서 카카오 로그인 요청 / 인가 코드 받기 요청을 한다 카카오에서 redirect url 로 인가코드를 프론트엔드로 보내준다. 받은 인가코드를 백엔드에게 보낸다. 백엔드는 이 인가코드를 받아 처리해서 AccessToken 을 응답으로 프론..
로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다. 나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고 그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다. 전체 코드부터 보자 ... import { userInfoState } from "./recoil/atoms/userState"; import { useRecoilState } from "recoil"; function App() { const [userInfo] = useRecoilState(userInfoState); const isLogin = userInfo.isLogin; return ( {isLogin ? ( ) : ..
문제 프로젝트를 개발하면서 이렇게 여러개의 이미지 슬라이드를 구현할일이 생겼다. (백엔드랑 연동하기전이라 예시 데이터를 넣고 테스트하고 있었다.) 한번에 5개까지 보여줄 수 있도록 설정하고 데이터를 8~9개 정도 넣어놓고 테스트를 하고 있었다. 이때 settings 는 다음과 같았다. const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 3, arrows: true, // autoplay: true, }; 근데 예시 데이터를 2개로 줄이고 테스트하니 다음과 같이 이상하게 중복되어 나온다. 해결 구글링을 해보니까 나같은 문제를 겪는 사람들이 있는 것 같아 보였다. react-slick 레포지터리..
문제 axios 로 post 요청을 보내는데 자꾸 api 호출을 두번하는 문제가 생겼다. 다른 api 면 모르겠지만 내가 사용하는 api 는 두번 호출하면 중복된 code 여서 유효한 code 로 동작하지 않았기 때문에 문제를 해결해야했다. 해결 구글링을 하다보니 src/index.js 에서 React.StrictMode 를 지워보라는 말에 따라했더니 중복 호출을 막을 수 있었다.
개발을 하다가 날짜를 선택하는 기능을 구현할 일이 생겼다. 어떤걸 쓸까 찾아보는데 react-datepicker 라는 게 있었다. 근데... 좀 못생겼다? 물론 커스텀을 할 수는 있지만 지금 당장은 커스텀 없이도 좀 더 예쁜걸 사용하고 싶었다. 그러다 mui x 라는 걸 찾았다. https://mui.com/x/react-date-pickers/date-picker/ React Date Picker component - MUI X The Date Picker component lets the user select a date. mui.com 대충 이런식으로 생겼다. 설치 npm install @mui/x-date-pickers // Install date library (if not already ins..
union type 변수에 들어올 값이 string 또는 number 이라면 아래와 같이 작성이 가능하다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 괄호를 작성하게 되면 A | B | C 처럼 여러개를 작성할 수도 있다. 저렇게 할당하는 순간 타입은 string 또는 number 중 하나로 변한다. array 나 object 를 만들 때 union type 을 쓰는 법에 대해서 알아보자. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 하지만 다른 점이 있다면 변수에 정의된 union 타입은 할당을 하면..
기본 타입 기본 타입을 정리해보자 string, number, boolean 등이 있다. 저렇게 변수 옆에 : 를 붙이고 오른쪽에 타입을 작성해주면 된다. (null, undefined 도 있다) let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼여부 :boolean = false; array 와 object 여러 자료를 한번에 저장하고 싶을 때 array 나 object 를 쓴다. 예를 들어 string 이 들어가는 array 를 작성하고 싶으면 다음과 같이 작성한다. let 회원들 :string[] = ['kim', 'park'] 만약에 string 만이 아닌 string 또는 number 가 들어가는 array 를 작성하고 싶다면 다음과 같이 작성하는데 이건..
tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성한다. 여기에는 ts 파일을 js 파일로 변환할 때에 어떻게 변환할지 세부설정을 작성할 수 있다. { "compilerOptions": { "target": "es5", "module": "commonjs", } } target : ts 파일을 어떤 버전의 js 로 바꿔줄지 정하는 부분 module : js 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 부분 (예를 들어 commonjs 는 require 를 쓰고, es2015 는 import 를 쓴다) 그 밖에 추가로 넣을 수 있는 것들이 몇가지 있는데 다음과 같다. { "compilerOptions": { "target": "es5", "modul..
실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다. socket.io 라이브러리를 설치해서 한번 사용해보자. 사용 방법 npm install socket.io npm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다. (const app = express() 보다 아래에 위치해야한다.) 그리고 app.listen 코드를 http.listen 으로 바꿔준다. 이전에는 express 를 이용해서 서버를 띄웠던 걸 http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다. socket.ejs 라는 파일을 하나 새로 만든다. https://cdnjs.com/libraries/socket.io socket.io - Librarie..
채팅기능을 만들어보자 채팅메세지도 결국 게시물 발행기능과 똑같다. 새로운 점이 있다면 채팅메세지는 채팅방 게시물에 종속이 되어야한다. 댓글 만드는 법 댓글은 댓글 collection 을 하나 새로 만들어서 모든 댓글을 저장하면 된다. 하지만 그러면 그 댓글들 하나하나가 어떤 글에 달린 댓글인지 확인할 수 없게될 것이다. 때문에 모든 댓글은 부모 게시물이 무엇인지 를 명시해야한다. 따라서 게시물 collection 과 댓글 collection 을 만들고 댓글 1의 부모게시물은 게시물 2고, 댓글 2의 부모 게시물은 게시물 4이다... 이런식으로 collection 끼리 관계를 맺어야한다. 채팅방 만드는 POST api 만들기 채팅 버튼을 누르면 chatroom 이라는 collection 에 document..
원티드 프리온보딩 챌린지 7월 과제로 CSR과 SSR의 이해란 주제로 포스팅을 하게되었다! 1. CSR이란? 이것의 장단점은 무엇인가요?CSR이란 Client-side Rendering 의 줄임말이다.말 그대로 '클라이언트 쪽에서 렌더링을 한다' 라는 말인데,여기서 클라이언트는 브라우저이기 때문에 브라우저가 렌더링을 처리하는 방식이다. 서버에서 HTML을 받아와서 JS주소를 서버로 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다.위 그림은 CSR 의 순서이다.유저는 웹사이트에 요청을 보낸다.Edge Caching 은 HTML 파일과 JS에 접근할 수 있는 링크를 빠르게 보낸다브라우저는 HTML, JS를 다운로드 받는다.브라우저는 JS를 다운로드 받는다.모두 다운로드가 되면 JS가 실행되고, 데..
https://stack94.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4Kakao-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 위의 글을 참고하면서 따라해보았다. https://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao..
통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다. 내가 사용한 건 react-chartjs-2 ! 구글링을 해보다가 유명하다고 해서 한번 써봤다. 사용방법을 정리해봐야겠다 사용방법 npm install --save chart.js react-chartjs-2 https://react-chartjs-2.js.org/examples Examples | react-chartjs-2 List of react-chartjs-2 usage examples. react-chartjs-2.js.org 난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다. 예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다. App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔..
상태관리 라이브러리 없이 프로젝트를 하다가 아, 이건 안되겠다. 전역으로 상태관리해야겠다! 싶은 부분이 있었다. 근데 오늘 아침 다른 개발자분 티스토리 피드를 보다가 Recoil 을 추천하시는 글을 읽고 이 참에 Recoil을 써보자 생각했다. 설치 먼저 설치한다 npm install recoil Recoil을 사용하기 위해서는 애플리케이션의 최상위 컴포넌트에 컴포넌트를 사용해야한다. index.js 의 파일을 다음과 같이 수정해준다. index.js // index.js import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM..
채팅을 하다보면 내가 직접 스크롤을 내리지 않아도 새로 추가된 메세지에 대해서 아래로 자동 스크롤이 된다. 이 기능을 구현해보려고 한다. 방법 useRef, useEffect 훅을 사용하여 구현했다. const scrollRef = useRef(); useRef 훅을 사용하여 스크롤할 요소에 대한 scrollRef 라는 것을 만든다. 이 scrollRef는 스크롤할 컨포넌트를 가리키는데 사용된다. useEffect(() => { scrollToBottom(); }, [isTyping]); const scrollToBottom = () => { if (scrollRef.current) { scrollRef.current.scrollTop = scrollRef.current.scrollHeight; } };..
문제 채팅 리스트들을 보여주고, 채팅을 삭제할 수 있는 기능을 구현 중이었다. 채팅 리스트를 클릭하면 채팅을 확인하러 상세페이지로 이동하고, 삭제 버튼을 누르면 채팅 기록이 삭제가 되어야한다. {chats.map((chat) => ( handleChatItemClick(chat.chatId)} className="border-2 border-t-gray-300 p-5 flex justify-between text-sm" > {/* 채팅 생성 시간 */} {formatDate(chat.created_date)} handleDeleteOneChat(chat.chatId)} className="px-4 py-2 overflow-hidden" > 삭제 ))} 근데 삭제 버튼을 눌렀을 때 삭제가 되긴하지만 동시에..
