Chrome Devtools 내에 AI assistance 패널이 등장했다.(위 기능은 정식 출시되지 않은 실험적인 기능이므로 참고하길 바란다.)공식 문서 AI Assistance Panel필요 조건Chrome v131 이상 버전DevTools 설정(Win: F12 / Mac: Option + Command + i) > 기본 설정 > 언어에서 영어(미국) 선택.DevTools 설정 > AI 혁신 Toggle On 제공 기능1. Styling (스타일링)DOM 트리의 요소들에 대해 질문 가능특정 요소가 왜 그렇게 표시되는지 설명요소들 간의 상호작용 방식 파악스타일링 문제에 대한 해결책 제공사용 예시Elements 탭에서 좌측 정렬되어있는 특정 요소를 클릭한 후에 중앙 정렬을 부탁해봤다.2. Network ..
이 글은 입사 1주년이 된 제조업계(스마트팩토리) SI 주니어 프론트엔드 개발자의 자아성찰 및 회고를 담은 글이다. 2024년 1월 15일.부트캠프 강사님의 소개로 2023년에 약 2개월 가량 진행했던 홈페이지 리뉴얼 프로젝트의 공로를 인정받아,지금의 회사에 정규직으로 발을 떼게된 날이었다. 생각지도 않았던 제조(스마트 팩토리) 도메인이었기에 반신반의했지만,당시의 내 실력이나 상태로써는 별도로 취업준비 기간을 갖지않고 일할 수 있었기에 최선이었고,1년이 지난 지금에도 그 선택에 후회는 없는 것 같다. 회사의 메인 기술스택은 Java와 C#이지만, 다행히도(?) 지난 1년 간 맡았던 업무는 내가 공부해온 프론트엔드(React) 쪽의 업무들이었고,들어왔던 요구사항들은 무리없이 처리할 수 있는 수준이었다. 하..
this를 포함한 property를 구조분해할당하면this가 가리키는 객체가 다를 것이라는 것은 머릿 속으로는 알고 있었는데,정리해보려고 남겨보는 글이다.this를 포함한 구조 분해 할당의 문제와 해결 방법구조 분해 할당은 객체나 배열에서 원하는 속성 또는 값을 추출해 별도의 변수로 할당하는 방식이다.코드의 간결성과 가독성을 높이는데 자주 사용된다.예시: 단순 속성 구조 분해this를 사용하지 않는 경우, 구조 분해 할당은 아무 문제 없이 동작한다.함수형 예제const obj = { a: 1, b: 2, c: 3 };const { a, b } = obj;console.log(a, b); // 출력: 1, 2클래스 예제 (this 제외)class MyClass { constructor() { thi..
올해로 3회차를 맞은 테오의 컨퍼런스가 11월 23/24일 양일간 약 60명 씩을 추첨하여 진행되었다.카카오나, 배민, FE콘, 당근, 인프콘 등 여러 컨퍼런스를 무수히 지원했지만, 한 번도 되어본 적이없는데,이번에는 운이 좋게도 24일에 참여할 수 있었고, 오늘은 그 후기를 간단하게 남겨보고자 한다.테오콘, 어떻게 구성되어있을까?테오콘은 항해99에서 장소협찬을 받아 진행되었고,입장과 동시에 일정 브로셔와 신청 당시에 작성한 정보를 바탕으로 제작한 명함, 항해과 새겨져있는 펜과 바디 태그가 있는 티셔츠와 음료를 제공받을 수 있었다. 일정은 아래 첨부한 사진처럼 진행되었다!(TMI로, 명함은 배송문제가 생겨 운영진 분들이 한땀한땀 밤새 수작업했다고 한다 ㅠㅠ... 감사합니다...)기억에 남았던 점세션을 듣..
