For every great experience

💡 이번에 사내 리더 스터디에서 온보딩을 주제로한 발표를 하게 되었다. 하면서 곰곰히 생각해보았다. 나는 첫 입사 때 어땠는가? 어떤 어려움이 가장 컸는가? 우리 팀 목적에 맞는 온보딩 셋업 OT와 온보딩 그 사이 어딘가 온보딩의 정의 1. 회사의 지침, 규칙, 정책, 절차, 복지제도를 알려준다. 2. 우리의 문화와 일하는 방식을 설명한다. 3. 업무 장비 사용법 또는 인터넷 연결 방법을 알려준다. 4. 역할과 책임을 자세히 설명하고 기대 역할을 공유한다. 5. 피드백을 교류하며 생각의 차이를 좁혀간다. 6. 업무 퍼포먼스를 발휘하는 데 방해요소는 없는지 체크한다. 보기 중, 온보딩에 해당하는 ... Read More

토스 Frontend Accelerator 1기 기술 테스트 후기 오늘 본 따끈따끈한 기술 테스트 후기를 짧게 말해볼까 한다. 일단 시험 방식은 2시부터 2시 20분 까지 시험을 봐야하고, 총 20문제가 나왔다. 테스트는 계속 볼 수 있지만 20분이 지난 이후로 제출하게 되면 감점 요소가 된다. 2시 정각에 문제를 풀었음 에도 5분정도 지나서 제출할 수 있었다. css 문제가 한 5~10% 정도, 자바스크립트 문제가 40% 리액트 문제가 50% 정도 나온 것 같다. 솔직히 리액트 많이 사용을 안해봐서 어려웠다…. 리액트 문제를 본 순간 멘붕이 왔고 그냥 아는 선에서 정답을 골랐다. 결과가 좋든 나쁘든 신기... Read More

제목 독서일 출판사 소플의 처음만난 리액트 2023/12/24 한빛미디어 서평 이 책은 리액트를 처음 배우는 프론트엔드 개발자 꿈나무들에게 적합한 책인 것 같다. 필자는 리액트로 조금씩 토이 프로젝트 몇 개 만들어본 적이 있는데 이렇게 이론으로 차곡차곡 다질 수 있는 기회를 얻게 되어 좋았다. 게다가 단원의 마지막에는 배운 것을 직접 실습할 수 있는 코드가 있고 또한 유튜브로 제공되는 무료 강의와 깃허브로 볼 수 있는 예시 코드들을 활용할 수 있어 좋았다. 공식 홈페이지의 내용은 어렵... Read More

제목 독서일 출판사 우아한 타입스크립트 (with 리액트) 2023/11/21 한빛미디어 서평 이 책은 타입스크립트와 자바스크립트는 알고 있지만 얕게 알고 있는 주니어들이 읽으면 좋을 책이다. 필자 또한 마찬가지로 실무에서 타입스크립트를 사용하고 있지만 깊게 알고있지 않아 많은 도움이 되었다. 필자는 모든 개발자들과 마찬가지로 팀 내 코딩 컨벤션이나, 어떻게 하면 더 좋은 코드를 만들지에 무척 관심이 많다. 이 책에서는 우아한 형제들 프론트엔드 팀은 ‘해당 타입스크립트 문법을 실무에... Read More

Vuex는 말로만 들어봤지 직접 적용을 해본 적이 없었는데 이번에 기회가 생겨 적용해볼 수 있었다. Vuex란? Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리다. 그렇다면 상태란 무엇인가? 필자의 생각에는 변경 가능한 모든 데이터를 상태라고 생각한다. 우리는 그것을 관리함으로써 상태가 어떻게 변경될지 예측할 수 있다. 특히 프로젝트가 커지면 커질 수록 상태를 변경하는 곳이 여려군데가 있으면 오류가 났을때 잡기 어렵다. 이 때 Vuex같은 상태관리 툴을 쓰면 상태의 변경을 한 곳에서 관리하여 상태에 대한 모든 것을 예측할 수 있다. 직접 적용해보니 Vuex의 장점이 확 와닿았다. 상태를 ... Read More

