硏錄 YEON_log

22.12.28 회고 🛠 Today Handled List (오늘 한 것) 얹어놓은 기능 에러 핸들링하기.. 👍 Liked (좋았던 점) 😢 Lacked (아쉬웠던 점) 🔮 Learned (배운 점) 🤞 Longed For (앞으로 바라는 점) 위기가 와버렸다.. 그 위기 덕분에 오늘은 어떠한 말도 쉽게하지를 못하겠다.. 마음이 추스려지면 그 때 이야기 하는걸로 💊 Improved Things (개선한 사항)

1. Fragments에 대해 1-1. JSX에서 root 태그는 하나만 존재할 수 있다 JSX는 HTML과 JavaScript를 하나의 컴포넌트로 만들어 렌더링 시켜주는 문법이라고 할 수 있다.(HTML in JS 라고나 할까..?) JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 결국 JSX는 컴파일 되어 JavaScript로 표현이 되는데, 이 때 React.createElement() 호출을 통해서 컴파일이 이루어지게 된다.(참조) JSX 문법을 사용해서 렌더링할 컴포넌트를 return 안에서 호출하고 있기 때문에, return이라는 키워드의 측면에서 생각해본다면 JSX는 단 하나의 root를 가질 수 ..

0. 들어가며 지난 계획 이후 2주가 좀 더 되는 시간이 흘렀고 새로운 달이 찾아왔다. 지난 계획을 정말 잘 실천했는지 다시 한 번 돌아보고, 부족한 것을 보완하며 필요한 부분을 채우기 위해 또 다시 글을 적어본다. 1. 나의 지난 삶 회고 - 계획이 먹혀 들어가는 것 같다 지난 계획이후에 조금은 실행력이 늘었다. 개인 프로젝트도 진행하고, 과제 전형 이후에도 생각을 많이 하는 것 같다. 어떠한 문제가 있었는지에 대해서만 생각하는게 문제라면 문제지만, 조금이라도 발전이 있었다는 측면에서는 긍정적이라고 생각한다. 하지만 아직 부족한 부분이 있는 것도 사실이다 아래는 부족한 점에 대해 조금이나마 분석해본다. 0. 이름뿐인 To Do List (계획 실행력에 대해) 계획을 세우기는 하지만, 그날 그날 임기응변..

지난 시간에 이어 이번에는 JavaScript 코드 작성에 대한 이야기로 포스팅을 이어보려고 한다. 작성된 코드에 대한 설명이 주된 내용이므로, 관심이 있거나 필요한 부분만 골라서 보면 될 것 같다. (혹시나 포스팅 내용에 오류가 있다면 제발 꼭 좀 알려줬으면 좋겠다..) 1. 뼈대를 완성하자 (HTML 마크업) To Do List 입력 What I Have To Do? COPYRIGHT 2022. JAENY, All rights reserved 가장 집중한 부분은 semantic 태그를 최대한 잘 사용해보자 하는 것이었고, 기본적으로 필요한 태그나 내용을 최대한 빠뜨리지 말자는 것이었다. 아래 내용을 펼쳐서 확인하면, 각 태그 사용에 대한 의도를 간략하게 서술하였다. 태그 내부 더보기 HTML 문자열 ..

기본기가 너무 많이 부족한 상황이다. 그래서 간단하지만 새로운 프로젝트를 진행하기로 했다. React 없이 JavaScript로만 To Do List를 만드는 것이다. 먼저 개발환경을 세팅해주었다. 폴더를 만들고 README를 생성한 후에, npm init명령어를 통해 package.json을 생성하고 필요한 패키지를 아주 조금 설치해주었다. 다음으로는 src 폴더를 생성해서 index.html ToDoList.js index.scss 를 만들고 기본적인 html 코딩 및 전역 폰트를 설정해주었다. GitHub에서 Repository를 생성한 후에 local에서 git init 이후 git add remote를 통해 연결을 해주었고, 기본적인 세팅과 코딩이후 commit 및 push를 진행하였다. 패키지..

