바른소리

react로 만든 마투사 개인프로젝트를 1차 완료하고 gitHub pages를 이용해 배포하는 과정에서 에러가 발생했다. 🚨 에러 내용 내 프로젝트의 경우, 첫 시작이 로그인이어서 로그인 컴포넌트를 path="/" 경로로 두었다. "/" 경로로 들어가니 아무것도 렌더링되지 않아 빈화면만 나왔다. 🤔 에러 원인 라우터가 가리키는 "/" 경로는 https://jeongeum.github.io/ 이다. 하지만, 현재 프로젝트의 경로는 https://jeongeum.github.io/MyTodoSite 에 있다. 라우터가 이동하고자하는 경로와 실제 프로젝트의 경로 간에 차이가 있기 때문에 제대로 된 동작을 하지 못하고 있던 것이다. ✨ 에러 해결 해결 1 // 수정 전 // 🔥 이 부분 // 수정 후 // 🔥 ..

react로 만든 마투사 개인프로젝트를 1차 완료하고 배포한 후 다음과 같은 에러가 발생했다. openweather API를 이용해 현재 날씨의 icon 사진을 받아오는데 그 과정에서 발생한 문제인 것 같았다. 🚨 에러 내용 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked; the content must be served over HTTPS. 🤔 에러 원인 암호화 된 https 페이지에서 암호화되지 않은 http를 통해 요청을 하고 있기 때문에 발생하는 에러였다. 마투사는..

리액트로 다크모드 구현하기 다크모드는 다양한 브랜드들과 웹 사이트에서 이제는 거의 필수라고 봐도 될 정도로 흔하게 적용되는 기능 중 하나이다. 나 역시 휴대폰, 노트북, 채팅 어플 등에서 다크모드를 매우 애용하고 있고 프론트엔드 개발자라면 이제는 필수 기능이 된 다크모드를 구현할 줄 알아야한다고 생각해서 이번 개인 프로젝트 기획에 추가하게 되었다. 🤓 진행 순서 라이트모드, 다크모드 디자인 라이트/다크 theme.js 세팅 다크모드 구현 토글버튼 상태 관리 모드 유지 기능 🎨 디자인 (feat. Figma) 전체적인 라이트/다크 모드의 디자인은 위와 같이 만들어보았다. 각 컴포넌트들은 투명도를 주고 전체적인 색감은 파란빛이 돈다. 다크모드일 때에는 완전히 검은색이 아니라 아주 어두운 남색계열로 골랐다. ..

## 문제점 개인 프로젝트 (줄여서 마투사)를 진행하는데 투두를 등록하는 과정에서 오류가 발생했다. 분명 하나의 투두만 입력했는데 맨 뒷 글자가 추가로 등록되는 문제였다. onKeyDown 이벤트가 발생될 때 데이터가 추가되도록 코드를 구현했기 때문에 그 부분을 보기로 했다. // 등록 버튼 클릭 const onClickAddTodo = (e) => { if (inputValue && e.key === "Enter") { setTodoData((prev) => [ ...prev, { id: Date.now(), content: inputValue, isEdit: false, isDone: false, }, ]); setInputValue(""); } }; onClickAddTodo(e)} /> 아무리봐도..

개인 프로젝트 MyTodoSite (줄여서 마투사)를 진행하면서 트러블슈팅이 생겼다. 투두를 등록한 후 localStorage에 저장이 되는데 새로고침을 하면 localStorage가 전부 초기화 되는 상황이었다. 나는 당연히 투두 등록 할 때 로컬스토리지에 저장했고 초기 렌더링 시 로컬스토리지에서 데이터를 가져오기 때문에 문제없다고 생각했는데 아니었다. 내가 너무 안일했음을....😂 해당 트러블슈팅을 해결하는 과정에서 두가지를 알게되었는데 이것에 대해 정리해보려고 한다. 문제점 투두를 등록한 후 로컬 스토리지에 저장 하지만, 새로고침하면 로컬 스토리지에 저장된 데이터가 삭제되는 문제 발생 기존 코드 import React, { useEffect, useState } from "react"; import..

