TimeMap.exe

React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..

우리나라에서 줄임말은 굉장히 다양하게도 쓰고 있다 자주 들어봤을 수도, 아닐 수도 있는 줄임말들이 있는데 그중 내가 알고 있는 것을 나열해보자면 다음과 같다 좋댓구알 좋아요 댓글 구독 알림설정 많관부 많은 관심 부탁드려요 킹받네 등등.. 이러한 신조어 및 줄임말들은 영어문화권에서도 활발하게 만들어지고 사용되는 중인데 영어문화권에서는 기존의 긴 영어 단어 대신 각 단어의 첫 음을 따온 줄임말을 많이 사용한다 이 때 그러한 말들을 영어로 다음과 같이 표현한다 Abbreviations (줄임말) 이 글에서는 아래의 줄임말들을 다루어 볼 예정이다 IMFAO PPPPPPP (Px7) GOAT SWAT POLICE 그리고 이 단어들은 영어 줄임말 사이트, Abbreviations.com에서 가져왔다 Abbrevia..

React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..

기 백엔드에 대한 관심 급증으로 인해 Intellij를 다운로드하였다 승 Spring 강좌를 보면서 설정을 하던 도중, IOS기준으로 설명된 부분에서 도저히 Preference를 찾을 수 없었다 전 (Null) 결 이 환경에서는 Settings가 Preference역할을 하고 있는 것 같다 단축키 Mac -- Command + , Windows -- Ctrl + Alt + S 끝

TailwindCSS를 사용하기 위해 프로젝트에서 작업을 하다가 무언가가 이상하게 디자인이 적용이 안되어서 원인을 파악해보아야겠다고 생각했습니다. 따라서 이 글은 어떤 원인들이 있었고 어떻게 해결했는 지 기록해 둔 글입니다. 프로젝트 스펙 Vite, React, TypeScript TailwindCSS yarn 원인 원인은 여러가지가 있던 것 같았습니다. 나열 해보자면 아래와 같았습니다. 패키지 설치 시 tailwindcss만 설치한 점 typescript 프로젝트로 마이그레이션 하면서 tailwind.config.js를 .cjs로 변경한 것 tailwindcss를 어느 형식의 파일에 적용시킬 것인 지 명시하지 않은 것 index.css에 import문을 통해 tailwind를 선언한 것 해결법 해결법은..

.with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..

옛날 옛적(어제), 한 개발자가 살았어요.이 개발자는 아이디어가 떠오를 때마다 도구를 만들어 제공하려고 하는 특징이 있었지만,사내 비즈니스 로직이 엮여있을까봐 마음편히 배포하지 못하고 어떻게 해야할 지 고민을 하고있었어요.정말 아쉬웠어요.그렇게 계속해서 쌓여만 가는 코드들을 가만히 내버려 둘 수는 없던 저는 방법을 찾아보기로 했습니다.그렇게 찾은 굉장한 프로그램, Electron을 소개합니다!왜 하필 Electron이죠?Electron?Electron은 GitHub에서 개발한 오픈 소스 프레임워크로, 웹 기술(HTML, CSS, JavaScript) 을 사용하여 데스크탑 애플리케이션을 만들 수 있게 해줍니다.Node.js와 Chromium을 결합하여 크로스 플랫폼 애플리케이션을 개발할 수 있으며, 윈도우..

https://medium.com/@tminstaller/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%9[…]D%94%EA%B5%AC%EC%A1%B0%EB%8A%94-%EC%97%86%EB%8B%A4-ba3a47e91508 프론트엔드에 적절한 폴더구조는 없다. 폴더구조엔 정답이 있을까요? medium.com

[ComputerScience] 비전공자의 시선으로 바라본 TCP와 UDP, 이쯤되면 다시 한번 복습해 봐야겠죠? TCP, UDP, 근본적인 개념이라 이미 알고 있는 내용이긴 한데 다시 자세히 말해보라하면 기억이 잘 나지 않으신가요? 그렇다면 다시 한 번 봐야겠죠! medium.com

들어가며 나는 포트폴리오 웹사이트를 만들었다. 처음엔 그저 언젠간 나만의 페이지를 만들어야지 싶었는데, 그러지 못했다. 왜냐하면 처음부터 너무나도 완벽한 것을 바랬으니, 디자인이 마음에 들지 않으면 제작하지 않기를 반복하였다. 그렇게 시간이 흘러 웹 개발을 시작한 지 1년이 다 되어갈 무렵, 클린코드에 대한 컨퍼런스를 다녀오며 프로젝트와 코드를 대하는 마음가짐을 어떻게 설정해야 할 지에 대한 생각의 변화가 생겼다. 바로 이 글을 통해 생각이 변했다. 우선 만들어두고, 계속해서 발전시켜나가야겠다. 언제곤 머릿속에서만 아이디어로 남겨둘 수는 없다. 그렇게 생각하는 순간 바로 이 계획을 실행하기로 했다. 간단하게 초안을 만들고, 계속해서 업데이트 해나가는 방식으로 코드를 성장시키기로 했다. 그렇게 만들어진 사..

