본문 바로가기

Sparta x 이노베이션 캠프

 (69)
TIL : dangerouslySetInnerHTML, DOMPurify 실전 프로젝트 첫째 주, 와이어 프레임 피드백을 받으면서 튜터님이 HTML 데이터를 받아와 그대로 코드에 삽입하려면 보안 문제 때문에 "ㅇㅇ" 처리를 해야 한다고 하셨는데, 그게 뭔지 몰라서 한참 구글링을 하다가 아~모르겠다 하고 잊고 있었다. 그리고 한 3주가 지난 오늘 어쩌다가 블로그 글을 읽는데, dangerouslySetInnerHTML과 보안 문제에 대한 것이었다. 게시글 상세조회페이지를 만들 때, HTML을 코드에 삽입하려면 dangerouselySetInnerHTML을 코드에 삽입하고 __html 키로 객체를 전달하면 된다는 것 까지는 알아내서 상세 게시글 조회까지 했는데, 이 키워드로 검색을 해 볼 생각은 그때 못했다. 오늘 어쩌다 발견해서 얼른 적어놓는다. React dangerously..
실전 React 프로젝트 내돈내여 | 11주차 WIL : 중간 발표, 모르는게 너무 많아. 중간 발표는 그럭저럭 잘 넘어갔다. 지난 3주간 쭉 멘토링을 해주시던 멘토님이어서 그런지 피드백이 긍정적인 편이었다. 쓴소리를 기대 했는데 잘 하고 있는 것 같다는 평가를 들으니 기분이 정말 좋은데 또 마냥 좋지 만은 않다. 나는 진짜 잘하고 있는것 같지가 않다. 어쩔 땐 좀 괜찮은것 같은데? 싶다가도 기초적인 부분에서 엉뚱한 소리를 하고 고개를 갸우뚱하는 내 자신이 마치 속 빈 강정이 된 느낌임. 오기가 생긴다. 갑자기 일 못해서 자괴감이 들었던 옛날이 떠올랐다. 그땐 정말 나한테 열이 받아서 쉬는 시간에 쉬지도 않고 일했다. 아직 공부한지 2달밖에 안되었는데. 진짜 신입때 일하면서 삐걱거리던거 생각하면 지금은 아주 빠르게 성장하고있는것같은데. 조바심이 자꾸 난다. 나는 새로운 일에 익숙해지는데 시간이..
실전 React 프로젝트 내돈내여 | 10주차 TIL : 웹어플리케이션 내돈내여 중간 발표 전 정리 주요기능 진짜 여행 후기를 공유하는 것이 주 기능. 1. 소셜 로그인/회원가입 ⭕ 2. 여행 취향 분류 - 여행지 추천 (혼자여행, 친구, 가족, 연인, 여행 예산 별 추천) ...ing 3. 내 여행일정 관리 / 관심 게시물 관리 / 내 작성 게시물 / 프로필 설정 ⭕ 4. 게시글 검색 기능 ⭕ 5. 스토리 기능 (동영상 공유) ...ing 6. 신고 기능 ⭕ 7. 게시글 기능 (사진, 텍스트, 총 지출 금액 등 올리기) 수정, 삭제 ⭕ 8. 게시글 추천수, 좋아요, 최신 순 정렬, 태그 별 정렬 ...ing 9. 댓글 기능 ⭕ 서비스 아키텍쳐 Github-flow 전략 master: 실제 배포가 될 브랜치 semi: 각 멤버의 branch들을 merge한 배포 전 테스트용 브랜치 FE member b..
TIL : React 카카오 api 맵 예외처리, 카카오맵 중심좌표 이동시키기(Trouble Shooting, 코드리팩토링 ver.1) 실전 프로젝트 3주차. 벌써 반이나 지나갔다. 개발하고있는 어플리케이션은 여행후기공유 플랫폼이고 Minimum Viable Product (MVP)는 1. 소셜로그인 (네이버, 카카오) 2. 회원가입시 여행관련 관심사 선택 => 추천페이지에서 관련 게시물 뜨게 만들어줌 3. 나의 게시물, 나의 관심 게시글, 나의 여행 일정 관리 (CRUD) 4. 게시글 full-text-search 5. 게시글 신고 -> 5번 이상 신고하면 삭제 6. 게시글 업로드 (editor, 지도) (CRUD) 7. 게시글 댓글 기능 (CRD) 8. 게시글 추천수, 좋아요, 최신 순, 태그 별 정렬 내가 맡은 기능은 1, 4, 5, 6, 7, 8(부분적) 번으로 오늘은 이 중 예외처리로 골머리를 앓은 지도에 대해 이야기 해보려 한..
TIL : 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. Form DIV P 위와 같은 구조에서 가장 안쪽의 를 클릭하면 다음과 같은 일이 벌어진다. 1. 에 할당된 onclick 핸들러가 동작 2. 바깥의 에 할당된 핸들러가 동작 3. 그 바깥의 에 할당된 핸들러가 동작 4. document 객체를 만날 때 까지, 각 요소에 할당된 onclick 핸들러가 동작한다. 거의 모든 이벤트는 버블링이 된다. (몇몇 이벤트 (ex. focus)는 버블링이 일어나지 않음) event.target 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지..
TIL: useRef useRef() , 왜 필요한가? React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 렌더링(rendering)이 된다. 버튼을 누를 때 숫자가 증가하고 감소하는 카운터의 경우, 버튼을 누르는 만큼 상태값이 바뀌기 때문에 같은 횟수로 리렌더링이 된다. 카운터의 컴포넌트 함수는 상태가 바뀔 때 마다 호출이 된다는 말은 함수 내부의 변수들이 모두 초기화되고 함수의 모든 로직이 다시 실행된다는 것을 의미. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); console.log(`랜더링... count: ${count}`); return ( {count}번 클릭하..
TIL: useEffect 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 React Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶을때, 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때, useEffect를 사용한다. //App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; 브라우저에서 App컴포넌트를 눈으로 보는 순간, App 컴포넌트가 화면에 렌더링 될 ..
TIL: 서버에 데이터 보내기. formData, JSON.stringify() 방식 왜 쓰는가? 프로젝트 진행 중 서버에 POST 요청을 보내는건 항상 있는 일이다. 예전 미니프로젝트 때 처음으로 데이터를 보냈었는데 사진과 text를 묶어서 보내느라 formData로 보냈었다. 유일무이한 방식인 줄 알았는데 아니었다. 미니프로젝트의 코드는 아래와 같음 ... const onSubmitHandler = async (event) => { event.preventDefault(); let req = { title: title, content: content, }; const formData = new FormData(); formData.append("image", image); let json = JSON.stringify(req); const titleblob = new Blob([json], { t..
반응형

티스토리툴바