Web-Server

제목 : 점진적인 리액트 프로젝트 도입 과정과 문제 해결 과정이 글을 작성하는 이유는?빠른 프로젝트 생성과 웹 페이지 생성에 초점이 맞춰진 현대 프로그래밍 트렌드는 AI 로 인해더욱 중요해진 요소로 꼽히고 있다.현재 프로그래밍 세상에서, 오히려 해당 분야에 대한 깊은 공부는 공감받지 못하는 사회라는 것을 느낀다.오히려, 빠른 개발을 요하는 실제 프로덕션 세상에서, 깊은 이해를 위한 시간 소비는 사치라고 생각할 지 모른다.아니, 그것이 당연할 지도 모른다.그러나, 나는 역발상으로, 리액트라는 단어가 가지는 수많은 의미를 탐색해 왔다.리액트는 무엇인지, 어떤 것으로 이루어져 있는지, 어떤 방법론을 사용하는지 등등..심지어는 JavaScript 의 es6 이상 버전이 어떻게 es5 로 폴리필 되는지 확인할 정..

제목 : React 런타임 코드 해부 노트 : Fiber와 Scheduler를 따라간 21일부제 : setState 를 이해하기 위한 3500줄 추적기이 글을 작성하는 이유 :리액트의 상태 관리는 매우 복잡하게 연계되어 있다.옛날에 리액트를 배울 때, 함수 컴포넌트, 클래스 컴포넌트의 상태 변경 방법을 공부했다.아마 리액트를 써 보기만 해도 알 텐데, useState 와, setState 이다.useState 를 이용하여, 컴포넌트에서 사용한 내부 상태를 생성한다.setState 란, 클래스형 컴포넌트를 사용 할 시, 상태를 변경하기 위한 함수이다.useState Hook 의 상태 설정 메서드는setNum, setNumber, setString, setData 등등 원하는 대로 지정할 수 있다.브라우저에..

제목 : HTML 파일에서 React 사용하는 법이 글을 작성하는 이유npm, node 패키지로 npx 명령어를 실행하여 손쉽게 React 시작 템플릿을 가져올 수 있다.즉, 일종의 프로젝트 초기화 명령어인데, 리액트로 프로젝트를 시작한다면, 이를 통해 손쉽게 구축이 가능하다.그러나, React 는 컴퓨터 프로그램의 역사를 따져봤을 때, 긴 역사를 가지고 있지는 않다.즉, 아직 tomcat 서버를 이용하거나, httpd 와 같은 오래된 웹 서버로(물론, tomcat 은 웹과 WAS 의 역할을 동시에 수행한다.)바닐라 JavaScript 와 HTML, CSS 파일로 스타일링을 진행하며,동적 DOM 구축을 위해 JQuery 를 사용하고 있다.이미 내부적으로 데이터셋을 명시하고, 이를 어떻게 보여 줄 지복잡한..

