전체 글

대학원에 갑니다

에궁.. 그렇게 됐습니다 HCI 연구하러 카이스트 대학원에 갑니다 제 취향과 관심사를 백번 반영하여 산업디자인 대학원으로 가는데 제 예상대로라면 아마 계속 개발할 것 같습니다 아니 당신 ! AI 대학원 간다고 하지 않았냐 개발자 하는거 아니었냐 하실 수 있는데요.. 제 관심사의 변화 과정이 궁금하시면 디엠이라던지 댓글이라던지 카톡이라던지 아무튼 무언가를 통해 물어봐주세요 합격 후기 적고 싶은데 제 블로그에 사람이 너무 많이 와서 무서워서 여기다간 못 적겠어요 블로그에는 종종 오겠습니다 안뇽 🫧

[프레임워크 없는 프론트엔드 개발] 5장. HTTP 요청

간단한 역사: AJAX의 탄생 Ajax 시작하기 - 웹 개발자 안내서 | MDN 본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다. developer.mozilla.org 1999년 이전에는 서버에서 데이터를 가져올 때 전체 페이지를 다시 로드해야 했다. 하지만 AJAX(Asynchronous JavaScript and XML)의 등장 이후로 서버에서 데이터를 가져올 때 페이지를 완전히 다시 로드하지 않고 필요한 데이터만 서버에서 가져와 화면을 채우는 식으로 개발이 가능해졌다. AJAX 애플리케이션의 핵심은 XMLHttpRequest 객체로, 이것을 통해 HTTP 요청으로 서버에서 데이터를 가져올 수 있다. 요즘은 자바스크립트를 통한 비동기 통신을 통칭하는 단어..

[프레임워크 없는 프론트엔드 개발] 4장. 웹 구성 요소

웹 컴포넌트 API 웹 컴포넌트에는 세 가지 중요 기술이 있다. HTML 템플릿: 태그는 컨텐츠가 렌더링되지는 않지만, 자바스크립트 코드에서 동적인 컨텐츠를 생성하는 데 ‘스탬프’로 사용되도록 하려는 경우에 유용하다. 사용자 정의 요소: 이 API를 통해 개발자는 완전한 기능을 갖춘 자신만의 DOM 요소를 작성할 수 있다 - 사용자 정의 HTML 태그를 만들 수 있다. Shadow DOM: 이 기술은 웹 컴포넌트가 컴포넌트 외부의 DOM에 영향을 받지 않아야 하는 경우에 유용하다. 다른 사람들과 공유할 수 있도록 구성 요소 라이브러리나 위젯을 작성하려는 경우에 유용하다. 가상 DOM과는 완전히 다른 개념이며, 섀도우 DOM은 캡슐화와 관련되고, 가상 DOM은 성능과 관련된다. HTML 템플릿은 3장에서 ..

[프레임워크 없는 프론트엔드 개발] 3장. DOM 이벤트 관리

지난 장에서는 데이터에 따른 DOM 엘레먼트를 어떻게 그리는지에 대해 알아봤다면, 이번 장에서는 화면을 동적으로 바꾸는 이벤트에 대해 알아본다. YAGNI 원칙 YANGI는 ‘You aren’t gonna need it(정말 필요할 때까지 기능을 추가하지 마라)’의 약자로, 익스트림 프로그래밍의 원칙 중 하나다. 프레임워크 없이 개발할 때에는 이 원칙이 절대적으로 중요하다. 아키텍처를 과도하게 엔지니어링하는 경우를 막기 위해서다. DOM 이벤트 API 이벤트는 웹 애플리케이션에서 발생하는 동작으로, 브라우저는 이벤트가 발생하면 사용자에게 알려주고 사용자는 이벤트에 대해 어떤 방식으로든 반응할 수 있다. 이벤트에는 다양한 종류가 있다. 전체 이벤트 리스트는 여기서 확인 가능하다. Event referenc..

[프레임워크 없는 프론트엔드 개발] 2장. 렌더링

문서 객체 모델(DOM) 문서 객체 모델(DOM)은 프로그래밍 방식으로 엘레먼트를 렌더링하는 방식으로, 우리는 DOM을 통해 웹 애플리케이션을 구성하는 엘레먼트들을 조작할 수 있다. 우리가 보는 HTML은 모두 DOM 트리 형식으로 표현할 수 있는데, 이 트리의 노드에 querySelector 등의 메서드로 접근하여 속성을 변경할 수 있다. 렌더링 성능 모니터링 여기선 렌더링 엔진의 성능을 모니터링하는 여러 도구를 살펴본다. 구글 개발자 도구 개발자 도구를 연 다음 cmd(ctrl)+shift+P를 누르고 Show frame per seconds (FPS) meter 메뉴 항목을 선택하면 FPS 미터와 함께 GPU에서 사용하는 메모리양을 볼 수 있다. stats.js GitHub - mrdoob/stat..

