개발 & IT 정보

우리가 반응형 웹사이트를 제작할 때 모바일에서 어떤 식으로 화면에 보이는지 확인해야 할 필요가 있습니다. 그것을 배포 없이 손쉽게 확인하기 위해서 할 수 있는 방법 중 하나인데요. 로컬에서 개발 중인 내 화면을 모바일에서도 쉽게 확인할 수 있는 방법입니다. 모바일 기기에서 아래의 주소로 접속하면 됩니다. 모바일 접속 URL http://[IP주소]:[port주소] IP 확인 IP주소를 확인하고 싶다면 아래 방법을 참고하시면 됩니다. Window OS: https://www.tp-link.com/kr/support/faq/838/ 사이트 참고 Mac OS: 시스템 설정 → 네트워크 → 연결된 와이파이 우측 점 세개 아이콘 클릭해서 네트워크 설정 선택 → 아래 화면에서 IP 주소값 확인 만약 내가 개발하고 ..

간단하게 화면에서 텍스트 타이핑 효과를 구현할 수 있는 라이브러리 웹이나 앱에 텍스트의 동적인 애니메이션 효과를 낼 수 있음 react-typed 설치 npm i react-typed 또는 yarn add react-typed react-typed 적용예시 import React from "react"; import Typed from "react-typed"; function App() { return ( ); } export default App; react-typed 적용화면 react-typed 속성 필수 속성 strings: 타이핑 효과로 표시할 문자열의 배열을 정의 optional 속성 typeSpeed: 타이핑 속도 backSpeed: 백스페이스 효과의 속도 startDelay: 타이핑 시작..

