티스토리

순코딩
검색하기

블로그 홈

순코딩

sooncoding.tistory.com/m

순코딩 님의 블로그입니다.

구독자
22
방명록 방문하기

주요 글 목록

  • [팀피어] 사이드 프로젝트에서 내가 개발한 기능이 처음으로 운영 서비스에 반영됐다!! 운영 서비스에 내가 개발한 회원탈퇴 기능과 메인 페이지 애니메이팅 동기화 작업이 반영되었다!!완전 감동 뿌듯..!!앞으로도 사수님을 보고 열심히 배워서 더 멋진 프론트엔드 개발자가 되고 말테다 히히 공감수 0 댓글수 0 2024. 11. 11.
  • WSL 환경의 MySQL 원격 접속 + Sequelize 연동&마이그레이션 들어가며해당 게시물은 Sequelize 프로젝트 세팅과 WSL, mysql-server 설치완료 환경을 가정합니다.자세한 설치 방법은 아래 두 링크를 참고해주세요. [Node.js] Node.js + Express + Sequelize + MySQL 프로젝트 세팅 방법들어가기해당 게시물은 Node.js 와 MySQL이 설치된 환경을 가정합니다. Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  MySQLOver 2000 ISVs, OEMs, and VARs relysooncoding.tistory.com 윈도우에서 리눅스 명령어 사용하기(WSL.. 공감수 5 댓글수 0 2024. 11. 2.
  • WSL 환경에서 MySQL 설치 방법 WSL에서 mysql사용환경 만들기date: 2021-03-02 16:21:13 MySQL이란? MySQL은 관계형 데이터베이스 관리 시스템(RDBMS: Relational DBMS)으로 오픈 소스이며, 다중 사용자와 다중 스레드를 지원합니다. C언어, C++, JAVA, PHP 등 여러 프로그래밍 언waterfogsw.tistory.com 공감수 0 댓글수 0 2024. 11. 2.
  • [MySQL] MySQL CLI 명령어 정리 [MYSQL] 📚 콘솔(CLI) 시스템 명령어 정리MYSQL 콘솔 명령어 모음 mysql을 워크벤치가 아닌 콘솔(리눅스)로서 사용할때 명령어 모음이다. 이걸 CLI 명령어라고도 한다. MYSQL 서버 명령어 mysql서버 잘 돌고있는지 확인 $ service mysql status ​ mysqlinpa.tistory.com 공감수 0 댓글수 0 2024. 11. 2.
  • 윈도우에서 리눅스 명령어 사용하기(WSL) 윈도우 cmd에서 리눅스 명령어 사용하는 방법(WSL 설치)리눅스에서 너무나도 당연하게 사용했던 명령어가 동작을 안하면 많이 당황스럽습니다. 이번 포스팅은 윈도우에서도 리눅스 명렁어를 사용할 수 있는 방법을 알아보겠습니다. 1. WSL 설치 cmd 창minha0220.tistory.com 공감수 0 댓글수 0 2024. 11. 2.
  • [Node.js] Sequlize 마이그레이션 방법 참고자료 Migrations | SequelizeJust like you use version control systems such as Git to manage changes in your source code, you can use migrations to keep track of changes to the database. With migrations you can transfer your existing database into another state and vice versa: Those ssequelize.org  들어가며해당 게시물은 아래링크와 관련성이 높은 글이며 프로젝트 세팅이 완료되어있음을 가정합니다.만약 프로젝트 세팅이 되어 있지 않다면 아래 링크를 참고해주세요. [Node.js] .. 공감수 1 댓글수 1 2024. 11. 1.
  • [MySQL] MySQL 원격 접속 방법 참고자료 mysql 원격접속하는 방법database도 하나의 서버이기 때문에 외부에서 접속을 해야하는 경우가 있다. 하지만 2가지의 이유로 접속이 불가능할 수 있다. 1번째. db의 접속 ip를 제한했을 경우 이는 디비 자체에서 특정 ip대역pjt3591oo.github.io  배경노트북에서 MySQL을 설치하고 커넥션, DB을 노트북 MySQL에 생성했다.어느날 집에서 데스크탑 PC로 서버 작업 및 데이터베이스 확인을 해야하는 상황이 생겼다.기존 서버 코드는 Git을 이용해 가져올 수 있었지만 데이터베이스 환경은 가져올 수 없는 것 같았다.이에 집에 있는 데스크탑 PC로 노트북 MySQL  원격 접속을 시도한다.이 때, 노트북을 원격(Remote) 데스크탑PC를 로컬(Local)로 지칭하겠다.  문제해.. 공감수 0 댓글수 0 2024. 11. 1.
  • [MySQL] MySQL 설치 오류(설치했지만 CMD에서 버전 확인이 안됨) [MySQL] 윈도우 설치 다운로드 방법(2024)다운로드 설치 방법    1.  mysql을 검색하고 Downloads 링크 클릭   2.  스크롤을 내려 우측 하단의 MySQL Community(GPL) Downloads 링크 클릭    3.  좌측 맨 하단에 있는 MySQL Installer for Windows 클릭  developevolvify.tistory.com 문제발생필자는 위 게시물을 참고하여 MySQL 설치를 완료했다.위 이미지처럼 MySQL Server와 MySQL Workbench가 정상적으로 설치된 것을 확인했다. 하지만 CMD에서 버전확인 및 데이터베이스 접속을 시도하니 실패하였다.  해결방법위 문제의 원인은 환경변수로 추측되었다.즉, 환경변수에 MySQL 경로가 추가되지 않았기.. 공감수 2 댓글수 2 2024. 10. 31.
  • [Node.js] Node.js + Express + Sequelize + MySQL 라우터 및 컨트롤러 설정 방법 해당 게시물의 내용은 아래 링크의 내용과 깊게 연관되어 있습니다. 해당 게시물을 읽기 전에 아래 링크를 먼저 참고해주세요.  [Node.js] Node.js + Express + Sequelize + MySQL 프로젝트 세팅 방법해당 게시물은 Node.js 와 MySQL이 설치된 환경을 가정합니다.  Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  MySQLOver 2000 ISVs, OEMs, and VARs rely on MySQL asooncoding.tistory.com 최종 템플릿 GitHub - LDK1009/template-nod.. 공감수 2 댓글수 0 2024. 10. 30.
  • [Node.js] Node.js + Express + Sequelize + MySQL 프로젝트 세팅 방법 들어가기해당 게시물은 Node.js 와 MySQL이 설치된 환경을 가정합니다. Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  MySQLOver 2000 ISVs, OEMs, and VARs rely on MySQL as their products' embedded database to make their applications, hardware and appliances more competitive, bring them to market faster, and lower their cost of goods sold. Learn More »w.. 공감수 0 댓글수 0 2024. 10. 30.
  • 폰트 디자인 시스템 디자인 시스템 피그마 파일https://www.figma.com/design/jHtvX4Oq2WgNyzbDqRkegP/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%85%9C%ED%94%8C%EB%A6%BF?node-id=0-1&t=7EsTKHizUzgJwu5P-1 FigmaCreated with Figmawww.figma.com 설명### 1. **헤딩(Heading) 스타일** 헤딩은 계층을 명확히 하고 콘텐츠의 구조를 시각적으로 구분하는 데 중요한 역할을 합니다. - **H1 (메인 제목)**     - 폰트 사이즈: **48px**     - 폰트 두께: **Bold (700)**     - 줄 간격(Line height): **1.2*.. 공감수 0 댓글수 0 2024. 10. 30.
  • [Node.js] Express 서버 클라우드(AWS)에 배포하기_GPT-4o Express 서버를 클라우드에 배포하는 방법은 여러 가지가 있습니다. AWS, Heroku, Vercel, DigitalOcean 등 다양한 클라우드 플랫폼에서 Express 애플리케이션을 배포할 수 있습니다. 이 중 **AWS EC2**를 사용한 배포 과정을 단계별로 설명하겠습니다. ### AWS EC2를 사용하여 Express 서버 배포하기 1. **AWS 계정 생성**:    - 먼저, [AWS 공식 사이트](https://aws.amazon.com/)에 가서 계정을 생성합니다. 이미 계정이 있다면, 로그인합니다. 2. **EC2 인스턴스 생성**:    EC2(Elastic Compute Cloud)는 AWS에서 제공하는 가상 서버입니다.        1. **EC2 대시보드로 이동**:    .. 공감수 1 댓글수 0 2024. 10. 29.
  • [포켓몬 맞추기 게임] 데이터 패칭 리팩토링 // 리팩토링 전 useEffect(() => { const fetchData = async () => { const allPokemonData = []; for (let i = 1; i name.language.name === "ko"); allPokemonData.push({ ...response.data, korean_name: koreanName.name }); } const needData = lodash.shuffle(allPokemonData).map((el) => { return { src: el.sprites.front_default, name: el.korean_name, .. 공감수 5 댓글수 2 2024. 10. 19.
  • 버셀(vercel) 깃허브(github) 로그인 연동 오류 깃허브 계정으로 버셀 로그인을 시도하니 자꾸 사이드프로젝트 팀계정으로 로그인되는 버그가 발생했다.몇시간의 삽질 끝에 문제점과 해결방법을 찾았다.1. 사이드프로젝트 팀의 vercel 계정에서 My Account > setting > Authentication 에 나의 깃허브 개인 계정이 로그인 연동 되어있었다. 이로 인해 vercel에 접속하여 깃허브 연동 로그인을 시도하면 팀계정으로 로그인 되었던 것이었다.-> 팀계정에서 내 개인 깃허브 로그인 연동을 삭제했다. 2. 깃허브 계정 로그인을 하니 가입된 계정이 없다는 오류가 발생했다. 이는 내가 이전에 깃허브의 인증 이메일을 변경했기 때문이었다.깃허브 가입 -> 버셀 가입 -> 깃허브 이메일 변경 -> 버셀에서 깃허브 연동 로그인 시 이메일을 찾지 못해 오.. 공감수 1 댓글수 0 2024. 10. 19.
  • [CSS] 반응형 디자인을 위한 기기별 화면 크기 1. PC (데스크탑)평균 너비: 1280px ~ 1920px평균 높이: 800px ~ 1080px화면 비율은 대부분 16:9나 16:10을 따릅니다.2. 태블릿평균 너비: 768px ~ 1024px평균 높이: 1024px ~ 1366px태블릿은 가로/세로 모드 모두 고려해야 하며, 가로 모드에서 반응형이 어떻게 보이는지도 중요합니다.3. 휴대폰 (스마트폰)평균 너비: 360px ~ 414px평균 높이: 640px ~ 896px최근 스마트폰은 5인치 이상의 대화면이 많아졌지만, 360px ~ 414px 정도의 너비가 여전히 많이 사용됩니다. 높이는 기기마다 다양하지만 세로 길이는 평균적으로 640px 이상입니다.미디어 쿼리 사용 시 대략적인 기준PC: 너비 1024px 이상태블릿: 너비 768px ~ 1.. 공감수 1 댓글수 0 2024. 10. 18.
  • [React] useEffect와 useMemo의 차이점 useEffect`는 **렌더링 후에 실행**되고, `useMemo`는 **렌더링 중에 실행**됩니다. 이 차이는 여러 가지 중요한 결과를 가져오는데, 구체적으로 살펴보겠습니다. ### 1. **렌더링 중 실행 (`useMemo`)** - **의미**: 컴포넌트가 렌더링되는 동안(`render phase`)에 값을 계산하고, 해당 계산을 메모이제이션합니다. - **결과**: 렌더링이 끝나기 전에 `useMemo`에 의해 계산된 값이 즉시 컴포넌트의 렌더링 결과에 반영됩니다. 즉, **화면이 그려지기 전에** 미리 계산된 값을 얻을 수 있습니다. - **영향**:   - 렌더링 과정에서 값을 계산하고 그 값을 바로 렌더링에 사용합니다. 따라서 UI가 렌더링되기 전에 모든 값을 준비할 수 있습니다.   - .. 공감수 1 댓글수 0 2024. 9. 17.
  • [npm] --legacy-peer-deps / --force 옵션 차이점 Peer Dependencies란 무엇인가? Peer dependencies는 특정 패키지가 정상적으로 동작하기 위해 다른 패키지의 특정 버전이 프로젝트에 존재해야 하는 경우에 사용됩니다. 보통 라이브러리나 플러그인이 **호스트 패키지**(예: React)와 긴밀하게 연결되어 있을 때 필요합니다.Peer dependencies는 해당 패키지가 독립적으로 설치되지 않고, **호스트 패키지와의 버전 호환성을 사용자에게 맡기는 것**이 특징입니다. 예시로 이해하기: `custom-cursor-react`라는 패키지가 있다고 가정해 봅시다. 이 패키지는 React를 기반으로 작동하므로, 개발자는 프로젝트에 React가 설치되어 있어야 한다고 가정합니다.이때, `custom-cursor-react`는 자신이 **.. 공감수 0 댓글수 0 2024. 9. 12.
  • [CSS] SCSS @extend @mixin 차이점(GPT4.0) `@extend`와 `@mixin`은 SCSS에서 스타일을 재사용하기 위한 두 가지 주요 방법입니다. 이 두 가지 방법은 스타일 코드의 유지보수와 재사용성을 높여주지만, 각각의 사용 방식과 성능에 차이가 있습니다. 아래에서 두 방법의 실제 성능 차이와 사용상의 장단점을 비교해 보겠습니다. ### 1. **`@extend`의 특성 및 성능** `@extend`는 선택자 간에 **스타일을 공유**하도록 해줍니다. 이를 통해 중복 코드를 제거할 수 있지만, **CSS의 구조**에 영향을 미칩니다. - **장점**:   - **코드 중복 제거**: 여러 클래스가 동일한 스타일을 공유할 때 중복된 스타일 정의를 피할 수 있습니다.   - **간결한 코드**: `@extend`를 사용하면 특정 스타일을 다른 셀렉터.. 공감수 0 댓글수 0 2024. 8. 26.
  • [Node.js] Express에서 쿠키&세션 사용방법 1. 세션(Session)이란?정의세션은 사용자가 웹사이트를 방문하고 있는 동안 서버에서 사용자 정보를 저장하는 방법입니다.세션은 서버에 저장되며 사용자가 로그인하거나 특정 동작을 수행할 때, 서버는 세션을 사용해 사용자를 식별하고 유지합니다.특징서버 측 저장 : 세션 정보는 서버에 저장되므로 보안성이 높습니다.유효 시간: 세션은 일정 시간이 지나면 만료됩니다. 이 유효 기간은 서버 설정에 따라 다릅니다.식별자 : 세션 ID는 클라이언트 측(브라우저)에 저장되고, 이 세션 ID를 통해 서버는 클라이언트의 세션 정보를 조회합니다.로그인 상태 유지 : 주로 로그인 상태 유지와 같은 사용자 상태를 관리하는 데 사용됩니다.작동 과정  1. 사용자가 웹사이트에 접속하여 로그인 시도.   2. 서버는 사용자를 인증.. 공감수 0 댓글수 0 2024. 8. 24.
  • [CSS] 스크롤로 페이지 넘기기(스크롤 스냅) 코드HTML 1 2 3 4CSS.scroll-container { height: 100vh; /* 부모 컨테이너가 화면 전체의 높이를 차지하도록 설정 */ overflow: auto; /* 스크롤이 가능하도록 설정 (세로 방향 스크롤) */ scroll-snap-type: y mandatory; /* 세로 방향(y축)으로 스냅 효과를 강제 적용 (페이지처럼 넘기기) */}.scroll-area { scroll-snap-align: start; /* 각 스크롤 섹션이 스냅될 때 시작 지점에서 정렬되도록 설정 */} 참고문서 🎨 스크롤을 부드럽게 - Scroll Snap 속성CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치.. 공감수 0 댓글수 0 2024. 8. 24.
  • [Node.js] 시퀄라이즈(Sequelize)를 활용한 Node.js & Express & MySQL 연동 아래 내용은 Mysql 설치 및 데이터베이스 생성이 완료되었다는 가정하에 진행합니다.  시퀄라이즈란?Sequelize는 Node.js의 ORM(Object-Relational Mapping) 라이브러리로, SQL 쿼리를 작성하지 않고 JavaScript 코드로 데이터베이스 작업을 수행할 수 있습니다.  Sequelize 설정패키지 설치npm install sequelize sequelize-cli mysql2 Sequelize 초기화Sequelize CLI를 사용하여 프로젝트를 초기화합니다.이 명령어는 config, models, migrations, seeders 폴더를 생성합니다.npx sequelize-cli init  데이터베이스 설정config/config.js 파일에서 데이터베이스 설정을 변경.. 공감수 0 댓글수 0 2024. 8. 23.
  • [Typescript] 타입스크립트 타입 종류 https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EC%9B%90%EC%8B%9C-%ED%83%80%EC%9E%85--string-number-%EA%B7%B8%EB%A6%AC%EA%B3%A0-boolean Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org 원시 타입stringnumberboolean 배열ex) [1,2,3]=> number[] 모든 타입any 사용법변수에 대한 타입 표기let myName: string = "Alice";하지만 대부분의 경우, 타입 표기는 필요하지 않습니다.가능하다면 TypeScript는 자동으로 코드 내의 있는 타입들을 추론하고자.. 공감수 0 댓글수 0 2024. 8. 16.
  • [Typescript] 타입스크립트 공식문서 정독 1일차 느낀점 https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html Documentation - The BasicsTypeScript를 배우는 첫 걸음: 기본 타입.www.typescriptlang.org 그래서 JS보다 TS가 좋은 점이 뭔데?1. 실행 전에 오류를 잡아줌예를 들어 JS에서는 직접 기능들을 테스트하는 과정에서 발견할 수 있는 오류들(ex) 버튼 클릭시 데이터 관련 오류 발생)을 컴파일 과정에서 미리 발견할 수 있다.2. 타입을 지정함으로써 해당 타입의 자동완성 기능을 제공한다.위 이미지들에서 볼 수 있듯이 타입을 설정하면 TS가 해당 인수의 자료형을 알 수 있기 때문에 Date 객체에 맞는 자동완성 기능을 제공한다. 느낀점위 2가지만 .. 공감수 0 댓글수 0 2024. 8. 16.
  • [VSC] VSCode 현재 포커싱된 곳에서 폴더/파일 생성 단축키 설정 https://inpa.tistory.com/entry/VScode-%E2%8F%B1%EF%B8%8F-%EC%83%88%ED%8C%8C%EC%9D%BC-%EC%83%88%ED%8F%B4%EB%8D%94-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%84%A4%EC%A0%95 공감수 0 댓글수 0 2024. 8. 14.
  • [Next.js] 서버 컴포넌트 VS 클라이언트 컴포넌트 서버 컴포넌트란?서버 컴포넌트는 서버 측에서 렌더링되는 컴포넌트입니다.주로 서버에서 직접 데이터를 가져오거나, 비동기 작업을 수행한 후 HTML을 생성하여 클라이언트로 전달합니다.필자의 주관적 이해 : 주문이 들어오면(페이지 입장) 망치(JS)로 작업(데이터 가져오기 등) 후 작업물(완성된 HTML)만 보내줌렌더링 위치서버주요 특징클라이언트에 전달되는 HTML을 서버에서 미리 생성하기 때문에 클라이언트에서 실행되는 JavaScript 코드가 필요하지 않습니다.데이터 가져오기와 같은 무거운 작업을 서버에서 처리하여 클라이언트의 부하를 줄입니다.클라이언트 측의 초기 로딩 시간을 줄일 수 있습니다.서버에서만 접근 가능한 리소스나 환경 변수 등을 안전하게 사용할 수 있습니다.사용자가 자주 변화하지 않는 정적 콘.. 공감수 0 댓글수 0 2024. 8. 14.
  • [GitHub] 깃허브 팀프로젝트 리드미 템플릿 https://github.com/LDK1009/ClubProject/tree/main GitHub - LDK1009/ClubProjectContribute to LDK1009/ClubProject development by creating an account on GitHub.github.com 공감수 0 댓글수 0 2024. 8. 12.
  • [framer-motion] 페이지 전환 애니메이션 아이템 우측 하단에 원을 클릭 시 해당 원의 크기가 커지며 화면을 덮는 애니메이션을 구현하였습니다.import { motion } from "framer-motion";import React, { useState } from "react";import styled from "styled-components";const Item = () => { // 원 클릭 여부 state const [isClick, setIsClick] = useState(null); return ( // 아이템 {/** * 아이템 우측 하단 원 * 클릭 시 isClick 상태가 변경된다. * animate는 isClick이 true일 경우 애니메이션 객체를 전달하도록 설정.. 공감수 0 댓글수 0 2024. 8. 11.
  • [Javascript] 이벤트 루프 작동방식(GPT 4.0) 질문1 js는 단일 스레드라 한번에 하나의 작업만 수행할 수 있다.그렇다면 콜스택에는 절대로 2개 이상의 작업이 쌓이지 않는 것이 아닌가?ex) 콜스택에 쌓기 -> 콜스택 실행 -> 콜스택에 쌓기 -> ...반복 답변JavaScript는 단일 스레드이기 때문에 한 번에 하나의 작업만 실행할 수 있습니다. 하지만 콜 스택에는 여러 작업이 동시에 쌓일 수 있습니다.콜 스택은 현재 실행 중인 함수와 해당 함수에서 호출한 다른 함수들을 추적하는 데 사용됩니다. 아래는 콜 스택이 어떻게 작동하는지 설명하는 예제와 함께 좀 더 자세한 설명입니다. 예제 코드 function first() { console.log('First'); second(); console.log('First End');}function .. 공감수 0 댓글수 0 2024. 8. 9.
  • [CSS] 파일 드래그 앤 드랍 기능 구현하기 https://velog.io/@chchaeun/%ED%8C%8C%EC%9D%BC-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%B2%A8%EB%B6%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8 파일 Drag and Drop 기능을 구현하자!사용자 경험 개선을 위한 파일 Drag and Drop 기능 추가velog.io  import React, { useState } from "react";import styled from "styled-components";import dndImage1 from "../assets/DnDBox1.svg";import dndImage2 from "../assets/DnDBox2.svg";import uploadIcon1 from ".. 공감수 0 댓글수 1 2024. 8. 8.
  • [CSS3] CSS 포커스 상태 유지시키기 공감수 0 댓글수 0 2024. 7. 31.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.