YooniCode

나중에 VS Code를 다시 세팅해야 할 때를 대비해현재 사용하고 있는 플로그인 목록을 정리해본다.1. Prettier - Code Formatter- 코드 작성 후 별도 작업 없이 자동으로 정리해주는 포맷터- 들여쓰기, 줄바꿈, 따옴표 등 코드 스타일을 일정하게 맞춰줌- HTML, CSS, JavaScript, JSON 등 대부분의 웹 언어에서 사용 가능2. Atom One Dark Theme- VS Code에서 사용할 수 있는 다크 계열 테마- 색 대비가 안정적이라 코드 가독성이 좋고 눈의 피로가 적음3. Tailwind CSS IntelliSense- Tailwind CSS 사용 시 클래스 입력을 도와주는 확장 기능- 사용 가능한 클래스 목록을 자동으로 보여주고 오타도 체크해 줌- 유틸리티 클래스가..

웹 개발을 하다 보면 JavaScript와 TypeScript 중 무엇을 써야 할지 한 번쯤은 고민하게 된다.나 역시 처음에는 JavaScript만 쓰다가, 프로젝트가 커지면서 TypeScript를 접하게 됐다. # JavaScript는 왜 여전히 많이 쓰일까JavaScript는 정말 자유로운 언어다. 타입을 신경 쓰지 않아도 되고, 일단 작성하면 바로 실행된다. 그래서 처음 배울 때도 진입장벽이 낮다고 느껴졌다.작은 기능 하나 만들 때는 굳이 타입을 정의하지 않아도 되지 않아도 되고, 생각나는 대로 코드를 쓸 수 있다.그래서 빠르게 결과를 보고 싶을 때는 JavaScript가 훨씬 편하다고 느껴진다.아마 이 점 때문에 여전히 JavaScript가 많이 쓰이는 게 아닐까 싶다.다만 프로젝트가 조금만 커져..

백준을 처음 시작하면 가장 먼저 마주하게 되는 문제 중 하나가 1000번 A+B 문제다.워낙 단순해 보여서 가볍게 넘길 수도 있지만, 나는 이 문제를 통해 입력과 출력이 정확히 어떻게 동작하는지 다시 한 번 점검해보기로 했다.# 문제https://www.acmicpc.net/problem/1000 # 문제를 읽어보며 든 생각문제는 정말 짧다.두 정수 A와 B를 입력받아 A+B를 출력하라.처음엔 너무 쉬워 보여서 살짝 의심부터 들었다. 대신 바로 아래에 있는 입력/출력 형식을 다시 읽어봤다.백준은 이걸 틀리면 바로 오답이 된다는 걸 알고 있었기 때문이다. # 입력부터 정리해보기입력 예제를 보니 이렇게 들어온다.1 2한 줄에 숫자 두 개가 공백으로 구분되어 있다.그래서 정리해보면,한 줄 입력을 받고공백 기준..

깃허브에서 토큰은 비밀번호 대신 안전하게 인증할 수 있는 열쇠 역할을 한다.1. 오른쪽 상단의 프로필 아이콘을 클릭 후 Settings 메뉴로 이동 2. 왼쪽 메뉴 하단에서 Developer settings 클릭 3. Personal access tokens 선택Personal access tokens -> Tokens (classic) 메뉴로 이동 4. 토큰 생성하기 (Generate new token)Generate new token -> Generate new token (classic) 클릭Note에 토큰 이름 입력 ex)유효기간 (Expiration) 선택 -> 기본은 30일, 필요에 따라 "No expiration" 가능권한 (Scopes) 체크 -> 보통 repo 와 workflow 권한만 ..

블로그를 꾸미기 위해 제일 먼저 해야할 일 첫번째. 마우스 커서 변경하기(1) 마음에 드는 커서 고르기https://www.cursors-4u.com/ Free Cursor Downloads - Cursors-4U.comDate: 16 Jan 2024, 22:00 By Tor With 15 Comments All commenting and comments have been removed from the cursor pages. Too many negative comments that got out of hand. Date: 28 Dec 2023, 00:37 By Tor With 1 Comments Haven't work on this site in years. But Iwww.cursors-4u.com생..

