본문 바로가기

javascript25

React - Component & Props 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 가장 중요하게 다루게 될 Component & Props 에 대해서 알아보도록 하겠습니다. React 를 다루기 위해서 가장 중요한 개념이 될 두가지를 알아보도록 하겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 Component 는 크게 "Function Component", "Class Component" 두가지가 존재합니다. 즉 함수형 컴포넌트, 클래스 컴포넌트라고 불리우게 되는데, 이는 이미 JavaScript 에서 우리가 작성을 해보았던 개념입니다. 예시를 간단하게 살펴보도록 하겠습니다. 1) Function Component const Text = (pr.. 2023. 2. 24.
React - JSX 문법 기초 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 를 사용하기 위해 기본적으로 이해해야하는 JSX 문법의 대한 기초적 사항을 학습하려고 합니다. 시작해보도록 하겠습니다. ============== HTML 삽입 미리보기할 수 없는 소스 ============== HTML 삽입 미리보기할 수 없는 소스 JSX 는, JavaScript XML의 약자로, JavaScript 의 기존 문법에서, 확장된 문법입니다. React 에서의 JSX 는 본질적으로 Component 를 이용해서 UI(User Interface) 를 rendering 하는 로직과 연결된다는 사실을 이해하고, 받아들여야 합니다. 이 로직에는 Event 가 처리되는 방식, 시간이나 이벤트 발동에 따라 State 가 바뀌는 방식, 이를 .. 2023. 2. 23.
React - React 기본사항 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이제 NodeJS 를 지나 React 의 기초를 알아보는 포스팅을 작성해보도록하겠습니다. 실제 Front-End 개발자들이 가장 많이 사용하는 Stack이기도 한 React, 어떠한 특징을 가지고 있는지 자세히 살펴보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 React 는 Facebook, Instagram 으로 우리에게 친숙한 회사인 Meta 에서 개발한 JavaScript Library 입니다. React 는 JavaScript 기반에서 동작하는 Library 로서, 몇가지 특징이 존재합니다. 그 특징을 간략하게 정리해보도록 하겠습니다. HTML 삽입 미리보기할.. 2023. 2. 22.
JavaScript - Cookie 이해하기 안녕하세요. Hynn 입니다. 본격적으로 스스로 웹 서버를 만들어보기에 앞서, Cookie 를 사용할 예정인지라, 이에 대한 작성이 먼저인듯 하여, 이 포스팅을 먼저 작성하게 되었습니다. 실제 홈페이지에서 회원가입을 한 뒤, 로그인을 하면 이 "로그인 정보"를 가지고 있어야, 회원만이 접근이 가능한 서비스에 이동할 수 있고, 데이터에 액세스할 수 있는 자격이 주어지게끔 하기 위해서는 Cookie 혹은 Session 의 대한 개념을 이해하고 있어야 합니다. 이에 대해서 기초적 개념을 먼저 알아보도록 하겠습니다. ============ 1. Cookie 는 무엇인가요? 2. Cookie 는 어떻게 확인하나요? 3. 실제 코드 예제 작성해보기 ============ 1. Cookie 는 무엇인가요? JavaS.. 2023. 1. 4.
Node.JS - Async/Await 이해하기 안녕하세요. Hynn 입니다. 이전 Promise 포스팅에 이어서 , Async, Await Method 에 대한 학습을 이어서 진행해보도록 하겠습니다. Async 와 Await 함수는, 한 세트로 비동기 함수입니다. 이 비동기함수는 이전 포스팅에서도 이야기한 비동기식 구조로, JavaScript 기본적 동작인 동기식 구조와는 다르기도 합니다. 하지만 이 Async, Await 의 핵심은 문법에 나와있지 않아도, "암시적" 으로Promise 를 사용하여 결과를 반환합니다. 즉 Promise Object , 객체화가 되지만, 문법의 구조는 일반적인 동기 함수와 유사한 Function 입니다. ============= 1. Async/Await 이해하기 2. 읽기 좋은 코드란 무엇인가요? 3. 작동 예시 사.. 2022. 12. 23.
Node.JS - Promise Object 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 본격적으로 실제 서버를 구현하기 위해, Promise, Async,Await 3가지의 대한 학습을 하고자 합니다. 이 3개의 객체는 한마디로 정의하자면, JavaScript 상에서 "비동기" 처리를 위한 Object, 즉 객체입니다. JavaScript 에 대한 이전 포스팅들을 보셨다면, 동기와, 비동기 개념에 대해서도 이해하고 있으시리라 생각합니다. 동기의 경우, JavaScript 의 특성인 Single Theard 처리 방식으로, 코드의 순서대로, 한줄씩 처리하는 그러한 개념이 아니라, Backgroud 영역으로 Code 를 보내서 이전의 Code 수행이 완료되지 않더라도, 코드를 처리하는 개념입니다. 이번 포스팅에서는 Promise 에 대해서만 다루.. 2022. 12. 23.

티스토리툴바