개발자 도전기 72

세션스토리지 저장 문제

스페이스페이지 에서 스페이스를 클릭시 세션에 스페이스 아이디 를 저장하고 프로젝트페이지로 이동하면서 프로젝트페이지 와 프로젝트 헤더 에서 세션에 있는 sid를 가져오면서 그걸로 팀리스트 등등 필요할때 씀  수정 전 클릭했을때의 코드   에러가 생기는 이유가 세션에 저장된걸 이동한 페이지에서 못가져온다고 생각했고 코드를보고링크가 먼저 이동하고 함수가 실행되니 저장하기전에 페이지이동해서 에러가 발생한다고 생각을 했다. 수정 후 Link를 없애고 span으로 바꿈 페이지 이동은 함수 마지막에 useNavigate 사용을 해서 세션에 sid 저장 후 경로 이동을 해서 에러를 해결함

에러모음집 2024.12.14

Access Token & Refresh Token

Access 토큰 과 Refresh 토큰을 알기위해 jwt 토큰에 대해 먼저 파악하는게 좋습니다. https://nicekhj.tistory.com/67 JWT 토큰 이란??JWT(Json Web Token)은 클라이언트와 서버 간에 안전하게 전송하기 위해 사용되는 방법입니다.목적은 사용자 인증과 정보 교환 입니다. JWT는 정보가 담긴 JSON 객체를 비밀키로 서명하여 위변조를 방nicekhj.tistory.com JWT(Json Web Token)는 Access Token을 구현하는 대표적인 방식 중 하나로 이 둘의 관계를 이해하려면 JWT에 대한 개념을 먼저 파악하는 것이 중요합니다. JWT는 JSON 형식의 데이터를 안전하게 전송하기 위해 사용되며 일반적으로 클라이언트와 서버 간의 인증과 정보 교..

Authentication 2024.12.01

Docker 명령어 및 사용

Docker의 주요 명령어와 그 역할 명령어설명예시FROM컨테이너 이미지를 만들 때 기본으로 사용할 운영체제나 기반 이미지를 지정합니다.FROM node:18 (node18를 기반으로 컨테이너 생성 합니다.)ENV컨테이너에서 사용할 환경변수를 설정합니다.ENV node_env production (node_env라는 변수를 production 값으로 설정 합니다.)WORKDIR컨테이너 내부에서 작업 디렉토리를 설정합니다.WORKDIR /app (컨테이너의 /app 디렉토리에서 모든 작업을 시작합니다.)COPY내 컴퓨터에 있는 파일을 컨테이너로 복사합니다.COPY . /app (로컬의 현재 디렉토리 내용을 컨테이너의 /app 디렉토리로 복사합니다.)ADDCOPY와 비슷하지만 URL에서 파일을 다운로드하거나..

Docker 2024.11.24

GitHub Flow

GitHub Flow는 GitHub에서 추천하는 간단하고 직관적인 브랜치 관리 전략 이다.feature 브랜치를 통해 독립적으로 작업한 후 main(master) 브랜치에 병합(merge)하는 방식입니다. 주로 지속적인 배포와 변경이 자주 이루어지는 프로젝트에 적합하며 실수로 인해 작업 중 큰 문제가 발생했을 때 복구가 비교적 간단하다는 장점이 있습니다. GitHub Flow 사용 순서1. Main 브랜치 준비GitHub Flow에서 Main(master) 브랜치는 항상 배포 가능한 상태로 유지해야된다.코드는 main 브랜치에 병합되기 전에 철저히 테스트되고 안정화되어야 합니다.2. Feature 브랜치 생성하기새로운 기능을 개방하거나 버그를 수정할 때는 반드시 새로운 feature 브랜치를 생성합니다...

git 2024.11.10

Docker를 초반에 설정하고 시작해야 하는 이유

개발을 진행하면서 로컬 환경에서는 잘 작동하던 코드가 배포 후에 이상하게 작동하거나 에러가 발생하는 경우를 겪어본 적이 있을텐데 그 원인 중 하나는 개발 환경과 배포 환경의 차이입니다. 여기서 도커가 빛을 발하는데 도커는 개발 환경과 배포 환경을 일치시켜주는 강력한 도구이기 때문입니다. 초반부터 도커로 개발 환경을 설정하면 코드가 변경되더라도 일관된 환경에서 실행되기 때문에 중간에 환경이 달라져서 생기는 문제를 최소화할 수 있다. 즉 로컬에선 되는데 배포하면 안된다 라는 문제를 줄여준다. 초기 설정의 장점개발과 배포의 일관성도커는 컨테이너 안에서 모든 것이 실행되기 때문에 로컬에서 개발할 때와 배포할 때의 환경이 동일해집니다. 따라서 코드가 어느 단계에서나 같은 방식으로 작동하게 됩니다. 초반에 도커 환..

Docker 2024.11.10

MySQL TINYINT ??

