개발블로그

/components ├── AuthContext.js (Context를 생성하고 Provider 정의) ├── LoginButton.js (Context를 사용하는 컴포넌트) ├── UserInfo.js (Context를 사용하는 또 다른 컴포넌트) └── LogoutButton.js (로그아웃 기능을 제공하는 컴포넌트) 이런 파일 구조들이 있다면, 코드들은 아래와 같습니다.//AuthContext.jsimport { createContext, useContext, useState } from 'react';// 1. Context 생성const AuthContext = createContext();// 2. Provider 정의export function AuthProvider({ ..

공부하다가 애매모호하거나 처음 보는 내용을 확실하게 알고자 포스팅을 합니다!1. Content-Type: application/json(많이 봤던 코드이지만, 막상 설명하려고 하니 뭐라고 해야할 지 몰라서 넣어봤습니다.) Content-Type: application/json는 HTTP request / response header에서 사용되는 MIME 타입 중 하나로, JSON (JavaScript Object Notation) 형식으로 데이터를 전송하거나 받을 때 사용됩니다. 이 헤더는 서버와 클라이언트가 서로 데이터를 어떻게 해석할지를 알려줍니다. 1. JSON (JavaScript Object Notation)JSON은 가벼운 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고 기계가 분석하고 생성하기..

TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입(static type)을 추가하여 개발자가 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 도와주는 언어입니다. 간단히 말해서, TypeScript는 우리가 작성한 코드를 JavaScript로 컴파일(transpile)해주는 트랜스파일러 역할을 합니다. 또한, TypeScript의 강력한 기능 중 하나는 타입 정의 파일(.d.ts)을 통해 타입 정보를 외부 라이브러리나 코드에 제공할 수 있다는 점입니다. React 애플리케이션에서는 d.ts 파일을 활용하여 컴포넌트, 함수, 모듈 등의 타입 정보를 정의할 수 있습니다. 그럼 TypeScript와 d.ts가 실제로 어떻게 동작하는지 살펴보겠습니다.! 코드 작성과 타..

AWS 배포에 대한 강의를 못 들었지만, 검색을 바탕으로 결과에 성공했기에 나중에 또 쓸 일을 위해 작성해둡니다. 혹시나 잘못된 점이 있다면 알려주세요! 그리고 나중에 수업을 듣고 잘못된 점이 있다면 추가적인 글을 남기려고 합니다.   1. AWS에 로그인 후 EC2를 검색하여 EC2 서비스에 진입합니다. 2. 리전을 서울로 선택한다. (기본적으로 버지니아 북부로 설정되어 있고, 우리나라로 하면 확실히 속도가 빠른 것을 느꼈습니다.)3. 인스턴스 시작을 누른다4. 원하는 이름을 채운 후 Amazon Linux가 선택되어 있는 지 확인한다. 저는 2023 AMI 기준으로 작성합니다. Linux2도 있고 Ubuntu도 있지만, 사실 상 배우지 않아서 무슨 차이점이 있는지 모릅니다..ㅎ 그러나 ubuntu로 ..

1. guard clause 사용하기중첩 if문 사용하였기 때문에 guard clause를 사용해보라고 하셨다. 사실 처음 들어서 guard clause부터 찾아봤다. Guard clause는 특정 조건을 만족하면 바로 함수를 종료할 수 있도록 하여 복잡도를 줄이고, 가독성을 높이는 프로그래밍 패턴이라고 합니다.    2. 토글 위치const rect = e.target.getBoundingClientRect();    setModalPosition({      top: rect.bottom + window.scrollY + 5,      left: rect.left - 150,    }); 어느 정도 위치는 잡았지만 스크롤하면서 위치가 변했다... 그래서 창 상하를 기준을 플러스해서 잡아주니 내가 원하..

