본문 바로가기

분류 전체보기129

React / part.3 sideEffect Side Effect 해당 글에서는 리액트의 중요한 개념 중 하나인 useEffect hook에 대해 다루기전에 반드시 알아야할 sideEffect라는 개념에 대해 다룹니다. sideEffect는 프로그래밍에서 빼놓을 수 없는 개념입니다. sideEffect에 대한 해당 글을 읽은 후 useEffect에 대한 다음글을 읽으실 것을 추천합니다. 1. sideEffect란? 프로그래밍에서의 부작용 즉, 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다. 특히 프로그램을 구성하는 가장 작은 단위인 “함수”에서 자주 사용되는 용어이다. 함수의 본질적인 역할은 input을 받아서 output을 산출하는 것이다. 그렇다면 함수의 sideEffect는? input을 받아서 output을 산출하는 것 이.. 2023. 4. 26.
wecode 1주차, 2주차 회고록 위코드 생활에 대한 회고를 들어가기 전에 개발자라는 꿈을 꾸기 시작했던 때의 나날들을 정리하며 2021년 겨울. 하던 일들을 모두 정리하고 진짜 나에 대해 깨달아가던 시기. 그로부터 얼마 지나지않아 개발자라는 '새로운 나'를 꿈꾸기 시작했다. 연봉이 높아서도 아니었고, 그럴듯해 보이는 직업이라서는 더더욱 아니었다. 이 일을 해야겠다고 생각했을 때를 떠올려보면 나는 뭔가에 홀려있었다. 이걸 꼭 해야겠다고 스스로에게 고함치듯 몰아붙였다. 왜 그랬을까? 2022년 봄. 본격적으로 개발 공부를 시작했을 때. 국비 프로그램을 알게되었고 모든것이 순조로웠다. 나는 의지가 있었고, 새롭게 배우는 모든 것들이 나를 즐겁게 했다. 함께 공부를 시작한 사람들과도 활발히 교류를 했다. 우리는 함께 스터디를 하며 개발자의 꿈.. 2023. 4. 26.
React/ part.3 state state 이번 글에서는 이전 글인 hook 과 props에 이어 state에 대한 내용을 다룹니다. 링크를 통해 바로 해당 글로 이동이 가능합니다. 또한 react에 관련된 글은 해당 카테고리로 올라가 있습니다. 1. state란? 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값? ⇒ 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값 컴포넌트 내부에서 가지고 있는 상태값 ⇒ 부모 컴포넌트와 상관없이 useState라는 내장 hook을 사용함 (주석으로 추가적인 설명을 달아두었습니다. 참고해주세요) import React, { useState } from 'react'; const Main = () => { const = [state, setState] = useState(); //.. 2023. 4. 24.
React / part.3 props props 해당 글에서는 앞선 Hook에 대한 글에 이어 리액트에서 중요한 개념인 props에 대해 다룹니다. state에 대한 내용은 다른 글에서 자세히 다룹니다. 1. props란? 컴포넌트의 속성값 ⇒ 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체를 말한다. 부모 컴포넌트에서 이미 선언한 데이터를 자식 컴포넌트에서 사용하려고할 때 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능하다. ⇒ 문자, 숫자, 변수, 함수까지 모든 타입의 데이터를 전달한다. 자식 컴포넌트에서 중복으로 선언할 수 없기 때문에 props를 사용한다. ⇒ 자식 컴포넌트에 속성처럼 주입하는 방식이다. 여기서 중요한 점은 Props는 읽기 전용이라는 것이다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 pro.. 2023. 4. 24.
React/ part.3 Hook Hook? 해당 글에서는 리액트의 주요 개념인 props와 state를 다루기 전에 알아야할 Hoo에 대한 기본적인 개념 정리를 다루고 있습니다. 이어지는 게시글에서 props와 state에 대해 자세히 다룹니다. 1. Hook class component ⇒ function component 이전에 작성한 React part.2 component에서 hook의 등장으로 function component를 더 활발하게 사용하게 되었다고 언급한 바 있다. Hook은 상태 관리 및 라이프 사이클을 관리해주는 함수로서 함수 컴포넌트의 단점 보완한다. clacc component에서만 사용이 가능하던 기능을 function component에서도 사용할 수 있도록 연동해주는 함수이다. 다시 짧게 짚어보는 fun.. 2023. 4. 24.
CSS in CSS | CSS전처리기 Sass(SCSS) + 직접 사용해보고 느낀점 CSS전처리기 Sass & SCSS [index] 1. CSS전처리기( CSS Preprocessor) 2. Sass (Syntactically Awesome Style Sheets) 3. Sass 적용하기 4. Sass 활용하기 5. 직접 Sass를 사용하면서 느낀점 해당 글에서는 CSS 천처리기 종류 중 하나인 Sass에 대한 개념정리와 Sass를 사용하는 이유 및 활용 방법에 대해 다룹니다. 기존에 작성했던 글에 추가된 내용이 있습니다.(2023.10) 1. CSS전처리기( CSS Preprocessor) 1-1. CSS전처리기( CSS Preprocessor) 개념 정리 CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해.. 2023. 4. 23.
React/ part.2 Routing과 Router Routing과 Router 리액트에서 중요한 개념중 하나가 바로 라우팅이다. 라우팅은 무엇인지, 라우터는 무엇인지에 대해 제대로 알고 리액트를 사용해야 기초적인 실수를 피할 수 있다. 해당 글에서는 라우팅이란 무엇인지 알아보고 라우팅과 관련된 중요한 개념들에 대해서도 함께 다루고 있다. Routing, Router, react-router-dom, react-router-dom을 이용해 Routing을 하는 방법 2가지 1. Routing (라우팅)이란? 간단히 말해 다른 경로(url 주소)에 따라 다른 화면(view)을 브라우저에 출력하는 것을 말한다. 리액트는 UI를 그리는 라이브러리라서 routing기능이 내장되어 있지 않다. 그래서 따로 Routing Library라우팅 라이브러리가 필요하다. .. 2023. 4. 23.
React/ part.2 component Components란? 이번 글에서는 component에 대한 기본적인 내용들을 다룹니다. Hook과 state에 대해서는 다른 글에서 더 자세히 설명하고 있습니다. 1. 컴포넌트의 정의 재사용이 가능한 UI 구성 단위 컴포넌트 기반의 개발로 복잡한 UI도 효과적으로 구성이 가능하다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 그 조각들을 사용할 수 있다. 쉽게 말해, 레고블럭 같은 역할이다. 페이지 내부 여러 곳에서 호환될 수 있도록 만든 UI 레고블럭이라고 생각하면 된다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 2. 컴포넌트의 특징 1. 필요한 곳에 가져와서 재사용이 가능하다. ⇒ export와 import 방식으로 2. 독립적으로 사용되어 유지보수에 용이.. 2023. 4. 22.
React/ part.2 JSX JSX란? JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자바스크립트 확장 문법 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법 태그처럼 생긴 문법 자바스크립트 정식 문법은 아니기 때문에 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환된다. 자바스크립트 문법을 가져와 쓰기 때문에 편하다. 하지만 자바스크립트보다 직관적이다. JSX 문법에 맞게 작성하는 것이 제일 중요하다. JSX element 자바스크립트 파일 어디에서나 HTML처럼 작성이 가능하다. javaScript 표현식 값.. 2023. 4. 21.

티스토리툴바