Grace's Tech Blog

CSS; Cascading Style Sheet 해당 내용은 드림코딩 엘리님의 유튜브 강의를 보고 정리한 것입니다. 1. 의미, 정의 웹사이트를 스타일링 할 때는 총 3가지로 나누어서 생각해 볼 수 있다. Author style: css파일로 만든사람(우리)가 지정한 스타일들 User style: 사용자가 지정하는 스타일로, 다크모드, 글자 크기 .. 등이 있다. Browser: 브라우저에서 기본적으로 지정된 스타일 CSS의 C 즉, Cascading은 연속화 라는 의미로, Author style에서 해당 스타일이 있는지 살펴보고 없으면 User style, 그 후엔 Browser로 흐름이 이어지게 된다. CSS의 문법은 [Selector]{ [꾸미고 싶은 Property]: [어떻게 꾸미고싶은지에 대한..

0. Start With.. HTML 요소 참고서 Document and Website Structure 더보기 몇 요소들은 대부분의 페이지에 공통적으로 적용될 것이란 걸 명심하세요 — 네비게이션 메뉴나 footer 컨텐츠처럼. 예를 들어 비즈니스를 위한 페이지라면, 당신의 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각입니다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적어보세요. 다음으로, 각 페이지의 구조를 간단한 스케치로 그리세요.아마 위의 우리의 간단한 웹사이트 같을 것입니다). 각 블럭의 기능을 적으세요. 이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorm하세요 - 리스트에 모두 적어 내려가세요. 다음으로, 이 모든 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 5. State & Lifecyclev 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 6. Handling Events 에 대해서 정리해볼 것이다. React의 주요 개념들 6) Handling Events 앞에서 정리한 순서대로 ' react 개발환경 설치 → Component 제작 → Props의 사용 → state의 사용' 등을 해서 이런 결과창을 띄우는 것 까지 했다고 가정해보자. 그런데 아무런 event를 등록 해주지 않아서, 리스트에 각각의 링크를 클릭 하더라도 아무 일도 일어나지 않는다. 그래서 지금부터는 R..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 5. State & Lifecycle 에 대해서 정리해볼 것이다. React의 주요 개념들 5) State & Lifecycle 1. State 이전 Component와 Pros를 정리한 포스트에서 " name='Sara', name='Grace'에 해당하는 props는 읽기 전용값으로, 함수 component나 클래스 component 모두 component의 자체 props를 수정해서는 안 된다. 그래서 React에서는 State를 통해 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 필요성과 소개 및 React의 주요 개념 중 1. 기본틀, 2. JSX(JSX으로 Element생성:React.createElement()) , 3. Element (생성된 Element를 DOM으로 rendering: ReactDOM.render()) 에 대해서 알아보았다. 이번에는 React의 주요 개념 중 4. Component와 Pros 에 대해서 정리해볼 것이다. 1. React의 주요 개념들 4) Component와 Pros ① Component란? component는 props라는 입력을 받아서 React element를 return 하는..

1. What is React? 1) React란? React는 Component(하나의 의미를 가진 독립적인 단위 모듈 - 쉽게 말해 나만의 HTML 태그)를 사용하는 사용자 인터페이스를 만들기 위한 프론트엔드 라이브러리이다. 그러니까 주요 단어가, Component, 사용자 인터페이스(UI), 라이브러리 이다. 먼저 사용자 인터페이스는 사용자와 프로그램이 정보를 주고받기 위해 사용자와 프로그램이 상호작용하는 프로그램의 일부분이다. 그리고 라이브러리란, 특정 기능에 대한 API(도구/함수)를 모은 집합니다. (동기이신 SH님께서 쉽게 정리해주신 글을 참고하면) 미리 만들어 둔 여러가지 템플릿을 모아둔 저장소이다. ※ 프레임워크와 라이브러리의 차이점은 여기에.. 그럼 Component는? 위에서 언급했듯..

1. CommonJS 프로그램이 복잡하고 길어질수록 이를 부품화해서 여러 파일에 분리한다면 간결해지고, 다른 여러 프로그램에서도 그 부품을 가져다 쓸 수 있을 것이고, 코드의 재사용성도 높일 수 있다. 이렇게 여러 파일에 분리하는 것을 모듈화라고 하며 각 부품에 해당하는 조각조각의 코드들은 모듈이라고한다. 이번 Sprint를 진행하면서 본격적으로 많은 파일들을 생성하고 모듈로써 사용하는 것을 해보았다. 이 모듈과 관련된 것이 CommonJS이다. "using the CommonJS APIs and then run that application across different JavaScript interpreters and host environments. - CommonJS 공식홈페이지" CommonJS..

이전 Sprint에서는 Node.js를 이용한 서버 구축을 해보았습니다. 그러나 코드가 복잡해지면 이렇게 계속 if문이 계속 되는 코드가 매우 힘들어질 것입니다. 이런 상황에서 코드의 복잡성을 낮춰주고, 웹 애플리케이션을 구현하는 과정에서 공통적으로 요구되는 일들을 대신해주는 것이 프래임워크라고 합니다. https://wikibook.co.kr/article/what-is-expressjs/에서는 Node.js의 핵심 모듈만 이용해서 중요 앱을 작성한다면 HTTP 요청 본문 파싱 쿠키 파싱 세션 관리 URL 경로와 HTTP 요청 메서드를 기반으로 한 복잡한 if 조건을 통해 라우팅을 구성 데이터 타입을 토대로 한 적절한 응답 헤더 결정 하는 과정을 지속적으로 반복해야 하는 반면, Express.js는 이..

지금까지의 내용을 정리하면, "Client는 요청하는 주체 - API가 이 요청/응답을 정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 규약에 맞게! - Server는 응답하는 주체이다. Client가 Server로부터 요청에 대한 응답(데이터같은..)을 받아서 이를 보여줄때 JavaScript를 사용한 비동기 통신으로 데이터를 주고받는 기술인 AJAX가 있으며, 이때의 Server는 Javascript로 프로그래밍을 하면, 컴퓨터가 알아들을 수 있도록 해주고, 비동기적으로 작동하는 Node.js를 사용해서 구축한다. " 입니다. node.js를 사용하려고 설치를 하면 이와 함께 번들링 되어있는 여러가지 모듈이 있으므로 require문법을 이용해서 불러서 사용할 수 있습니다. 이 중 대표적인 모듈이..

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/ HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Interaction With Server Sprint에서는 Client와 Server 통신에 관한 개념을 배우고, (이미 잘 구축되어있는 Server가 있어서)fetchAPI를 이용하여서 Client를 구축 하고, 서버에 GET, POST요청을 보내고 그 응답 결과를 이용해 화면을 구성하고 변경하는 것에 대해 배웠다. 이번 Server&Node Sprint에서는 node.js를 이용하여 이미 잘 구..