브라우저 기반의 개발을 하는 프론트엔드 개발자더라도, 개발을 하다보면 결국 CS를 공부해야 한다고 느끼게 된다. 프로그래밍 언어는 결국 컴퓨터를 기반으로 하기 때문이다. 어떻게 공부하면 좋을까 고민을 하던 찰나, 컴퓨터 구조와 운영체제 기초를 다질 수 있는 이 책을 알게 되었다. 컴퓨터 구조와 운영체제 핵심 노트는 컴퓨터 구조를 왜 알아야 하는지부터 차근차근 시작해서 운영체제와 알고리즘까지 전반적인 개념을 폭넓게 배워볼 수 있는 목차로 구성되어 있다. 기본기를 다지는 책답게 단순히 글자로만 설명되어있는게 아니라, 그림이나 도표를 이용해 설명해주는 부분도 좋았다. 특히나 알고리즘은 그 순서가 어떻게 되는지 직접 써보면서 이해하곤 했는데 책에 이미 깔끔하게 정리가 되어있어 그 흐름대로 짚고 넘어갈..
업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다. 객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..
객체의 프로퍼티에 접근하는 두 가지 방법 객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다. const name = { firstName: 'olivia', lastName: 'kim'} 위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.점 표기법: name.firstName대괄호 표기법: name['firstName'] 점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기 대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다. 프로퍼티의 키가 숫자인 경우 다만, 프로퍼티 키가 숫자일 ..
요소가 한국어인 배열을 sort()로 정렬하기 설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다. 이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까? const kors = ['대한민국', '호주', '독일', '가나'];const nums = ['100', '1', '3', '0', '000', '99'];// 일반적인 sortconsole.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]console.log(nums.sort((a, b) => a -..
요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다. Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다. 프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다. 또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜..
간단한 리팩토링 // 기존에 작성했던 코드 if (!isA && isB) { element.style.maxHeight = '384px' } else if (isA && !isB) { element.style.maxHeight = '360px' } else if (!isA && isB) { element.style.maxHeight = '320px' } else { element.style.maxHeight = '300px' } // 수정한 코드 let maxHeight = 300 if (!isA) { if (!sB) { maxHeight = 384 } else { maxHeight = 320 } } else if (!isB) { maxHeight = 360 } element.style.maxHeight..
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다. 리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증싱글스레드와 이벤트 루프의 상관관계자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다. 이벤트 루프자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.즉, 브라우저 동작 타이밍을 제어하는 관리자이다. 프..
프로젝트 소개 프로젝트 명 DIEDIE.gg 기획 의도 리그 오브 레전드 게임 내 비매너 유저를 신고하고, 신고 전적 및 유저 정보를 확인할 수 있는 서비스 프로젝트 설명 프로젝트 기간 23/08/04 ~ 23/09/05 (프로젝트 주제 선정 및 담당 파트 구현 기간 전체) 사용 기술 Library React Programming Language TypeScript Styling Styled-Components State Management Recoil, Tanstack-Query Formatting ESLint, Prettier Version Control Git, GitHub Design Figma Communication Notion, Slack 기술적 의사 결정 TypeScript - 정적 타입 ..
경고 내역 styled-components: it looks like an unknown prop "category" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via (connect an API like @emotion/is-prop-valid ) or consider sing transient props ($prefix for automatic filtering.) 경고 발생 경로 위의 Badge는 button 태그로 만들어져 있는데, 해당 H..
문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo", "kiki"..
