전체 글
-
냅다 시작하는 리액트 쿼리 (예제편)React.js, Next.js 2022. 12. 27. 21:53
냅다 시작하는 리액트 쿼리 (예제편) $ npx create-next-app test --typescript $ yarn add axios @tanstack/react-query _app.tsx // 🗂/pages/_app.tsx import React from 'react'; import type { AppProps } from 'next/app'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; function MyApp({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); return ( )..
-
예제로 배우는 react contextReact.js, Next.js 2022. 12. 18. 15:13
Prerequisite next.js typescript react-context 들어가기에 앞서 Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데요, 꼭 전역적일 필요는 없습니다. Context를 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋습니다. - velopert 상태관리와 react context의 차이? 상태 관리 라이브러리는 상태가 수정되면 관련 컴포넌트만 다시 렌더링됩니다. 이는 업데이트로 인해 모든 컨텍스트 컨슈머(Consumer) 및 그 하위 항목이 다시 렌더링되는 Context API와는 대조..
-
재택 근무 6주 회고끄적끄적 2022. 12. 17. 20:48
재택근무를 하게 된 계기? 우리 회사는 시리즈 B 투자 이후, 공유 오피스를 벗어나 자사 사무실을 얻었다. 공유 오피스를 벗어난 첫 자사 오피스였기 때문에, 인테리어 또한 많은 논의를 거친 끝에 작업하게 되었다. 우리 회사는 '아트 테크'라는 도메인을 가지고 있는 회사여서 그런지 가구 하나하나, 인테리어 하나하나에 신경을 써주셨다. 앞으로 계속 함께할 사무실이기 때문에 좋은 인테리어 결과를 얻고자 '2보 전진을 위한 1보 후퇴'의 개념으로 인테리어를 마칠 때까지 6주간 재택근무를 하게 되었다. 좋은 점 1. 잠을 더 잘 수 있어요 우리 회사는 기본적으로 10:00 - 19:00의 출근 시간이 있지만, +- 1시간씩은 자유롭게 이동이 가능하다. 나는 보통 9시 40-50분 정도까지 회사를 가는 것을 선호한..
-
매우 흥미로운 ChatGPT 사용기끄적끄적 2022. 12. 16. 23:47
들어가며 요즘 ChatGPT 라는 머신 러닝 기반의 open ai가 개발자들 사이에서 매우 핫하다. 사내에서도 많은 개발자들이 재밌는 질문을 하고 답을 공유해주셨는데, 코드의 품질이 생각외로 높아서 나에게도 매우 흥미롭게 다가왔다. 이번 주 동안 개발하면서 스택오버플로우에 할법할 질문이나 헷갈리는 개념들을 빠르게 질문해보고 결과물을 공유하고자 가져왔다. OpenAI API An API for accessing new AI models developed by OpenAI beta.openai.com OpenAI 구글 계정 연동 이후 ChatGPT에 들어간다면 사용이 가능하다. 질문 리스트 빠르게 보기 differences initialize function with usecallback or not giv..
-
REST API 바로 알기JS,TS 2022. 10. 23. 20:46
REST API 배워야 하는 이유를 찾자면? '저는 REST API를 바탕으로 백엔드 서버와 ... 어쩌구' 위와 같은 말들을 나의 자기소개서에 많이 적어냈다. 대충 무슨 느낌인지는 알 것 같았다. HTTP 요청을 보낼 때, 백엔드와 합의하에 HTTP 요청을 맞춰 HTTP REQUEST를 보내는 느낌으로 얼추 이해하고 있었다. 이번 장을 통해 REST API가 뭔지, RESTful 한 API는 뭔지에 대해 정확히 알고 갈 수 있을 것이다. REST란? REST(REpressentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용..
-
프로미스(Promise) 바로 알기JS,TS 2022. 10. 22. 22:35
프로미스 왜 배워야 할까? new Promise ? *new는 뭐고 Promise는 뭐야 ... return은 또 왜 붙여... * ... async/await(?) 이거 쉽네..! 이걸로 그냥 써야지 필자는 이런식으로 비동기 프로그래밍에 대한 이해를 덜 된 상태에서 ES6의 프로미스 문법을 사용하는 것이 아닌, ES8 의 async await로 바로 넘어가 작업을 시작했었다. async await를 기반으로 axios를 사용했을 때 너무 찰떡이라 오히려 필요성을 못느꼈을 지도 모른다... 하지만 콘솔창에서 [[object Object]], Promise 등의 로그가 찍힌 것을 보고 해석을 할 수 없어 그냥 구글링으로 때려 맞추는 식의 코딩을 진행하였다. 프로미스에 대한 이해가 없거나, 부족하다면 ful..
-
Next.js - 다양한 SNS 플랫폼에 대응할 수 있는 SEO 도입하기React.js, Next.js 2022. 10. 21. 21:12
현재 상황 제일 상위 (public) 디렉토리 Head 에 걸어놓은 대표 meta 태그로 인해, 특정 SNS에서 설정한 description이 노출되지 않은 상황입니다. 디스코드 / 슬랙 디스코드와 슬랙 모두 트위터 태그의 영향을 받습니다. 하지만 디스코드의 경우에는 하위 페이지에 대한 메터태그가 노출되지 않는 상황이고, 슬랙은 노출되는 상황입니다. 카카오톡, 인스타그램, 페이스 북의 경우에는 모두 의도대로 노출되고 있으나 한국 외에 사용하고 있는 SNS에 대한 SEO도 신경 써야 하기 때문에 Next.js 프레임워크 도입부터는 이전과 다른 방향으로 적용할 예정입니다. 플랫폼마다 적용되어 미리보기로 보이는 메터 태그의 정보가 다양하기 때문에 모든 플랫폼에서 원하는 미리보기를 만들 수는 없습니다. 하지만,..
-
이벤트 루프 동작 원리JS,TS 2022. 10. 20. 20:57
다음 코드를 보고 바로 답을 할 수 있다면, 이 글을 읽지 않으셔도 좋습니다. console.log('A'); setTimeout(() => console.log('B'), 2000); setTimeout(() => console.log('C'), 3000); setTimeout(() => console.log('D')); setTimeout(() => console.log('E'), 0); Promise.resolve().then(() => console.log('F')); console.log('G'); 다음 코드를 실행시킨다면 어떤 순서로 로그를 찍는지와 이유에 대해 서술하시오 A G F D E B C 동기, 비동기 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 을 동..