🔍 프로젝트 미리보기 💠 Lighthouse 점수 분석하기 - 기존 Lighthouse 점수 PerformanceOPPORTUNITIES리소스 관점에서 웹 페이지의 더 나은 성능을 위해 어떤 점을 개선시킬 수 있는지 제안해준다. 즉, 로딩 성능을 개선하는 방법을 제시한다.Reduce unused JavaScript추후 JavaScript 기능을 넣기 위해 코드를 미리 세팅해두었더니 사용되지 않는 JavaScript 코드를 삭제하라며 성능 점수를 떨어트렸다. DIAGNOSTICS페이지의 실행 관점에서 개선할 수 있는 방법을 제시한다. (⇒ 렌더링 성능)Serve static assets with an efficient cache policy정적 리소스는 캐시를 사용하라는 의미로, 변화 주기가 짧다면 캐..

정규 표현식? 들어는 봤는데 .. 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서 정규 표현식 또한 객체로 RegExp 의 메서드인 exec(), test() 뿐만 아니라 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드도 사용할 수 있다. 정규 표현식 만들기 리터럴 표기법 리터럴 표기법의 매개변수는 따옴표를 사용하지 않고, /pattern/flags의 순서로 작성한다. const reg = /FE-DEV/g; 리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일한다. 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하게 되면 정규 표현식을 매번 다시 컴..

🔍 설문조사 폼 HTML구조 파악하기 JS 스터디 모집 설문조사 설문지를 작성하세요! 질문 1. 무엇을 가장 배우고 싶으세요? 질문 2. 시간은 언제가 적당한가요? 질문 3. 몇 시간정도 예상하세요? 질문 4. 난이도를 조정한다면? 질문 5. 끝으로 하고싶은 말이 있나요? 제출 초기화 설문지 폼은 사용자에게 입력을 받고, 입력 받은 내용을 서버로 제출하는 목적을 가지고 있기 때문에 요소로 구성되어 있다. 요소로 사용자에게 질문에 대한 응답을 입력받고 있고, 요소를 사용하여 입력창과 연결시켜 스크린 리더와 터치스크린 사용자에게 좋은 UX를 줄 수 있다. 요소는 form과 같은 양식 요소를 그룹화 할 수 있다. 요소로 그룹의 설명을 제공할 수 있어서 해당 콘텐츠가 어떤 목적 혹은 주제를 가지고 있는지 나타낼..

😎 오늘의 잘한점 액션 해결하지 못한 과제를 포기하지 않고 해결해 낸 것! 칭찬 풀리지 않는 것이라고 포기한 채로 두지 않았다니 또 한 번 성장했다는 것을 느꼈다. 예전이었다면 주어진 시간 내에 풀지 못해 부족한 사람이라고 자책하고 있었을 텐데 요즘에는 내가 제어하지 못하는 것이 아닌 제어할 수 있는 것에 초점을 두는, 생각의 전환을 할 수 있는 내가 되어 간다는 점이 뿌듯했다😀 ✔️ 오늘의 개선점 문제 풀 수 있는 문제였음에도 제한 시간 내에 문제를 풀지 못하였다. 원인 문제를 파악하고 구현하는 것보다 효율적인 코드를 작성하는 것을 우선순위로 생각하면서 문제를 푸는 시야가 좁아졌다. 액션 플랜 효율적인 코드를 작성하는 것도 물론 중요하지만 100% 완벽한 코드는 없다고 했다. 80-90% 정도의 코드를..

들어가기에 앞서 멋쟁이사자처럼 5기를 같이 참여하고 있는 분께서 Git 오류에 대해 도움을 요청해 주셨다. 예전에 경험해 봤던 문제이면서 Git의 동작 과정을 다시 한번 정리해 볼 수 있었기에 해결한 과정에 대해 기록해보고자 한다. 🚚 현재 레파지토리(Repository)에서 새로운 레파지토리로 파일 이동하기 현재 레파지토리에 있는 파일들을 다른 레파지토리와 합치고 싶다면 어떻게 해야 할까? 우선 나의 컴퓨터에 있는 폴더 즉, 로컬 환경에 있는 폴더와 연결된 remote를 옮기고 싶은 새로운 레파지토리와 연결시켜주어야 한다. 💡 여기서 Git의 remote란 무엇일까? 쉽게 얘기하자면 내 컴퓨터에 있는 폴더와 원격 저장소를 연결시켜 주는 명령어이다. 많은 사람이 사용하고 있는 Github는 Git을 기반..

