(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) React 개발 도구 설치React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다. 정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다. 현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다. React 개발 도구 활용하기 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다. Com..

시작하며...개발 동아리 DND 10기에서 내 마음 속 바다 라는 프로젝트를 진행하였다. DND 는 지난 기수인 9기 때 붙었고, 그 당시 완전 프론트엔드 개발 초짜였던 내가 팀 프로젝트를 통해 개발 구현 능력과 협업 능력을 기를 수 있어 도움이 많이 되었던 활동이었다. 그래서 다시 한 번 DND 활동을 하고 싶어 10기 내부지원을 통해 10기에 합격하게 되어 다시 한번 활동하게 되었다. (DND는 여름, 겨울 방학에 8주동안 활동하며, 최대 2번까지 활동가능하고 2번 활동하면 수료증이 발급된다.)  [DND 공식 홈페이지] DND프로젝트에 즐거움을, 모두에게 기회를www.dnd.ac "내 마음 속 바다" 프로젝트를 하면서 정말로 프론트엔드 개발에 대해 많이 배울 수 있는 활동이었는데, 8주간 DND 활..

[목차]시작하며...프로젝트 선정 이유 및 목적프로젝트 초기 세팅컨벤션깃허브내가 구현한 기능프로젝트 회고 시작하며...코드잇 스프린트 6기 - 파트2 에서 기초 프로젝트를 진행하였다. 프로젝트 주제는 제공된 4가지 중에서 하나를 선택해서 약 2주 동안 진행하고 주어진 주제에서 기본 요구사항은 지키면서 그 외 디자인이나 추가적인 기능을 추가할 수도 있었다. 프로젝트를 끝난지 시간은 조금 지났지만 내가 어떤 걸 맡았고 어떻게 구현했는지 상기시키고 정리하기 위해 회고록을 작성하게 되었다. 프로젝트 선정 이유 및 목적선정 이유주제는 총 4가지가 있었으며 가장 난이도가 높은 프로젝트가 바로 Fandom-k 라는 프로젝트였다.그래서 이왕 하는 김에 어려운 프로젝트를 하면 좋을 것 같고 다른 프로젝트와 비교해 보았..

시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하는 방법을 찾아보았다. React Developer Tools크롬 확장 프로그램 중에서 React Developer Tools 를 설치하고개발자 도구 -> Profiler -> 설정에서 Highlight updates when components render 를 클릭하면 어디서 렌더링이 발생하는지 시각적으로 확인할 수 있게 된다. 그러면 아래 사진처럼 렌더링이 일어나는 부분에 노란색 테두리가 생기게 된다.입력되는 부분은 내용인데 불필요하게 사진이 있는 곳까지 다시 렌더링 되어 사진을 화면에 보여주다 보니 깜박거리는 현상이 ..

1. 가운데 글자 가져오기[프로그래머스 1단계 - 가운데 글자 가져오기] 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이split 를 사용해서 배열로 만들어서 어렵게 풀었다,,너무 비효율적인 방법인 것 같다.function solution(s) { if (s.length % 2 === 0) { return s.split('').slice(s.length / 2 - 1,s.length / 2 + 1).join(''); } else { return s.split('')[Math.floor(s.length / 2)]; ..

React 에서의 SVG그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲 반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다! Next.js 에서의 SVGNext.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다. @svgr/webpack 설치SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.npm install @svgr/webpack 웹팩 설정 추가next.config.js 에 웹팩..

시작하기 앞서...React 에서 get 요청을 할 때, 로딩여부인 isLoading, 에러 객체 정보가 저장된 loadError, 데이터를 로드하는 함수인 handleLoad 를 반환하는 useFetch 라는 커스텀 훅을 만들어 사용하였다.import { useState } from 'react';const useFetch = (getData) => { const [isLoading, setIsLoading] = useState(false); const [loadError, setLoadError] = useState(null); const handleLoad = async (...arg) => { try { setLoadError(null); setIsLoading(tr..

React 의 한계리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 앱의 첫 로딩시간이 길고, SEO 가 좋지 않다는 단점이 있다. 그래서 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로드 시간이 오래 걸려 사용자 경험을 해치게 된다. Next.js 란?Next.js 는 React의 프레임워크로 React 애플리케이션을 더 쉽게 만들고 배포할 수 있는 다양한 기능을 제공한다. 예를 들어 리액트는 라우팅하기 위해 react router 나 tanstack router 등 여러 도구 중 하나를 선택할 수 있지만, 넥스트는 내장된 기술을 사용한다. Next...

시작하기 앞서...아무 생각 없이 이전 커밋 메시지를 복붙하고 조금 수정한 뒤, 푸시를 했는데 커밋 메시지를 잘 못 쓴 것을 발견했다. 😱사실 이런 경우가 생기면 외면했었는데(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 깃을 제대로 다뤄보고 싶어서 커밋 메시지를 수정하는 방식에 대해 글을 작성하게 되었다. 이미 push 한 commit 메시지 수정하는 방법1. amend--amend 옵션을 사용해서 마지막에 한 커밋(최근에 한 커밋)의 메시지를 수정하는 방식이다.git commit --amend -m "바꿀 커밋 메시지 내용"다음으로 --force 옵션을 사용해서 push 를 한다. 강제로 푸시하는 거라 해당 브랜치에서 같이 작업 중인 동료가 있다면 사전에 알려야 한다. (다행히 나는 혼자 작업 중)git push --fo..

시작하며...코드잇 스프린트 6기 파트 2 가 끝이 났다.파트2 동안 기초 프로젝트도 진행하고 개인적으로 시험준비도 해서 바쁜 하루를 보냈다. 그리고 벌써 반이나 지났다는 게 실감이 나지 않는다...😱 [파트 1 회고록] [코드잇 스프린트 6기] 파트 1(3월7일 ~ 4월6일) 회고시작하며...코드잇 스프린트 6기 파트 1이 끝이 났다.처음엔 국비 교육을 들을까 말까 고민했었는데 1회차 후기는 매우 만족스러웠고 빨리 다음 내용을 배우고 싶다. 팀 활동우선 코드잇 스프린jjang-j.tistory.com  프로젝트이번 파트 2땐 기초 프로젝트를 진행했다.정말 많은 일이 있었고 힘들었지만 😂 이것저것 경험할 수 있게 되어 전보다 성장할 수 있는 계기가 되었다. 프로젝트 회고는 새 게시물을 올릴 예정이지만..