분류 전체보기218 VSCode Liveshare로 페어 프로그래밍 시작하기 이 글은 "TCP 웹 프론트 스터디" 의 안내를 위해 작성되었습니다. 이번에 과제형 스터디를 진행하면서 효과적인 학습을 위해 페어 프로그래밍을 도입했습니다. 직접 만나지 않더라도 페어 프로그래밍을 진행하는 방법은 다양하게 있지만, 그 중 VSCode의 Liveshare 플러그인을 통해 진행하는 방법을 알아보겠습니다. 설치 VSCode 기준 왼쪽 탭 메뉴에서 Extensions 메뉴를 찾습니다. 단축키는 윈도우 기준 [Ctrl + Shift + X], 맥 기준 [Cmd + Shift + X] 입니다. "Live Share" 으로 검색하여 Microsoft 사의 Live Share 플러그인을 다운로드 받습니다. Live Share Audio까지 함께 설치하고 싶다면 사진 기준 3번째의 Live Share E.. 2023. 1. 9. 2022년을 보내주며 태어나서 가장 바쁘게 보냈던 2022년이 끝났다. 새롭게 경험했던 것들도 참 많았고, 꾸준히 이어온 것들도 많아 작년 이맘때보다 훨씬 많은 것들을 채워넣었다고 느낀다. 작년 회고에서는 "스스로의 성장 곡선이 가장 큰 기울기를 기록했다" 라고 적었던데 올해는 그보다 두 배는 가파른 것 같다. 역시 해보기 전까진 모르는게 인생인가 보다. 올해 있었던 굵직한 일들을 위주로 회고를 시작해보려고 한다. 우아한테크코스 🪐 올해는 이걸 빼놓고는 설명할 자신이 없다. 프리코스를 제외하고 본 과정만 2월 8일부터 11월까지 열 달 정도 진행된 과정이라 그 지분이 대단(?)했다. 물리적인 시간 자체도 길었지만 그 시간을 정말 압축하고 또 압축해서 보낸 느낌이라고 해야할까? 이런 기회는 인생에 두 번 오지 않는다는 마음으로.. 2023. 1. 2. Web과 Ajax에 대하여 오늘은 오랜만에 웹에 관련된 포스팅입니다. 혹시 초창기에 서비스 되던 웹의 모습을 알고 계신가요? 지금 우리가 사용하고 있는 대표적인 포털 사이트인 네이버와 다음의 초창기 모습은 현재의 모습과는 사뭇 달랐습니다. 제가 기억하는 모습보다도 훨씬 이전의 화면들이라 낯설게 느껴지는데, 몇 가지 특징들이 눈에 들어옵니다. 요즘은 어딜가도 쉽게 찾아 볼 수 있는 CSS를 이용한 화려한 스타일들은 보이지 않고, 파란색 밑줄이 그어진 a 태그나 블릿이 찍혀있는 li 태그 등 HTML 태그들이 기본으로 갖고있는 스타일들이 그대로 노출되어 있는 모습입니다. 이제는 거의 사용되지 않는 table 태그도 보이네요. 두 페이지 사이의 시간 간격이 1년(네이버 1998년 12월, 다음 2000년 2월)이 조금 넘게 있는만큼 이.. 2022. 12. 30. 리액트에서 기본 컴포넌트를 만들때 이번에 사이드 프로젝트를 하며 맞닥뜨렸던 문제인데, 잊기전에 간단히 정리해두려 합니다. 문제 상황 프로젝트를 처음 시작하면, 디자인을 적용하기 위해 자주 쓰는 기본 HTML 요소들을 커스텀 컴포넌트로 만들게 됩니다. 예를 들면 태그나 태그등이 있습니다. 보통 아래처럼 다양한 props들을 받을 수 있도록 여러가지 인자를 선언해두고 사용합니다. export interface InputProps { isValid?: boolean; hasUnderline?: boolean; } const Input = ({ isValid = true, hasUnderline = false, }: InputProps) => { return ; } 그러나 이미 존재하는 태그를 덮어씌워 반환해주는 이러한 기본 컴포넌트의 경우 그.. 2022. 12. 22. 썸네일 생성기를 리뉴얼 했어요 지금으로부터 약 1년 전, 블로그 포스팅에 사용하기 위해 썸네일을 생성해주는 프로그램을 만들었습니다. 이때 만든 프로그램을 지금까지도 만족스럽게 쭉 써오고 있었는데, 몇 가지 불편한 점이 있었으나 기술적인 역량이 부족하여 손대지 못하고 있었습니다. 🚩 이전에 만들었던 썸네일 생성기 제작기 썸네일 생성기를 만들었어요 (Thumbnail generator) 이번에 우아한테크코스를 진행하며 생각해오던 목표 중 하나가 기술적으로 성장해서 이전에 진행했던 프로젝트들을 리팩토링 하는 것이었습니다. 현재까지 가장 많이 사용했었고, 앞으로도 계속 사용할 예정이며 직접 사용하며 느꼈던 불편점들이 명확했던 썸네일 생성기가 첫 번째 대상이 되었습니다. 현재 프로젝트의 문제점 우선 기술스택부터 점검하였습니다. 기존의 썸네일 .. 2022. 12. 12. Canvas API 사용해보기 이번에 사이드 프로젝트를 다시 설계하는 작업을 진행하며 처음으로 Canvas API를 직접 사용하게 되었습니다. 이전에는 라이브러리를 통해 Canvas를 간접적으로 다루어 잘 몰랐었는데, 참 특이하면서도 재미있는 API라는 생각이 들었습니다. 이번 포스트에서는 Canvas API의 기본적인 사용법부터 사용하면서 직접 겪었던 문제들까지 함께 공유해보도록 하겠습니다. Canvas API Canvas API는 주로 2D 그래픽 요소를 그리기 위해 사용됩니다. 간단한 도형 뿐 아니라 이미지를 추가하거나 편집하는 용도로도 많이 사용되며, jpg, png, base64 등 다양한 형식으로 출력이 가능합니다. 예시로 이렇게 사용할 수 있습니다. HTML Javascript const canvas = document... 2022. 12. 9. 이전 1 ··· 8 9 10 11 12 13 14 ··· 37 다음
