꿈꾸는 개발자

프로그래밍 패러다임 프로그래밍 프러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 선언형과 함수형 프로그래밍 선언형 프로그래밍(declarative programming)이란 무엇을 풀어내는가에 집중하는 패러다임 ("프로그램은 함수로 이루어진 것"이란 명제를 담고 있음) 함수형: 선언형 프로그래밍의 일종 // JavaScript // 자연수로 이루어진 배열에서 최댓값을 찾는 로직 const list = [1, 2, 3, 4, 5, 11, 12] const ret = list.reduce((max, num) => num > max ? num : max, 0) console.log(ret) // 12 함수형 프로그래밍: "순수 함수"들을 블록처럼 쌓아서 로직 구현 + "고..

덕 타이핑 런타임에서 사용될 때까지 객체 타입을 검사하지 않는 것을 의미한다. 자바스크립트를 사용해 보았다면 자바스크립트 에러는 런타임에 발생한다는 사실을 알고 있을 것이다. 따라서, 타입스크립트와 다르게 자유도가 높으며 엄격한 타입 체킹 또한 없다. 간단한 코드 예시를 살펴보자 class Duck { quack() { console.log('꽥!') } feathers() { console.log('깃털은 검정색과 흰색') } } class Human { quack() { console.log('사람인데요? 꽥!') } feathers() { console.log('사람이라 깃털은 없어요. 하지만 털은 있습니다.') } } function inTheForest(duck) { duck.quack() du..

뒤집은 소수 N개의 자연수가 입력되면 각 자연수를 뒤집은 후 그 뒤집은 수가 소수이면 그 소수를 출력하 는 프로그램을 작성하세요. 예를 들어 32를 뒤집으면 23이고, 23은 소수이다. 그러면 23을 출 력한다. 단 910를 뒤집으면 19로 숫자화 해야 한다. 첫 자리부터의 연속된 0은 무시한다. ▣ 입력설명 첫 줄에 자연수의 개수 N(3

완전탐색은 말 그대로 완전하게 모든 것을 탐색한다는 의미이다. 영어로는 "Brute Force"라고 부르는 데 무식하게 한다? 란 란 의미로 사용되고 있다. 예로 들어서 4자리 수의 비밀번호를 풀어내기 위한 가장 무식한 방법으로는 0000~9999까지 모든 가능한 경우의 수를 다 시도해보는 것이다. 대부분의 문제를 완전탐색으로 풀 수도 있게지만, 컴퓨터과학에서 중요하게 생각하는 건 무엇보다 사용된 알고리즘의 "적절성" 과 "효율성"이다. 다른 더 좋은 알고리즘 기법이 있음에도 불구하고 오나탐을 사용하는 것은 엄청난 낭비이기 때문에 추천되진 않는다. 또, 알고리즘 문제 풀이, 코테 등에선 시간 복잡도를 고려해야 하기 때문에 완탐으로 풀 경우 제한을 초과하는 경우도 발생하기 때문에 항상 문제와 시간 복잡도 ..

도입 원티드 6월 강의를 수강하면서 useRef로 값을 참조하고 관리하는 코드를 접했다. 강사님에 따르면 제어/비제어 컴포넌트의 사용을 고려할 때 useState를 사용할 것인지 아니면 useRef로 값을 관리할건지 상황에 따라서 나뉠 수 있다고 했다. 물론 둘의 차이점은 이해가 됐다. 하지만, 비제어 방식의 경우 단순히 렌더링 횟수를 줄이고, 개발자가 trigger할 수 있다는 이유만으로 사용하는지 궁금하기도 하고 개념이 조금 모호한 것 같아서...이전에 작성했던 글과 강의에서 학습한 자료, 그리고 최신에 업데이트 된 react 공식문서와 함께 정리하고자 한다. useRef에 대한 이해가 부족하시면 여기에 들어가서 추가적으로 학습하는 것을 권장한다. React 공식문서가 리뉴얼 되기 이전에는 "신뢰 가..

CSR (Client Side Rendering) CSR은 말 그대로 클라이언트에서 페이지를 렌더링함을 의미한다. 브라우저에서 서버에 요청을 보내면, 서버에서 웹 페이지를 렌더링하지 않고 Single Page+ JS 파일를 클라이언트로 보낸다. 클라이언트에서는 전달 받은 웹 페이지+JS 파일을 완전히 렌더링 된 페이지로 바꾼다. 브라우저의 요청 경로가 다를 경우 새롭게 서버에 요청하는 것이 아닌, 기존에 받은 파일을 기반으로 페이지를 다시 렌더링하게 된다. 장점 후속 페이지 로딩이 더 빠르다. 모든 파일이 사전에 로드되기 떄문 새로고침이 발생하지 않아 네이티브 앱과 비슷한 사용자 경험 제공 가능 별도의 API 호출이 필요가 없는 페이지의 경우 로딩 모듈 필요X 서버 호출 때마다 전체 UI를 리 로딩할 필..

주제:스토리북과 함께하는 컴포넌트 주도 개발 컴포넌트에 대한 설명: 재사용할 수 있는 코드 블록 우리가 생각하는 컴포넌트의 종류: (3가지를 구별해서 생각하는 것이 중요하다) Component Web Component 빌드 필요X 표준화됨 바로 사용할 수 있다 (커스텀도 가능하다) React Component Web Component: 정의: 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다. 웹 컴포넌트 VS React react가 표준이 아니고 웹 컴포넌트가 표준인 이유?: 웹 컴포넌트는 별도의 설치 없이 사용할 수 있다. (근본적인 차이점) 웹 컴포넌트도 다른 사람이 만들 것을 사용할 수 있다..

리액트에서 글이 많은 컴포넌트를 작성할 때 때로는 bold 형식의 글이 필요할 때가 있다. 하지만 매번 그럴 때 마다 태그를 쓰기 귀찮아서, 뭔가 새로운 방법이 없을까 여러 코드를 탐험하던 중 흥미로운 코드를 찾았다. import React from "react"; export function TranslateBold({ children, className, as = "p" }) { const pattern = /(\*\*.*?\*\*)/; const text = children; const parts = text.split(pattern).filter((x) => x.length > 0); const elements = parts.map((part, index) => { if (part.match(pa..