분류 전체보기 (50) 썸네일형 리스트형 node-schedule은 어떻게 작동하는가? 올해 초 See You Letter 프로젝트(미래에 나에게 쓰는 편지)를 진행했고, React와 firebase로 프론트엔드 영역만 개발하여 배포했었다. 이후 Next.js와 Typescript로 마이그레이션하고 Next.js의 서버리스함수를 사용하여 서버 기능을 넣고자 했다. 예약 메일을 사용하자면 nodeMailer와 node-schedule이 필요했다. 작업을 진행하다 node-schedule은 클라이언트에서 받은 데이터를 특정 날짜에 실행하도록 한는 것인데, 그렇다면 특정날짜에 event가 실행되기 위해서 event가 완료될때까지 기다렸다가 응답해줘야 하나? 그렇다면 서버 자원의 낭비가 아닌가? 만약 그렇다면 서버리스 함수로는 작동이 가능한가? node-schedule는 어떻게 작동하는거지?의 질.. [다시 풀어보는 토스 과제] 지난 토요일 토스에서 Next개발자 챌린지 과제가 있었는데, 나는 프론트엔드를 신청했고, 나는 2시간 이내에 풀지 못했고, 기능 없는 화면 구현만 해놓은 상태에서 끝났다. 이후 어제부터 시작해 다시 풀어보기로 했다. 푸는 중간 토스에서 제공한 노션 가이드 링크 공유가 사라져 테스트까지 해보지는 못했다. 무튼 풀긴 다 풀었다. (feat. gpt님) 생각보다 복잡했고, 토스에서 제공한 컴포넌트들이 없이 처음부터 구현했더라면? 더 막막했을듯 하다. 추후 제공된 컴포넌트들과 코드들을 해부해봐야 할 듯 하다. 내가 푼 코드들을 하나씩 뜯어보려고 한다. (주어진 과제는 github에 public으로 두거나 따로 코드를 외부로 유출하면 안되는 걸로 알기에, 기존 제공된 코드들은 생략하고 내가 작성한 코드들 첨부 예.. [원티드]7월 프리온보딩 프론트엔드 챌린지(feat. Next.js) 마침 Next.js에 관심을 갖고 강의를 듣고 개인 프로젝트를 하고 있는 시점에서 원티드 프리온보딩 챌린지가 Next.js로 열렸다. 인원을 선별해서 진행하는지 잘 모르지만, 꼭 하고 싶다. 2주간의 몰입! 지금 시점의 나에게 너무나도 필요한 시간인듯 하다. 아래는 사전과제에 대한 내용이다..! CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR 웹 앱의 렌더링 방식을 말하며, 브라우저로부터 데이터 요청을 받은 클라이언트가 서버로부터 데이터를 받아 화면에 렌더링하는 형식을 말한다. 데이터를 클라이언트측에서 처리하는 것이며, 쉽게 말해 데이터를 서버로부터 받아서 브라우저에 뿌려주는 주체가 클라이언트이다. Server로부터 빈 HTML과 JS 데이터를 .. React - TypeError: Cannot read property 'map' of undefined .map 프로퍼티를 읽을수 없다? 먼저 위 코드에서 items는 comments.js에서 props로 넘겨받는 배열이다. 넘겨받은 배열 내의 요소들을 .map으로 매핑해주려고 하는데, 저런 에러가 발생. 찾아보니, props.items의 배열을 받아 .map을 돌리기 전에 React의 렌더링이 이루어지기 때문에 에러가 나는 듯하다. 그렇다면? props로 받는 items가 있는지 확인 후 매핑을 해주는 걸로! 혹은 && 연산자를 사용해도 된다. {items && items.map(...)} 이런 식으로...! Next.JS - Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior> Server Error Error: Invalid with child. Please remove or use . Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor Next.js로 작업을 하다보면 위와 같은 에러를 볼때가 있다. Link 컴포넌트를 사용시 태그를 없애거나, 태그에 legacyBehavior 프로퍼티를 써야 한다는 것. 프로젝트 내에서 Link가 사용된 컴포넌트 모두 변경 해주면 에러 해결! React - npm ERR! ERESOLVE could not resolve(npm install 시) next.js로 작업중 fetch() 대신 axios를 쓰기 위해 터미널에 npm install axios를 하니 나오는 에러.. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: swr@0.4.2 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! peer react@"^18.2.0" from next@13.2.3 npm ERR! node_modules/next npm ERR! next@"^13.2.3" from the root project npm ERR! peer react@"^18.2.0" from react-dom.. Next.JS - Parsing error: Cannot find module 'next/babel' ERROR : Parsing error: Cannot find module 'next/babel' Next.JS 프로젝트 세팅 시 아래 처럼 import에 빨간 줄이 그어진걸 볼 수 있다. 마우스를 올려 보면 Parsing error: Caonnot find module 'next/babel'... 이렇게 파싱 에러가 나온다. 해결 방법 : 1. 프로젝트 루트 폴더 내에 .babelrc 파일을 만든다. 그 안에 아래 코드를 입력한다. { "presets": ["next/babel"], "plugins": [] } 2. Next.JS 프로젝트 시작 자동으로 생성된 .eslintrc.json 파일을 열어 코드를 아래와 같이 수정한다. { "extends": ["next/babel","next/core-web.. 내가 아는 CSR과 SSR NextJS를 공부하는 주된 이유중의 하나가 SSR이다. 프론트엔드 구직 회사들의 채용조건들을 보다보면, NextJS가 있는걸 심심치 않게 볼 수 있다. 왜 그 회사들은 NextJS를 사용할까? 왜 CSR이 아닌 SSR일까? 이 물음에 답하기 전에 CSR과 SSR을 떠올려 보자.. CSR(Client Side Rendering) 클라이언트의 브라우저에서 렌더링을 담당하는 것. SSR(Server Side Rendering) 서버에서 렌더링을 담당하는 것. 렌더링은 뭐야??? 쉽게 말해 유저가 어떤 사이트에 들어 가면 서버에서 해당 사이트의 HTML 파일을 화면에 뿌려준다 이걸 렌더링이라고 한다. '서버'와 '클라이언트'의 대화를 통해 CSR를 한번 알아보자 1. User가 google(Website)에 .. 이전 1 2 3 4 ··· 7 다음
