오늘은 미루고 미루던 크롬 익스텐션 개발에 대한 포스팅이다. 지금은 153명 정도 사용 중이다. 나의 첫 번째 사이드 프로젝트를 무엇으로 할지 고민이 많았었다. 구글링을 해봤는데, 드래그앤 드롭 (DND)를 구현한 프로젝트와 작은 블로그 만들기 등 멋진 프로젝트 들이 많았다. 그중에서도 영상 과제 정보를 불러오는 크롬 익스텐션은 참 인상 깊었다. JS의 기본적인 문법조차 모르던 내가 무작정 머리부터 들이밀며 타입스크립트 + 리액트로 크롬익스텐션 개발을 시작했다. 사실 이 정도 크기의 익스텐션으로는 순수 JS만으로도 구현이 충분히 가능하다. 하지만 당시에 듣던 리액트와 타입스크립트 인강에서 배운 내용들을 내 것으로 만드는 데에는 직접 만들기보다 좋은 방법이 없다고 생각했다. 지금은 그저 당연한 코드고 ..
next, typescript로 개발을 시작한 지 3개월이 되어간다. JS 문법도 핵심으로만 파악하고 리액트로도 크롬익스텐션 하나만 만들어보고 바로 next js로 뛰어왔다. 어느 정도 리액트에 대한 이해가 있었고, next를 프로젝트에 써보면서 그냥 react 만 썼을 때는 어떻게 했을지 생각하며 개발했다. 속도는 더디지만 지금까지 배웠던 것들을 한번 정리하고 가려고 한다. 현재 프론트 단에서 next를 사용하려고 하는 이유는 여러 가지가 있겠지만 그중 핵심적인 것만 짚고 넘어가자. 1. 서버사이드 렌더링 및 정적 사이트 생성 이제는 많은 사람들이 next js 하면 SSR과 SSG를 연관지어서 바로 떠올릴 것이다. 보통 클라이언트 단에서 페이지가 렌더링 되지만, 서버 단에서 페이지를 구현하기 때문에..
곧 있을 네이버 부스트 캠프에서는 2차 코테에서 웹 전형은 JS로 언어가 제한된다고 알고 있다. 그래서 약 한 달 간 JS로 벡준 문제를 풀고 있다. JS 기본 문법은 알고 있지만 실제로 써본 경험이 많이 없다. 요즘 copilot 도 잘 되어 있고 복붙을 많이 하기 때문에 백지 상태에서 처음부터 끝까지 구현하는 경험이 필요하다. 간단한 배열을 입력받아서 정렬하는데에도 문제가 생겼다. 문제는 N개의 문자열을 여러 줄로 입력받아서 사전순으로 정렬이 되어있는지 판별하는 문제다.N의 범위도 적기 때문에 그냥 내장되어있는 sort를 사용하면 되었다. const input = require("fs") .readFileSync(process.platform === "linux" ? "/dev/stdin" ..
스코프는 변수의 유효 범위를 뜻한다. 스코프(Scope)는 변수가 어디서, 어떻게 선언되었는지에 따라 그 변수의 유효한 범위가 결정되는 규칙이기도 하며, 자바스크립트에서는 이 규칙에 따라 참조의 대상이 되는 변수를 탐색해나간다. 전역 스코프(Global Scope): 같은 파일 내의 코드 어디에서든지 참조할 수 있다. 지역 스코프(Local Scope or Function-level Scope): 함수 스코프 또는 코드 블록(if-else, for, while, try-catch 등)이 만든 블록스코프로, 자기 자신 또는 그 하위 함수/블록에서만 참조할 수 있다. 자바스크립트 엔진은 변수(식별자)를 찾을 때 일단 자신이 속한 스코프에서부터 찾아보고, 그 스코프에 찾는 변수가 없으면 상위 스코프를 타고 올..
