corintori

잠깐 정리타임.... 쉬어가는 시간...

Sun, 03 Nov 2024 17:34:43 GMT

안녕하세요 코린이 동토리입니다!

오늘은 이번주에는 생명주기에 대해서 공부하고 추가적으로 이전페이지에 설명을 하는 시간을 가졌어야 했는데요....

사실 지금 너무 빠르게 달려온 것 같아 쉬어가는 타임으로 제가 최소 다음주(11/17)까지는 정리 할 부분과 코린이 동토리의 근황 토크 타임을 가져보려합니다! 그리고 추가적으로 현재 제가 가지고 있는 문제점과 어떻게 할 계획인지 함께 이야기 해보려 합니다!

사실 벨로그의 경우 개발자가 많으셔서 코딩에 관한 글 밖에 못 봤는데 이러한 글을 작성해도 되는지 눈치도 보이긴 합니다 하하 ㅎㅎ

자 들어가보시죠!

먼저 근황!

1.이번주에 예비군을 2박3일동안 동원 훈련을 갔다오고 너무 피곤한 상태입니다!
예비군 가는 첫날 부터 타고 가던 택시가 사고가 나서 긴장한 상태로 예비군을 갔거든요... 다행이 심하게 사고가 난게 아니라 택시기사님과 저와 상대차량 운전자분은 무사하셨습니다!

그렇게 예비군 훈련동안 야간 훈련도 하고 주특기 훈련도 하고 왔습니다 ㅎㅎ

여기서 끝이었으면 그나마 다행인데 돌아오는 길에 타고 가던 시외버스도 사고가 나서.. 시작과 끝은 완전 사고로 마무리 한 한주였습니다.. 2. 최근에 공부하면서 이론으로만 배우는데에 한계를 느껴 배운 것을 적용해보면서 만들어 보고 있습니다! 지금까지 배워온 JavaScript와 HTML, CSS, React를 다양하게 사용하면서 프로젝트를 만들어 보고 있는데 오늘 컴퓨터 블루스크린이 뜨면서 만들던 파일이 깨져버려 만들어온 코드들이 다 날아 가버렸습니다... 기분이 화나기도 하고 허무하기도 하고 슬프기도 하고 정말.... 이번주에 뭐가 있는데 다사다난하게 한주를 마무리 하는 것 같습니다... (하... 지금도 멘탈이 거의 다 나가있는 상태입니다... 다행인 것은 취준생이라 그냥 만들어 본 것이라 다행이지... 실제 근무환경에서 이러한 상황이 일어났다면 아마.... 어우...)

아무튼 최근 근황은 이러하고! 다음은! 제가 가지고 있는 문제에 대해서 이야기 해보려 합니다!

문제점!

1.HTML과 JavaScript,CSS는 배우는데에 큰 지장이 없이 바로바로 습득이 되었습니다. 하지만 최근에 API를 다루는 부분과 React를 실제로 컴퍼넌트를 분리해서 Export와 Import하는 부분은 이해를 하지만 다른 부분을 사용하면서 너무 어려웠습니다... 적용하는데에도 한계를 느꼈고 여기까지인가 싶은 생각도 많이 들기도 합니다...
저는 욕심도 많은지라 프론트엔드 영역도 배우고 싶고 백엔드 영역도 배워보고 싶은데 지금 프론트엔드를 배우는 과정에서도 쓰러지려 하는데 백엔드에서는 어떻게 할려고 하나 걱정이 되기도 합니다...

<요약> 1.API 적용하는 부분에서 이해도가 아직 낮다. 2.React를 배우는 현재 어려움을 느끼고 있다.

그럼 어떻게 할 것인가?

일단 두손 놓고 포기하려니 지금까지 배워온 것이 너무 아까운 것 같아 HTML과 CSS, JavaScript를 배워오는 과정처럼 열심히 달려가는 것이 아닌 잠깐 걸어가는 타임을 가져보려 합니다. 초반부터 너무 빠르게 달려온 것 같아 거북이 처럼 천천히 천천히 나아가보려 합니다..

그럼 다음주까지 할 것은?!

1. 저번주에 끝까지 다루지 못한 React 생명주기에 대해서 마무리 할려고 합니다. 2. 오늘 하려고 했던 useMemo와 useCallback에 대해서 설명 3. Hook의 기능과 차이점에 대해서 설명하려고 합니다. 4. useMemo와 useCallback의 예시 Hook을 너무 많이 사용할 경우 문제점에 대해서 설명하려합니다!

자.. 코딩을 배우는 과정에서 아직 초반이지만 벌써부터 어려움을 겪는 부분에 대해서 이야기 해보았는데요 다음주부터 다시 하나씩 나아가보려합니다!

그럼 먼저 들어가보겠습니다!

그럼 20000!

React가 너무 어려워요...

Sun, 27 Oct 2024 17:24:42 GMT

안녕하세요! 오랜만에 벨로그를 작성하러 왔는데요!

API와 React를 공부하면서 너무 어렵게 느끼고 있어서 정리한번 하러 왔습니다!

미흡 하더라도 '코린이라면 그럴 수 있지'라는 생각으로 너그럽게 넘어가 주시거나! '어디부분이 잘못됬다!' 라고 가르쳐 주신다면 감사하겠습니다!

그럼 가보시죠!

React에서 배열을 렌더링 할때 Key를 써야하는 이유는 무엇일까?

리액트에서는 배열을 랜더링 할 때 Key를 지정해주지 않으면 Key를 찾을 수 없다는 오류를 만나실 수 있을 텐데요!

*공식문서에서는 *

Key는 -react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고 -엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트를 지정해야합니다. 라고 나와있습니다.

즉 그 값이 변하지 않는 유일한 식별지의 역할을 가지고 있습니다.

Key를 지정하지 않았을 때의 예시입니다.

React는 각 아이쳄을 구분할 수 있는 고유의 값을 알지 못하기 때문에 배열이 업데이트 될 때 문제가 발생합니다.

Key가 없으면 리액트는 배열의 인덱스를 사용하여 업데이트를 수행합니다. 하지만 배열의 인덱스는 항상 일정하지 않기 때문에 예측이 불가능합니다.

Ex) 배열에서 아이템을 삭제하면 인덱스가 변경이 됩니다. 그 결과로는 React는 아이템이 삭제된것으로 판단하지 않고, 단순히 인덱스가 변경된 것으로 판단하여 불필요한 렌더링을 발생 시키게 됩니다..(갑자기 원하는 결과값은 나두고 싶은데 다른것이 삭제되는 큰 일이 나타나게 되는거죠 ㅠㅠ) 위의 예시로 설명하자면 '드람뷔'가 포함된 id값을 지우고 싶은데 갑자기 '깔루아'라는 id값이 삭제가 될 수 있는 것이죠...

