훨~~씬 많지만 너무 유명한건 제쳐두고 사람들이 잘 모를만한것. 하지만 없으면 너무 귀찮아지는 것들을 소개해보려고합니다. 1. Better Comments 코드에 컬러 주석을 추가하여 가독성을 높여주는 확장 기능입니다. 중요한 부분을 쉽게 구분할 수 있게 해줍니다. 2. Bracket Pair Colorizer 2 괄호를 색상으로 구분하여 보여주는 확장 기능으로, 코드의 구조 파악을 돕습니다. 3. File Tree Generator 프로젝트의 구조를 트리 형태로 생성하여 문서화에 도움을 주는 확장 기능입니다. README 파일 작성에 유용합니다. 4. Reactjs Code Snippets React 개발 시 자주 사용하는 코드 스니펫을 제공하여 빠른 코드 작성을 도와주는 확장 기능입니다. 5. SVG..
any 타입은 타입스크립트의 타입 체킹 기능을 비활성화하기 때문에, 가능한 한 좁은 범위에서만 사용해야 합니다. - 위의 내용은 이 본문 전체를 관통하는 이야기이다. 글쓴이는 any를 써야 한다면 최대한 좁게 만들라는 이야기를 계속해서 반복한다. 다음은 any 타입을 사용하는 두 가지 방법이다: // 나쁜 예 function f1() { const x: any = expressionReturningFoo(); // bad processBar(x); }; // 좋은 예 function f2() { const x = expressionReturningFoo(); processBar(x as any); // good }; | processBar 함수의 매개변수에서만 any 타입을 사용하는 것이 좋다. 이는 다..
웹소켓이지!! 실시간 통신하면 웹소켓이 가장 먼저 떠오른다. 그렇지만 한정된 자원, 특정 상황에서는 대안으로 http long polling기법을 사용할 수 있다. 회사에서 새로 시작한 프로젝트에서 동시성 이슈가 발생했다. 그래서 그에 대한 해결로 웹소켓에 관한 이야기가 나왔고 적용예정이다. 하지만 이번 동시성 이슈가 발생한 페이지는 일반적인 페이지가 아니고 특정 사용자만 접근이 가능한 페이지이다. 특정 사용자들끼리 동시에 접속하는 경우도 특별한데 데이터 요청도 빈번한 편은 아니다. 그래서 대안으로 생각해 놓은 게 http long polling이다. 웹소켓을 구축해 놓으면 물론 동시성이슈에 대해 거의 모든 부분을 커버할 수 있지만 초기 개발에 대한 개발자의 리소스가 너무 많이 들어가고 일정이 더 늘어난..
크롬 익스텐션? 현재 다니는 회사의 출근과 퇴근을 찍을 수 있고 연차신청도 할 수 있는 사내 툴이 있는데 이 사이트가 자동로그인 없어서 너무 불편했다. 하루에 무조건 2번 이상은 들어가는데 자동로그인 기능이 없다는 거에 불편함을 많이 느껴서 개선의 필요성을 느꼈다. 처음에는 사이트에 자동로그인 버튼이 있었다. 체크해도 자동로그인이 되진 않았지만 앞으로 개발 예정이겠거니 생각했는데 언제부턴가 아이디 저장으로 바뀌었고 그 기능은 동작을 한다. 그래서 자동로그인 기능이 앞으로 개발되지 않을 거라고 판단해서 개발을 마음먹었다. 개발 전 어떤식으로 로그인이 진행이 되는지 네트워크 탭을 확인해 봤는데 아이디랑 비밀번호를 넣으면 HTTP 요청을 보내기 전 암호화가 되어서 보내진다. 암호화하는 알고리즘은 내가 알아낼 ..
Next.js Conf에서 발표했듯이, Next.js 14는 우리의 가장 집중적인 릴리즈이에요: Turbopack: App & Pages Router에 대한 5,000개의 테스트가 통과됨 53% 더 빠른 로컬 서버 시작 Fast Refresh와 함께 94% 더 빠른 코드 업데이트 Server Actions (안정화): 점진적으로 향상된 변화 캐싱 및 재검증과 통합 단순한 함수 호출, 또는 폼과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 + 동적 콘텐츠 스트리밍 Next.js Learn (신규): App Router, 인증, 데이터베이스 등을 교육하는 무료 강좌 Next.js Compiler: Turbocharged Next.js 13부터, 우리는 Next.j..
취뽀 오랜만에 블로그에 글을 올리게 되었다. 2~3개월 동안의 긴 공백은 면접 및 코딩테스트 준비로 인해 생겼다. 그러나 최근, 한 회사에서 최종 합격 소식을 받게 되어 현재는 그곳에서 프론트엔드 개발자로 근무하고 있다. 2021년 개발 공부를 시작해, 2023년 10월에 취업까지 이르게 된 과정을 간략히 기록하고자 한다. 이 글이 다른 분들의 취업 준비에 도움이 되었으면 좋겠다. 너도 비전공자야? 최종학력은 고등학교 졸업으로, 비전공자의 신분이다. 2021년 군복무 중, 처음으로 코딩에 발을 담갔다. 초기엔 Python의 기초 문법을 배우면서 코딩테스트 문제를 풀어보았다. 시작은 어렵고 헷갈리는 부분도 많았지만, 점차 익숙해졌다. 21년 말, HTML과 CSS를 배우기 시작했고 그 과정에서 많은 재미를..
대부분 리스트를 순회하는 코드를 작성해 보라고 하면 다음과 같이 작성한다. const list = [1, 2, 3]; for (let i = 0; i < list.length; i++) { console.log(list[i]) } // 1 // 2 // 3 // undefined 하지만 ES6이후 새롭게 추가된 문법으로 위와 같은 코드를 조금 더 간결하고 직관적으로 표현할 수 있다. const list = [1, 2, 3]; for (const a of list) console.log(a) // 1 // 2 // 3 // undefined 그렇다면 Set 자료구조도 위와 같은 코드로 순회가 가능할까? const set = new Set([1, 2, 3]); for (const a of set) conso..
고양이를 너무 좋아하는 나는 이번 주말에 Canvas로 언덕을 뛰어다니는 고양이를 구현해보려고 한다. Canvas 초기 세팅 index.html style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background-color: #C2DEDC; // 내가 좋아하는 색상 } canvas { width: 100%; height: 100%; } app.js class App { constructor() { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContex..
