분류 전체보기
[JavaScript] 자바스크립트 동작 원리와 Call Stack, Event Loop
[JavaScript] 자바스크립트 동작 원리와 Call Stack, Event Loop
2021.08.14자바스크립트 동작 원리 이벤트 루프를 공부하면서 자바스크립트 동작 원리 안에 이벤트 루프 개념이 포함된다는 것을 깨달았습니다. 그래서 이벤트 루프와 자바스크립트 동작원리를 같이 포스팅하고자 합니다. 자바스크립트는 단일 스레드 기반 언어입니다. 이 말은 JS 엔진(자바스크립트 엔진)이 단일 호출 스택을 사용한다는 의미입니다. 쉽게 말해서, 한 순간에 하나의 작업만을 처리할 수 있습니다. 하지만 여러 웹 페이지의 자바스크립트 환경을 보면 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 대표적인 예로는, 애플 공식 사이트와 같이 애니메이션은 지속적으로 송출되면서 키보드 혹은 마우스 입력을 동시에 처리되는 경우가 있습니다. 자바스크립트는 단일 스레드 기반인 동기적인 언어라는 것을 알 수 있습니다. 그렇다면..
[기업 과제] "자음별 갯수 세기" (Javascript)
[기업 과제] "자음별 갯수 세기" (Javascript)
2021.08.14난이도 : 백준 기준 실버(1~3) 개인적으로 문제 자체는 어렵지 않지만 평소 접하지 못했던 한글 초성 분리 알고리즘을 검색해서 공부해야 하기 때문에, 이 부분에서 난이도가 올라가지 않았나 싶습니다. 문제를 해결하는데 도움이 됐던 링크는 하단에 따로 걸어두겠습니다. 저는 이 문제를 map 자료구조를 활용해서 해결했습니다. 초성으로 가능한 모든 자음을 map에 key값으로 넣어주었습니다. 그다음 초성 분리 알고리즘을 적용하여 입력받은 값이 한글인 경우만을 추출하였습니다. 유니코드를 얻는 과정에서 44032를 빼는 이유는 '가'를 나타내는 유니코드가 44032이기 때문입니다. 이 숫자를 상수로 하여 뺀 값을 저장했습니다. (입력 값이 '가' 라면 uni 값은 0입니다.) 초성은 589마다 바뀌는데 배열의 시..
[CS] 웹 브라우저는 어떻게 작동하는가?
[CS] 웹 브라우저는 어떻게 작동하는가?
2021.08.14웹 브라우저 작동 원리 주소창에 https://www.naver.com 혹은 https://www.youtube.com 등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 겁니다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹 페이지로 접속이 가능한 것일까요? 이번 포스팅에서는 주소 창에 URL 혹은 도메인을 입력했을 때 어떤 과정을 거쳐서 웹 페이지가 보이는지 알아보겠습니다. 브라우저란? 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다. 더보기 script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다. HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장..
[기업 과제] Jaranda 팀 프로젝트 리뷰 ③
[기업 과제] Jaranda 팀 프로젝트 리뷰 ③
2021.08.13개요 3편 작성하겠습니다. 1편은 전체적인 프로젝트 소개와 저의 역할을 중점으로 작성한 회고. https://bbangson.tistory.com/83 [기업 과제] Jaranda 팀 프로젝트 리뷰 ① 개요 2021.08.02 (월) ~ 2021.08.06(금) 원티드 프리온보딩 프론트 엔드 코스 교육에서 진행한 Jaranda 기업의 기업 과제 입니다. 총 8명에서 약 5일 동안 진행한 프로젝트입니다. 큰 규모의 프로젝트는 bbangson.tistory.com 2편과 3편은 팀원이 구현한 기능에 대한 공부와 설명. https://bbangson.tistory.com/85 [기업 과제] Jaranda 팀 프로젝트 리뷰 ② 개요 1편에 이어 2편 작성하겠습니다. 1편은 전체적인 프로젝트 소개와 저의 역할을 ..
[기업 과제] Jaranda 팀 프로젝트 리뷰 ②
[기업 과제] Jaranda 팀 프로젝트 리뷰 ②
2021.08.12개요 1편에 이어 2편 작성하겠습니다. 1편은 전체적인 프로젝트 소개와 저의 역할을 중점으로 작성한 회고. https://bbangson.tistory.com/83 [기업 과제] Jaranda 팀 프로젝트 리뷰 ① 개요 2021.08.02 (월) ~ 2021.08.06(금) 원티드 프리온보딩 프론트 엔드 코스 교육에서 진행한 Jaranda 기업의 기업 과제 입니다. 총 8명에서 약 5일 동안 진행한 프로젝트입니다. 큰 규모의 프로젝트는 bbangson.tistory.com 2편과 3편은 팀원이 구현한 기능에 대한 공부와 설명. https://bbangson.tistory.com/86 [기업 과제] Jaranda 팀 프로젝트 리뷰 ③ 개요 3편 작성하겠습니다. 1편은 전체적인 프로젝트 소개와 저의 역할을 ..
[독후감] 일은 배신하지 않는다 - 김종민
[독후감] 일은 배신하지 않는다 - 김종민
2021.08.09제목 일은 배신하지 않는다. 저자 김종민 기억에 남는 글귀 461p. 당장 해외 취업이나 대기업을 목표로 하기보다는 좀 더 자기 일을 사랑하고 즐기는 사람이 되기를 바란다. 남들이 알아주는 대기업에 목매기보단 크지 않아도 경험이 남는 회사를 선택해 실력을 쌓는 것도 좋은 방법이다. 해외 취업을 한 경험담을 들어보면 모두 제각각 그들만의 이야기가 있었다. 프론트엔드 개발자로 진로를 정하게 된 계기도 이 분의 역할이 한 몫 한다고 생각합니다. 유투브를 통해 김종민 님의 존재를 알게 되었습니다. 유투브에 올려주신 인터랙티브한 프로젝트에 매료 되었고, 저 또한 그런 프로젝트를 만들어 보고 싶었습니다. 구독과 좋아요는 당연했습니다. 인터랙티브한 프로젝트에도 관심이 생겼지만, 크리에이티브한 본인의 생각이 담긴 작품..
[기업 과제] Jaranda 팀 프로젝트 리뷰 ①
[기업 과제] Jaranda 팀 프로젝트 리뷰 ①
2021.08.08개요 2021.08.02 (월) ~ 2021.08.06(금) 원티드 프리온보딩 프론트 엔드 코스 교육에서 진행한 Jaranda기업의 기업 과제 입니다. 총 8명에서 약 5일 동안 진행한 프로젝트입니다. 큰 규모의 프로젝트는 아니었지만 많은 인원과 함께 프로젝트를 진행했습니다. 다수 인원이 함께한 프로젝트는 장단점이 존재했습니다. 개인적으로는 구현해보고 싶은 기능에 더 집중할 수 있고, 여유롭게 협업할 수 있어서 리팩토링과 피드백도 주어진 시간 내에 가능했다는 부분에서 장점을 느꼈습니다. 총 4편으로 나누어 이번 기업 과제를 리뷰하고자 합니다. 1편은 전체적인 프로젝트 소개와 저의 역할을 중점으로 작성한 회고. 2편과 3편은 각 팀원이 구현한 기능에 대한 공부와 설명. https://bbangson.tis..
[Java] 진법 변환 토이 프로젝트 (N진수를 K진수로 변환하기, No Library)
[Java] 진법 변환 토이 프로젝트 (N진수를 K진수로 변환하기, No Library)
2021.07.26개요 코딩 테스트에서 진법 변환 문제가 나왔습니다. 여러 조건 때문에 결국 못 풀어서 한이 남아 아예 프로젝트를 하나 만들고 포스팅으로 박제하고자 합니다. 한번 익혀두면 잊어버리지 않으니, 공부하면 좋은 지식이 될 거라 생각합니다. N진수를 입력 받아 N진수를 K진수로 변환하는 방법을 알아보겠습니다. ex) 1111(2) -> 17(8) N = (2 ~16) 진수 K = (2~16)진수 NotationConversion NotationConversion은 제가 지은 프로젝트 이름입니다. N진수를 K진수로 바꾸는 변환 과정은 다음과 같습니다. N진법으로 표기된 숫자를 10진법으로 바꾸고 바꾼 10진수를 K진법으로 바꿔줬습니다. 자바 코드로 먼저 확인해보겠습니다. import java.io.BufferedR..
[React] useState
[React] useState
2021.07.21useState React의 hooks중 하나입니다. 상태를 동적으로 관리할 때 사용합니다. 예제를 통해서 useState를 알아보겠습니다. App.js import React from "react"; import Counter from "./Counter"; function App() { return ; } export default App; Counter.js import React, { useState } from "react"; function Counter() { const [number, setNumber] = useState(0); // (1) const onIncrease = () => { setNumber(number + 1); }; const onDecrease = () => { set..