이 글은 코딩 테스트를 풀다가 다른 사람들의 풀이를 확인하던 도중 신기한 코드를 발견해서 알아본 내용들을 정리한 글이에요. 정말 신기하게 생겨서 공유하고자 이 글을 작성합니다. 제너레이터 함수란 무엇일까요? 이런 상상을 해봐요. 평화로운 오후, 당신은 서재에서 시간을 보내고 있었어요. 평화롭게 읽고싶었던 책을 읽고 있었는데, 갑자기 중요한 전화가 온 거에요. 책에 책갈피를 꽂아두고 잠시 덮어두고 전화를 받았어요. 업무 관런해서 질문이 들어왔었네요. 당신은 대답을 해주고 다시 책을 펼쳐 정확히 읽던 부분부터 읽기 시작했습니다. 제너레이터 함수도 이와 비슷하게 돌아가요. 함수의 실행을 '일시 중지'했다가 '다시 시작'할 수 있다는 것이죠! 어떻게 작동할까요? function 키워..

들어가며 React Native Expo를 통해 프로젝트를 생성했다면, 이제 각각의 화면마다 이를 넘겨주는 기능이 필요하다. 이에 TypeScript와 함께 사용하는 방법을 보도록 하겠다. React에 React Router DOM이 있듯이 React Native에는 react-navigation이 있다. 이 글에서는 프로젝트를 생성한 상태에서 "home", 그리고 "login"을 만들어 두 페이지끼리 이동하도록 해볼 것이다. 1. Install Packages 먼저 네비게이션과 관련되어있는 모듈들을 설치한다. # 이 부분은 이상하게 npx expo를 통해 설치하면 오류가 발생한다. yarn add @react-navigation/stack # 나머지 패키지 설치(expo cli 사용) npx expo..

'클린 코드'가 코드에 대한 책이 아닌 사실에 대하여 책이 아니라고요? 그렇다네요. 왜 두번이나 다녀왔어요? 오늘은 학교에서의 회의를 마치고 클린코드에 대한 2번째 컨퍼런스에 다녀왔습니다. 첫 번째는 11월 22일에 다녀왔던 GOORM COMMIT에서, 그리고 두 번째는 오늘 다녀온 튜링의 사과에서 진행된 강연이었습니다. 첫 번째 클린 코드 관련 강연에 갔을 때에는 클린코드가 무언인지 궁금해서 갔고, 그리고 두 번째는 그래서 코드를 어떻게 대해야 하는 지 궁금했기에 다녀왔습니다. 물론 두 곳 모두 왕복 약 80정거장이라는 정말 긴 거리를 다녀오긴 했지만, 그래도 처음과 두 번째가 모두 얻어가는 것이 있었습니다. 결론부터 말씀드리자면 클린코드에 대한 생각 뿐만 아니라 코딩을 대하는 근본적인 생각까지도 변화..

들어가며 크로스 브라우징 이슈는 현대 웹 개발의 중요한 과제입니다. 오늘날, Microsoft Edge, Safari, Chrome, Arc와 같은 다양한 브라우저가 존재하면서, 웹 개발자들은 이들 각각의 특성을 고려하여 웹서비스를 개발해야 합니다. 그리고 이러한 상황에서 발생하는 중복과 호환성 문제를 '크로스 브라우징 이슈'라고 부릅니다. 그렇다면, 이 이슈는 왜 발생하는 것일까요? 이 문제를 깊이 이해하기 위해, 먼저 크로스 브라우징의 원인을 살펴보고, 그로 인해 발생하는 문제들을 탐구해보겠습니다. 크로스 브라우징 이슈란? "크로스 브라우징 이슈"는 여러 웹 브라우저 간의 호환성 문제로 인해 발생합니다. 다음과 같이 몇가지 주요한 원인들이 존재합니다 브라우저 간 차이 웹 표준 준수 사용..

3주차를 돌아보며 3주차에서 가장 크게 와닿았던 부분이 소숫점 계산이었다. 원래는 round() 메서드를 이용하여 10을 곱하고 10을 나누어서 했었는데 toFixed() 라는 아주 좋은 메서드가 있었다. 이제 깊은 깨달음을 얻었으니 앞으로는 이걸 써야겠다. plus+ : 이거 알았으면 숫자 제한으로 안걸리도고 10억원어치 로또를 한번에 살 수 있었을지도... 무슨 소리냐고?? 로또를 10억원어치 자동으로 돌려보았던 지난주차 보고오기 프리코스 4주차는 시작부터 폭탄이 예고되어 있었다 ???: 여러분들 지금까지 프리코스 잘 즐기셨죠? 이제부터는 익스펜시브코스에요~ 때는 바야흐로 수업을 듣고 있는 시간대이며, 코수타가 진행되는 시기인 목요일 오후 2시 이후... 이번 주에도 수업이 있어서 라이브로 듣지는 못..

Top 6

Recent

티스토리툴바