오늘 성공한건 카테고리를 눌렀을 때 그 카테고리를 가진 JSON 배열을 띄워주는 것이었는데, 처음 해본건데 돼서 신기했다. const menuArray = [ { id: 1, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 2, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 3, category: "에이드", name: "사과에이드", price: "5,200원", imgUrl: Americano, }, { id: 4, category: "커피", name: "아메리카노(ICE)", price: "4,100원"..
이전에 Node.js + Express 환경에서 Mock data를 만들고 API를 설계하는 일까지 해봤다. 그래서 이번에는 그렇게 설계한 API를 클라이언트 단에서 API 통신을 통해 받아온 뒤 뿌려주는 것에 대해 포스팅해보려고 한다. 우선 async-await 함수에 사용할 fetcher 함수부터 만들어보자. 1. fetcher.js import axios from 'axios'; axios.defaults.baseURL = 'http://localhost:8000'; // 혹은 본인의 서버 URL const fetcher = async (method, url, ...rest) => { const res = await axios[method](url, ...rest); return res.data }..
CRA + JS로 코딩을 마치고 CRA + TS로 바꾸는 과정에서 자꾸 저 에러가 떴다. 한두 군데도 아니고 여러 군데에서 떠서 구글링을 좀 해봤고, 금방 결과를 찾을 수 있었다. 바로 아래 사진에서 Select TypeScript Version을 선택한 뒤 Use Workspace Version을 클릭하는 것.. 나도 그렇게 해결했다면 이런 포스팅을 작성하진 않았을 것이다. 왜냐면 난 Use Workspace Version이 없었기 때문이다. 그래서 vscode typescript use workspace version not found 이런 방식으로 찾아봤으나 해결책을 구하지는 못했고, 그래서 어떻게 하지 하다가 tsconfig.json 파일을 수정함으로써 해결할 수 있었다. CRA를 이용해서 타입스..
Next.js에서는 전역적으로 적용하는 글로벌 스타일링을 할 수 있다. 기본적으로 TypeScript 템플릿을 가진 create next app을 하면 있긴 하지만, Next.js가 가진 속성이므로 한번 포스팅해보려고 한다. 우선 CSS 모듈을 적용시키는 것부터 보고, 전역적으로 적용시키는 글로벌 스타일링을 보자. layout.tsx import styles from "./layout.module.css"; import { FC } from "react"; interface Props { children: any; } const Layout: FC = ({ children }) => { return {children}; }; export default Layout; layout.module.css .co..
Next.js에서 사전 렌더링을 하는 방법은 크게 두 가지가 있다: Static Generation과 Server Side Rendering(SSR)이 그것이다. 1. Static Generation 유저의 요청(request)이 있기 전에 렌더링 대상이 되는 페이지를 사전에 렌더링해야되는 경우 사용한다. 보통 build time에 사전 렌더링을 해둔다. 1-1. 데이터가 없는 경우의 Static Generation 데이터가 없는 경우는, 서버로부터 fetch해 올 어떠한 데이터도 없기 때문에 Next.js에서는 build time에 HTML 형태로 사전 렌더링을 해둔다. function About() { return About } export default About 1-2. 데이터가 있는 경우의 St..
Next.js로 직접 프로젝트를 진행해보면서, CRA에 비해 어떤 장점을 갖고있는지 나열해보고자 한다. 생각날 때마다 업데이트 할 예정 1. pages 내부에 파일을 만들면 그게 곧 페이지로 연결이 된다. (Next 라우팅 시스템) /pages/about.tsx를 만들었다고 해 보자. 이 경우 기본 URL이 localhost:3000일 때 localhost:3000/about을 통해 바로 about 페이지로 이동할 수 있다. CRA에서는 App.tsx에서 전부 하나하나 import해온 뒤 불러와야 한다. 2. 코드 스플리팅을 기본으로 제공한다. 코드 스플리팅이란.. React를 사용해서 엄청나게 많은 컴포넌트를 가진 웹을 만들었을 때, 한꺼번에 전체를 다 불러오는 것이 아니라 특정 페이지에 들어갔을 때 ..
[pid].tsx import { useRouter } from "next/router"; const Post = () => { const router = useRouter(); const { pid } = router.query; return Post: {pid}; }; export default Post; Next.js에서 기본적으로 router 설정을 useRouter를 한 뒤에, 저렇게 pid를 라우터의 쿼리로 설정할 경우.. 예를 들어 1. '/post/abc' 라우트인 경우: { "pid": "abc" } 의 쿼리 객체를 가진다. 2. '/post/abc?foo=bar' 라우트의 경우 { "foo": "bar", "pid": "abc" } 의 쿼리 객체를 가진다. 그러나, 쿼리 파라미터를 동일..
글이 너무 길어질 것 같아서 나눠서 포스팅한다. 채널과 DM 목록을 만들었으므로 이제 각 페이지 내부에서 실질적으로 사용되는 채팅을 구현하기 전 먼저 채팅 박스와 내부 스타일링 먼저 구현해본다. 그 이후에 콘솔에 내가 작성한 DM을 띄우는 것까지 해볼 예정이다. 이전과 마찬가지로, 코드부터 보고 시작한다. 1. DM 페이지 내부 1-1. 프로필(gravatar 사용) GitHub를 이용해본 사람이라면 이러한 이모티콘을 많이 봤을 것이다. 이 이모티콘은 gravatar에서 제공하는 것으로, 라이브러리를 다운받아서 import해오면 누구나 손쉽게 사용할 수 있다. gravatar.url(email, options); 이런식으로 불러와서 사용할 수 있다. 이메일은 필수 옵션이다! {userData.nickna..
나는 팀원들과 프로젝트를 하거나 단순 의사소통을 할 때 특히 슬랙으로 소통하는 일이 잦아서 슬랙을 자주 사용한다. 물론 뭐 클론코딩이지만, 내가 사용하고 있는 서비스를 직접 이렇게 구현해보고 있다는게 신기했다. 오늘 포스팅할 내용은 간단하게 채널과 DM 섹션이다. 현재 DM에 사용자로 등록되어있는 'a', 'aa', 'a', 'a', 'a' 이렇게 5개의 계정은 각각 로그인 및 회원가입 페이지를 만들 때 임시로 만들었던 계정들이다. 회원가입을 하면 자동으로 DM 섹션에 추가가 되는 것이다. 사실 실제 슬랙에서는 이 워크스페이스에 사용자를 초대해야 DM 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..
클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 Slack에서 워크스페이스를 API통신을 활용하여 만드는 것이다. 우선 시작하기에 앞서 스타일링은 전부 Slack의 개발자도구에서 그대로 가져온 것이므로, 따로 말할 게 없다는 점을 밝힌다. styled-components를 사용하긴 했지만, 이마저도 결국 뭐 직접 짠 거는 아니니까.. 그냥 그러려니 하면 될 것 같다. 사실 중요하지도 않고. 간단해 보이지만, 이것을 만들기 위해서는 많은 함수가 필요하다. + 버튼을 눌렀을 때 모달을 불러오는 것이라든지, 모달의 우측상단 X 버튼을 눌렀을 때 모달이 꺼지는 것이라든지.. 우선 페이지와 컴포넌트로 나눠서 설명을 해야할 것 같다. 1. 컴포넌트 이..