run_dev run_dev

배고픈 12시 점심시간이 다가옵니다. 오늘은 어딜가서 무엇을 먹어야할지 고민합니다. 메뉴를 고르고 맛있다고해서 찾아간 식당이었는데, 바로 자리가 생겨서 가게에 들어갔고, 주문한 음식도 굉장히 빨리 나오고, 맛도 좋았습니다. 게다가 바쁜와중에도 가게 직원분들은 생긋생긋 웃는 얼굴에 친절이 가득합니다. 보통 이런상황을 겪으면 이 가게는 좋은 곳이야. 다음에 또 와야지 라는 생각을 하죠. 식당에서의 이런 경험은 웹사이트를 방문하는 사용자의 경험과 비슷합니다. 사용자가 웹사이트를 방문하는 순간을 생각해보세요. 마치 배고픈 점심시간에 식당을 찾아가는 것처럼, 사용자는 특정한 목적과 기대를 가지고 웹사이트를 방문합니다. 웹사이트가 빠르게 로드되고, 원하는 정보를 쉽게 찾을 수 있다면? 주문한 음식이 신속하게 나오는..

컴퓨터는 숫자만 다루던 계산기였어요최초의 전자식 컴퓨터인 에니악(ENIAC)은 이름부터 전자식 숫자 적분 및 계산기 (Electronic Numerical Integrator And Computer) 였습니다. 포탄의 탄도학 계산을 위해 발명되었던 최초의 계산기는 30톤에 달하는 거대한 톱니바퀴로 이루어진 쇳덩이였습니다. 최초의 컴퓨터는 문자 입출력이 불가능했어요. 숫자와 문자를 처리할 수 있는 컴퓨터는 UNIVAC I(UNIVersal Automatic Computer I)이 시작이었어요. IBM이 비지니스 환경을 위해 설계한 미국 인구조사국에서 사용된 최초의 상업용 컴퓨터 이기도 합니다. 그리고 1963년 컴퓨터간 데이터 교환을 위한 최초의 표준화된 문자 인코딩 방식인 ASCII (American S..

멘토링중에 이런 질문이 있었습니다. 코드 검색하다 보면 pnpm이라는 게 종종 보이는데, pnpm에 대해 궁금하다고 하셨어요.마침, 저도 yarn, npm은 거리낌 없이 쓰던차에 왜 npm을 쓰고, 왜 yarn을 썼는지 이유 없이 그냥 썼습니다. 마치 어렸을 적 스타크래프트 치트키 외워서 쓰듯이 (에스 에이치 오 더블유 엠 이...) npm install, yarn add 이렇게 몸의 기억으로 썼습니다. 그래서 pnpm을 알아보면서 패키지 매니저 종류는 뭐가 있고 장단점은 무엇인지, 언제 쓰면 좋을지 등등등 알아봤습니다. 패키지 매니저패키니 매니저가 하는일은 프로젝트에 의존성을 설치, 삭제, 업데이트하는 일 이외에도 많습니다. pacakge.json 파일에서 dependencies와 devDependen..

2024년은 한마디로개발자로 많이 성장하고, 지연보상을 경험하고, 친구들과 돈독해지고, 내 취향을 더 알 수 있었고, 사랑과배려를 배운 한해였다.* 개발자로 성장했다고 느꼈던건 지난 1년 6개월동안 개발했던 모든것이 다 처음 시도했던것이고, 요구사항대로 잘 동작했다. 특히, 작년에 혹은 올해 초에 내가 만들었던 코드들을 다시 보고 보기좋게 추출해내거나, 정리하거나, 더 좋게 만들수 있을 것 같은데..라는 생각과 함께 고쳐나갔기 때문이다. * 잘한다고는 못하겠다, 하지만 성장은 했다. 1월보다, 5월보다, 8월보다 오늘이 더 나아졌으니까. 어제보다 오늘 더 공부한게 많고 얻은 지식과 영감이 많으니까. * 3개월동안 마라톤 프로그램에 참가했다. 마라톤 기록 단축이라는 목표를 줄이려고 3개월을 훈련했다. 물론..

실행 컨텍스트 개념을 공부하던중, 브라우저 환경에서 자바스크립트 코드가 어떤 단계를 거쳐 실행 되는지 좀더 알아보고 싶었습니다.실행과정1. HTML을 파싱하다가 태그를 발견!지난번 작성한 [렌더링은 무엇일까]에서 알아봤던데로, HTML 코드를 다운로드 받아 파싱하던중 추가 리소스 요청 및 렌더링 준비 과정에서 태그를 만나면 브라우저는 잠시 HTML 파싱을 멈춥니다. 태그 안에 직접 작성된 코드를 로드 하거나, src속성을 통해 외부 자바스크립트 파일을 불러옵니다.만약 외부 스크립트인 경우, 해당 파일이 모두 다운로드 될 때까지 기다립니다.Javascript는 전체 DOM 구조를 변경하는 document.write() 등을 사용해서 문서의 모양을 변경할 수 있기 때문입니다.2. 로드가 다 되면 자바스..

자바스크립트의 동작 원리를 공부하다보면 참 이해가 될듯 안될듯 한 개념이 호이스팅입니다. 호이스팅 개념을 정리하면서 어떤 개념인지 좀더 자세히 알아보겠습니다.1. 호이스팅(Hoisting)이란?MDN에서는 호이스팅을 이렇게 설명하고 있어요. 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위(스코프)의 맨 위로 끌어올리는 것처럼 보이는 현상 입니다.여기서 인터프리터는 소스 코드를 읽어서 프로그램을 실행시키기 위한 방법인데, 한줄 한줄 읽어가면서 즉시 실행시키는 방식입니다. 여기서 인터프리터가 코드를 실행하기 전 이라는 표현을보고 사전에 뭔가 실행되는 단계가 또 있는것 같다고 생각했습니다. 우선은 이런 단계가있다는것만 알아두고 뒤에서 자세하게 다루겠습니다. 우선..

SSR,CSR 개념을 공부하면서 마주할 수 있는 개념중에 장,단점을 이해 하려고 해봤지만 쉽게 이해되지 않는 개념이었습니다. 특히, 초기 렌더링 속도의 차이를 이해할 때 더더욱 어려웠습니다. 이유는, 렌더링을 이해하지 못하고있어서 였습니다. 여태까지 렌더링은 HTML 파일이 다운로드 된 시점으로 생각하고있었습니다. 이건 크나큰 착각이었습니다. 렌더링이 무엇인지부터 알았으면 이런 무지는 없었을것같아요. 렌더링이 무엇이고, 렌더링이 빠르다, 느리다의 기준은 어떤게 있는지 알아보면서 브라우저, 웹, 프론트엔드의 기초를 정리해보려고 합니다.렌더링이란?렌더링은 브라우저가 서버로부터 받은 HTML, CSS, JavaScript 파일을 사용자가 볼 수 있는 시각적 콘텐츠로 변환하는 과정입니다. 브라우저는 이 파일들을..

오프라인에서 개발자 모임을 기획하고, 준비, 진행까지 벌써 세번째 경험이다.한번은 글또에서 프론트엔드&모바일 반상회를 나머지 두번은 이 퓨처콘에서.시작은 항상 이랬다. "개발자 모임 만들껀데 도와주실 분 있나요?"에 반응해서 "저요"로 귀결됐다.어렸을때에는 이런 행사기획이나, 모임의 준비위원회 같은 시작을 담당하는 일이 부담스러워 항상 요리조리 피했고 기피했다. 나는 이런걸 잘 못한다고 생각해서 자신감이 없어서 그랬던것 같다. 지금와서 생각해보면 참 많이 발전한것같다.경험이 쌓이다보니 아이디어 회의도, 타임테이블 설정도 금방 끝낼 수 있었다. 점점 선택과 집중을 할 수 있게 된것 같다. 많은 시간을 쓸 주요 컨텐츠와, 놓치면 안되는 디테일한 안내 부분들 까지 챙길 수 있게 됐다.이와중에 기술발표 자료도 ..