솧디의 개발로그

React의 컴포넌트는 생명주기가 있고, 라이프 사이클의 순서에 따라 생성되고 업데이트되고 사라진다. 오늘은 컴포넌트의 라이프사이클에 대해 다뤄보고자 한다. LifeCycle 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다. 라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount)로 나눠진다. Mount: 처음 컴포넌트를 불러와서 생성하는 단계 Update: 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) ..

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 보통 돔트리형태를 지니고있어 돔트리라고이야기하기도 한다. DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 한다. 가상 돔 (Virtual DOM )이 나오게 된 이유 ? 기존 렌더링 방식은 1. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를..

ES란? 크로스 브라우징 이슈 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈 이 크로스 브라우징 이슈를 해결하기 위해 JavaScript를 표준화를 했다. ES란 ECMA Script의 약어이며 자바스크립트의 표준 규격을 나타내는 용어이고, JavaScript를 표준화시키려고 탄생했다. 그렇다면 왜 생겨난 것인가? JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다. 그렇다! 그래서 ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것이다. 현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6인데, 6은 버전 이름이며 ES 2015라고도 한..

컴포넌트란? 리액트에서 사용하는 기본단위라고 생각하면된다. 이 컴포넌트들이 모여 하나의 페이지가 되는것이다. function App() const a = [1,2,3,4,5] return ( {a} ); } 기본적인 형태는 함수의 형태이다. 즉 컴포넌트는 함수이다. 기존에 자바스크립트에서는 html따로 작성하고 js를 적용시켰다면 컴포넌트에선 자바스크립트와 html를 한번에 할 수 가있다. 컴포넌트 사용방법 함수의 형태에서 변수나, 값들을 정해주고 return을 통해 결과값을 HTML로 화면에 나타낼 수 있다. const App = () => { const users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3,..

1. join() 값 사이에 글 넣기 const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(' and ');//값 사이에 글넣기 console.log(result); 2. split() 지정한 단위로 나누기 const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(',')//''의 단위로 나눠줌 console.log(result) 3. reverse() 역순으로 값 배치 const array = [1, 2, 3, 4, 5]; const result = array.reverse(',')//역순으로 값 배치 console.log(result) 4. slice(0,-1)배열에서 원하는 부분..

🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 🐳느슨한 타입(loosely typed)의 동적(dynamic) 언어 동적타입 언어: 자료의 타입은 있지만 변수에 저장된 값이 언제든지 바뀜 숫자, 문자로 형태가 변형될 수 있다. let num = 10; num = 'hello'; console.log(num) num을 10이란 숫자를 주었지만 num을 다시 'hello'라는 글자형태로 넣었을 때 값은 'hello'로 변경된다. 문자에서 숫자, 숫자에서 문자로의 변경이 간단하게 가능하다. [변수] 🌿var var num = 10 var num = 30 console.log(num) 위 의 경우 num의 값이 '10,30'으로 출력이된다. var 변수의 중복선언이 가능하다. 협업..

🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 🐳느슨한 타입(loosely typed)의 동적(dynamic) 언어 동적타입 언어: 자료의 타입은 있지만 변수에 저장된 값이 언제든지 바뀜 숫자, 문자로 형태가 변형될 수 있다. let num = 10; num = 'hello'; console.log(num) num을 10이란 숫자를 주었지만 num을 다시 'hello'라는 글자형태로 넣었을 때 값은 'hello'로 변경된다. 문자에서 숫자, 숫자에서 문자로의 변경이 간단하게 가능하다. [변수] 🌿var var num = 10 var num = 30 console.log(num) 위 의 경우 num의 값이 '10,30'으로 출력이된다. var 변수의 중복선언이 가능하다. 협업..

1) HTML 2)CSS 웹 화면구성의 기본인 html, css를 간단히 실습하기! HTML로 div안에 이름지정해서 페이지 나눠주고 뼈대를 만들어줍니다! 배우기 전엔 저화면이 외계어 같았는데 이젠..보인다리..ㅋㅋㅋ 화면안에 박스만드는거라고 보면되는데 너비, 간격, 색, 라인 등 값으로 지정해서 모양을 만들어주는 것이라 보면됨!ㅎㅎ 하지만 일일히 코드는 다 칠 수 없으니 부트스트랩을 이용해 코드복사복사! https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components..

html기본뼈대코드 입니다! 참고해서 화면구성을 해보자구우~~ 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?

🐰 Invisible한 Frontend Jr.개발자 '솧디'입니다 🐰 🙏 주요기술 💫 JavaScript 💫 TypeScript 💫 HTML / CSS 💫 React 💫 React-Native 💫 Next.js 💫 Redux/Recoil 💫 React Qurey 💫 Styled component 안녕하세요:) 현재는.. 주니어 개발자 솧디이지만 확신의 성장캐로써 공부하거나 플젝한 내용들을 정리해서 보고자 블로그를 만들었습니당! 저의..개발성장기 지켜봐주라구!>