본문 바로가기

분류 전체보기

 (200)
리액트 컴포넌트의 Lifecycle 안녕하세요 ~ 웹 YB 김가현입니다.3주차 공유과제로는 리액트 컴포넌트의 생명주기를 다뤄 보려고 해요 ! 리액트의 컴포넌트에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,예전에는 상태 관리나 생명 주기 관련 기능을 사용하려면 반드시 클래스형 컴포넌트를 사용해야 했어요.하지만 리액트 16.8 버전 이후로 Hook이 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트가 제공하는 기능을 쓸 수 있게 되었답니다짱이죠 ? 함수형 컴포넌트의 생명주기 ! 라이프사이클에 대해 알아보겠습니다 🫡Lifecycle ?React 컴포넌트의 라이프 사이클은 컴포넌트의 생성, 업데이트, 제거 과정에서 일어나는 일련의 단계를 의미한다.마운트컴포넌트가 처음으로 생성될 때컴포넌트의 초기화 작업을 수행하거나 외부 데이터를 가져와..
[3주차] JSX 알아보기 안녕하세요 YB 김린아입니다.이번 아티클 주제는 3주차 리액트를 학습하며 알게된 JSX입니다.JSX가 무엇인지, 사용되는 이유가 무엇인지, 그리고 대표적인 문법 규칙에 대해 정리해보았습니다. 1. JSX란JSX는 JavaScript XML(eXtensible Markup Language)의 약자로 JS에 XML을 추가한 확장된 문법이다. React에서 UI를 표현하기 위해 사용되고, 리액트 사용시 JSX는 HTML과 JS를 모두 포함하고 있는 컴포넌트를 생성한다. JSX는 브라우저에서 직접 실행되지 않아 JSX코드를 자바스크립트 코드로 변환해주는 도구가 필요하다.  2. JSX의 장점JSX의 대표적인 장점은 보기 쉽고 익숙하다는 것이다. HTML 코드와 유사하여 일반 자바스크립트만 사용한 코드보다 더 익..
[Week 01] 일급객체로 자스핑 시작 💛 안녕하세요! 💛 자스핑 스터디 1주차 💛 아티클 작성하러 온 물결웹팟 OB 박채연입니다 😋  대망의 자스핑구리.. 첫주차에 무슨 내용을 공부하면 좋을까 고민을 하다가매번 자바스크립트 공부를 할 때마다 나오는 개념이지만, 누군가 질문하면 명쾌하게 답을 내리지 못했던'일급 객체'에 대해 확실히 공부하면 좋겠단 생각이 들었습니다! 그래서 가져온 일급객체 깨부시기!바로 공부하러 가볼까요 ~ 😊  🏷️  일급 객체란?다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말합니다.보통 함수에 인자로 넘기거나 변수에 대입하는 것들이 가능할 때, 일급 객체라 한다고 하네요. 일급 객체의 조건을 더 상세히 보자면,1️⃣ 무명의 리터럴로 생성할 수 있다.2️⃣ 변수나 자료구조(객체, 배열)에 할당할 ..
[Week 01] Symbol.. 그는.. 안녕하세요 웹파트 배영경입니다😙JavaScript 세미나 시간에 배웠던 내용 중 저는 Symbol에 대해 더 깊이 알아보았습니다!symbol을 처음 들어봤는데, ES6에서 추가된 내용이라고 해서 더 눈길이 갔습니다. Symbol은 JavaScript의 데이터 타입 중 하나로, 유일하고 고유한 값을 만드는데 사용된다. 객체의 속성 키로 주로 사용되며, 다른 값들과 달리 symbol은 고유성이 보장되는 특징이 있어 충돌 없이 사용 가능하다. 우선, 학습했던 부분에 대해 다시 정리를 해보자면 Symbol의 생성Symbol 생성: Symbol() 함수를 호출하여 생성하며, 이 함수는 매번 고유한 심볼을 반환한다. 심볼은 원시 값이지만, 다른 원시 타입과 달리 고유성을 보장하기 때문에 비교 시 동일한 심볼이 아..
[week 01] javascript의 다양한 함수 선언 방식을 알아보자 javascript의 다양한 함수 선언 방식javascript에는 여러 가지 방법으로 함수를 선언할 수 있습니다. 이렇게 다양한 방식이 왜 존재하고 그들간의 차이점에 궁금증이 생겨서 함수 선언문, 함수 표현식, 익명 및 기명 함수 표현식 그리고 화살표 함수에 대해 알아보고자 합니다!!1. 함수 선언문함수 선언문은 function 키워들 통해 선언되며 이름을 반드시 포함해야 합니다. 함수 선언문은 호이스팅되어 코드의 최상단으로 끌어올려지므로 함수가 정의되기 전에 호출이 가능합니다. 자바스크립트 엔진은 함수 선언문을 해석해서 함수 객체를 생성하게 됩니다. 이때 함수의 이름은 함수 몸체 내부에서만 유효한 식별자이기 때문에 외부에서 함수 이름에 대한 참조가 불가능합니다. 하지만 외부에서 함수 이름에 대한 참조가..
패키지 Manager~ 그게뭘까? 패키지 매니저란?패키지 매니저는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴을 말한다. 더 간단히 얘기하면 JavaScript 나 TypeScript 를 사용하면서 발생하는 require 나 import 구문을 사용하는 외부 의존성 참조를 올바르게 참조할 수 있도록 보장해주는 프로그램이다import React from '/Users/raon0211/path/to/react/index.js';import { sum } from '/Users/raon0211/path/to/@toss/utils/index.js'JavaScript 표준에 따르면, 원래는 정확한 절대경로나 상대 경로를 통해서만 `import` 할 수 있었지만, 이렇게 쓰다보면 개발자 경험에 좋지 않은 영향을 준다. 그래서..
[Week 01] this 와 bind 를 알아보자 안녕하세요. YB 김고은입니다. js 스터디 1주차 아티클로 세미나 시간에 다루어보았던 js의 전반적인 내용 중일부를 선정하여 더 알아보기로 했었는데요! 저는 this 키워드와 bind 메소드에 대해서 알아보고자 합니다.  📍 this 란?  this 키워드는 함수가 호출되는 방식에 따라 달라지는 특별한 객체를 참조하는 키워드인데, 이때 선언을 할때, 객체가 정해지는 것이 아닌 ❌ 호출할때 그방식이 어떠한지에 따라 this에 바인딩할 객체가 동적으로 결정된다는 점이 특징이다! 그렇다면, 함수를 호출하는 방법을 알아보며, 각 상황에 따라 this가 어떻게 바뀌는지를 알아보자. 함수 호출하는 방법 1. 일반 함수 호출에서의 this2. 메서드로 호출된 함수에서의 this3. 생성자 함수에서의 this4. ..
JavaScript의 식별자 안녕하세요! YB 이윤지 입니다.이번 2주차 과제를 하면서 몰랐던 것들이 정말정말정말 정말 많았는데요..!그 중에서 이 안에 있는 $ (dollor) 왜 사용할까? 궁금해서 이번 주차 아티클의 주제로 삼게 되었습니다! 먼저 식별자는 무엇일까?식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다.자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어 (_) 또는 달러 ($) 만을 사용할 수 있습니다. 식별자를 작성하는 방식은 크게 두 가지가 있습니다. 식별자 작성 방식1. Camel Case 방식2. UnderScore (_) Case 방식 먼저, Camel Case 방식은 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고,그 다음 단어부터는 첫 문자만 대문..

티스토리툴바