Key는 엘리먼트의 변화를 감지합니다.

React에서는 컴포넌트가 State 변경, 이벤트 처리 등으로 인해 렌더링될 때, 가상의 DOM을 통해 이전 렌더링 결과와 새로운 렌더링 결과를 비교하고 변경된 부분만 실제 DOM에 반영이 됩니다. 이때 배열도 마찬가지로 각 원소를 하나씩 비교하고 변경된 부분만 갱신합니다. (다음에 그림까지 넣어서 올리도록 하겠습니다!)

위의 내용들을 정리하자면

요소마다 Key로 고유한 값을 지정해주면, 요소를 삭제, 추가하는 등 배열이 변경될 때, 정확히 어떤 요소가 변화한 것인지 알 수 있어서 React가 어떤 항복을 변경하고, 추가하는지 또는 삭제 할 것인지 식별하는 것을 도와주고 있다 라고 정리 할 수 있을 것 같습니다!

다음으로는 React 컴포넌트 생명주기에 대해 알려드리고 싶으나 제가 아직 이해를 못한 부분도 있고 헷갈리는 부분도 많아 충분한 숙지와 이해를 한 후 바로 작성하로 돌아오겠습니다!

생명주기까지 설명 못 드린점 죄송합니다!

그럼 다음번에 만나요! 그럼 20000!!

렉시컬 스코프(Lexical Scope)란?

Sun, 13 Oct 2024 17:25:10 GMT

오늘은 렉시컬 스코프에 대해서 이야기 해보려합니다. (오늘은 그림이 없다는 점!)

렉시컬 스코프(Lexical Scope)란?

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말합니다.

함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻입니다. 여기서 가장 중요한 점은 함수의 호출이 아니라 **함수의 선언에 따라 결정된다는 점입니다.

그리고 렉시컬 스코프를 정적 스코프(Static Scope) 라고 부르기도 합니다.

예시와 함께 알아보도록 하겠습니다.

처음에 이 함수를 보았을때는 '엥 너무 쉬운데? 당연히 10이랑 1아냐?' 라고 호언장담하며 말했지만 네..

그림과 같이 1과 1이 출력됬습니다

그 이유는?

위 예제를 보듯 자바스크립트는 렉시컬 스코프를 따르기에 함수를 선언한 시점에 상위 스코프가 결정됩니다. 함수를 어디서 호출 하였는지는 스코프 결정에 아무런 영향을 주지 않습니다. 위 예제의 second함수는 전역에 선언 되었기에 second함수의 상위 스코프는 전역 스코프이고, 따라서 전역 변수 x의 값 1을 두번 출력합니다.

또 다르게는

위와 같은 상황에서 second함수에서 참조하는 x 변수는 second함수의 상위 스코프가 무엇인지에 따라 결정됩니다. 따라서, 상위 스코프가 무엇인지 알려면 second 함수가 어디에 선언되었는지 봐야되는데, 위 코드에서는 second 함수가 전역에 선언되었으므로 상위 스코프는 전역 스코프가 됩니다.

그래서 second 함수 내의 x 변수는 전역에 선언된 x 변수를 참조하게 됩니다.

자 오늘은 렉시컬 함수에 대해 알아보았는데요 뭔가 글로만 보면 이해하기 어렵고 그렇네요!

제가 생각한 렉시컬 스코프를 요약해서 본다면

함수를 어디에 선언하였는지에 따라 결과값이 달라지고, 상위 스코프에 따라 결과값도 달라지는 것 같습니다.

이상으로 오늘 여기까지 알아보았고 제가 렉시컬 스코프에 대해자세하게 알게되면 한번더 다루도록 하겠습니다!

감사합니다!

그럼 20000!

This 키워드란?

Sun, 13 Oct 2024 17:05:00 GMT

오늘은 자바스크립트에서 this 키워드의 사용과 특성에 대해서 공부해볼텐데요.

This란

자바스크립트 내에서 중요하면서도 혼란스러운 개념 중 하나입니다. this는 실행 컨텍스트에 따라 그 값이 어떻게 될 것인지 결정이되고 현재 실행중인 함수 또는 메소드의 '소유자'를 가리킵니다.

더 쉽게 설명하자면

자바스크립에서 this 키워드는 개체를 나타냅니다.
this의 값은 함수를 호출하는 방법에 의해 결정됩니다. (단 실행중에는 할당으로 설정할 수 없고, 함수를 호출할 때 마다 다를 수 있습니다.)
this 키워드는 사용 방법에 따라 다른 개체를 참조합니다. 1.객체 메소드에서는, this가 객체를 참조합니다. 2.단독으로 쓰일 땐, this가 전역 객체를 참조합니다. 3.함수에서 쓰일 땐, this가 전역 객체를 나타냅니다. 4.함수에서 엄격모드('strict mode')일땐, this가 undefined를 나타냅니다. 5.이벤트에서는, this가 이벤트를 발생시킨 요소를 나타냅니다. 6.call(), apply(), bind() 메소드에서는 this가 모든 객체를 참조할 수 있습니다.

1.전역 컨텍스트에서의 this

전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window. Node.js에서는 global이 됩니다.

(컨텍스트는 호출, 응답 간의 환경 정보라고 보시면 될 것 같습니다.)

예시와 같이 브라우저 환경에서는 console.log(this); 를 하면 window 객체만을 출력을 합니다.

2. 함수 내에서의 this

일반 함수에서 this의

일반 함수에서 this의 값은 기본적으로 전역 객체를 가리킵니다. 하지만 엄격 모드('use strict')에서는 결과값이 다릅니다.

엄격모드인 함수에서는 자바스크립트에서 엄격 모드는 기본 바인딩을 제공하지 않습니다. 함수에서의 this를 사용할 때 엄격모드를 적용하면 this가 undefined가 나타납니다.

3. 객체 메소드 내에서 this

객체의 메소드로서 함수를 호출될 때, this는 해당 메소드를 호출한 객체에 바인딩이 됩니다.

this를 갖고있는 getname 함수를 직접적으로 호출한 객체가 object 객체이기 떄문에 출력은 object 객체가 나옵니다.

4. 생성자 함수에서의 this

생성자 함수에서 this는 새로 생성되는 객체를 가리킵니다.