[프레임워크 없는 프론트엔드 개발] 1장. 프레임워크에 대한 이야기

프레임워크의 정의 프레임워크는 무언가를 만들 수 있는 지지 구조로, 우리는 프레임워크에서 제공하는 구성 요소와 기본 요소들을 가지고 서비스를 만들 수 있다. 프레임워크는 사용 언어, 의존성 주입 방법, 디렉터리 구조 등을 문법적으로 강제하거나, 프레임워크 커뮤니티 내에서 만든 ‘사실상’ 강제되는 몇 가지 제약 조건을 갖고 있으며, 프레임워크를 사용하려는 개발자는 이 제약 조건에 맞춰 코드를 작성해야 한다. 프레임워크 대 라이브러리 - 비교로 간단하게 알아보기 💡 프레임워크는 코드를 호출한다. 코드는 라이브러리를 호출한다. 우리가 웹 서비스를 개발할 때 사용하는 프레임워크 중 하나인 Angular와 날짜를 다루는 라이브러리인 Moment.js를 비교해 보면 프레임워크와 라이브러리의 차이점을 이해할 수 있다..

2022 간단 회고

스타트업에서 일했다 스타트업을 다니면서 참 위아래로 폭넓은 경험을 했다. 지금은 10개월 간의 추억을 안고 퇴사했다. 스타트업에서의 경험은 내가 기대했던 회사생활은 아니었다. 대학원에 들어가기 전 개발자로서의 생활에 미련갖지 않기 위해서 스타트업에서 같이 일해보지 않겠냐는 제안을 받았을 때 별다른 고민 없이 좋다고 말씀드렸다. 회사를 나올 때쯤 되면 대학원에 갈 지 아니면 개발자로 계속 일을 할 지 결정을 내리겠지 싶었는데 입사하기 전보다 더 모르겠다. 회사에서 나의 기술적인 부분을 많이 인정받고 칭찬해주신 덕분에 개발자로 계속 일하고 싶다고 생각하는 동시에 자꾸 대학원에 가고싶다는 생각이 머리 속을 떠나지 않는다. 문제는 내가 대체 대학원에 가서 뭘 하고 싶은지를 모르겠다. 공부하고 싶은 분야도 한 개..

친구 중 하나가 구글 유튜브에 나온다고 생각한 적이 있습니까?? - 구글이랑 인터뷰한 짧은 썰

이미 일어났으니 각오해라 GDSC 솔루션 챌린지에서 우수한 성과를 낸 숙명여대, 그 중 Top50에 들었던 NotiNote팀에 대한 이야기입니다. 다문화 가정의 부모들이 학교 소식지를 번역하고 읽을 수 있도록 돕는 앱인 NotiNote를 어떻게 구축했는지 살펴보세요. 팀 내에 작년 리드, 올해 리드, 코어멤버들이 포함되어 있어 GDSC 숙명에 대한 이야기도 담겨져 있으니 함께 보러가시죠! HTML 삽입 미리보기할 수 없는 소스 평소에 온갖 생각이란 생각을 다 하고 사는 사람이기 때문에 개발자나 연구원으로 성공해서 큰 컨퍼런스에 나가 발표하고 환호받는 상상이나 갑자기 아이돌로 전향해서 팬 사인회에서 열심히 팬서비스하는 모습을 생각해보곤 하지만 내가 구글 유튜브에 그것도 GDSC Korea 최초로 출연하게 ..

2022 디자인 시스템 라이브러리 11개 찍먹 후기

안녕하시렵니까? 서론 회사에서 대시보드를 만들 일이 생겼는데, 최대한 디자인에 노력을 들이지 않고 스타일을 입힐 수 있으면 좋겠다는 요구사항이 있었다. 그래서 유명한 디자인 시스템과 유명한 회사들의 디자인 시스템을 사용해 직접 간단한 대시보드를 꾸며보고, 후기를 적어보았다. React 18을 지원하지 않거나, install 과정부터 험난한 라이브러리들은 공식문서만 읽고 사용해보지 않았다. 스크린샷이 없는 라이브러리는 모두 직접 사용해보지 않은 라이브러리라고 생각하면 된다. 1. Material-UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of Re..

NotiNote의 2022 Solution Challenge Global Top 50 진출기 - (2)

2편이 너무 늦은 점 죄송합니다. 한때 파워블로거가 꿈이었는데 이정도 업데이트 속도라면 빠르게 꿈을 접길 잘했네요. 2편에서는 Top 50 세미 파이널 진출 이후부터 Top 10 결과 발표까지의 이야기를 다룹니다. 솔루션 챌린지가 무슨 대회인지 궁금하신 분들은 아래 '더보기' 클릭 고고 더보기 🤨 잠깐, Solution Challenge가 무엇인가요? 2022 Solution Challenge | Google Developers Solve for one or more of the United Nations 17 Sustainable Development Goals using Google technology. developers.google.com 솔루션 챌린지는 GDSC 소속 학생 한 명을 포함한 대학생..