제목 : React, 기반 뿌리부터 살펴보자 - (부제 : 다양한 방법론의 조합)이 글을 작성하는 이유드디어, JavaScript 의 Syntax Sugar 의 형태,JS 의 private 의 또 다른 의미, (실질적으로는 보안을 위해 # 으로 21 년 도입됨)Webpack 의 동작 원리, package.json, package-lock.json, tsconfig.json이 파일의 존재 이유에 대해서 파헤쳤다.또한, HTML5 정식 스펙상에 존재하는 "모든 카테고리의 태그" 를 다루었다. (실제 예제 및 렌더링 예시까지)특히, JS 로 제작된 대부분의 최신 프레임워크는 아직 정식 스펙에 도입되지 않은 문법을 채택하여이를 tsconfig.json 의 옵션에서 적용하고 있다는 것이 놀라웠다.async 와 P..

제목 : HTML 문서 태그 "전부" 공부하기 - 5편이전 편인 4 편의 주소https://codecreature.tistory.com/221이 글을 작성하는 이유HTML 태그를 "전부" 다루기 위해 1 편부터 4편 까지 달려왔다..태그 정의, 태그 예시, 태그 실제 표현 예시, 동적 스크립트이를 전부 구현 및 작성한다는 것은 정말 쉽지는 않은 일이었다. (태그가 많아서)일반적으로 상황에 맞게 자주 사용되는 태그들이 존재하는데,나는 JS 는 잘 사용하지만, 시멘틱 태그 자체에는 약해서 공부를 하게 되었었다.그렇다면, "나는 HTML 태그를 잘 알고 있느냐?" 라는 질문이 스스로에게 떠오른다..정말로 "모든" 태그를 다루고 있기에 힘들게 공부했지만, 자만하지 않고서로 정반대의 대답을 해 보도록 하자.- 나..

제목 : HTML 문서 태그 공부하기 - 4편3편 주소https://codecreature.tistory.com/219이 글을 작성하는 이유 :웹 페이지 개발에 있어 포텐셜을 높이기 위해, 웹 제작에 사용되는 태그들을 "모두" 익히고자시작한 프로젝트이다. 카테고리별로 나누어진 태그들을 "모두" 배우고 이를 실현 해 보며,나중에 어떻게 사용할지도 생각하며 작성하고 있다.솔직히 말해서이렇게까지 오래 걸릴 줄은 몰랐다.. 한 길어야 3 편 정도를 작성하겠지? 했는데아마 현재 작성하고 있는 4 편까지 포함해서, 5 편까지 나올 것 같다..현재까지 작성 완료한 카테고리 목록은Basic HTML - 기본적인 HTML 태그들Formatting - 형식 조작 태그들Forms and Input - 폼과 입력 태그들Fra..

제목 : HTML 문서 태그 공부하기 - 3편2편 글 주소https://codecreature.tistory.com/218이 글을 작성하는 이유나는 정식 스펙상에 존재하는 "모든" HTML 태그들을 공부하고 있다.이는 어찌 보면 미련한 짓일수도 있고, 미친짓을 하는 것일 수도 있다.그러나, 앞으로 다양한 웹 프레임워크와 라이브러리는 종류가 다양해지고 있는데,트렌드를 따라가기 위해 위 프로그램들의 공식문서를 보며, 공부하는 것도 괜찮다고 생각한다.그러나, 지속적으로 점유율이 바뀌고 있는 프로그램들을 살펴보았을 때,내가 적용하고자 하는 웹 라이브러리와 프레임워크가 존재 할 때,이러한 태그를 왜 사용해야 하는지, 공식문서에서 간단한 헤더 영역을 만들 때,왜 해당 태그를 사용하는지 이해하지 못한 상태로 공부하고..

제목 : HTML 문서 태그 공부하기 - 2편1편 글 주소https://codecreature.tistory.com/217이 글을 작성하는 이유위의 1 편 글을 잠깐 살펴보면서 리스트를 보았다면 알겠지만,모든 태그에 대한 의미와 사용처, 그리고 실제 구현까지 살펴보는 것은 보통 일이 아니었다.내가 React 를 통해 처음 웹 개발에 입문하였을 때, 나는 단순히 블럭을 선언하기 위해 를 사용했다.대표적인 태그 몇 개만 사용하며, 클래스로 구분하는 것은 그 때 당시엔 문제가 없었지만,추후 협업이나, 중급에서 고급 수준의 웹 페이지를 제작하는 과정에서 한계가 있을 것이라 판단했다.또한 각 태그가 가지고 있는 고유의 기능이나, Default 스타일링을 알고 싶었는데,정말 효과적으로 배웠다고 생각한다.옛날 개발..

제목 : HTML 문서 태그 공부하기 - 1편이 글을 작성하는 이유단순한 웹 페이지를 작성 할 때 뿐만 아니라, html 파일에 들어가는 tag 들을 알고 있는 것도 중요하다.나는 여태까지, JS 의 방법론 기술들 (React, Webpack, package.json, 등등 수많음)을 그냥 쓰지 않고, 최소한 그 의미를 알고 사용하기 위해서 노력 해 왔다.물론, 같은 맥락에서 보자면, HTML 태그를 단순하게 곧바로 사용하는 것이 아니라,각 시멘틱 태그의 의미와 사용법을 안다는 취지에서 비슷하다고는 할 수 있다.그러나, 좀 더 엄격하게 바라보자면, 각 태그가 어떻게 프로그래밍적으로 블록을 구성하는지 조사하지 않기 때문에,태그 자체를 알려고 노력하지 않는다고 할 수 있다.그러나, 이러한 HTML 태그를 다..

제목 : 웹 서버는 무엇이고, local, production 차이는 무엇일까?웹 서버에 대한 내용을 다루는 이유우리는 어플리케이션을 배포 할 때, 항상 Server 를 사용한다.이는 보통 알려진 프론트엔드, 백엔드, 할 것 없이, 모든 영역에서 사용한다.개발을 위해 테스팅을 할 때도, 배포를 할 때도, 마이크로서비스 또한 서버를 사용한다.나의 의문점은 웹 페이지를 서빙 해 주는 웹 서버 자체에 있었다.개발 도구의 편의성이 너무 높아, 내가 어떤 웹 서버를 사용하느냐는 신경 쓸 틈도 없이,웹 페이지의 결과를 브라우저에서 너무 잘 보여주고 있었다.웹 페이지를 load 하기 위해 가장 먼저 제공하는 파일은 보통 index.html 이므로,그냥 나의 컴퓨터 자체가 index.html 에서 원하는JavaScri..