분류 전체보기
-
Event bubbling, 이벤트 버블링이란?javascript 2022. 3. 25. 20:23
안녕하세요 박상준입니다. 오늘은 이벤트 버블링에 대해 공부해보는 시간입니다! 🤔 What is the event bubbling? 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. HTML요소는 트리 형식이죠? 그렇다면 그 랜딩페이지에서 가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있죠. 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가집니다. 이 것을 ' 이벤트 버블링' 이라고 합니다. What is the event Capture? 이벤트 캡쳐링은 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달합니다. 이벤트 버블링과 정반대인 것이죠. 이 것은 이벤트리스너의 옵션으로써 구현할 ..
-
[꿀팁, 데이터베이스 string 개행] 데이터베이스 string 개행하는 법Front-end 2022. 2. 14. 20:16
안녕하세요! 오늘도 개발 중 꿀팁을 발견해 공유할려구 합니다 ㅎㅎ 보통 설명란 같은 경우는 input을 textarea로 쓰는 경우가 많죠. 그래서 띄어쓰기를 해가며 문자를 작성할텐데, 작성할 때는 그렇게 하더라도 막상 출력하고 나면, 개행을 무시한 채 일자로 나옵니다. 이러한 문제를 쉽게 해결할 수 있는 방법이 있습니다. const Body = styled.div` white-space: pre-wrap; ` 무려 css 단 한 줄로 해결이 된다는 사실! 이런 간단한 것을 몰랐다니! 오늘도 반성을 하게 됩니다! 보통 일반적으로 /n 같은 태그들은 그대로 출력이 됩니다만, 이 css를 작성해주면, 자동으로 파싱해주는 것 같습니다! 굉장히 잘 실행되는 것을 볼 수 있습니다! 오늘도 간단한 꿀팁을 공유합니다..
-
[AWS S3, Nest.js] Nest.js에서 file S3에 저장하기Back-end 2022. 1. 24. 21:07
안녕하세요! 오늘은 Nest.js에서 AWS S3에 파일을 업로드 하는 법을 포스팅하려 합니다! 우선 Nest.js에서 파일을 핸들하기 위한 controller가 필요합니다. 우선 nest명령어를 통해 uploads라는 모듈을 만들어봅니다. nest g mo uploads 그리고 모듈이 만들어지면 uploads.controller.ts라는 컨트롤러를 생성해줍니다. https://docs.nestjs.com/techniques/file-upload Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It..
-
[React.js, 성능최적화] UseEffect Memory resource Leak에러와 마주할 때 2022. 1. 10. 17:58
안녕하세요! 오늘은 useEffect를 사용하던 도중 만난 에러를 기록할려고 합니다. 😇 리액트에서 scroll Event를 구현하던 도중, 갑자기 콘솔에 UseEffect에 관한 에러가 뜨더라고요! 에러 내용은 다음과 같습니다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 에러는 다음과 같습니다. 에러를 단순히 살펴보면 , 언마운트된 리액트 컴..
-
[TypeORM, Nest.js] ManyToOne 관계의 entity가 null return 될 때에러와 마주할 때 2021. 12. 26. 19:23
안녕하세요. 오늘은 서비스 개발 중 @ManyToOne 관계의 엔티티가 정상적으로 출력되지 않고, null로 리턴되는 경우를 만났습니다. 우선 출력하고자 하는 것은 한 가지의 부모 엔티티를 가지는 자식 엔티티입니다. 즉 ManyToOne의 관계를 가지고 있죠. 거기에서 부모 엔티티의 관계를 가져올려 하는데 null이 리턴되는 경우였습니다. 문제는 간단히 해결했습니다. 바로, 해당 데이터베이스 find등의 작업 시, relation을 설정해줘야 하는 것이였죠. nest.js의 service.ts의 코드입니다. provideImage가 부모 엔티티인 user를 가져와야 하는데 null을 리턴하고 있었습니다. 부모 엔티티를 가져오기 위해선 이 findOne이라는 데이터베이스와의 통신을 위해 relation을 ..
-
[Nest.js, TypeORM] Relation이 된 entity를 받을 수 없었다.에러와 마주할 때 2021. 12. 23. 00:41
오늘은 nest.js에서 작업하던 도중, relation이 되어있는 entity가 안받아와지는 오류가 있었습니다. 콘솔에서는 user에 relation된 정보가 받아와지는데, graphql playground로 요청하면 받아와 지지 않았습니다. 콘솔에는 다음과 같이 relation된 provideImage에 대한 정보가 잘 출력이 된 것을 확인할 수 있습니다. 하지만 graphql playground의 쿼리 요청에서는 출력이 되지 않았습니다. 에러 내용을 살펴보니 null값이 되면 안되는 token이 null이라고 나옵니다. 분명 콘솔에서는 모든 값이 정상 출력 되었었는데 말이죠.. 콘솔한 부분입니다. 그 뒤로 같은 user를 리턴했지만, grpahql playground에서는 null값이라고 나왔죠 ㅠ..
-
[Git] 한 랩탑에서 여러가지 깃 아이디를 사용할 때git,협업 2021. 12. 20. 20:20
안녕하세요 오늘은 깃에 관련한 내용을 다뤄볼려고 합니다! 저도 이제, 레포지토리를 개인과 제가 따로 시작하는 깃 계정의 레포지토리를 분리할려고 했는데 이미 랩탑에 등록되어있는 글로벌 이메일과 다를 경우 push가 안되는 경우들을 처음 만나서 관련 내용을 정리해볼려고 합니다! MAC OS를 사용 중이기 때문에 포스팅은 MAC을 기반으로 함을 알립니다 👨🏻💻 git config --global user.email 깃을 처음 사용할 때 우리는 글로벌 유저 이메일을 설정하게 됩니다. 이미 등록되어 있는 계정과 다른 계정의 레포지토리에 push나 변경을 가하게 되면, 해당 계정에 대한 권한이 없기 때문에 Not found: repository의 에러 등을 만나게 될 것입니다! 그렇다면 우리는 어떻게 랩탑에 등록..
-
[상태관리, Front-end] props drilling? 상태관리 라이브러리의 등장 배경 확실히 알아보기Front-end/State management 2021. 12. 15. 19:28
안녕하세요! 오늘은 프론트엔드에서의 상태관리가 등장한 배경과 해결방안등에 대해서 공부하며 알아본 내용을 포스팅하도록 하겠습니다. 저도 이전에 상태관리 라이브러리를 이게 왜 필요한지도 모르고 배우기만 하고, 실제로 어떠한 프로젝트를 진행했는데 그 개념조차 제대로 모르니까 사용을 안하게 되게 되더라고요 ㅠㅜ.. 그래서! 오늘은 우리가 상태관리가 왜 필요한지. 먼저 알아보고! 느끼고! 간단하게 사용해보도록 합시다 🥳 #1. Props Drilling? 여러분 혹시 프론트앤드 개발하던 도중 중첩된 컴포넌트들 때문에 진작 필요한 정보는 너무 하위 컴포넌트라 컴포넌트를 넘기고.. 넘기고.. 넘기고.. 했던 경험 있으신가요? 있으시다면 여러분은 이미 props drilling을 경험한 것입니다 😤 사실 저도 이전에 ..