제목 독서일 출판사 초보자도 프로처럼 만드는 플러터 앱 개발 2023/10/14 한빛미디어 서평 이 책은 필자처럼 정말 모바일 개발에 대해 아무것도 모르는 사람들을 위한 책이다. 총 5주의 플렌이 있고 1주차에는 플러터의 장점과 핵심 문법, 개발 환경을 만드는 방법을 소개한다. 2주차부터는 드디어 실전에 들어가 프로젝트를 만들고 3주차는 얼추 앱같은 것을 볼 수 있게 된다. 4주차는 서버와 통신하는 것을 배우고 5주차는 배포를 배우게 된다. 각 주마다 챕터가 있어 단계별로 배울 수 있... Read More

이번에 회사에서 빌드 성능 개선을 위해 웹팩을 깨작깨작 만져보았다. 웹팩이란 무엇인지 왜 사용하는 것인지 알아보자. Webpack이란? 웹팩이란 무엇일까? 프론트엔드에서 사용하는 모듈 번들러이다. 모듈이란 무엇일까? 모듈이란 비슷한 기능들을 모아놓은 것을 모듈이라고 한다. 그러니까 // calc.js export function sum(a, b) { return a + b } export function sub(a, b) { return a - b } 이와 같이 계산하는 기능 함수를 가지고 있는 calc.js 파일을 모듈이라고 한다. 웹팩에서는 자바스크립트 뿐만 아니라, css, ht... Read More

렌더링 (Rendering) 우리는 렌더링이란 말을 정말 많이 듣고, 사용하고 있을 것이다. 그렇다면 렌더링이란 무엇일까? 브라우저에서 렌더링이란 화면을 그리는 과정을 의미한다. Vue에서 렌더링도 비슷한 의미로 생각할 수 있다. Vue에서 렌더링이란 현재 애플리케이션에서 상태를 반영하기 위해 DOM을 업데이트 하는 과정 이다. 업데이트 과정 DOM을 업데이트 한다? DOM을 그리는 과정이라는 것인가 싶지만, 사실 Vue에서 렌더링이란 화면을 그리는 것 그 이상의 의미가 있다. Vue가 수행하는 렌더링 과정은 이렇다. 데이터 정의 Vue에서 사용할 데이터를 정의한다. <sc... Read More

