Dev Diary 💻

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 2.1 자바스크립트의 탄생 자바스크립트는 1996년 3월 넷스케이프 웹 브라우저에 탑재되었고, 이름이 바뀌어 최종적으로 자바스크립트가 되었습니다. 2.2 자바스크립트의 표준화 경쟁으로 인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작하면서, 웹패이지를 개발하기 매우 어려워졌습니다. 따라서 표준화된 자바스크립트의 필요성이 대두되고 표준화된 자바스크립트로 선택되었습니다. 2.3 자바스크립트 상징의 역사 렌더링이란? HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말합니다. 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정 (SSR: Ser..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 1.1 프로그래밍이란? - 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션입니다. - 요구사항을 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 합니다. - 컴퓨팅 사고가 중요합니다. - 수치화 해서 정의하는 능력이 필요합니다. 1.2 프로그래밍 언어 프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍 언어는 구문과 의미의 조합으로 표현됩니다. 1.3 구문과 의미 문법(Syntax)에 맞는 문장을 구성하는 것은 물론 의미(semantics)를 가지고 있어야 언어의 역할을 충실히 수행할 수 있습니다.

Intro 안녕하세요. 이번시간에는 코틀린의 lateinit 에 대해 알아보도록 하겠습니다. lateinit 코틀린에서 "lateinit"는 말 그대로 late + init이 합쳐진 뜻으로 나중 초기화를 의미합니다. 즉 지연 초기화 기능을 제공합니다. Use 일반적으로 클래스나 객체의 프로퍼티를 선언할 때 사용됩니다. 해당 키워드를 사용하면 변수 선언 시 즉시 초기화되지 않고, 나중에 초기화 할 수 있습니다. Condition 변수는 클래스의 멤버 변수일 때만 lateinit를 사용할 수 있습니다. 변수는 non-null 타입이어야 하며, primitive type이나 String 등의 클래스 타입 등이 될 수 있습니다. 변수를 선언할 때 즉시 초기화하지 않아야 합니다. 변수는 초기화되기 전에 사용하면 ..

Intro 안녕하세요. 이번시간에는 React 에서 return 시 컴포넌트를 하나로 감싸는 이유에 대해 알아보도록 하겠습니다. Why? React에서 JSX를 사용하면 HTML과 유사한 구문으로 JavaScript를 작성할 수 있습니다. JSX는 JavaScript 표현식이므로, 리액트 컴포넌트의 반환 값으로 여러 요소를 사용하려면 이러한 요소들을 하나의 루트 요소로 묶어주어야 합니다. React의 가상 DOM(virtual DOM)이 기본적으로 단일 루트 노드만을 가지기 때문입니다. 컴포넌트가 여러 요소를 반환하면 React는 요소들을 단일 루트 노드로 꼭 묶어줘야 합니다. Method React에서 이러한 작업을 수행하기 위한 일반적인 방법은, 여러 요소들을 또는 와 같은 노드로 묶어주는 것입니다...

Intro 안녕하세요. 이번에 MUI 기반 회사 홈페이지 개발 업무를 지원하여 맡게 되었습니다. mui 를 사용하다보면 아래와 같은 소스코드를 많이 볼 수 있습니다. theme.spacing(1) 처음에는 2px인가 싶었는데, 2px이 아니더라고요. theme.spacing(2) 의미 Material-UI (mui) 에서 1은 theme.spacing(1)과 같은 의미를 갖습니다. 보통 theme.spacing()은 테마 설정에 따라 다르지만, 기본적으로 8px을 반환합니다. 1은 기본적으로 8px을 나타내며, 2는 16px, 3은 24px, ... 와 같이 8px 간격으로 증가합니다. 그렇다면 픽셀 커스텀이 불가능한가? 커스텀도 가능합니다. createTheme() 함수를 사용하여 수정할 수 있습니다...

Intro 안녕하세요. 이번시간에는 Next의 Link와 MUI(Material-UI)의 Link 차이점에 대해 알아보겠습니다. Next의 Link와 MUI(Material-UI)의 Link Next.js + React + MUI 조합으로 개발경험이 있으신 분들이 꽤 있으실 텐데요, 개발하다보면 Link 컴포넌트를 거의 필수로 사용하게 됩니다. Next.js와 MUI 에는 공통으로 Link 컴포넌트가 들어있습니다. 보통 자동 IDE 툴을 사용하면 자동으로 import 하는 경우가 많은데요, 꼭 확인하고 import를 하셔야 합니다. Next.js의 Link와 MUI(Material-UI)의 Link는 목적이 다른 요소이기 때문입니다. Why? Next.js의 Link 컴포넌트 Next.js의 Link 는..

Intro 안녕하세요. 이번 시간에는 npm과 npx의 차이점에 대해 알아보도록 하겠습니다. next.js 프레임워크에서 이것저것 테스트 해보면서 아래의 명령어를 사용했는데요, npm과 npx의 차이점이 궁금해지더라고요. npx create-next-app@latest --typescript NPM, NPX npm과 npx는 모두 Node.js 패키지 매니저 (NPM)에서 제공하는 도구입니다. NPM npm은 Node.js 패키지를 설치, 관리 및 공유하기 위한 도구입니다. npm을 사용하여 패키지를 설치하고 관리할 수 있습니다. 패키지는 Node.js 애플리케이션 및 라이브러리를 개발하기 위한 모듈들입니다. NPX(execute npm package binaries) npm 패키지를 실행하기 위한 도구..

Work 기존 서비스 안내 팝업 추가 4월 달에는 기존 운영 중이였던 기존 웹앱 서비스에 팝업 안내를 추가하는 작업을 하였습니다. svg 파일 전체를 전달 받아 해당 요소들에 클릭 이벤트, 세션 작업(오늘 하루동안 보지 않기 등)을 추가하였습니다. 안드로이드 폰일 경우 google play store로, 아이폰일 경우 app store로 링크를 연결해줬습니다. 회사 입사 초반에도 비슷한 테스크를 받은 적이 있었는데요, 그 당시에는 팝업 때문에 거의 2주일 넘게 고생했던 기억이 있습니다. 이때 잠깐 했던 기억으로 이번에는 손쉽게 할 수 있었어요. 리뉴얼 서비스 오픈 공식적으로 이번달에 리뉴얼 서비스가 오픈되었습니다. 해당 업데이트 관련하여 이곳저곳에서 뉴스기사가 나갔는데 신기했어요. 제가 직접 만든 서비스..

Intro 안녕하세요. 오늘은 저번주에 봤던 오픽 시험 점수가 발표되는 날이었습니다. 난이도는 6-6로 설정했고, 자세한 문제 유형은 위 포스팅에서 참고해주시길 바랍니다. Result 예상 점수인 IH가 나왔습니다 🥲 AL을 받고 싶었는데 너무 아쉽네요. 다음주에 한번 더 오픽 시험을 도전해보려 합니다. 다음주에는 더 향상된 점수를 받을 수 있길 바라며, 공부를 하러 가보겠습니다. 😵‍💫 😵‍💫 ~~

Intro 안녕하세요. 저는 recharts chart 차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. TS2322: Type 'string' is not assignable to type 'number'. import {NextPage} from "next"; import React from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Jan', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Feb'..