TINYINT는 MySQL에서 사용하는 정수 데이터 타입 중 하나로 1바이트(8비트) 크기의 정수를 저장 할 수 있습니다.TINYINT(1)의 의미는 보통 작은 정수 값(예:0 또는 1)을 저장할 때 사용되며 특히 불리언 값(true / false)을 나타낼 때 자주 사용됩니다.예를 들어 0은 false 1은 true를 의미하는 경우가 많습니다. 왜 TINYINT(1)를 사용하는지???TINYINT는 -128에서 127 사이의 정수를 저장할 수 있으며 TINYINT(1)는 이 중 한 자리 숫자만을 저장한다는 표시일 뿐 실제 저장 범위는 동일합니다데이터베이스에서는 BOOLEAN 타입이 없는 경우 TINYINT(1)을 대신 사용하여 불리언 값을 저장합니다.따라서 TINYINT(1)로 0또는 1을 저장해 fa..

Database/SQL 2024.11.05

JWT 토큰 이란??

JWT(Json Web Token)은 클라이언트와 서버 간에 안전하게 전송하기 위해 사용되는 방법입니다.목적은 사용자 인증과 정보 교환 입니다. JWT는 정보가 담긴 JSON 객체를 비밀키로 서명하여 위변조를 방지합니다. JWT 프로세스로그인 요청 : 사용자가 아이디와 비밀번호 또는 소셜 로그인을 통해 서버에 로그인 요청을 보냅니다.토큰 발급 : 서버는 사용자의 정보로 JWT를 생성합니다. 이때 비밀키로 서명하여 토큰의 진위 여부를 확인할 수 있습니다.토큰 전달 : 서버는 생성한 JWT를 클라이언트에 전달합니다.토큰 저장 : 클라이언트는 전달받은 JWT를 로컬/세션 저장소(local / session Storage) 또는 쿠키에 저장합니다.API 요청 시 토큰 포함 : 클라이언트는 이후 API 요청마다 ..

Back-end/Node.js 2024.11.02

Docker 사용하는 이유 ?

docker를 사용하는 주된 이유는 개발 환경과 운영 환경을 일관되게 유지하고, 애플리케이션 배포를 간편하게 하기 위해서이다.  환경 일관성 보장Docker는 애플리케이션을 실행하기 위한 모든 라이브러리, 설정, 시스템 환경을 포함한 컨테이너를 만듭니다.이를 통해 개발 환경과 운영 환경 간의 차이로 인해 발생하는 문제를 방지할 수 있습니다.로컬에서 작동하는 환경을 동일하게 배포하기 때문에 "로컬에서는 잘 돌아가는데, 서버에서는 안 돼요"같은 문제를 줄일 수 있습니다.의존성 관리컨테이너는 필요한 모든 라이브러리와 종속성을 포함하고 있으므로, 애플리케이션이 특정 버전의 라이브러리나 툴을 필요로 할 때도 안전하게 사용할 수 있습니다.예로 특정 버전의 Node.js, Python, MySQL 등을 쉽게 지정하여..

Docker 2024.11.02

React Redux

Redux는 주로 React와 함께 사용되는 상태 관리 라이브러리 이다. 복잡한 애플리케이션에서 여러 컴포넌트 간에 데이터를 쉽게 관리할 수 있게 도와줍니다.Redux는 애플리케이션의 모든 상태를 하나의 중앙 저장소에서 관리하고 상태 변화를 예측 가능하게 만들어줍니다. 설치 방법npmnpm i redux react-redux @reduxjs/toolkityarnyarn add redux react-redux @reduxjs/toolkit Redux의 기본 개념state(상태) : 애플리케이션의 데이터가 저장되는 값(or변수)입니다.action(액션) : 액션은 애플리케이션에서 일어난 일을 설명하는 객체이고 보통 type 과 payload 로 구성됩니다.type 은 액션의 종류를 나타내는 문자열 , pay..

Front-end/React 2024.10.05

React의 CSS 관리방법 : styled-components

styled-components 는 CSS를 JavaScript 파일 안에서 직접 작성할 수 있게 해주는 도구 입니다.CSS-in-JS 라고 불리며 컴포넌트 마다 스타일을 독립적으로 관리할 수 있어 리액트 프로젝트에서 많이 사용합니다. 설치 방법npm npm i styled-componentsyarn yarn add styled-components styled-components를 사용하는 이유컴포넌트와 스타일을 한 곳에서 관리할 수 있습니다. 별도로 CSS 파일을 만들 필요가 없습니다.CSS 클래스 충돌을 방지 합니다. 각 스타일은 컴포넌트에 고유하게 적용되기 때문에 다른 곳에서 사용 중인 클래스 이름과 겹칠 일이 없습니다.동적 스타일링이 쉬워진다. 컴포넌트에 전달되는 props 에 따라 스타일을 쉽게..

Front-end/React 2024.10.03