자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈에서 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어를 도입하고자 하면서 브랜던 아이크(Brendan Eich)가 개발한 자바스크립트를 도입하게 되었다. 1996년 3월 처음 "Mocha"라는 이름을 통해 Netscape Navigator2 웹 브라우저에 탑재되었고, 9월에 "LiveScript"로 이름이 변경되었고, 12월에는 "JavaScript"로 명명되었다. 자바스크립트의 파편화와 표준화 1996년에는 마이크로소프트에서 자바스크립트이 파생 버전인 "JScript"를 IE(인터넷 익스플로러)3.0에 탑재하였는데 JScript와 자바스크립트가 표준화 되지 못한 상태에서 각 브라우저에서만 동작하는 기능들을 경쟁적으로 추가하면서 브라우..

0. 들어가며 지난 계획 이후 2주가 좀 안되는 시간이 흘렀다 제목에 결론(?)이 나와있기는 하지만 지난 계획 이후의 삶을 회고하고 고쳐야 할 것은 고치고나서, 계속 새롭고 도전적인 삶을 살아보고자 이 글을 통해 좀 더 나은 내가 되어보고자 한다. 1. 나의 지난 삶 회고 - 계획이 실패했다 의지가 좀 부족했던 것 같기도 하고, 좀 너무 쉽게 생각했던 것 같기도 하다. 그래서 지난 번 계획은 반은 성공했지만, 나머지 반은 실패했다. 결론적으로 그 나머지 반이 훨씬 컸고, 나는 실패했다. 아래는 그 이유를 조금이나마 분석해본다. 0. 플래너를 쓰지 않았다 이유는 간단하다. 귀찮았다. 예전만큼 손으로 플래너를 쓰는게 썩 즐겁지 않았다. 손으로 뭔가를 적는게 너무 큰 일처럼 느껴졌고, 이 일이 너무 큰 부분을..

문서 형식 정의 태그(Document Type Definition Tag) 출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그 대소문자를 구별하지 않으며 html 버전 등에 따라 작성하는 방법이 다르다. HTML 태그 모든 요소의 부모 요소이며, 웹 페이지에 단 하나만 존재할 수 있다. 따라서 모든 요소는 내부에서 기술되어야 한다. (은 예외) 또한 Global Attribute를 지원한다. 가장 많이 사용되는 것에는 lang 정도가 있다. 화면에 표시할 모든 콘텐츠는 이곳에 기술한다. HEAD 태그 head 요소는 metadata를 포함하기 위한 요소로, 웹 페이지에 단 하나만 존재할 수 있다. 화면에 표시되지 않는 meta, title, style, link, script 등을 포함하고 있으며 이 ..

Semantic Tag (시맨틱 태그) 대부분의 인터넷 사용자들이 정보를 취득하기 위해 검색엔진을 사용한다. 현 시대에서 그만큼 검색엔진에 최적화 된 웹 사이트를 만드는 것은 중요하다고 할 수 있다. 검색엔진 최적화(SEO)를 위해서는 검색엔진이 웹사이트 정보를 수집하는 방법에 대해서 이해할 필요가 있는데, 검색엔진은 로봇이라는 프로그램을 이용하여 웹사이트의 HTML 코드를 수집하게 된다. 이 때, 검색엔진은 HTML 코드만으로 그 의미를 인지하여야 하고 HTML 코드 중에서도 의미론적 요소 즉, 시맨틱한 요소(Element)를 해석하게 된다 이 의미론적인 요소를 충족하기 위해서 필요한 것이 바로, 시맨틱 태그이다. 아래의 코드 두 줄을 확인해보자. Hello Hello 이 코드를 실행시킨 결과(화면)를..

들어가기에 앞서 이번 글에 대하여 필자의 의견과 다르거나, 필자의 글에 잘못된 내용이 있다면 꼭 댓글 등을 통해 소통해서 설득하거나 고쳐주기를 바란다! 많은 개발자들이 블로그를 쓰고, 활용한다. 무엇 때문일까..? 첫 번째로는 지식의 공유 일 것이고, 두 번째로는 기록을 남기는 일일 것 같다. 여러가지 이유들은 많겠지만, 가장 큰 이유라면 저 두가지가 아닐까 추측해본다. 그럼 지식공유가 정말 잘 되고 있는 것일까..? 오늘(8월 10일) 우연히 어떤 영상을 보게 되었다 제목은 [개발자, 블로그 꼭 해야할까?] 라는 영상이었다. 아직 실무를 잘은 모르는 애송이로서 그 영상을 보면서 '정말 저런 문제가 있을 수 있겠구나' 싶었다. 반대로, 실무를 아주 조금 해본 사람으로서는 저런 문제가 있어도 '실무나 커뮤..