# js
[JS] BFS(Breadth First Search), DFS(Depth First Search)
비선형 구조 데이터 탐색 방법BFS(Breadth First Search), DFS(Depth First Search)데이터는 선형 구조(배열, 연결리스트, 스택, 큐) 또는 비선형 구조(트리, 그래프)로 이루어져있으며 순차적으로 나열된 선형 구조에 비해 비선형 구조의
[JS] LV.2 최댓값과 최솟값
문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요.
[JS] 재귀함수
재귀함수는 자기 자신을 호출하는 함수를 뜻합니다\* 재귀: 원래의 자리로 되돌아가거나 되돌아오는 것을 말한다.재귀함수를 사용할 때는 꼭 두 경우가 있어야하는데,base case: 더이상 문제를 쪼갤 필요가 없는 종료된 경우recursive case: 문제를 쪼개서 풀어
Bottom Sheet
이번 페이지는 다른 페이지들과는 조금 다른 맛?이다.슬랙봇 만든 후기를 적었던 거 같이 개발하면서 새로 공부하고 고민이 됐던 부분 정리하려고 한다.기본적으로 내가 만든 바텀 시트는 다음과 같다.bottom sheet layout바텀 시트는 open되면 아래에서 올라오고
Shadow DOM
https://tech.inflab.com/202208-shadow-root/이 블로그에서 전역 스타일에 영향을 받지 않도록 shadow dom을 이용했다고 한다.관심을 가지고 다른 글들도 찾아보던 차에 Vue에서 많이 사용되는 태그인 template과 slo
JS Module
electron 개발 중 main process 리팩토링 작업을 진행했다.공통 부분 모듈화, 별도의 기능 추상화 등의 작업을 진행하던 중 export default class Class로 선언한 Class를 다른 파일에서 require로 가져오지 못해서 에러가 났고,
JS Encoding
재밌는 글을 하나 읽고 나서 인코딩/디코딩과 관련하여 간단하게나마 정리하고 싶어졌다.인코딩: 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것디코딩: 컴퓨터가 이용할 수 있는 신호를 사용자가 이해할 수 있는 문자나 기호로 만드는 것7비트로 표현
JS Time
서버에 저장되는 time 및 price와 화면에 보여지는 내용이 같지 않을 때가 많았다.화면에 보여주기 위해 항상 한 번은 가공을 해야 했고, 그 가공 과정을 매번 구글에 검색해서 알아내거나 day.js, moment.js를 이용해서 해결했다.이번에는 time에 대해서
Design Pattern
클린 코드를 공부하며 디자인 패턴에 대해서도 익숙해질 필요가 있다고 생각했다.~필기 테스트에서도 나왔고 면접에서도 공격받았던 질문...~모든 디자인 패턴을 다 작성한다기 보다는 JS에서 주로 사용되는 패턴을 먼저 정리하고자 한다(이후 방향성이 바뀔 수도 있다).목차Bu
Clean Code JS
본 글은 https://github.com/ryanmcdermott/clean-code-javascript 를 번역한 글이다.그냥 복붙 없이 내 손으로 한글자 한글자 타이핑하며 익히려고 추가한 페이지이다.참고https://738.github.io/cl
React State
좋은 react 개발자가 되기 위해서는 가독성 좋은, 성능 좋은, 유지 보수 가능한 코드를 짜야 된다.성능이나 디자인 패턴을 이해하고 싶다면 react에서 상태 관리가 어떻게 이루어지며 어떠한 원리를 가지고 있는지 파악할 필요가 있다고 생각했다.다음과 같은 특징을 지닌
[JS] 타이머
그동안 애니메이션이나 서버 통신 등의 경우에 썼던 setTimeout, setInterval..! 이외에도 플젝하면서 필요할까봐 스로틀 등에 대해서도 잠깐 알아보고 하긴 했었지만 원리나 차이 등에 대해서 깊게 알지 못했는데 41장에서 자세히 다뤄줘서 답답했던 부분이 해소되었다✨ 호출 스케줄링? 함수를 명시적으로 호출해서 바로 실행되도록 하는 것이 아니라,...
Mocking
~면접에서 집요하게 공격받던 질문이다...~예전에 진행했던 프로젝트 중에 FE 개발만 많이 앞서 나가고 BE의 API가 개발될 때까지 기다렸던 적이 있다.그러한 일이 현직에서도 많이 발생하고 BE/FE 개발을 비동기(?)로 진행하기 위한 방법으로 mocking을 이용한
React
react에 대해 면접 전에 부랴부랴 외우기 보다 미리 '이해'하고 싶어서 정리하려고 한다.react는 왜 등장했는가에 대해 여러 글을 읽고 나의 방식대로 정리해봤다.react 이전에는 SPA 프레임워크로서 angular가 존재했다.angular는 jQuery를 써서
Architecture
React를 개발하다 보면 매번 좋은 구조가 무엇인지 헷갈린다.좋은 구조에는 정답이 없고 프로젝트의 성격마다 좋은 구조가 다르다는 것은 알지만 그럼에도 어떤 구조가 좋은지 끊임없이 고민하게 되고 시간을 소비하게 된다.심지어 vanilla js로 개발할 때도 비슷한 고충
V8 Engine
Node.js가 널리 사용될 수 있는 계기가 V8 Engine가 나오면서라고 하니 공부하지 않을 수 없는 부분인 것 같다.참고한 글들 1, 2처럼 내부 구조를 git clone해서 파본 것은 아니어도 정리할 필요는 있다는 생각이 들었다.~자동차 v8 엔진의 이름을 따온
JS Grammar
head with no optionhtml은 인터프리터처럼 작용해서 위에서부터 읽어내려옴. 그런데 body를 만나기 전에 script태그를 만나서 js를 가져오면 html을 보여주는 속도가 느려짐.body with no optionhtml을 먼저 보여줄 수는 있지만 j
RequestAnimationFrame
CSS로도 화려한 애니메이션(animation, transition, transform)은 충분히 구현할 수 있다.하지만 사용자의 특정 인터렉션, 예를 들면 어떤 element를 클릭한다든지, scroll 이벤트가 발생한다든지에 따라 애니메이션을 실행하고 싶다면 JS를