개발 노트

보통 이미지 업로드를 위해 해당 파일을 선택하면, 선택한 파일을 미리 보여주고는 한다. 이전에도 구글링을 해서 힌트를 얻었고 이후 더 간편한 구현 방식을 찾게 되어 기억해 놓았었는데, 최근에 똑같은 문제를 직면했을 때 그 방식이 떠오르지 않아서 이번에는 제대로 정리하고 넘어가고자 한다. 현재는 파일을 선택했을 때, 파일의 제목만 표시된다. 하지만 내가 원하는 것은 파일을 선택했을 때, 해당하는 이미지 파일의 url을 가져온 후 이를 img 태그의 src로 설정해주어 미리보기화 시키는 것이다. 만약 이를 위해 단순하게 input의 change 이벤트 핸들러로 value값을 통해 url에 접근하고자 하면, 해당하는 경로는 크롬의 보안 상 이슈로 fakePath 처리된다. 이용자가 임의로 이러한 방식을 통해,..

리액트를 이용해 개발을 하다가, 처음 보는 오류를 마주하게 되었다. 기존의 동적인 요소와 상호작용이 되지도 않을 뿐더러, 사이트 자체가 아주 느려진 느낌이었다. 창이 꺼지는 데에도 많은 시간이 걸렸다. 추후에 어찌저찌 개발 툴을 열어 오류를 확인해 보니, 아래와 같은 오류 창이 떠 있었다. 음.. 누가 봐도 어딘가에서 코드를 잘못 써서 무한루프에 걸린 문제였다. 처음에는 'useEffect 내부에서 setState를 호출했으나, useEffect가 두 번째 인자인 dependency 배열을 받지 않았거나 렌더 시마다 dependency가 변경되었을 때 발생할 수 있는 오류'라는 내용을 보고 이 부분을 확인해보고자 하였다. 실제로, 아래 두 가지의 상황에서는 무한루프가 발생할 수 있다. 1. useEffe..

자바스크립트를 이용해 개발을 할 때, 흔히 비동기와 동기적 처리에 대한 용어를 많이 접하고는 한다. 그리고 비동기적 처리에 항상 콜백 함수라는 용어도 같이 동반되고는 한다. 동기와 비동기적 처리 그리고 콜백 함수가 무엇인지, 그리고 어떻게 동기와 비동기적 처리를 구현할 수 있는지에 대해 간단히 정리해보았다. 동기와 비동기 방식 동기(synchronous) : 요청과 처리가 동시에 일어남 비동기(asynchronous) : 요청과 처리가 동시에 일어나지 않음 용어의 정의만 들어서는 무슨 말인지 잘 와닿지 않는다. 요청과 처리의 동시성이 어떤 의미를 가지는 걸까? 현실 상의 예시를 하나 들어보겠다. 당신은 카페에 갔다. 그리고 주문을 하려고 한다. 주문에는 두 가지 방식이 있다. 1) 주문을 하면 즉시 커피..

React는 페이스북에서 개발한, 유저 인터페이스(UI)를 담당하는 자바스크립트 라이브러리 중 하나이다. 리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징을 가지고 있는데, 이번 시간에는 그 특징들에 대해 정리해보고자 한다. SPA와 CSR SPA : Single Page Application CSR : Client Side Rendering SPA는 Single Page Application, 단일 페이지 어플리케이션의 약자이며 MPA(Multiple Page Application)와 반대되는 개념이다. 단 하나의 페이지를 통해 유저의 요청을 처리해 주는 방식이다. 그렇다면 리액트에서 어떻게 하나의 페이지로만 웹 어플리케이션을 구성할 수 있을까? 이를 위해 사용되는 방식이 바로..

CSS에서는 흔하게 flex container를 통해 내부 요소들의 레이아웃을 결정한다. 이 때, 각각의 요소의 레이아웃을 보다 세밀하게 지정해줄 수 있는데, 그때 쓰이는 CSS 속성이 바로 flex-grow, flex-shrink 그리고 flex-basis이다. 위 세 속성은 flex container가 아닌, flex container의 자식 요소들에게 직접적으로 지정해주어야 한다. flex container에 별도의 방향 설정을 해주지 않았으므로, 기본 방향인 가로 방향으로의 크기, 너비만을 기준으로 설명하겠다. flex-grow flex container의 남은 여백을 채우기 위해 존재하는 속성. 기본값 : 0 위처럼 flex container 자식 요소의 크기 총합이 부모보다 작아 여백이 생길 ..