본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클155

React에서의 DOM TREE DOM DOM은 논리트리를 의미한다. 컴포넌트 앨리먼트의 집합 앨리먼트 요소 사이드 이펙트 = 부작용 리액트에서는 부수효과라고 볼 수 있다. (그렇게 해석하자) useState 상태 값을 관리해주는 훅 useEffect 컴포넌트 사이드 이펙트 다루기, dependency array에 따라 언제 언제 호출되는지를 설정 가능 Custom Hooks 만약 훅이 반복되는 상황이면 이를 Custom Hook으로 커스텀할 수 있다. hook flow 이해하기 hook들의 호출 타이밍을 각 hook에 콘솔 디버깅 창을 통해 순서를 확인할 수 있다. 로컬스토리지에서 값을 꺼내거나, 값을 가져오는데 시간이 걸리는 경우 useState나 useEffect에서 return을 사용하여 lazy initialize를 할 수 있.. 2022. 12. 3.
JSX와 Babel JSX와 Babel JSX : 자바스크립트도 아니고, HTML도 아닌 그 중간인 새로운 표현식 Babel : JSX를 이해하기 위해서, 자바스크립트로 변환하기 위해서는 Babel이라는 자바스크립트 컴파일러가 필요하다. 반복적인 것들은 Function 형태의 컴포넌트로 찍어낸다. 바닐라 JS의 경우, 변경으로 인해 Elements를 다시 그리는 반면 리액트는 리액트의 비교 알고리즘을 통해 Elements에서 변경된 요소만을 그려준다. (Reconciliation) 리액트의 Virtual Dom은 다른 elements의 속성이 들어왔을 때 이를 비교할 때 활용된다. 2022. 12. 3.
Input 타입이 file인 디자인은 어떻게 커스텀할까? 사이드 프로젝트를 진행하면서 input type이 file인 디자인을 변경할 일이 생겼다. input type을 file로 지정을 하면, 기본 default로 설정되어져 있는 파일 업로드 버튼과 업로드가 되었을 때 파일 명을 보여주는 텍스트가 생성이 되는데 기존 제공되어지는 UI를 커스텀해서 디자인을 하기에는 번거로운 점이 많다. input type='file'을 디스플레이 상에서 숨겨놓고, 내가 디자인하고 만들어놓은 요소를 눌렀을 때 그 요소에 연결된 input을 실행시키면 자연스럽게 UI상으로 보여지지 않을까? → 바로 여기서 사용하는 것이 태그를 도와주는 태그를 활용한 방법이다. 먼저, 다음과 같이 구성을 해보자, 태그의 기본 기능들과 `업로드 버튼` 이라는 이름의 이 나올 것이다. 그리고 의 id.. 2022. 11. 12.
[프로그래머스] 옹알이(1) 오늘은 여러 기업의 코딩테스트를 준비하면서, 연습할겸 코딩테스트 문제를 풀어보았다. 가장 눈에 들어온 것이 문제 제목이 귀여운 옹알이라는 녀석이었는데, 문제도 참 귀엽다. 말그래도 아이가 말할 수 있는 단어를 하나하나 분리하여 아이가 말을 할 수 있는지에 대한 판단 여부를 출력하는 문제이다. 처음에는 해당 babbling 각 배열 요소에 아이가 말할 수 있는 단어가 포함이 되어있는지를 확인을 하였다. 정상적으로 결과 값이 출력되는 것을 확인할 수 있었으나, 추가적으로 `wyeoo`와 같이 사이에 `ye`를 포함하게되고 이는 또 `woo`로 줄여져 카운팅되는 문제점을 확인할 수 있었다. 이를 해결하기 위해 기존 반복문 안에 해당 단어의 인덱스를 찾고, 그 인덱스가 0으로 시작하는 것이 아니면 카운팅 되지 .. 2022. 11. 8.
XII. 제품 소프트웨어 패키징 01. 사용자 중심의 패키징 수행 제품 소프트웨어 패키징(Product Software Packaging) 개발이 완료된 제품 소프트웨어를 고객에게 전달하기 위한 형태로 포장하는 과정 제품 소프트웨어 패키징 적용 시 특성 - 전체 내용을 포함 : 설치와 사용에 필요한 과정 및 환경 등의 전체 내용을 포함하는 메뉴얼을 작성 - 비전 관리 및 릴리즈 노트 : 제품 소프트웨어에 대한 패치 개발과 업그레이드 수행 - 고객 중심 : 제품 소프트웨어 패키징은 개발자가 아닌 사용자 중심, 고객 편의성 중심으로 진행 - 모듈화 : 신규 및 변경 개발 소스를 식별하고, 이를 모듈화하여 상용 제품으로 패키징 제품 소프트웨어 패키징은 모듈들을 통해 수행되므로, 최초 소스 개발 시 해당 모듈 단위 및 모듈화를 통해 제품 소프.. 2022. 10. 12.
XI. 응용 SW 기초 기술 활용 01. 운영체제의 특징 운영체제(OS; Operating System) 사용자가 컴퓨터의 하드웨어를 쉽게 사용할 수 있도록 인터페이스를 제공해주는 소프트웨어 한정된 시스템 시스템 자원을 효과적으로 사용할 수 있도록 관리 및 운영함으로써 사용자에게 편리성을 제공한다. 운영체제의 특징 - 사용자 편리성 제공 : 한정된 시스템 자원을 효과적으로 사용할 수 있도록 관리 및 운영 - 인터페이스 기능을 담당 : 컴퓨터 시스템과 사용자를 연결 - 스케줄링 담당 : 다중 사용자와 다중 응용 프로그램 환경하에서 자원의 현재 상태를 파악하고 자원 분배를 위한 스케줄링을 담당 - 자원 관리 : CPU, 메모리 공간, 기억 장치, 입출력 장치 등의 자원을 관리 - 제어 기능 : 입출력 장치와 사용자 프로그램을 제어 운영체제에.. 2022. 10. 11.

티스토리툴바