Web-Server

제목 : 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..

제목 : React 를 다시 공부하기 전 스스로에 대한 고찰 및 비판이 글을 작성하게 된 계기웹 사이트를 제작하기 위해서 어떤 도구를 사용하는가? 스스로에게 질문 해 보았다.현재 (25-05-10) 기준으로, 간단한 웹 사이트를 만들기 위해 사용하는 템플릿은 React 일 것이다.Vibe Coding (바이브 코딩) 이라는 패러다임이 현재 유형하는 상황인데,이는 코드를 건드리지 않고, 단순히 AI 와 글 혹은 언어로 상호작용 함으로서 특정 어플리케이션을 만들어 가는 것을 의미한다.물론, 뒤따라올 기술 부채는 전혀 생각하지 않고 만드는 것이니, 오래 갈 수 있는 프로그램을 작성하는 것은 거의 불가능하다 생각한다.기술 부채란, 어떠한 프로그램을 작성하기 위해 이미 존재하는 편리한 프로그램들을 아무 생각 없이..

4장 - 이벤트 핸들링 리액트의 이벤트 시스템 - React Typescript Versionsrc/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!먼저, 작성했던 Say.tsx 파일부터 보겠습니다.Say.tsx// (...)import { useState } from 'react'const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('Hello!'); const onClickLeave = () ..

함수 컴포넌트에서 useState 사용하기사실상 제일 많이 사용하게 됩니다.Hook 이라는 요소에 속합니다.useState 사용하기Say.tsx// (...)import {useState} from 'react'const Say = () : JSX.Element => { const [message, setMessage] = useState(''); const onClickEnter = () : void => setMessage('Hello'); const onClickLeave = () : void => setMessage('Good Bye!'); return ( 입장 퇴장 )}export default Say..

state - Typescript컴포넌트 내부에서 바꿀 수 있는 값props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!! 클래스형 컴포넌트의 statesrc/ 디렉토리에 여전히 작성하시면 됩니다.Counter.tsx// (...)import { Component } from 'react';interface StateFace{ number : number;}class Counter extends Component { constructor(props : {}){ super(props); /..

비구조화 할당 문법을 통해 props 내부 값 추출하기 - Typescript앞선 문법에서는 props를 그대로 사용했습니다.이번에는 함수 내부에서 변수에 할당 하여 사용 할 것 입니다.먼저 알아야 할 것!props 로 오는 값은 Object의 형태를 띄고 있습니다.Example// App.tsx에서 name, children 값을 보내 왔다고 가정하겠습니다.props = { name : 'Gong', children : 'React'}// name : string, children : string 인 것을 알 수 있습니다.// 따라서,interface PropFace{ name : string; children : string;}// props로 오는 name 그리고 childre..