첫 컨퍼런스 회사 근처에서 진행하는 너디너리 데모데이를 다녀왔다. 컨퍼런스 일정 중 관심있던 두 스피커의 얘기를 듣기 위해 갔다. 1층에 작지만 알찬 기업 부스들도 있었고 지하는 동아리에서 만든 다양한 서비스들도 많이 있었다. 내가 들은 금요일 두 세션에 대해 공유하고자 한다. 시장에서 살아남는 개발자 되기 Speaker: 문동욱님 (쿼타랩) [#기술성장] (고용)시장의 시각전환 나는 나의 능력을 파는 판매자 시장은 최대 이익을 추구하는 플레이어들의 경쟁 내가 가진 역량을 어떻게 늘릴 수 있는지 고객(기업)이 나를 뽑게 만들어야 함 ... Read More

제목 독서일 출판사 육각형 개발자 2023/08/21 한빛미디어 서평 이 책은 주니어 개발자가 레벨업 하기 위해 길러야 할 역량 10가지를 작가의 경험담과 함께 풀어낸 책이다. 첫 장부터 요즘 하는 고민에 관한 내용이라 푹 빠져들었고, 딥한 다른 개발 서적들과 다르게 예시를 작가의 경험으로 들어 가볍게 술술 읽을 수 있었다. 게다가 실무에 직접 접목시킬 수 있는 내용들이 많아서 직접 해보니, 이해도 더 쉽게 됐다. 머리를 식히고 싶지만 성장은 포기할 수 없는 주니어들에게 강력추천 한다... Read More

개발을 할 때 ‘어떻게 하면 유연한 컴포넌트를 만들 수 있을까?’ 하는 질문을 끊임없이 던지곤 한다. 회사에서 프로젝트 시작 전에 설계에 관한 회의를 하고 방향성을 잡는다. 그럼에도 불구하고, 막상 프로젝트 중반쯤 되면 초반에 설계했던 구조가 많이 바뀌어있다. 구조가 변경되는 것은 어쩔 수 없는 일이지만, 변경 비용이 크지 않다면? 그만큼 설계를 잘 했다는 이야기니까 얼마나 뿌듯한가? 이번에 공부한 내용은 요즘 최대의 관심사이자, 프론트엔드 개발자라면 누구나 궁금해 할 내용. 바로 컴포넌트의 설계에 대한 이야기다. 컴포넌트란 컴포넌트란 무엇일까? 필자가 정의한 컴포넌트는 재 사용이 가능하게 UI 단위로... Read More

제목 독서일 출판사 노션 라이프 2023/07/07 한빛미디어 서평 요즘 누구나 사용하는 노션으로 인생을 설계할 수 있다니! 얼마나 재밌어 보이는가? 노션으로 어떻게 내 인생을 설계할 수 있는지 아주 체계적이고, 쉬운 설명과 사진으로 노션을 더 잘 사용할 수 있게 도와주는 책이다. 필자는 무언가를 채워가는데 소소한 행복을 느끼는 사람으로 작가가 제공해 준 예쁘고 실용적인 템플릿으로 실습하며 직접 채워 나갈 수 있어서 더 흥미로웠다. 게다가 예시로 들어있는 사진들은 빠르게 업데이트되는 ... Read More

얼마전 면접을 봤는데 웹 성능 최적화에 대해 질문이 있었다. 비록 면접은 탈탈 털렸지만 실패를 딛고 재정비 하자! 웹 성능이란? 웹사이트의 콘텐츠가 신속하게 전달되어 사용자가 원하는 서비스를 빠르게 전달받을 수 있도록 하는 시스템들의 성능을 말한다. 웹 성능 최적화란? 웹 성능 최적화란? 말 그대로 웹 사이트를 사용자에게 빠르게 보여주기 위해 웹 사이트를 효율적으로 동작하게 하는 작업이다. 웹 성능 최적화가 우리에게 미치는 영향은 크다. 웹 성능 최적화를 하는 이유 웹 성능 최적화를 통해 비지니스 효과를 볼 수 있다. 예시로 핀터레스트는 사용성 개선으로 인해 매출이 44% 증가 했다고 한다. 그리... Read More

제목 독서일 출판사 복붙 개발자의 벼락 성공기 2023/06/18 한빛미디어 서평 이 책을 읽고 어느 재미있는 개발자의 수필같다 라는 생각을 했다. 개발자 라는 같은 직업을 가진 사람으로서 공감 하는 부분도 있었고, 이 저자의 경험을 통해 내가 저 상황이였다면 어땠을까 상상을 펼칠 내용도 있었다. 선배 개발자의 일기를 훔쳐본 느낌이랄까? 나만 이런 생각을 하는게 아니구나 하는 마음도 들었고 또 내가 해보지 못한 경험을 읽으며 나도 저렇게 해보고 싶다는 생각도 들었다. 전문 서적으로 책... Read More

회고란? “지난 일을 돌이켜 생각함” 을 의미한다. 일기도 안 쓰는 내가 회고를 해야겠다고 마음을 먹었다. 동생의 추천으로 메모어 라는 모임에 대해 알게 되었고 살펴보다가 아주 좋은 활동인 것 같다. 좋아보이는 것은 다 해봐야 직성이 풀리지만 모르는 사람들과 함께 하는 것이 부담스러워서 혼자서 조용히 시작! 회고 방법 간단히 회고 방식 4가지에 대해 말하자면 키워드 방식 일주일 중 가장 인상깊었던 사건을 키워드로 잡고 이야기를 한다. 4F 사실(Fact)를 작성하여 객관적인 것만 나열한다. 사실에 대한 느낌(Feeling)과 교훈(F... Read More

브라우저의 랜더링 방식은 여러 글을 찾아보면 찾아볼 수록 말이 아 다르고 어 다르게 되어있어서 더 헷갈렸다… 브라우저는 어떻게 나에게 화면을 보여줄까? 브라우저는 서버에 데이터를 요청하고, 응답받은 데이터를 브라우저에 표시한다. 이 과정을 더 자세히 알아보자. 브라우저란? 우리가 컨텐츠를 수신하고, 전송하는 소프트웨어이다. 이렇게 말하면 잘 와닿지 않을수 있다. 간단하게 말하면 우리가 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지 같은 것들이 브라우저이다. 그렇다면 브라우저는 어떻게 화면을 보여주는 걸까? 간단하게 알아보겠다. 브라우저는 사용자가 보는 인터페이스 영역, 인터페이스와 렌더링 엔진 사이의 ... Read More

제목 독서일 출판사 FastAPI를 사용한 파이썬 웹 개발 2023/04/20 한빛미디어 서평 이 책은 “웹 API 구축에 관심있는 파이썬 개발자를 대상으로 한다. 따라서 파이썬 프로그래밍 언어에 관한 기본 지식이 필요하다.” 이런 독자들을 대상으로 쓴 책이다. 그렇다 필자는 파이썬 개발자가 아니고 API구축에 관심은 아주 약간… 프론트니까 그냥 백엔드에서 어떻게 만들어지나 아주 약간의 호기심만 있을 뿐 깊이있게 공부를 하진 않았기 때문에 이 책을 읽을때 어려움이 무척 많았다. 보통은... Read More

제목 독서일 출판사 UX/UI 디자이너를 위한 실무 피그마 2023/03/13 한빛미디어 Intance Finder라는 플러그인을 사용하면 어떤게 추가가 된 컴포넌트인지 알 수 있다. 서평 필자는 프론트엔드 개발자로 피그마와 아주 가깝게 일을 하고 있다. 거의 매일 디자이너가 만들어준 ui kit를 수정하고, 피그마로 그려진 프로젝트 디자인 파일을 보곤 한다. 특히 ui kit를 수정하는 일은 무척 번거롭고 바꾸기가 쉽지 않은 작업이다. 코드를 수정하고 업데이트 하고 빌드 시켜 np... Read More

제목 독서일 출판사 러닝 타입스크립트 2023/02/09 한빛미디어 타입스크립트의 오류의 종류를 알아야 내 코드에 왜 빨간 줄이 쳐져있는지 파악 할 수 있다. 오류에는 구문 오류와 타입 오류 두가지 종류가 있다. 구문 오류는 타입스크립트가 자바스크립트로 변환하는 과정에서 발생한 오류이고, 타입 오류는 말 그대로 타입 검사기에서 오류가 난 것을 의미한다. 타입 애너테이션이란 값을 할당하기 전에 어떤 타입의 값을 할당 할 것인지 타입스크립트에게 미리 알려줄 수 있다. let foo: s... Read More

🤷‍♀️ 타입스크립트란? 자바스크립트 + 타입 -> 자바스크립트의 확장판 이라고 생각하면 된다. But! 브라우저에서는 바로 읽을 수 없음… js로 컴파일 작업을 해야 브라우저가 읽을 수 있다. 그럼 컴파일은 어떻게 해야하나요? 그건 밑에서 차근차근 설명을 하겠다~ 나는 타입스크립트를 써보면서 타입이 따로 없는 자바스크립트 벽돌에 타입스크립트라는 시멘트를 바르는 느낌이 들었다. 장점 왜 다들 타입스립트를 쓰라며 노래를 부르는지 어떤 장점이 있는지 보자 타입 정의 먼저 자바스크립트의 자유분방한, 너무 자유롭다 못해 무질서하기까지 느껴지는 타입을 정의하여 빌드 전에 런타임 오류를 바로 잡을 ... Read More

이 글은 개발자 문동욱 님의 블로그 글을 보고 기억에 남는 것을 제 나름대로 정리한 포스트 입니다. 무작정 외우고 따라 쓰는 것 보다 다 읽고 어디까지 이해했는지, 어떤 것들이 내 머릿속에 남아있는지 확인 하면서 공부 하는 것이 더 좋다고 (동생이 적극 추천한 공부법) 하여 글로 남겨 확인해보려 합니다. TCP TCP는 트렌스포트 계층에서 사용하는 프로토콜이다. 헤더의 정보들로 정보를 안전하고 정확히 순서대로 전달해준다. 왜 개발이 되었나? 핵전쟁이 발발해도 끊기지 않는 네트워크를 만들기 위해 개발 되었다. 헤더에는 많은 정보가 있는데 그 중 시퀀스 넘버는 세그먼트를 순서대로 보낼 수 있... Read More

No layout: index.html 이유는 내가 클론을 받았을 때 테마 폴더 안에 있는 애들은 같이 안올라갔기 때문에 아무것도 뜨지 않았다 다시 클론을 받고 재실행하니까 잘 보인다 로고를 바꿔보자 로고는 테마 > 소스 > 이미지 폴더 안에 넣고 hexo d -g 하고 hexo s 하면 바뀐다 config 파일을 건들면 다시 빌드와 배포 과정을 해줘야 한다 글은 바로 바뀜! 이제 겨우 사이드 바꿨는데 앞으로 네비랑… 거지같은 사이드 css… 바꿔줘야겠다 왜이렇게 갈 길이 머냐~ 그래도 하다보면 되겠지! Read More

SPA의 상태 관리 방법 회사에서 뷰로 개발을 하는데 하나의 컴포넌트로 여러 모달창을 그릴 때가 많았다. 그럴 때마다 필요한 데이터들을 주는데 공통된 데이터가 매우 많고 또 모달 컴포넌트 안에 또 자식 컴포넌트라도 생기는 날에는 부모의 자식 그 자식의 자식까지 props를 내려주는 경우가 있었다. 너무너무 귀찮고 너무 복잡도가 올라가기도 하고 각 컴포넌트 마다 결합도 높아지는 소리가 여기저기서 들렸다. 그러다가 상태관리를 하면 그런 수고로움을 덜 수 있다는 것을 알게 되었고, 공부 하려고 한다. 상태 관리에 필요한 디자인 패턴에 대해 공부하고, 얘네가 어떻게 상태를 관리 해준다고 말하는지 알아볼 것이다. 또 JS... Read More

제목 독서일 출판사 코어 자바스크립트 2022/09/10 위키북스 서평 정말 자바스크립트의 코어한 내용을 담았다. 자바스크립트에 대해 어느정도는 알고 있지만 깊게 알지 못하는 사람들에게 추천하는 책이다. 그 언어의 핵심에 대해 정확하게 이해하는 것은 중요하다. 이 책은 그 핵심에 대해 군더더기 없이 깔끔하게 정리해준다. 입문자가 보기에 난이도가 있지만 전반적인 기본기를 다잡고 자바스크립트의 대략적인 가이드를 제시 해준다. Read More

TCP/IP란? TCP/IP(Transmission Control Protocol / Internet Protocol) 컴퓨터는 서로 통신할 때 프로토콜(절차, 규약, 규칙 등)을 사용해서 순서대로 데이터를 전송 및 수신 할 수 있다. 전 세계에서 가장 많이 쓰이는 프로토콜 세트가 바로 말로만 듣던 TCP/IP다. 가장 일반적인 기능은 메일, 컴퓨터 간 파일 전송, 원격 로그인이 있다. 하나의 프로토콜을 지칭하는 말이 아니라 인터넷에서 사용되는 각종 표준 프로토콜을 한데 모아 일컫는 말이다. 그럼 왜 이렇게 부르냐? 가장 유명하니까 인터넷 프로토콜 집합의 의미를 굳이 구분 해야한다면 TCP/IP 프로토콜 스... Read More

사랑하는 자바스크립트가 어떻게 동작하는지 뜯어보자. 자바스크립트 엔진의 구조 자바스크림트 엔진은 각각 한 개씩 호출 스택이 쌓이는 콜스택 과 메모리를 할당하는 메모리 힙 을 갖는다. 하나씩 있는 이유는 싱글스레드 방식으로 동작하기 때문이다. 이 의미는 두 개 이상의 함수를 동시에 실행 할 수 없다는 것이다. 그래서 처리 시간이 걸리는 task를 실행 할 경우 블로킹 (작업 중단) 이 발생한다. 자바스크립트의 런타임에는 (특정 언어를 실행할 수 있는 환경) 커널(node js는 리버브, 브라우저는 Wep API)과 이벤트 루프, 콜백 큐가 있다. Event loop는 처리할 task가 없으면 잠자... Read More

제목 독서일 출판사 TCP/IP 쉽게, 더 쉽게 2022/04/20 제이펍 서평 TCP/IP의 4개 계층을 중심으로 네트워크부터 보안까지 다루는 내용이다. 중간에 큰 이미지들로 이해를 쉽게 할 수 있게 돕고있어 책을 읽는데 무리가 없었다. TCP/IP에 대해서 배운적도 없었지만 이 책을 통해서 쉽게 흥미를 붙여 공부 할 수 있었다. 핵심 내용도 중간중간에 빠지지 않고 넣어 많이 깊지는 않지만 그렇다고 너무 얉게만 공부하지 않게 해준다. Read More

에러 내용 [Vue warn]: Extraneous non-emits event listeners (ok, hide) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option. 다이얼로그 컴포넌트를 쓰는데 이런 오류가 났다. 해결책은 template 안... Read More

제목 독서일 출판사 1일 1로그 100일 완성 IT 지식 2022/03/14 인사이트 하드웨어 하드웨어는 형체가 있고 눈으로 보이는 부분이다. 컴퓨팅 장치는 초기에 천문 현상을 예측하기 위해 사용했다. 첫 천문 계산용 컴퓨터는 기원전 100년경에 만들어진 안티키티라 기계다. 오늘날의 컴퓨터와 가장 근접한 모습의 기께는 1800년경 조제프 마리 자카르가 발명했다. 오늘날과 같은 의미의 컴퓨팅은 19세기 찰스 배비지가 발명했다. 최초의 프로그래머는 에이다 러브레이스... Read More

제목 독서일 출판사 개발자의 글쓰기 2022/03/10 위키북스 문장, 단락 구조화 글로 표현하는 3가지 방법 서술식: ‘~다.’ 로 끝나는 완전한 문장으로 구성. 순서, 단계를 나타낼때 1, 2, 3, 가, 나, 다 등을 이용. ex) 소설, 신문기사, 개발 가이드 문서 개조식: 사항을 나열함. 명사형으로 끝남. 글머리 기호 필수. 글... Read More

자바스크립트 언어 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 언어이다. 객체지향이라면 생각나는 Java처럼 Class가 있긴 하지만 protected, private등은 자바스크립트를 쓰면서 들어본 적이 없다. 자바스크립트로 어떻게 객체지향 프로그래밍을 할까? 객체지향 객체(데이터[속성 혹은 상태]와 데이터를 조작하는 동작을 하나의 단위로 묶은 복합적인 자료구조)의 집합으로 프로그램을 표현하려는 패러다임이다. 더 알아보기 프로토타입 프로토타입은 자바스크립트에서 객체지향 프로그래밍의 상속을 구현할 수 있게 만들어준다. 어떻게 상속을 구현할까? 생성자 ... Read More

Closer 클로저란 외부 실행 컨택스트와 내부 실행 컨텍스트를 함께 쓸 수 있는 것이다. MDN에서는 함수와 그 함수가 선언 됐을 때의 렉시컬 환경과의 조합이다. 라고 설명한다. 여기서 중요한 것은 함수가 선언되었을 때의 렉시컬 환경이다. 렉시컬 환경이란 자바스크립트의 실행 컨텍스트의 정보중 하나인데 식별자와 스코프를 관리하는 환경 정보이다. 외부 함수에서 선언한 변수를 그 외부 함수의 내부 함수가 참조한 상태로 바깥으로 노출됐을 때, 실행 컨텍스트가 종료된 후에도 가비지 컬렉터의 대상이 되지 않는 현상을 클로저라고 한다. (function () { var a = 0; var intervalId = nu... Read More

실행 컨텍스트 실행 컨텍스트란? 코드가 실행될 때 필요한 환경 정보들을 모아놓은 객체이다. 얘가 하는 역할에는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 관리한다. 실행 컨텍스트의 종류에는 전역, 함수 실행, eval 실행, 모듈 실행 컨텍스트가 있다. 이 책에서는 전역 컨텍스트와 함수 실행 컨텍스트가 나와있다. 환경 정보에는 VariableEnvironment, LexicalEnvironment, ThisBinding 세가지 정보가 담긴다. VariableEnvironment VariableEnvironment는 처음 컨텍스트를 만들때 정보들을 스냅샷으로 찍어 보관한다. E... Read More

이번에 회사 스터디 프로젝트를 하다가 알게된 Atomic pattern에 대해 공부할 겸, 정리할 겸 블로그에 간단히 적어보고자 한다. Atomic pattern 에서 우리가 아는 atomic의 뜻은 원자가 맞다. 왜 “원자” 패턴인지는 Atomic pattern의 애플리케이션 구조화를 보면 바로 알 수 있다. Atomic pattern은 다섯개의 계층으로 나눠져 있다. 가장 작은 원자 (Atoms) 원자는 말 그대로 가장 작은 단위의 컴포넌트를 뜻한다. 많은 사람들은 디자인을 입힌 UI 컴포넌트로 사용한다. 쉽게 생각하면 집을 지을 때 쌓는 벽돌과도 같다. 같은 UI를 가진 곳이라면 어디든 ... Read More

데이터 타입 자바스크립트의 데이터 타입에는 두가지가 있다. 기본형(원시형 primitive type) 기본형은 불변이다. 기본형에는 Number, String, null, undefined, Boolean, Symbol 타입이 있다. 불변이라는 말은 변하지 않는다는 것을 뜻한다. 아래의 예제를 보자. let a = 1; a = 2; 내가 a라는 변수 공간에 1이라는 값의 주소를 담았다. a라는 변수에 2라는 값의 주소를 재할당한다고 해도 1이 1인것은 변하지 않는다. a가 가지고 있는 데이터의 주소가 바뀌었을 뿐! 참조형(reference type) 참조형은 가변이다. 참조형에는 Object, A... Read More

SEO (Search Engine Optimization) SEO 라고 들어봤는가? 구글에 내 글이 검색되고 싶다면 아래처럼 해보자 Hexo ver 5.0.0, hexo icarus theme 기준 Hexo에 SEO 관련 패키지를 설치한다 npm i hexo-autonofollow hexo-generator-feed hexo-generator-seo-friendly-sitemap hexo-generator-robotstxt hexo-component-inferno 경고가 나올 수 있다 하지만 무시했다 config.yml을 열어서 설정을 추가해준다 ... Read More

제목 독서일 출판사 모던 자바스크립트 핵심 가이드 2021/12/11 한빛미디어 서평 이 책은 자바스크립트의 핵심 기술에 대한 명확한 설명과, 그에 대한 쉬운 예시로 문법의 이해를 돕고, 기술의 이해도를 확인 할 수 있는 문제들로 구성되어있다. 필자는 이 문제 풀이 부분이 특히 가장 마음에 들었다. 문제를 풀어봄으로써 스스로 어디까지 이해 했는가 확인 하고, 부족한 부분들을 알게 해주기 때문이다. 필자는 이 책이 자바스크립트를 처음 접하는 사람들은 물론이고 어느정도 지식을 가지고 있는... Read More