😎 오늘의 잘한점 액션 DOM 클래스를 제어하는 실습 문제를 풀 때 어떻게 하면 코드량을 줄일 수 있을지 고민하여 작성했다. 칭찬 모든 button을 선택해서 이벤트 리스너를 추가하고, 클래스 이름을 추가하는 부분이 반복되는 것을 깨달았다. 따라서 반복문과 slice를 사용해서 코드를 간략하게 만들었고, 수업 시간에 이를 공유했다😀 단순히 코드를 작성하는 것 뿐만 아니라 메서드나 반복문이 사용되는 원리를 알게되니 응용하기가 수월했다. 빨강 노랑 초록 ✔️ 오늘의 개선점 문제 DOM 클래스 제어 실습에서 예외 상황을 처리하지 못했다. 원인 button의 click 이벤트 리스너에 box.classList.toggle("클래스명")을 하게 되면 다른 button을 클릭했을 때 기존의 class명이 남아있게 ..

😎 이번 주의 잘한점 액션 이번 주에 세워놨던 우선 순위에 따라 최대한 해야할 일을 처리하고자 했다. 토이 프로젝트를 리팩토링 하면서 알게된 점 정리하기 칭찬 침대에 눕고 싶을 때가 정말 정말 많았지만, 해야할 일을 하기 위해 계속 앉아있던 점 칭찬해ㅠㅠ 확실히 우선 순위를 정해서 일을 처리해나가니까 못했던 일이 생기더라도 마음의 불편함을 덜 가질 수 있었다. 계획했던 일을 다 하지 못했더라도 자책하지 않고, 어제보다 성장한 내가 됐다는 것에 뿌듯함을 느꼈다는게 가장 포인트인 것 같다! 다른 사람과의 비교보다는 나와의 싸움에서 이겨내야한다. 앞으로도 잘 이겨보자구🔥 ✔️ 이번 주의 개선점 문제 자바스크립트를 생각보다 깊이 있게 알지 못했다😂 원인 단순히 코드를 작성하고 동작시키는데에만 급급했던 것 같다...

😎 오늘의 잘한점 액션 미루고 미뤄왔던 현재 나의 상태와 계획을 점검했다. 칭찬 요즘 우선 순위가 정하기 어려워서 고민하던 중에, 같이 교육을 듣고 있는 멋사 교육생분께 고민을 말씀드렸더니 현재 하고 계시는 방법을 말씀해주셨다! 목표로 하고 있는 내용 혹은 알아야할 키워드를 카테고리 별로 정리한 다음, 우선 순위를 정해서 완료한 것들은 지워나가는 식의 방법을 추천해주셨다. 그래서 주신 의견과 조합하여 노션에 정리해나갔다. 먼저 해야할 일, 과제를 구분해서 작성하고 그 날의 우선 순위를 작성했다. 그리고 현재 계획의 진행도를 보고자 계획 및 목표들을 카테고리 별로 정리하고자 했다. 이렇게 한 눈에 정리하고 보니 새삼 많은 일을 벌여놨구나 싶었다...ㅎㅎ 아직은 초반이라 정리가 어수선하지만 더 세분화 된 내..

😎 오늘의 잘한점 액션 로그인 페이지를 만들 때 조금이라도 시멘틱 마크업에 대해서 고민하면서 짰다! 칭찬 시멘틱 마크업이 많이 헷갈리기도 하고, 무조건 지켜지기 어렵기는 하지만 이전에는 로만 작성했다면 이제는 그 습관을 버리고 구조를 생각하게 됐다 아직 많이 부족하기는 하지만 사용자를 위한 웹을 만들겠다는 꿈에 한 발자국 다가간 것 같아서 좋았다. 앞으로도 더 고민하고, 점검하자 화이팅✊ ✔️ 오늘의 개선점 문제 로그인화면에서 회원가입, 아이디/비밀번호 찾기로 넘어가는 부분을 마크업 할 때 안에 을 써서 구현한 것 원인 링크로 이동하면서 클릭이 된다고 생각하여 안에 을 자식 요소로 하여 마크업 했었다. 와 둘 다 클릭이 되는 요소이기 때문에 Markup Vaildation Error(마크업 유효성 오류)..

😎 오늘의 잘한점 액션 요즘 2:00 - 7:30 에 취침 시간을 가지고 있음에도 책상 앞에 계속해서 앉아 있는 것! 칭찬 물론 늦게 자는 것이 좋은 습관이 아니라는 걸 알고는 있지만.. 바쁜 와중에 목표했던 계획을 실천하고자 늦게 자게 되었다. 그럼에도 최대한 책상에 앉아 있으려고 했고, 쉬어도 책상 앞에서 쉬니까 금방 공부로 돌아올 수 있어서 좋았다. 침대에 눕고 싶은 마음은 굴뚝 같지만,, 잘 참아냈음에 칭찬해! ✔️ 오늘의 개선점 문제 여전히 우선 순위를 세우고, 실천하는데에 우왕좌왕 하는 것 같다. 원인 내가 현재 어떤것이 부족한지 인지하지 못하고 있는 것이 아닐까 싶다. 부족한 점을 알아야 우선적으로 필요한 것이 무엇인지 알 수 있을텐데 .. 아무래도 제대로 된 시각화가 필요할 것 같다. 액션..