본문 바로가기

분류 전체보기371

Typescript + React 컴포넌트 간에 props 데이터 전달 중 발생한 문제

부모 컴포넌트에서 자식 컴포넌트로 props를 설정하고 있었는데, 자꾸 에러가 발생했습니다. IntrinsicAttributes 형식에 속성이 없다는 에러였습니다. 에러 메시지 'IntrinsicAttributes & ImovieInfo[]' 형식에 'nowPlayingMovies' 속성이 없습니다.ts(2322) 문제 부모 컴포넌트 - interface IProps에 detail 객체로 원소를 만들지 않았음. -> IProps 자체를 인터페이스로 쓰려고 해서 발생한 문제임. - interface IProps에 isLoading을 타이핑해주지 않았음. - props 설정하는 자식컴포넌트의 파라미터에는 {...변수 명}으로 작성하지 않았음. 해결 방법 Container(props를 내려주는 컴포넌트) - .. 2021. 7. 11.

[Vue] Virtiual DOM과 Vue 렌더링 원리 알아보기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. ✏️ [웹 렌더링 개념-1] DOM 이해하기 ✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정 👉 [Vue] Virtual DOM과 Vue 렌더링 원리 알아보기 이번 내용은 Vue가 브라우저에서 렌더링되는 원리를 알아보겠습니다. 그.. 2021. 6. 27.

[웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서-브라우저에 화면이 그려지는 과정 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. [웹 렌더링 개념-1] DOM 이해하기✏️ 👉 [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정✏️ [Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️ 이번 내용은 브라우저의 렌더링 순서와 원리입니다. 신입 개발자 면.. 2021. 6. 27.

[CSS] HTML input 요소 커스텀하기

개요 안녕하세요! 이번에는 input을 커스텀하기 위한 style 코드를 알아보겠습니다. 왜 input 요소에 스타일링이 필요했냐면, 저는 클릭하면 텍스트가 클립보드에 복사되는 기능을 하는 버튼을 만들어야 했습니다. window 스펙에서 제공하는 docuement.commandexec() 메서드를 사용하고 'copy' 매개변수를 주면 텍스트를 복사를 할 수 있겠더라구요. 그런데, commandexec()메서드의 타겟이 되는 DOM을 지정을 해줘야 하는데, 그 방법이 input과 textarea 요소에서만 select()해줘야 했습니다. 그니까 input요소를 쓸 수밖에 없었습니다. 사용자 입장에서는 input 박스 느낌을 주지 않고 누르면 복사가 되는 느낌을 줘야 했기 때문에 브라우저에서 기본적으로 제공.. 2021. 6. 26.

[CSS] position sticky 알고 사용하기🤔

CSS position: sticky sticky는 top 과 left 지정으로 위치를 지정할 수 있습니다. 처음에는 relative이다가, viewport의 상단 부분과 sticky 요소의 top 설정 픽셀 만큼되면, 그 때 부터는 fixed로 position이 동작합니다. 그래서, 일정만큼 스크롤을 내리다 보면, 갑자기 화면에 고정되는 요소들을 보실 수 있습니다. 🥵제가 개발하면서 발생한 문제 저는 한 참 스크롤을 내린 뒤에 원하는 offsetY에서 sticky가 fixed되기를 원했습니다. 그럴 생각으로 sticky 요소에 top 픽셀을 fixed될 offsetY 픽셀을 설정했습니다. 아래 코드가 그랬습니다. 그런데, 스크롤을 내리면, sticky요소가 그냥 fixed로 작동했습니다. 원인은 이미 .. 2021. 6. 26.

[웹 렌더링 개념-1] DOM 이해하기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. 👉 [웹 렌더링 개념-1] DOM 이해하기✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정✏️ [Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️ 그럼 순서대로 DOM의 개념을 불태워 보겠습니다. 🔥 - DOM .. 2021. 6. 21.

[Vue] vue-cli 스펙을 사용한 코드 베이스에서 IP 분리하기

개요 코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다. 🤔생각한 문제점 - 개발 환경일 때와 배포 환경일 때 사용해야 할 IP 구분을 위한 로직이 추가되어야 함. - 가독성 문제 - 보안 문제 간단하게. Vue-cli로 구축된 프로젝트에서 파일에 변수를 설정해서 코드베이스에서 이 파일을 참조해서 코드에 값을 대입하는 방법을 알아보겠습니다. 분리를 해야하는 문제를 해결하기 위해서, 전에 작성된 에서 소개한 Vue-CLI Mode env 관련한 공식문서를 다시 참고해 보았습니다. 구분 방법 1. 프.. 2021. 6. 17.

[Vue-cli]개발모드와 빌드모드 구분하기

개요 개발 작업에 비효율적인 문제가 있었습니다. 브랜치를 매번 새로 만들어서 작업을 할 때마다, 개발 호스트를 변경해 줘야 하는 문제가 있었습니다. 효율적이지 않았고 자동화가 필요한 부분이라고 생각했습니다. 코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다. 요약 Vue-CLI는 커스텀 설정을 하지 않으면 빌드할 때 자동으로 process.env.NODE_ENV에 값을 주입해 줍니다. 저는 코드 레벨에서 조건문을 사용해서 process.env.NODE_ENV의 값에 따라서 개발 환경일 때와 빌드 .. 2021. 6. 16.

[nodemon+babel] babel 과 nodemon 개발 환경 구축하기

우아한테크러닝 프로젝트를 수행하면서 express로 서버 쪽을 개발하고 있습니다. 저번 글에서 언급했지만, node가 ES6문법 중에 import 문법을 읽지 못하는 문제를 babel 패키지를 프로젝트 개발 환경에 설치해서 문제를 해결했습니다. 추가로, nodemon을 개발 환경에 추가하려고 합니다. nodemon을 추가하려는 이유는 개발 환경을 편하게 만들기 위해서입니다. nodemon이 없다면, 하루에도 코드는 몇 번이고 변경이 되고 테스트를 위해서 개발자는 반복적으로 수십 번 서버 재실행을 하게 될 겁니다. 🤔 nodemon nodemon은 node환경에서 개발 코드 변경을 감지해서 자동으로 서버를 재실행 해주는 패키지입니다. 기본적인 usage는 다음과 같습니다. 1. 설치 $ npm i -D n.. 2021. 6. 12.

[mongoose] express + mongoDB 애플리케이션에서 연결/저장/읽기

안녕하세요. 이번에 우아한테크러닝에 참여하고 있습니다. 4주동안 진행하는 프로젝트입니다. 프로젝트의 주제는 노션을 만드는 겁니다. 그래서 저는 프로젝트 서버 쪽 구성을 express와 mongoDB를 사용하기로 결정했습니다. 제가 express를 결정한 이유 1. 제가 Javascript에 익숙합니다. 2. Node.js 개발 환경을 구축할 수 있습니다. (npm과 babel) 3. 작은 규모의 아키텍쳐에 적합합니다. 제가 mongoDB를 결정한 이유 1. 사용하면서 저도 알게 된 거지만, 객체 형식으로 저장합니다. Client에서 POST로 요청한 req.body.json을 아무런 처리 없이 DB에 넣을 수 있는 점이 가장 매력적으로 생각되었습니다. 2. 사용해본 경험이 있고, mongodb atlas.. 2021. 6. 9.

티스토리툴바