기업과제를 하면서 체크박스를 클릭하면 해당 li의 배경색이 바뀌는 기능 구현(선택된 효과)을 처음 해보았다. 어떻게 해야할지 머리로는 조금 알겠는데 코드 작성이 쉽게 되지 않아서 검색을하며 겨우 구현을 했다. 잊어버리지 않기 위해 정리를 해본다! ⚙️ 기능 App.js import { Table } from "./components/Table/Table"; function App() { const d = new Date(); const year = d.getFullYear(); let month = d.getMonth() + 1; let day = d.getDate(); if (month { if (isChecked) { return [...prevCheckedItems, item.no]; } else ..

가장 흔하지만 알차고 기본기를 익히기에 좋은 것 같은 투두리스트를 리액트로 만들어보았다. 자바스크립트로는 그동안 2-3번 정도 만들어본 것 같은데..🤔 리액트로는 강의 따라 친 기억만 나고 혼자 힘으로는 만들어본 기억이 없는 것 같았다. 이렇게 된거 간단한 투두 앱을 만들면서 리액트 기본기를 다시 잡고 싶다는 생각이 들었다! 🎨 디자인 기능 구현이 더 중요한 것 같아서 디자인은 초초초 깔끔하게✨ 해야지 생각했다. 피그마를 잘 다루지는 못하지만 아예 모르는 건 아니기에 피그마를 이용해 디자인 시안을 잡아보았다. (여백의 미-!ㅎㅎㅎ) ⚙️ 기능 기능 구현에 앞서서 컴포넌트를 기능별로 나누어 주었다. 공통 컴포넌트 (버튼, input)를 만들까 생각했는데 여기에서는 그정도까진 필요하지 않은 것 같다고 판단했..

기업과제를 하면서 'Link 태그를 써야하나..? 그냥 상황에 맞춰 컴포넌트에 데이터를 다르게 넘겨주면 되려나..?🤔' 헷갈렸던 순간이 있었다. 결과적으로는 후자의 방식으로 진행을 했지만 아무래도 라우터에 대한 이해가 부족하다고 판단되어 기본 예제를 통해 개념을 다시 잡아보기로 했다. React에서의 페이지이동 라우팅?🤔 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것. 예시 🛍 쇼핑몰 페이지를 만든다고 가정했을 때, 어떤 페이지들이 필요할까? 상품 목록 페이지 상품 상세 페이지 장바구니 페이지 마이 페이지 ... 등 이처럼 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리하면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템이다. ⚙️ 설치 npm install ..

이 글을 시작으로 몇 개의 포스팅은 기업과제를 하면서 부족하다고 느낀 개념을 정리해보는 글이 될 것 같다. 특히나 sticky의 경우, 웹 SQL 프로젝트를 할 때에도 sticky한 헤더를 만드는 것이 내 담당이었는데 그 당시에도 부족한 개념을 억지로 가져다 쓰려고만 하는 느낌이 들었었기에 이번에 쉽게 정리를 해보고자 한다. 🔮 position의 역할 화면상에서 어떤 요소의 위치를 어디에 줄지 결정해주는 속성 📍 position: sticky 일반적인 문서 흐름에 따라 배치 부모 요소를 기준으로 top, bottom, left, right를 통해 위치 선정 (필수) 최초 스크롤 시 일반적인 문서 흐름을 따라 움직이지만, 스크롤이 특정 지점에 도달하면 fixed처럼 고정 📍 position: fixed 일..

#2 OVERVIEW OF TYPESCRIPT C, C# 등의 코드는 코드를 컴파일해서 0101의 형태로 바꾸어주거나, 어셈블리 코드, 바이트 코드가 되기도 한다. 기계가 실행할 수 있는 다른 종류의 코드로 변환되는 것이다. 반면에 TypeScript는 작성한 코드가 JavaScript로 변환된다. 🤔 변환하는 이유? 브라우저는 TypeScript가 아니라 JavaScript를 이해하기 때문이다. 이때, TypeScript는 개발자가 실수를 하지 않도록 보호를 해준다. TypeScript가 그저 JavaScript로 변환될 뿐이라면 어떤 보호를 해주는걸까? TypeScript가 제공하는 보호장치는 코드가 JavaScript로 변환되기 전에 발생한다. TypeScript가 우리가 작성한 코드를 먼저 확인한..