반응형 분류 전체보기50 [취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 1편 (강의 추천) [취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 1편 (강의 추천) 1. 서론 나는 비전공자다! 전공은 요리였고 요리 쪽으로 꽤 오래 일하다가 국비지원을 통해 웹퍼블리셔가 되었다. (그때 나의 나이 29,,) 웹퍼블리셔 직무로 2년 조금 넘게 일 하다가 회사의 정리해고 이후 실업급여를 받으며 Javascript와 React를 독학으로 공부하여 현재는 한 회사에 React / Next.js / Zustand / React-query / Swagger 등을 이용하여 웹퍼블리셔와 프론트엔드의 사이 일을 하고있는 개블리셔 일을 하고 있다. 더 나아가 회사에서 요구하는 나의 포지션은 프론트엔드 개발자로서의 포지션이니까 프론트엔드개발자 취업후기로 작성하도록 하겠다. 이 글을 쓰게 된 이유는 국비지.. 2023. 3. 23. [Next] Next.js 외부 이미지 에러 (Error: Invalid src prop) Next.js 외부 이미지 에러 (Error: Invalid src prop) Next.js를 공부하던 중 강의 내용대로 따라 치고있는데 Error: Invalid src prop 블라블라~ 하고 에러가 떠 버렸다. 아무래도 아직 Next.js는 13버전 안정화 진행 중이다보니 구버전 코드를 볼 일이 많을 듯 하고 이러한 에러는 심심치않게 만날 듯 하여 기록하려고 한다. 해결 방법은 짱짱 쉬움 :D !! 해결방법 next.config.js 파일에 images domains를 설정 해주면 된다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { domains: ["d3t32hsnjxo7q.. 2023. 3. 1. [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo React Hooks 정리 중! 이번 파트에는 리액트 최적화를 위한 useMemo를 파헤쳐보자 :) 들어가기 전 다른 hooks들이 궁금하다면 하단으로 ㄱㄱ! useState https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 [React Hook] 리액트 훅의 .. 2023. 2. 28. [ESLint] ESLint - Function component is not a function declaration Error [ESLint] ESLint - Function component is not a function declaration Error .esLintrc.js 파일에서 에러 발생 error Function component is not a function declaration eslint (react/function-component-definition) 발생 사유 : 화살표 함수로 생성된 함수형 컴포넌트에 대한 오류 ... "react/function-component-definition": [, { // 기명 함수 옵션 "namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array, // 익명 함수 옵션.. 2023. 2. 27. [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API 매일 React hook에게 다져지는 내 자신이 안타까워 나는 오늘로서 hook을 잘게 다지기로 하였다. 뚜둔. 하지만 너무 길어서 최적화 부분은 Part.2로 넘겨야겠닫..ㅎ 🔗 useState useState는 매우 중요하기 때문에, 별도로 정리해놓은 포스팅이 있으니 그곳으로 ㄱㄱ https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95.. 2023. 2. 20. [Git] 깃의 기본에 대해 공부해보자. part2 (revert reset restore push clone pull pull-request stash) [Git] 깃의 기본에 대해 공부해보자. part2 (revert reset restore push clone pull pull-request stash) 오늘은 깃을 사용하다가 실수했을 때 복구하는 방법 (revert reset restore) 로컬저장소의 코드를 원격저장소로 올리는 방법 (push) 원격저장소를 로컬저장소로 가져오는 방법 (clone / pull) 브랜치를 병합하는 방법 (pull request) 커밋 할 때 함께 올리기 싫은 코드들을 잠깐 보관하는 방법 (stash)에 대해 정리해보려 합니다 후후후 드디어 나도 깃의 기본개념은 이해하고 있는 새럼,,🙋♀️ 깃허브 기본 파트는 바로 아래 요기로~~! https://heeeming.tistory.com/entry/Git-%EA%B9%8.. 2023. 2. 12. [Git] 깃의 기본에 대해 공부해보자. (깃 기본 명령어 branch merge delete) [Git] 깃의 기본에 대해 공부해보자. (깃 기본 명령어 branch merge delete) 두려워서 피하기만 했던 깃 공부를 해보려 합니다. 🧐 깃 기본 명령어 정리(git basic) git init git 저장소 초기화 방법 git add index.html(파일명) 선택한 파일을 스테이징 영역에 올린다. git add index.html style.css .. 이런식으로 파일을 여러개 추가 가능 git add . 이렇게 하면 모든 파일을 스테이징 영역에 올리겠다는 뜻 git commit -m ‘커밋할 메시지’ 커밋 메시지와 함께 깃 레파지토리로 파일을 올린다. git restore --staged index.html (파일명) 스테이징 된 파일을 취소하고 싶을 때 사용하는 명령어 git sta.. 2023. 2. 11. [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) 요즘 리액트 고급 기술들을 격파하고 있습니다. 그 중에 하나인 React Portal을 활용하여, Modal을 만들어봤습니다. Portal? Portal은 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다. 초기 세팅 //App.js import React, { useState } from "react"; import "./App.css"; import { MyModal } from "./MyModal"; import { ModalPortal } from "./ModalPortal"; co.. 2023. 2. 6. [React] React-query 정리 [React] React-query 정리 리액트를 공부하긴 했으나, API 관련 기술을 딥하게 다루거나, 서버 데이터 패치 라이브러리를 이용하여 데이터를 매핑한 경험은 거의 없거든요. React portal 부분과 React-query 부분은 아무리 봐도 이해가 되질 않아서 이번 주 내내 React-query에 대해 스터디하고 정리하였습니다. 원래는 노션에 정리하였습니다만, 블로그에도 같이 올려보려 합니다. (노션 진짜 최고다.. 내다버린 티스토리..ㅎ) 참고자료들 Codevolution의 강의를 따라서 실습해보고 공식문서(한글번역판 포함)보면서 이해하면 흠! 이런 거였꾼! 상태로는 돌입할 수 있는 것 같다. 🤔 (물론 이것은 돌머리인 내 기준쓰) Codevolution이 제공하는 스타터용 소스코드도 깃.. 2023. 2. 3. 이전 1 2 3 4 5 6 다음 반응형
