분류 전체보기

📌프로젝트 소개 ✅ 식물을 키우고 싶지만 어떤 식물이 나에게 맞는지 모르는 사람들!!✅ 여러 식물들을 한꺼번에 비교해보고 고르고 싶은 사람들!!을 위해 제작하게 된 웹이다. 🤗 ※ 프론트엔관련 기술이 담겨 있는 회고록입니다. 📌프로젝트 시작! react로 사용한 프로젝트, next.js랑 고민을 많이 했는데 next.js 도 react 기반으로 작동한다는 점을 고려하여, react 에 대한 기본적인 이해를 더 깊게 다지고자 react 를 선택하기로 결정했다.  🧐배운것✅ 의존성 배열(Dependency Array) 과 조건부 할당을 이용한 검색 기능 사용자가 입력한 검색어를 보내고navigate("/search_result", { state: { plants: filteredPlants, s..

프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다.  📌 MSW ?백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.  📌MSW 설치 방법 npm install msw --save..

📌lambda 함수란? 파이썬에서의 lambda 함수는 익명 함수를 생성하기 위한 방법입니다. 즉, 이름 없이, 한 줄의 간단한 코드로 함수를 정의할 수 있습니다. lambda 함수는 간단한 연산이나 다른 함수에 인자로 전달되는 함수 등을 빠르게 정의할 때 유용하게 사용됩니다. lambda arguments: expression 여기서 arguments는 함수로 전달되는 인자들을 의미하고, expression은 해당 인자들을 사용해 수행되는 식을 의미합니다. 이 식의 계산 결과가 lambda 함수의 반환 값이 됩니다. 단, expression은 단일 식만을 포함할 수 있으며, 복수의 명령이나 조건문, 반복문 등을 직접 포함할 수 없습니다. 그러나 식 내에서는 조건부 표현식을 사용할 수 있습니다. 예시를 ..

마운트(생성) ✔️constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드✔️getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.✔️render : 컴포넌트를 렌더링 하는 메서드✔️componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드이며, 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행한다.업데이트(갱신) ✔️getDerivedStateFromProps : 마운트 단계와 동일하며, 컴포..

📌React fetch 방법 import { useEffect,useState } from "react"; export default function tomato() { const [isLoading, setIsloading] = useState(true) const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch("https://nomad-movies.nomadcoders.workers.dev/movies"); const json = await response.json(); setMovies(json); setIsloading(false); } useEffect(() => { g..

✅Layouts Next.js는 처음에는 layout 컴포넌트에 있는 export된 디폴트 컴포넌트를 렌더링한다. react규칙으로 내부에 있는 컴포넌트들은 자동으로 children이라는 props로 바뀌게 된다. 레이아웃은 중첩이 가능하다. 제일 하위에 있는 폴더로 들어가면 모든 상위에 있는 layout다 출력되는 것이다. 제일 상위에 있는 폴더는 하위에 있는 폴더가 다 노출되지 않는다. ✅(폴더이름) route groups은 폴더 이름을 괄호로 묶어줘야 한다. 괄호로 묶은 폴더는 url에 전혀 영향을 미치지 않는다. routes를 그룹화해서 logical groups으로 만들 수 있다. 이것을 사용함으로써 일부 레이아웃을 선택하거나 선택 해제하여 복잡한 일을 할 수 있다. ✅Metadata 웹의 he..

✅문제설명게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, ..

✔️Optional Chaining(옵셔널 체이닝)이란? Optional chaining은 객체 체인마다 속성 값이 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성에 접근할 수 있다. Optional chaining 연산자 ?. 를 객체 속성에 접근하거나 함수 호출에서 사용할 때, 객체 속성 값이 nullish(`null` 또는 `undefined`)이거나 함수가 없다면, 연산자 ?. 왼쪽 표현식은 `undefined`로 단락(short-circuiting)되어 에러가 발생하지 않는다. 이렇게 중첩된 객체에서 존재하지 않는 특정 property를 조회할 때 오류 없이 항상 undefined를 반환하고 넘어가게 해주는 문법이 optional chaining이다. 따라서 값이 ..