웹 개발 시 유용한 VSCode(Visual Studio Code) 익스텐션 Theme 테마 & 스타일 관련 익스텐션 1. Color Hightlight Color Hightlight는 코드 내에 있는 색상값을 배경색상으로 강조하는 익스텐션입니다. 해당 익스텐션을 사용하게 되면 요소 내에 색상값을 빠르게 식별할 수 있어, 컬러 스타일 정의 시 유용하게 사용할 수 있습니다. 적용된 모습 2. Community Material Theme Community Material Theme 익스텐션은 VSCode에서 사용할 수 있는 테마 관련 확장 기능 중 하나입니다. 여러가지 테마를 제공하고 있습니다. 테마 설정하는 방법은 다음과 같습니다. 사용방법 1. 설정 -> 테마 -> 색 테마 -> 테마 고르기(방향키로 미..

MBTI란? MBTI는 개성을 알아보는 재미있는 테스트 방법 중 하나입니다. MBTI에 들어가면 16가지 성격 유형이 있는데요, 내 자신이 어떤 성격을 가지고 있는지, 어떤 환경에서 최고의 역량을 발휘하는지, 그리고 다른 사람들과 어떻게 상호작용하는지 등을 알아볼 수 있습니다. 이외에도 직업 선택, 인간관계, 연애 스타일 등 여러 분야에서 MBTI 결과를 활용할 수 있어요. 이름 궁합 테스트처럼 재밌기도 하지만, 심리학적인 측면에서 볼 때 매우 유익하기도 합니다! 👉🏻 무료 MBTI 테스트 하러 가기 👈🏻 MBTI 검사를 응용한 여러가지 재미있는 테스트 사이트들이 많이 있는데요, 귀여운 디자인의 사이트 몇 가지 정리해봤습니다. 1. 돼지유형테스트 https://pigmbti.sayun.studio/ 돼지..

문제 bitbucket repository를 생성하고 git에서 원격 저장소를 추가하려고 아래 명령어를 기입했다. git remote add origin https://[레파지토리주소].git 아래와 같은 오류 메시지가 출력된다. error: remote origin already exists. 예전에 작업하고 홀딩됐던 터라 아마 기존에 원격 저장소가 있었던 모양이다. 기존에 원격 저장소를 추가해 놨다면, 기존 원격 저장소를 삭제하고 다시 시도해봐야 한다. 해결 1. 원격 저장소 확인 우선 아래와 같이 현재 프로젝트에 가서 어떤 원격 저장소가 있는지 확인해봐야 한다. git remote -v 그럼 현재 추가되어 있는 원격 저장소 url이 출력될 것이다. 👇🏻예시👇🏻 더보기 origin https://gi..

웹과 앱 디자인에서는 적절한 색상 조합이 중요합니다. 사용자 경험(UX)과 브랜드 인식을 향상하는데 큰 역할을 하기 때문입니다. 이를 돕기 위해, 여러분께 매우 유용한 네 가지 색상 조합 도구를 소개하고자 합니다. 1. Two Color Combinations https://2colors.colorion.co/#google_vignette Two Color Combinations Two color combination palettes 2colors.colorion.co Two Color Combinations은 이름 그대로 두 가지의 색상을 이용한 조합에 초점을 맞춘 사이트입니다. 'Popular' 메뉴에서는 사용자들이 공유한 다양한 5가지 색상조합을 인기순으로 확인할 수 있습니다. 간결하면서도 효과적인..

Visusal Studio Code 설치와 Create-react-app 생성 수익형 웹사이트에 꽂혀서 MBTI 테스트 사이트를 만들어볼 것이다. 노트북이 고장 나서 친구 컴퓨터로 해야 되는데, 세팅부터 차근차근해보도록 한다. node 설치 node가 설치 안되어 있다면 아래 다운로드를 눌러 설치한다. (필수) https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code 설치 우선 개발에 필요한 Visual Studio Code를 설치해 본다. VSC 설치는 이곳에서 할 수 있다. https://cod..

간단한 모양을 svg 코드로 만들어보고, 코드를 티스토리에 삽입하는 방법입니다. 1. ChatGPT 사이트에 들어갑니다. https://chat.openai.com 회원가입이 안되어 있다면, 회원가입 및 로그인을 합니다. 2. '원하는 모양'을 svg 코드로 만들어줘 라고 요청합니다. +New Chat을 먼저 눌러주고, 아래 입력란에 '__을 svg코드로 만들어줘'라고 보냅니다. TIP: 요청내용이 구체적일 수록 좋습니다. ex) 빨간색 별모양을 svg코드로 만들어줘 👇🏻생성된 코드👇🏻 3. 티스토리 글 작성 항목에서 '기본모드'를 'HTML' 으로 변경합니다. 4. HTML 모드에서 svg 코드를 삽입합니다. 미리보기를 해보면 아래와 같이 빨간색 별모양이 나오는 것을 확인할 수 있습니다. 👇🏻별 모양👇🏻

알고리즘 문제 사이트 3곳 추천드립니다. 1. 프로그래머스 https://school.programmers.co.kr/learn/challenges?order=recent 코딩테스트 연습 | 프로그래머스 스쿨 개발자 취업의 필수 관문 코딩테스트를 철저하게 연습하고 대비할 수 있는 문제를 총망라! 프로그래머스에서 선발한 문제로 유형을 파악하고 실력을 업그레이드해 보세요! school.programmers.co.kr javascript, c언어 등 다양한 언어로 알고리즘 문제를 풀 수 있고, 기초 알고리즘 문제와 자주 틀리는 알고리즘 문제를 카테고리별로 선택할 수 있다. 뿐만 아니라 과제테스트 연습도 제공하고 있어서, 취업 준비하는 분들께 유용한 사이트이다. 장점 난이도, 유형 별 카테고리가 잘 정리되어 있..

호스팅이란? 인터넷을 통해 웹사이트나 애플리케이션을 온라인으로 접속할 수 있게 만들어주는 서비스. github에서 제공하는 무료 호스팅 서비스를 이용하는 법 1. New Repository 로 새 저장소를 만든다. 더보기 Create a New Repository 항목 설명 Repository name: 저장소(프로젝트) 이름 Description: 저장소 설명(옵션) Public은 내 저장소를 공개로 하는 것이고, Private는 비공개 생성한 repository에 완성된 소스코드를 build하여 업로드 2. Setting > Pages 로 가서 Branch를 None에서 master 또는 보여주고 싶은 지점의 브랜치를 설정한 후 Save클릭 위의 사진처럼 Your site is published at..