원래 티스토리 hello 스킨을 쓰다가 아이콘 이미지가 안보이는 이슈로..? (버전 문제인 것 같음) 티스토리에서 제공하는 기본 스킨을 사용하기로 하였다 html이랑 css 조금 손 봐주면서 내껄로 만들기.아무튼 기본 스킨으로 바꾸면서 마우스 커서 이펙트를 한번 넣어보기로 결심 레츠고(1) 무슨 효과로 할지 고르기https://www.mf2fm.com/rv/dhtmltinkerbell.php Tinkerbell Magic Sparkle Fairy Dust Mouse :: RV's free DHTML and JavaScript effectsSTEP 1: Copy and paste the code below so that it sits between the and tags at the top of your ..

JSON parse와 stringify는 JavaScript에서 데이터를 처리할 때 매우 중요한 두 가지 함수다.JSON parse는 JSON 문자열을 JavaScript 객체로 변환하는 데 사용되고, JSON stringify는 JavaScript 객체를 JSON 문자열로 변환하는 데 사용된다.직렬화랑 역직렬화가 뭔지도 모르고 일단 시작한 JSON은 쉽지 않은 험난한 길이었다..JSON 'parse'와 'stringify' 란?JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 널리 사용되는 포맷이다. 이건 사실 별로 중요하지 않은 이야기이긴 한데 개념은 적어야 될 것 같으니까..?JSON에서 중요한 함수 'parse'와 'stringify' 이 두개만 알아도 사..

리액트는 컴포넌트와 훅 사용법을 익히는 것이 가장 중요하다.리액트란 무엇인가?리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 사용된다.리액트는 컴포넌트 기반의 구조를 통해 재사용성과 유지보수성을 높이며, 단일 페이지 애플리케이션(SPA) 개발에 최적화되어 있다.리액트의 가장 큰 장점 중 하나는 Virtual DOM을 사용하여 실제 DOM 조작을 최소화하면서 빠르고 효율적인 UI 업데이트를 가능하게 한다. 이는 사용자 경험을 개선하고, 개발자가 복잡한 애플리케이션을 쉽게 구축할 수 있게 한다.리액트 설치 및 개발 환경 설정리액트를 시작하려면 먼저 Node.js와 npm(또는 Yarn)이 필요하다.설치 후, Create React App을 사용하여 새로운 ..

리액트의 map 함수는 배열 데이터를 컴포넌트로 변환하는데 중요한 역할을 합니다.이 포스팅에서는 리액트를 시작하시는 초보자분들도 이해하기 쉽도록 간단하게 설명하도록 하겠습니다.리액트 map 함수란?리액트에서 map 함수는 배열 데이터를 반복하여 각 요소를 새로운 컴포넌트로 변환하는 데 사용됩니다.리스트를 렌더링하거나 동적으로 UI를 생성할 때 매우 유용합니다.map 함수의 기본 사용법기본적으로 map 함수는 자바스크립트 배열 메서드로, 각 요소를 순회하며 새로운 배열을 생성합니다.리액트에서는 이를 활용하여 배열의 각 요소를 컴포넌트로 렌더링합니다.const num = [1, 2, 3, 4, 5];const listItems = num.map((item)) => {number} );retur..

이렇게 글자 양 옆으로 line을 쉽게 그리는 방법을 찾았다.매번 양옆으로 라인주는 법을 구글에서 찾곤 했었는데 한번 정리해두면 좋을 것 같다. TemplateName2 먼저 이렇게 html에 class명을 주고 class로 css를 줄 생각이다..template-container { display: flex; align-items: center; justify-content: center;}.template-bar { flex-grow: 1; height: 1.5px; background-color: #969696;}.template-name { margin: 0 20px; font-weight: bold;}선과 이름을 하나의 div로 묶음 ..