React 애플리케이션에서 사용자 인증을 구현하는 대표적인 방법 중 하나가 JSON Web Token(JWT)을 활용하는 것입니다. JWT는 RESTful API와도 자연스럽게 호환되며, 서버에 상태를 저장하지 않고 인증할 수 있다는 장점이 있습니다. JWT 기반 인증의 기본 개념JWT(JSON Web Token)는 JSON 포맷의 토큰으로, 세 가지 부분으로 구성되어 있습니다: 이전 글에서 잠깐 언급했었습니다!헤더(Header): 어떤 알고리즘을 사용해 서명(Signature)했는지를 나타내는 정보입니다.페이로드(Payload): 유저 정보나 권한 등의 데이터를 담고 있습니다.서명(Signature): 서버에서 설정한 비밀 키와 Header, Payload로 생성된 해시로, 데이터의 위변조 여부를 확인..

1. 띄어쓰기예전 html 코드를 가져와서 next.js로 마이그레이션 하는 과정에서 띄어쓰기 부분이 글자 그대로 출력되는 부분을 발견했다.원래는잘 활용했는데...&nbspnext.js에서는 아래처럼 사용해야한다. 유니코드 문자라고 한다.{"\u00A0"}2. 제출 버튼button            type="submit"            className={`${styles.login_btn} ${              isButtonDisabled ? styles.btn_disabled : styles.btn_active            }`}          > type을 항상 button으로 줬는데, submit으로 하면 클릭을 하든 "엔터"를 하든 post가 가능해진다! 엔터는 처음 ..

웹사이트나 애플리케이션에 로그인을 하게 되면, 우리가 누구인지 확인하고 계속 로그인 상태를 유지해주는 편리한 방식이 필요합니다. 이를 ‘인증’이라고 하죠. 웹이나 애플리케이션에서 가장 흔히 쓰이는 인증 방식은 세션 기반 인증과 토큰 기반 인증이 있습니다.  1. 세션 기반 인증세션 기반 인증은 전통적인 방식으로, 주로 예전부터 웹사이트에서 사용해온 인증 방법입니다. 우리가 로그인할 때마다, 서버는 우리 정보와 인증 상태를 확인한 후 서버의 메모리에 세션이라는 것을 생성하고, 여기에 로그인 정보를 저장합니다. 그리고, 세션 ID라는 고유한 ID를 만들어 브라우저에 쿠키 형태로 보내줍니다.이 다음에는 사이트 내에서 여러 페이지를 이동해도, 브라우저는 자동으로 세션 ID를 보내면서 우리가 로그인된 상태임을 서..

1. 반응형 미디어 쿼리PC 버전일 때는, 3개TABLET일 때는, 2개MOBILE일 떄는, 1개이렇게 보여줘야했는데, CSS상에서 grid를 사용하면 그저 열만 정렬해줬다...내 나름 이론상 1행 고정에 3열, 2열, 1열하면 될 것 같아서 gird-template-rows: repeat(1, auto)를 추가로 해줬지만, 역시나 통하지 않았다... 그래서 오른쪽 사진처럼 JS에 넣어버렸다...결과는 성공적이지만, 찝찝하게 마무리했다... 근데 역시나 멘토님께서 JS보다는 CSS에서 하는게 좋다고 말씀해주셨다. 결론은 선택자에서 자손들을 안보이게 하기를 사용하기로 결정했다.

최대한 구글링을 통해 문제를 해결하려고 했으나, 한 문제에 너무 시간 소요가 되는 것 같아서 GPT에게 물어본 내용을 정리하려고 합니다. 아직 미션을 다 진행 한 것이 아니라서 추후 계속 업데이트할 예정입니다. 1. Textarea 문제이런 textarea를 적용할 때, 아래와 같이 너무 딱 달라붙는 문제가 생긴다. 너무 보기가 싫어서 패딩도 줘보고 했는데 해결이 안되었다...간단한 해결 방법!들여쓰기 css를 적용한다. px이 커질수록 안녕이 오른쪽으로 밀어내진다..input { text-indent: 20px;}2. 클릭 후 수정하기, 삭제하기 모달창 위치초급 프로젝트 때는 그냥 잘됐는데... 선택하는게 위쪽이랑 아래쪽에 따로따로 있어서 해결이 안되나보다... const [modalPosition..