react (13) 썸네일형 리스트형 [다시 풀어보는 토스 과제] 지난 토요일 토스에서 Next개발자 챌린지 과제가 있었는데, 나는 프론트엔드를 신청했고, 나는 2시간 이내에 풀지 못했고, 기능 없는 화면 구현만 해놓은 상태에서 끝났다. 이후 어제부터 시작해 다시 풀어보기로 했다. 푸는 중간 토스에서 제공한 노션 가이드 링크 공유가 사라져 테스트까지 해보지는 못했다. 무튼 풀긴 다 풀었다. (feat. gpt님) 생각보다 복잡했고, 토스에서 제공한 컴포넌트들이 없이 처음부터 구현했더라면? 더 막막했을듯 하다. 추후 제공된 컴포넌트들과 코드들을 해부해봐야 할 듯 하다. 내가 푼 코드들을 하나씩 뜯어보려고 한다. (주어진 과제는 github에 public으로 두거나 따로 코드를 외부로 유출하면 안되는 걸로 알기에, 기존 제공된 코드들은 생략하고 내가 작성한 코드들 첨부 예.. React - TypeError: Cannot read property 'map' of undefined .map 프로퍼티를 읽을수 없다? 먼저 위 코드에서 items는 comments.js에서 props로 넘겨받는 배열이다. 넘겨받은 배열 내의 요소들을 .map으로 매핑해주려고 하는데, 저런 에러가 발생. 찾아보니, props.items의 배열을 받아 .map을 돌리기 전에 React의 렌더링이 이루어지기 때문에 에러가 나는 듯하다. 그렇다면? props로 받는 items가 있는지 확인 후 매핑을 해주는 걸로! 혹은 && 연산자를 사용해도 된다. {items && items.map(...)} 이런 식으로...! 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.. 내가 아는 CSR과 SSR NextJS를 공부하는 주된 이유중의 하나가 SSR이다. 프론트엔드 구직 회사들의 채용조건들을 보다보면, NextJS가 있는걸 심심치 않게 볼 수 있다. 왜 그 회사들은 NextJS를 사용할까? 왜 CSR이 아닌 SSR일까? 이 물음에 답하기 전에 CSR과 SSR을 떠올려 보자.. CSR(Client Side Rendering) 클라이언트의 브라우저에서 렌더링을 담당하는 것. SSR(Server Side Rendering) 서버에서 렌더링을 담당하는 것. 렌더링은 뭐야??? 쉽게 말해 유저가 어떤 사이트에 들어 가면 서버에서 해당 사이트의 HTML 파일을 화면에 뿌려준다 이걸 렌더링이라고 한다. '서버'와 '클라이언트'의 대화를 통해 CSR를 한번 알아보자 1. User가 google(Website)에 .. See You Letter 회고 See You Letter라는 작은 프로젝트를 혼자 해 보았다. 타임캡슐처럼 편지를 작성하면 설정한 기간 이후에 수신자에게 메일로 전송이 되는 프로젝트이다. 프로젝트를 어떻게 시작했고 현재 어떻게 진행하고 있는지 회고! 내가 생각한 프로젝트 진행 순서는...!? 1. 무슨 프로젝트? 프로젝트 정하기 2. 비슷한 프로젝트 레퍼런스 찾아보기 3. 순서도 작성(설계) 4. 피그마로 프로젝트 디자인(와이어 프레임) 작업하기 5. 깃헙 이슈로 프로젝트 관리 6. 클라이언트 구현 7. 배포 + 추후 서버쪽 진행 1. See you letter 프로젝트 나중에 또봐! 라는 표현 "See you Later"에서 아이디어를 얻어 See you letter (편지 나중에 다시 보자!) 이름처럼 지금 쓰는 편지를 특정 기간.. Firebase - deploy Error(1) See you letter 개인프로젝트를 진행 중이다. 해당 프로젝트는 로그인 기능 + 편지 작성 후 특정 기간을 설정하면 기간 이후 기재된 메일에 편지형식으로 메일이 발송되는 프로젝트이다. client는 react를 사용했고, 서버는 firebase를 사용했다. firebase를 이용한 이유는, 로그인/회원가입 기능에서 편리하기 때문이다. 회원가입하는 고객의 데이터를 관리해주고 get, add 등 할 수 있다. 그리고 편지의 데이터를 firestore로 보내고, firestore의 extension인 triggerEmail(유/뮤료)를 사용하여 메일 전송기능을 만들었다. 여기까지는 만들어진 상태이고 추가적으로 해결해야 하는 부분은, 특정기간(6개월/1년/2년)기간 설정 시 해당 기간 이후 메일이 보내지.. 개인 프로젝트 SeeYouLetter-project(login page, styled-components) See you letter-project (login page / styled-components) 먼저 프로젝트는 react로 작업을 진행하고 있다. react로 JSX로 기본 뼈대를 만드는건 어렵지 않았다. 뼈대를 만들고, styled-components로 CSS 작업 후 기능구현(fire-base)을 이어서 할 것이다. 뼈대를 만들고, styled-components로 CSS작업을 했다. 아! 먼저 프로젝트를 진행 함에 있어서 모듈이나 라이브러리를 설치 할때, 반드시 CLI에서 현재 내 위치가 어디인지? 어디에 설치 할것인지 확인하자. 부모 디렉토리에 설치해서 "왜 안돼!?"하지 말고 그리고 각 컴포넌트를 구성하는 함수는 반드시 대문자로...! Login.jsx로 기본 구성을 만들었으니, 각 태그를.. eventHandle로 DropDown 만들기 import React, {useState} from 'react'; import "./styles.css"; export default function App() { const [choice, setChoice] = useState(); const fruits = ["apple", "grape", "watermelon", "carrot", "orange"]; const options = fruits.map((fruit) => { return {fruit} }) const handleFruit = (e) => { setChoice(e.target.value); } return ( {options} You choose "{choice}" ); } JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이.. 이전 1 2 다음