함수가 앞에 new 키워드를 사용하여 호출되면(생성자 호출) 아래와 같은 일이 발생합니다. 1.완전히 새로운 객체가 생성됩니다. 2.새로 생성된 객체는 생성한 함수에 [{Prototype}]링크 되어 있습니다. 3.새로 생성된 객체는 해당 함수 호출에 대한 this바인딩으로 설정됩니다.

5.이벤트 핸들러에서의 this

이벤트 핸들러에서의 this는 이벤트를 받는 요소를 가리킵니다.

6. 에로우(화살) 펑션(함수)에서의 this

에로우 펑션은 일반 함수와는 다르게 this를 자체적으로 바인딩하지 않고, 함수가 생성된 시점의 실행 컨텍스트의 this를 "상속" 받습니다.

위 예시에서 regularFunction의 setTimeout 콜백 함수는 일반 함수로서 호출되어 전역 객체의 this를 가리킵니다. 반면에 arrowFunction의 setTimeout 콜백 함수는 화살표 함수로 정의되어 arrowFunction의 실행 컨텍스트인 obj의 this를 상속받습니다.

오늘은 자바스크립트에서의 this 에 대해서 배워보았는데요.. 뭔가 알 것 같으면서도 모를 것 같은..

그런 느낌적인 느낌입니다.! 다음에 기회가 된다면 다시 다루어 보도록 하겠습니다!

그럼 20000!

API....어우..

Thu, 10 Oct 2024 17:14:06 GMT

안녕하세요 여러분들! 원래 오늘 다른 주제로 다루고자 했지만 기억에서 잊어버리기 싫어 오늘 배운걸

바로 작성해보려 합니다! 많이 미숙한 부분이 있다면 댓글로 알려주시면 바로바로 수정하겠습니다!

그럼 바로 들어가볼까요!

API

여러분들은 API에 대해서 알고있나요? 보통 웹 개발을 진행할때 기초로 배우실 수도 있는데요!

그림과 같이 API는 클라이언트와 서버간의 정보에 대한 요청과 응답의 과정을 말하는데요 이 과정속에서 동기와 비동기라는 용어가 나옵니다.

동기 / 비동기

그림만 보면 이해하기 힘드시죠? 짧게 설명 드려보겠습니다

첫번째 두번째 사진 모두 달리기를 하는데 동기와 비유를 하면 첫번째 사진은 한명이 다 뛰어서 돌아올때까지 다른 선수들은 아무것도 못하고 가만히 있어야하는 상황이고 비동기의 경우 한명만 띄는것이 아닌 다른 선수들도 함께 뛸 수 있습니다

즉

동기의 경우 출력이 시작하면 하나의 값이 나올때 까지 대기를 해야하는 상황이고

비동기의 경우 출력이 시작하면 비동기를 담당하는 함수가 잠깐 백그라운드에 들어가 값이 나올때까지 있다가 다른 함수로 넘어가 출력을 시작하고 값이 나왔다면 백그라운드에서 다시 돌아와 출력을 하게됩니다.

그럼 비동기만 따로 설명해 보겠습니다

비동기란?

비동기란 함수의 내용을 끝까지 쭉 실행하지 않고, 중간에 다른 작업을 처리하다가 다시 돌아와 마무리를 하는 함수 입니다.

(비동기 함수의 경우 보통 asyns function() 과 같이 비동기 함수를 만들 수 있습니다)

그림과 같이 비동기 함수에서 출력이 시작하면 잠깐 백그라운드에 들어가 '음... 답장이 올때까지 기다려볼까?' 를 하며 기다리다가 다른 함수들이 차례대로 출력을 하기 시작합니다 출력값이 많다면 중간에 백그라운드로 넘어갔더 비동기 함수가 '어! 답장왔다 돌아가서 알려줘야지' 라는 생각으로 돌아와 출력되게 됩니다.

하지만 여기에도 시간을 정해주는 함수가있습니다 바로 setTimeput 인데요

그림과 같이 보통 사용하게 되는데 그림과 같이 setTimeout(parameter1, parameter2)의 형식이 맞지만 메소드와 호출 시간을 주어주면서 '300이라는 값을 2(2000)초뒤에 출력해줘!' 라는 의미를 담고 있습니다.

비동기의 경우 시간이 어떻든 백그라운드로 넘어가기에 비동기가 아닌 함수를 출력할때에는 비동기가 아닌 함수부터 출력된 다음 비동기의 함수가 출력되는점 알고있으면 좋을 것 같습니다.

그렇다면 과연 비동기함수는 어떻게 출력이 될까요?

