하루 한 걸음, 개발 블로그

보호되어 있는 글입니다.

Toss slash23 TrackA: Frontend, DevOps, CoreBanking 14:00 ~ ✔️ Frontend 주제 1: Admin Paas(Platform as a Service) DSL(Domain Specific Language) Server-driven UI 장단점 주제 2: 쏟아지는 페이지들 우아하게 관리하기 Funnel 코드 개선 - 리팩토링, 설계 관점 응집도, 추상화, 시각화 페이지 흐름과 상태를 모으기 = 응집도 개선 한 흐름으로 관리하는 UI를 컴포넌트 하나에 넣고 상태에 따라 조건부 렌더링 퍼널 흐름 관련 코드를 재사용가능한 라이브러리로 추상화 반복되는 조건문, 상태 관리 커스텀 훅 useFunnel 등 디테일한 기능 구현과 비지니스 로직 분리 DX 개선? 개발자 도구..

C#이란? 2002년 Microsoft에서 개발한 객체 지향 프로그래밍 언어 Microsoft의 .NET 프레임워크에서 사용되며 Windows 애플리케이션 및 웹 애플리케이션 개발을 위해 설계됨 객체 지향? 더보기 객체 지향 프로그래밍 OOP(Object-Oriented Programming)? Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects", which can contain data and code. 프로그램을 독립적인 객체들의 집합으로 모델링하고, 객체들 간의 상호작용을 통해 프로그램을 구축하는 접근 방식. Computer program - Wikipedia From Wikipedi..

C# 개발 환경 설정 *MacBook air 기준 1. 개발 환경 설정 .NET Core SDK 설치 https://dotnet.microsoft.com/ko-kr/ .NET | 빌드, 테스트, 배포. .NET은 웹, 모바일, 데스크톱, 게임, IoT, 클라우드 및 마이크로 서비스를 포함한 모든 유형의 앱을 빌드하기 위한 도구와 라이브러리가 있는 개발자 플랫폼입니다. dotnet.microsoft.com 그동안 vs code에서 C# extension 도 추가 dontnet --version // .NET Core SDK 설치 확인 만약 설치 확인이 안 된다면 아래 유튜브 참고 https://www.youtube.com/watch?v=W_Anr3tgdNQ 2. C# 프로젝트 시작 폴더 안에 C# 프로그램..

Vue.js란? Vue.js는 Evan You에 의해 개발된 JavaScript 프론트엔드 프레임워크 특징: 직관적인 문법: Vue.js는 HTML 기반의 템플릿 구문과 JavaScript 기반의 컴포넌트 옵션을 제공하여 직관적인 문법을 가지고 있습니다. 반응형 시스템: Vue.js는 데이터의 변화를 감지하고 자동으로 UI를 업데이트하는 반응형 시스템을 가지고 있습니다. 컴포넌트 기반: Vue.js는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI 컴포넌트를 구축할 수 있습니다. 단일 파일 컴포넌트: Vue.js는 템플릿, 스타일, 로직을 한 파일에 모두 포함하는 단일 파일 컴포넌트를 지원하여 개발 편의성을 제공합니다. NPM Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를..

✔️ 배열의 함수들, 고차함수(Higher-Order Function, HOF): 함수가 무엇을 반환하는지 유의 ✔️ 브라우저 렌더링 과정: URI (URL + URN), Http 1.1 -> Http 2.0, - Tokenizing? 단순한 문자열인 자바스크립트 소스코드를 어휘분석lexical analysis하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다. type과 value 객체들이 element인 배열 Token 토큰이란 문법적인 의미를 가지며 문법적으로 더는 나눌 수 없는 코드의 기본 요소 - parsing? 토큰들의 집합을 구문분석syntactic analysis 하여 AST를 생성한다. - Abstract Syntax Tree (AST)? 추상적 구문 트리. 토큰에 문법적 의미..

1. React18에서 업데이트 된 기능 ㄱ. Automatic Batching Batching이란 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업. 이전의 React에서는 React Event Handler만이 state 업데이트를 Batching 처리했다. 18 버전 이후로는 React Event Handler뿐만 아니라 promise, setTimeout, native event handler 등 다양한 로직에서도 Batching 작업이 가능해졌다. // Before: only React events were batched. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // Re..

https://school.programmers.co.kr/learn/courses/30/lessons/12921 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 에라토스테네스의 체 에라토스테네스의 체는 '특정 범위 내의 소수'를 판정하는 데에만 효율적이다. 만약 주어진 수 하나가 소수인가? 만을 따지는 상황이라면 이는 소수판정법이라 해서 에라토스테네스의 체 따위와는 비교도 안되게 빠른방법이 넘쳐난다. 한편, 에라토스테네스의 체를 이용해 1~n까지의 소수를 알고 싶다면, n까지 모든 수의 배수를 다 나눠 볼 필요는 없다. 만약 n보다 작은 어떤 수 m이 m..

select 태그 없이 dropDown 구현 function 안 함수들 const navigate = useNavigate(); const menu = ['전략배분 (정적자산배분)', '듀얼모멘텀', 'VAA', 'DAA']; const [selectedMenu, setSelectedMenu] = useState('전략배분 (정적자산배분)'); const [activeDropdown, setActiveDropdown] = useState(false); const onClickOption = useCallback(() => { setActiveDropdown((prev) => !prev); }, []); const onClickSelect = useCallback( (item) => { setSelecte..

코딩테스트 과제 면접 몰아치는 나날들... 지금까지 면접들 코테와 과제를 비공개로 블로그 글만 적어놓거나 음성 녹음만 해놓았다. 모르거나 부족한 부분들을 회고하고 갈무리하는 게 더 중요한데 요즘 심란하기만 하다. 내 일인데 내가 안하면 누가 할까...과제도 저녁에서야 시작한다. 항해가 끝났을 때만 해도 의욕 넘치고 자신만만했는데 불합격이 늘어갈 수록 자신감이 사라지고 있다. 감정은 내려놓고 해야할 일을 하자! 언제나 정면돌파가 가장 빠른 해결책이다. brew update 하고 yarn 재설치 brew update --auto-update brew reinstall yarn yarn --version 확인 yarn --version yarn berry 적용 yarn set version berry yarn..