그림과 같이 3가지로 출력이 되게 됩니다.(주석처리 //) Promise { } : 대기중이라는 의미입니다. Promise { } : 결과값이 나왔다는 의미입니다. Promise { } : 에러가 출력됬다는 의미입니다.

그럼 프로미스를 사용하는 방법이 다양한데요

.then이 있습니다 then(() =>{})은 비동기를 백그라운드로 보내고 아래의 함수를 먼저 실행하고 결과값이 나오면 then으로 돌아오게 합니다. 보통은 Fetch나 axios의 반환된 값이 then 파라미터로 담깁니다.

await은 그림과 같이 어?! 잠만! 이라는 의미 처럼 응답값을 얻을때까지 아래 코드를 실행 시키지 않습니다.

그럼 글에서 나온 Fethc와 axios는 무엇일까요?

그림에서도 나와있듯이 Fetch는 내장 함수로 자바스크립트에 기본적으로 내장 되어있는 함수입니다.

axios는 외부에서 함수를 가져오는 것으로 보면됩니다!

두개의 공통점은 URL을 가져오는데에 사용을 하고 Fetch는 바로 옆으로 Fetch(URL) 이렇게 사용하지만 axios의 경우 axios.get 또는 axios.POST로 URL을 가져옵니다!

어?! 그럼 외부에서 함수를 가져온건데 어떻게 사용하나요? 라고 물어보실 수 있는데

여기서 NPM이라는 용어가 나옵니다

NPM 이란 말그대로 NODE Package manager의 줄인말로

https://www.npmjs.com/

위와 같은 사이트에서 자신이 사용할 모듈이 있다면 NPM install [모듈이름] 이렇게 명령 프롬포트 나 VS코드에서 다운을 받으실수 있습니다.

그럼 위에서 axios는 어떻게 다운받을까요? 바로 NPM install axios 라고 입력하면 axios에 입력되어있는

함수를 외부에서 가져와서 사용할 수 있습니다!

그럼 Fetch는 내장함수인데 안에서 보내고 받기는 안되나요!? 라고 물어보실수 있는데요!

그림과 같이 EXPORT와 IMPORT를 사용해주면 됩니다.

간단하게 설명하자면 EXPORT는 만든 함수를 보내주는 것이고 IMPORT는 보낸 함수를 받는 함수입니다.

그림과 같이 나는 abc의 같이 "abc"라는 것과 good이라는 함수를 다른 곳에서도 사용하고 싶어! 라고 한다면

보내줄 수 있습니다.

반대로

그림과 같이 나는 'good이라는 함수가 포함된 경로에서 good 함수를 가져올꺼야!' 라고 한다면 import를 사용해 가져오면 됩니다.

try catch err

다음은 try catch err인데요

트라이 캐치 에러의 경우 스크립트가 죽는것을 방지라고 에러를 잡아서 합당한 무언가를 할 수 있게 해줍니다

동작은 try안의 코드가 먼저 실행되고 -> 에러가 없다면 try의 마지막까지 실행되고 catch블럭은 건너 뜁니다

에러가 있다면 try코드가 중단되고 catch(err)블록으로 넘어가 변수err에 무슨일이 일어났는지에 대한 설명이 담긴 에러 객체를 포함해줍니다.

이 다음 부터는 간단하게 설명 해보려 합니다

API METHOD

API METHOD 여러 종류가 있지만 5가지만 가져와봤습니다 GET : 데이터를 가져올때 사용합니다 POST : 데이터를 보낼때 사용합니다. PATCH : 데이터를 수정할 때 사용합니다. DELETE : 데이터를 삭제할 때 사용합니다. PUT : 데이터를 수정할때 사용합니다.

API를 사용하는 이유는? API를 요청하기 위해서는 METHOD와 URL이 필요하기 때문입니다.

다음으로는

Content-Type 과 strinfy, package.json에 간략하게 보려합니다

Content-Type은 내용의 정보를 어떻게 처리할지에 대한 코드이고

"Content-Type": "TEXT" 라고 한다면 텍스트로 주고받겠다 라는 의미이고 "Content-Type": "application/json" 라고 한다면 어플리케이션 정보로 처리하겠다는 의미입니다.

stringfy는 위에서 받은 데이터를 글자로 바꾸겠다라는 의미이고

Package.Json은 현재 프로젝트에 관한 정보와 패키지 매니저(npm)을 통해 설치한 모듈들의 의존성을 관리하는 파일입니다. 즉 install 한 내용만 보입니다.

자 이렇게 해서 오늘 API에 대해서 간략하게 해보았는데요

자세하게 작성하지는 못했지만 배운내용에서 최대한 작성을 해보았습니다 혹시나 미흡한 부분이 있거나

틀린 정보가 있다면 댓글 달아주시면 공부해서 수정하도록 하겠습니다!

그럼 오늘도 다들 고생 많으셨고 좋은 하루 보내세요!

그럼 20000!!

var , let, const 의 차이는 무엇일까요?

Sat, 05 Oct 2024 18:10:09 GMT

안녕하세요! 오늘은 JavaScript에서 변수 선언 방식인 var,let,const의 차이점에 대해 알아볼려고합니다.

알아보기전 ES6에 대해서 미리 알아보고 가보면 좋을 것 같습니다 ES6는 자바스크립트에서 도입된 var, let, const를 포함한 function, function*, class을 호이스팅 하는 것을 말합니다.

1.변수선언 방식

먼저 var는 변수 선언 방식인데요. var는 업데이트도 가능하고 재선언도 가능합니다. 바로 예시를 보며 이야기를 해보아요

그림을 보시는 거와 같이 변수를 한번 더 선언했지만 에러가 나오지 않고 각각 다른 출력 값이 나오는것을 볼 수 있습니다.

var는 유연한 변수 선언으로 간단하게 하는 테스트에서는 편하게 사용할 수 있지만, 자바스크립트 내에서 많은 코드량을 사용한다면 어느부분에서 사용되는지 알기 힘들기도 하고 값이 바뀌기 때문에 단점이 있습니다.

그래서 ES6 이후, 이를 보완하기 위해 let 과 const를 사용하여 변수를 선언합니다.

다음은 let 선언방식입니다 let의 경우 업데이트는 가능하지만 재선언은 불가능합니다.

첫 name의 경우 첫 선언문이기 때문에 'dongtori'라는 출력값이 나오지만 두번째 name에서 선언 한값은 에러메세지가 나오는 것처럼 변수 재선언은 되지 않습니다

하지만 세번재 선언한 name처럼 변수에 재할당이 가능하다는 차이가 있습니다.

다음은 const 선언 방식입니다

const의 경우 let과 동일하게 재선언도 불가능하고 추가적으로 재할당도 불가능하다는 let과의 차이가 있습니다.

다음은 스코프에 대해서 이야기 해볼텐데요 생각보다

(이 조준경 스코프 아닙니다...!)

스코프 / 변수의 유효 범위

JavaScript는 기본적으로 Function Scope(함수 스코프)를 가지고, var또한 함수 스코프를 가집니다 하지만

let, const는 Block Scope를 가집니다. / 다르게 설명을 해보면 전역에 선언된 전역변수는 전역 스코프를 가

져 하위 모든 곳에서 참조가 가능하고

지역에 선언된 지역변수는 지역 스코프를 가져 해당 지역과 하위 지역에서만 참조가 가능합니다.

var - 함수 스코프수 스코프

var은 함수의 코드 블록만을 스코프로 인정하기 때문에, 함수 내부 이외에 생성한 변수스는 모두 전역 변수가 되어, 전역 변수가 남발 될 가능성이 있습니다.

-위와 같이 if문 내부에 선언된 result 변수가 전역 변수로 선언되어 resule값이 true로 할당되어 찍힙니다.

-for문의 변수 선언문에서 선언한 변수를 for문 외부에서 참조 가능합니다!

-하지만 함수내에서 선언되어 이루어진 변수는 참조가 불가능하다는점!

let과 const의 경우에는 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 블록 외부에서는 참조를 할 수가 없습니다. 즉 코드 블록 내부에서 선언한 변수는 지역 변수 라고 합니다!

-if 문 내부에 선언한 result는 지역변수로 해당 코드블록 외부에서는 참조가 불가능합니다.

-for문도 마찬가지로 변수 선언문에서 선언한 변수를 for문 외부에서 참조를 할 수 없습니다.

-함수도 함수내에서는 유효하지만 외부에서는 참조 할 수 없다는 점이 있습니다.

추가적으로 호이스팅에 대해서 말씀 드려볼텐데요

호이스팅(Hoisting) 호이스팅이란 var선언문이나 function선언문 등을 해당 스코프의 선두로 옮김 것 처럼 동작하는 특성을 말합니다.

자바스크립트에 도입된 ES6을 호이스팅합니다.

하지만 var로 선언된 변수와 다르게 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생합니다.

이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적인 사각지대에 빠지기 때문입니다.

추가적으로 변수는 선언단계 -> 초기화 단계 -> 할당 단계 에 걸쳐 생산되는데

var으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어 집니다. 단,

let으로 선언된 변수는 선언단계와 초기화단계가 분리되어 진행됩니다.

끝으로

변수 선언에는 기본적으로 const를 사용하고(실제로 사용해보니 정말 많이 사용합니다...) 재할당이 필요한 경우에는 let을 주로 사용합니다.

그리고 객체를 재할당하는 경우는 흔하지 않기 때문에 const를 사용하면 의도하지 않은 재할당에 대비해 방지해주기 때문에 안전합니다!

그럼! 오늘은 여기까지...

다들 환절기 건강 조심하시고

오늘 하루도 좋은 하루 보내세요!

그럼 20000....

브라우저는 어떻게 작동하는가?!

Sun, 29 Sep 2024 17:58:43 GMT

안녕하세요! 오늘은 조금 긴 글을 작성해보려합니다. 모두가 아는 브라우저에 대해서 작성을 해볼텐데요!

바로 들어가보죠!

브라우저란? 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램입니다.

일상생화에서 인터넷을 통해 검색을 할 때 주로 네이버나 구글과 같은 사이트에 들어가 얻고자 하는 정보를 검색합니다

이때 사이트에 접속할 수 있는 도구를 바로 '브라우저' 혹은 '웹 브라우저'라고 합니다.

종류로는 1.Google Chrome 2.Apple Safari 3.Naver Whale 4.Microsofr Edge 등이 있습니다.

그럼 브라우저의 구성요소에는 어떠한 것이 있을까요?

(글씨가 조금 나쁜점 양해바랍니다..!)

브라우저의 구성요소에는 사용자 인터페이스(User Interface), 브라우저 엔진(Browser Engine) 자료 스토리지(Storage), 렌더링 엔진(Ladering Engine), 네트워크 레이어(Netword Layer), 자바스크립트 인터프리터(JavaScript Interfreter), UI백엔드(UI백엔드)가 있습니다.

그럼

사용자 인터페이스란? 브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄(URL),뒤로 가기 버튼, 플러그인 버튼 등. 요청한 페이지를 보여주는 창외에 사용자가 컨트롤할 수 있는 부분입니다.

브라우저 엔진란? 사용자가 주소창에 입력한 URI값을 랜더링 엔진에게 전달해주는 역할을 합니다. 또 새로고침,뒤로가기 버튼을 눌렀을 때 그 명령 또한 렌더링 엔진에게 전달을 한다.

자료 스토리지란? 자료를 저장하는 레이어다. 쿠키나 세션 등 모든 종류의 자원을 하드디스크에 저정합니다. HTML 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의되어 있습니다.

렌더링 엔진이란? 사용자가 URL를 입력했을 때, URL에 해당하는 데이터를 네트워크 레이어에 전달해 주고, 응답으로 받은 리소스 또는 스토리지에 캐싱된 리소스를 가져와 인터프리터, UI백엔드에 전달을 해줍니다. 또 HTML, CSS 코드를 파싱 해서 렌더 트리를 구성해 전달해 주는 등의 총체적인 역할을 합니다.

네트워크 레이어란? 렌더링 엔진으로 부터 HTTP요청을 받아서, 서버에게 요청을 하고 응답 리소스를 받아 렌더링 엔진에게 돌려줍니다.

자바스크립트 인터프리터란? 브라우저가 그려지기 위해서는 HTML과 CSS만 있으면 되는데 자바스크립트는 html태그를 동적으로 움직이는 역할울 수행합니다. 렌더링 엔진은 받아온 리소스 중에서 자바스크립트는 인터프리터에 주고, 나머지 HTML CSS IMAGE 등을 파싱하고 그립니다. 크롭에서는 V8이라는 엔진을 사용하여 자바스크립트를 파싱합니다.

(파싱이란? 컴퓨터 과학 및 프로그래밍에서 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정을 말합니다 파싱에는 문자열 파싱, 언어 파싱, HTML 및 XML 파싱, 구문 분석, 데이터 포멧 파싱이 있습니다.)

UI 백엔드란? 렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 합니다.

중간중간에 렌더링이라는 단어가 많이 나오는데 렌더링에대해서 간략하게 설명하고 과정에대해서 간략하게 설명해 드리겠습니다.

렌더링이란? 사용자가 주소 표시줄에 URL을 입력하고 엔터를 치는 순간부터 브라우저의 각 요소는 상호작용을 하여 웹페이지를 화면에 띄우는 것을 말합니다. 렌더링 프로세스는?

브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 자료 저장소를 찾습니다.
렌더링 엔진이 브라우저 엔진 또는 네트워크 레이어로부터 자료를 받습니다.
렌더링 엔진이 JS 인터프리터 및 네트워크와 소통하며 렌더링 구조를 그려 UI 백엔드에 넘깁니다.

지금부터는 DNS 조회부터 HTTP 요청 및 응답까지의 과정을 설명해보려 합니다. 그전에 각각 의미를 알아야 겠죠??

DNS란? DNS는 코딩에 대해서 잠깐 배우신 분들이라면 가볍게 추측이 가능하신데요! 네 바로 도메인 네임 시스템(Domain name system)을 줄여 DNS라고 부릅니다. 이용자들이 해당 서버에 요청할 수 있게 해주는 시스템입니다. 또는 클라이언트가 직접 ip 주소로 요청하는 것이 아니라 입력하기 쉬운 문자로 요청할 수 있게 해줍니다.

DNS조회란? DNS조회는 사람이 읽을 수 있는 도메인 이름으로 컴퓨터가 읽을 수 있는 IP주소로 변환하는 프로세스입니다. DNS조회는 쿼리 프로세스이며, 웹브라우저의 주소창에 URL을 입력할 때마다 시작됩니다.

DNS 조회요청은? DNS는 시스템이고, www.corintori.com(예시입니다.)이 요청되면 실제 서버 ip 주소로 요청되게끔 해야되고 이렇게 실제 서버를 찾아주는것이 네임 서버입니다. 네임서버, DNS서버 ,도메인 네임서버 모두 다 같고 이용자들마다 다르게 부른다고 합니다

브라우저에서 도메인이름으로 요청했을 때 과정 1.브라우저가 www.corintori.com(예시입니다.)을 요청합니다. 2.네임서버가 www.corintori.com(예시입니다.)에 해당하는 실제 서버주소를 찾아서 브라우저에서 전달합니다. 3.브라우저는 전달받은 실제 서버ip 주소로 요청합니다.

그럼 DNS조회 조회를하면 어디로 요청을하고 응답을 받아야 할까요?

DNS조회를하면 HTTP로 요청과 응답을 받습니다

그럼 HTTP란 무엇일까?

HTTP란? HyperText(링크) Transfer Protocol의 약자입니다. 하이퍼텍스트(HTML)문서를 교환하기 위해 만들어진 프로토컬(통신 규약)인데, 쉽게 생각하면 웹 상에서 통신을 할 때 어떤 형식으로 통신을 하자고 정해놓은 약속입니다.

HTTP 요청과 응답 HTTP의 구조는 요청<-- -->응답의 구조로 되어있습니다. 클라이언트가 서버에 HTTP request를 보내고, 서버가 HTTP response를 돌려보냅니다. 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어진다.

HTTP는 Stateless의 형태 HTTP는 Stateless의 형태를 가진다. 즉 State에 저장을 하지 않습니다. -> 요청/응답하는 정보가 저장되지 않는다라는 뜻입니다. 클라이언트가 요청을 보내고 응답을 받은 후, 그 다음에 다시 요청을 보낼 때 그 전에 보낸 요청/응답에 대해 알지 못합니다.

HTTP Request의 구조

1. starter line 해당 request가 어떤 action을 의미하는지 정보를 담는다. request target(URI) 어떤 곳에다가 요청을 하는지 담습니다. 2.Headers 해당 request에 대한 추가 정보를 담고있는 부분입니다. Key:Value(객체) 값으로 되어있습니다. Request Target도 주소, Host도 주소, 두개를 합쳐서 보고 서버가 알게 됩니다. 3.Body 데이터가 담겨있는 부분입니다. 정확안 응답(Response)를 받기 위해서는 데이터를 담아서 요청을 해야겠죠? 클라이언트의 정보를 서버에 넘겨줘야 어떤 정보에 대해서 응답을 받을 수 있습니다.

Response 구조

Status Line Response 의 상태를 간략하게 나타내주는 부분입니다. 이부분은 3가지로 구성되어있습니다. 1-1 HTTP 버전 1-2 Status code: 응답 상태를 나타내는 코드 1-3 Status text: 응답 상태를 간략하게 설명해주는 부분.
Headers Request의 headers와 동일합니다. 다만 response에서만 사용되는 header 값들이 있습니다. 예를 들어, User-Agent 대신에 Server 헤더가 사용됩니다.
Body Request의 body와 일반적으로 동일합니다. Request와 마찬가지로 모든 response가 body가 있지는 않습니다. 데이터를 전송할 필요가 없을경우 body가 비어있게 됩니다.

HTTP Method란? HTTP request가 의도하는 액션을 정의한 것입니다.

GET : 요청하는 입장에서 데이터를 가져올때 / 어떠한 데이터를 서버로부터 받아올때 사용하는 메소드입니다. POST : 요청하는 입장에서 데이터를 포스팅할때 / 데이터를 생성/수정/삭제할때 주로 사용되는 메소드입니다. PUT : 데이터를 생성 DELETE : 데이터를 서버에서 삭제요청할때

자 오늘 DNS조회와 HTTP요청과 응답까지 알아보았는데요 원래라면 렌더링 엔진 작동방식까지 작성해야하나 아직 제가 이해를 하지 못하여 충분히 숙지하고 이해를 하고 작성하러 이 페이지에 작성하러 돌아오겠습니다!

그럼 모두들 안녕!

1. 30 DNS조회 와 HTTP 요청 응답까지 작성

Git!! 너무 어려워! 설명이 필요해요!(first time)

Sun, 22 Sep 2024 15:16:23 GMT

안녕하세요 코린이 동토리입니다!

오늘 이야기 해볼 개발 이야기는'Git' 입니다!

이해하기까지 너무 오랜시간이 걸리기도 하고 커맨드를 사용하는데

어려움을 겪었습니다. 하지만 그렇다고 포기할 수는 없잖아요! 그래서 도움을 좀 받아보려고 합니다!

지금부터 제가 정리하는 Git에 대해 틀린것이 있거나 잘못된 점이 있다면 함께 고쳐보았으면 합니다!

그렇다면! Let's Go!!!

Git 이란? 컴퓨허 파일의 변경사항을 추적하고 여러명의 사용자들 간에 파일에 대한 작업을 조율하는데 사용되기도 합니다

주로 여러명의 개발자가 하나의 소프트웨어를 개발할때 프로젝트에 참여하고 소스코드를 관리하는데 주로 사용됩니다.

5줄로 간단하게 요약한다면

분산 버전 관리 시스템 코드 변경 사항을 추적 여러 개발자들이 동시에 작업이 가능 "리누스 토발즈"분께서 개발하셨습니다 버전관리와 협업에 효과적입니다

그렇다면 Git에서 사용하는 기본용어는 어떤게 있을까요?? Git 기본용어 Repository: 저장소 Working directory: 작업자의 현재 시점 Staging Area: 커밋을 준비하는 위치 Add: 커밋할 파일의 변경 사항을 준비 commit: 현재 변경된 작업 상태를 점검을 마치며 확정하고 저장소에 저장하는 작업 Branch: 메인작업공간에서 벗어나 새로운 작업공간이 생기고 독립적인 작업 환경을 제공 Head: 현재 작업중인 Branch를 가리킵니다 Merge: 다른 Branch의 내용과 현재 Branch로 병합하는 작업입니다. Push: 커밋한 내용을 저장소로 전송하는 작업니다 Pull: 저장소에서 최신 사항을 내 컴퓨터(로컬)로 가져오는 작업이다

그렇다면 git은 어떻게 사용해야할까요? Git 명령어(Git Bash 기준으로 명령어를 적었습니다!) Pwd: 현재 Git Bash가 바라보고 있는 시점입니다. CD '파일이름': 해당되는 파일로 넘어갑니다. Git clone 'URL주소' : 외부에서 저장소를 가져옵니다. Code .: 사용하는 코딩 프로그램을 연결시켜 실행해줍니다. 코드를 작성하고 저장하고 싶을때에는 Git add .: 현재 변경된 사항을 Staging Area에 저장을 해줍니다 Git commit -m '등록할 이름': 등록한 이름으로 .git에 저장해줍니다. Git push origin main: 지금까지 작성한 사항을 메인 외부 저장소에 저장해줍니다(메인에 저장하는 일이 적기에 마무리 작업하거나 완성이 된 작업물을 저장합니다) Git pull pull origin main: main에서 현재까지 저장한 작업물을 내 컴퓨터로 가져옵니다 Git Branch '브랜치 이름': 새로운 '브랜치 이름'의 작업공간이 생깁니다. Git checkout '브랜치 이름': '브랜치 이름'의 작업공간으로 이동합니다. 브랜치에서는 동일하게 git add. 와 git commit -m '브랜치이름'이 동일합니다. 하지만 외부저장소에 저장을 할때에는 아래와 같습니다. Git push origin '브랜치 이름' : main에 저장하는 것이 아닌 현재 사항을 브랜치에 저장합니다 Git pull origin '브랜치 이름': '브랜치 이름'에 해당하는 작업물을 내 컴퓨터로 가져옵니다.

현재 제가 알고 있는 내용은 여기 까지이고

보통의 경우 Git Hub로 외 작업을 합니다.

Git Hub란: 외부저장소를 가져오고 협업을 하는 공간입니다.

git add . 와 git commit, git branch, 브랜치 병합하는부분을 간략하게 좀더 설명 해보겠습니다.

그림과 같이 워킹 디렉토리에서 현재 작업을 하는 작업물은 Git bash에 git add . 명령어를 입력하면 Stagin Area로 저장이됩니다! 거기서 멈추는게 아니고 Git commit를 활용하여 .Git directory에 저장을 해줍니다. git 에 저장된 작업물을 외부저장소에 저장하기 위해서는 위와 같이 push를 활용하여 외부저장소로 저장해줍니다.

Git merge의 경우 현재 작업하는 Branch와 다른 Branch로 병합하는 작업니다. 꼭 main만 병합하는 것이 아닌 다른 Branch와도 병합이 가능합니다.

간단하게 위와 같이 작업하게 된다면 메인이라는 나무 줄기와 브랜치라는 많은 가지들이 있습니다. 여기서 main4와 main4에 있는 Branch를 git merge를 해준다면 main 4로 그대로 가는 것이 아닌 main 5으로 새로운 작업공간이 생깁니다 이러한 특징을 가지고 있고 보통 Merge같은 경우 충돌이 많이 일어날 수도 있고, main에 저장하여 다른 협업자분들에게 혼동을 줄 수 도 있습니다.

이상으로 위와 제가 아는 부분에 대해서 최대한 적어 보았는데요! 혹시나 모자란 부분이 있다면 피드백 해주시면 감사하겠습니다!

아! 그리고 메인에 그려두었던 나무그림은 Git을 작업했던 작업 공간의 모습이 나무와 비슷하다고 느껴 나무에 master라는 메인과 tree라는 브랜치로 나무 줄기와 나뭇가지를 비교해 그려본겁니다!

그럼 모두들 긴글 읽어주셔서 감사합니다!

코린이는 물러나겠습니다!

빠이!

인생은 폭포수처럼 흘러가듯 쉽고 빠르게~

Fri, 13 Sep 2024 17:12:08 GMT

안녕하세요! 코린이 동토리입니다!

이번 시간에는 CSS의 핵심 요소인 Cascading에 대해 말해 볼려고 합니다!

CSS와 폭포수가 무슨 연관이 있냐고요?

폭포는 어디서 어디로 흐르나요?

상류에서 하류로 흐르죠 즉 위에서 아래로 흐르는데요!

CSS도 마찬가지 입니다! CSS도 여러 스타일을 적용하고 있지만 스타일 적용되는데에도 우선순위가 있습니다!

Cascading이 적용되는데 3가지 요소가 필요한데요! 그럼 차례대로 저와함께 공부해보도록 해요!

1.중요도/Importance

Importance의 뜻은 중요, 중요성 입니다.

중요하다는 의미를 가진 요소이니 스타일이 적용될때 가장 우선적으로 사용되겠죠?

그럼 뭐가 중요하고 뭐가 중요한지는 판별하는 방법은 다행이도 쉽게

CSS 시트에서 중요하다고 생각하는 부분에 !important만 붙여 주면 되는데요

CSS 특성상 위에서 아래로 스타일이 적용되기 때문에 두번째 처럼 아래가 우선적으로 적용이 되지만

보시는 것처럼 `!important`를 적용해준다면 우선적으로 적용을 시켜주는 특징이있습니다.

2.특수성 또는 명시도 Specificity

두번째로는 명시도 입니다. 선택자가 구체적일수록 우선순위가 높아집니다.

특수성에 의한 우선순위는 다음과 같습니다

Inline -> ID -> Class -> Tag 의 순으로 적용이 됩니다.

Inline의 경우 HTMl시트에서 직접적으로 적용이 가능하고

ID와 Class는 문서의 특정 부분을 지정할 수 있게 해줍니다. 공톰점을 가지고 있지만 ID의 경

우 문서에서 한번만 사용이 가능한 속성이고 Class는 여러번 사용이 가능하기에 Class보다 ID

가 우선적으로 적용이됩니다. 태그의 경우

,
, 과 같이 태그의 전

체적인 의미를 지니므로 가장 낮은 우선순위로 적용이됩니다.

3.코드 순서

세번째로는 코드순서에 따른 적용 방법입니다. 첫번째에서 말씀드렸다 싶이 CSS의 경우 위에서

아래로 우선적으로 적용이 됩니다. 아마 CSS Cascading 하면 떠오르는 폭포수 처럼 CSS 스타

일 적용에대한 특징중 하나라고 봅니다. 폭포를 비유하면 시작은 상류에서 시작하지만 결국 물은

위에서 아래로 흘러 가듯이 폭포수의 최종 목적지는 하류인 것처럼 CSS 또한 위에서 아래로 코

드를 작업하면서 위 코드들 보다는 아래의 코드들이 우선적으로 적용이 되는게 아닌가 싶습니다.

스타일 상속 원칙

HTML 과 CSS 를 한번쯤 다루어본 분들이라면 아시는 특징이 있습니다! 바로 부모태그와 자식 태그

인데요 말그대로 자식은 부모님 밑에서 함께 있듯이 HTML 또한 자식태그는 부모태그에 포함이 되기

때문에 부모태그의 스타일을 그대로 받는다고 하여 스타일 상속 원칙이라고 합니다

이번에는 CSS Cascading에 대해 다루어 보았는데요! 뭔가 더 자세히 적고 싶지만 아직 배우는 코

코린이 이기에 좀 더 전문적인 지식을 저만의 방식으로 해석하게 된다면 다시한번 다루어 작성해

보겠습니다!

그럼 긴글 읽어 주셔서 감사하고! 다음 시간에 만나요!

안녕~!

작업에 도움을 주신 태준님께 감사합니다!

시맨트?! 제가 아는 그 시맨트요....?

Thu, 12 Sep 2024 16:28:34 GMT

안녕하세요!

제목을 보고 빠르게 유추하시는 분들은 계실꺼라고 보는데요!

네 맞습니다! 바로 HTML 요소인 Semantic Tag에 대해 이야기 해보려고합니다!

처음 시맨틱 태그를 들었을때

'엥? 내가 아는 그 시맨트? 시맨트가 코딩에 왜 나오지?'

라는 생각으로 접하게 되었는데요! 강의를 듣기전에는 가볍게 추측을 해보니

'아~ 시맨트처럼 굳으면 딴딴한 태그가 나오나보다!'라는 생각으로 제가 배운 내용을 함께

공유 해보려 해요! 가시죠!

먼저 Semantic Tag를 배우기에 앞서! HTML에 대해서 간략하게 이야기 해보려고 해요!

코린이가 이해한 HTML이란?

아무것도 없는 성장가능성이 있는 토지에 어떤 '뼈대'로 어떤 건물을 짓지? 라는 비유로 이해를 했습니다.

실제로 HTML이란

HyperText Markup Language의 약자이며

웹페이지의 구조와 내용을 정의하고 '태그'를 사용하여 '텍스트, 이미지, 링크, 비디오 등' 다양한 콘텐츠를 웹 페이지에 배치하고 구성하는 걸 HTMl이다~ 라고 이야기를 합니다!

그럼! Semantic Tag에 대해서 어느정도 추측을 해볼수 있겠죠?!

WEB은 넓은 평야 HTML은 그 평야에서 지을 건물에 대한 뼈대! 그럼 Semantic Tag는 시맨트처럼

단단한 뼈대로 볼 수 있겠죠?

먼저 Semantic Tag의 의미는

태그 내용에 의미를 부여하는 태그라고 볼 수 있습니다.

또는 포함된 컨텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다.

요소로는

,

등을 대표적으로 볼 수 있습니다.

이러한 요소를 사용하여 콘텐츠에 단단하고 튼튼한 역할과 기능을 합니다.

VS 코드를 통해 한번 알아보도록 하죠

그림과 같이 웹을 만들때 기본적인 HTML의 모습입니다.

기본적인 HTMl요소에도 이미 튼튼한 요소들이 있지만 더욱 견고하게 튼튼하게 짓기(제작)하기위해

좀더 튼튼한 요소를 넣어 보도록 하죠.

그림과 같이 복잡해 보이지만 명확하게 구역을 나누어 그룹화 시키고 구조화 하여 콘텐츠의 의미와

기능에 따라 콘텐츠의 각 부분에 적합한 요소들을 선택하면 견고하고 튼튼한 웹 사이트를 제작이 가능합니다!

그럼 '아니 HTML요소중에

라는 요소도 있고 태그도 있는데 굳이 복잡하고 어려운

요소들을 사용해야 할까?'라고 생각하실 수 있습니다.

그렇죠 코린이의 입장에서는 처음에

태그와 태그로만 웹 사이트를 만들었습니다.

사진처럼

태그만 쓰며 웹사이트를 만들때 어디가 어딘지 구분이 가시나요? 가독성도

떨어지기도 하고 그 구역을 담당하는 태그를 찾는데에 시간소요가 많이 들어갑니다. (실제로 제작하며 느낀점입니다.)

이처럼

태그와 태그로만 사용하면 처음 하시는 분들에게는 쉽고 WEB을 만들때

적응하기가 쉽다는 장정도 있지만 저희는 1인 개발자로 성장하기 위해서는 더 좋은 것을 사용해야 하지 않을까요?

그래서 가지고 왔습니다!

접근성이 향상됩니다! 특정한 목적을 가진 요소로 구성이 되어있고 사용자들에게 웹페이지의 구조와 내용을 좀 더 쉽게 파악할 수 있게 도움을 줍니다!

2.검색 엔진 최적화(SEO)에 도움을 줍니다! 위에 설명과 같이 특정한 목적을 가진 요소이기에 웹페이지의 구조와 내용을 더 명확하게 전달 할 수 있습니다. 시맨틱 태그를 이용함으로써 해당 웹페이지의 내용을 더 잘 인식하고 노출 시켜줍니다!(자신이 만든 웹페이지가 있으면 많은 사람들에게 보여주고 싶겠죠~?)

3.가독성이 향상되고 코드의 의미가 명확해집니다. 개발을 하면 협업을 하는 기회도 온다고 들었습니다. 그럼 다른 사람에게 나의 코드를 보여주고 이해 시켜주기 위해서는 가독성이 중요합니다! 시맨트 태그가 바로 그 효과를 보여주고 특정한 목적을 가진 요소가 구역까지 명확하니 코드의 의미가 명확해 집니다!

이처럼 시맨트 태그의 이점을 보면 사용을 안할 수 가 없겠죠? 저처럼 처음 개발을 입문한 분이시라면

태그나 태그를 이용해서 VS코드에 빠르게 적응할 수 있도록 추천을 드리지만 계속 사용할 순 없으니 오늘 저와 함께 Semantic Tag에 대해서 함께 배워 봤으니 앞으로 웹페이지 개발시에 Semantic Tag를 사용해서 만들어보아요!!

그럼 오늘은 여기까지! 긴글 읽어주셔서 감사합니다! 아직 미숙한 부분이 많으니 다음에 제대로된 정리로 돌아오겠습니다!

이상 코린이의 코딩 기록지였습니다!

그럼 안녕!!

작업에 도움을 주신 태진님 감사합니다!

아!! 잠깐잠깐! 가시기전에!!

태그와 태그는 non-semantic 요소라고도 부르니 이거까지 알고 가도록 해요!

그럼 진짜 안녕!!

오잉? 코린이가 개발을 시작한다고?!

Thu, 12 Sep 2024 14:49:41 GMT

안녕하세요! 코딩을 막 배우기 시작한 비전공자! 코린이! 동토리입니다!

앞으로 코딩을 배우는 과정에서 얻은 지식에 대해 벨로그를 통해 복습하는 시간을 가져보려고 합니다!

제가 주로 올릴 내용은 아래와 같습니다!

1.JAVASCRIPT 2.HTML 3.CSS

이 세가지를 중심으로 한동안 올릴 것 같습니다!

그럼 여기까지!