🌼 TIL 썸네일형 리스트형 Vue.js의 ref,reative 상태관리와 computed설정 vue.js의 composition api에서 상태관리와 계산된 값을 사용할때 쓰는 것으로 상태관리는 ref,reactive / 계산된 값 표현은 computed를 사용한다. 1. ref : 단일값 상태관리 ref는 숫자,문자열,boolean등과 같이 단일값을 반응형으로 관리하기 위해 사용된다.const count = ref(0);count.value++; // 값 증가console.log(count.value); // 1특징으로는 다음과 같이 ref로 선언한 count변수에서 ref가 감지하고 있는 number 값의 변경은 자동으로 DOM에 반영된다.그리고 사용하기 위해선 .value를 통해 사용해야 하는 특징이 있다.값이 자동으로 DOM에 반영되면, 수동으로 DOM을 업데이트하지 않아 코드가 훨씬 간.. 더보기 SSL은 무엇인가? WSL에서 SSL 발급받기 SSL은 Secure Sockets Layer로 넷스케이프사가 만든 암호화 규약이다.현재는 SSL을 기반으로 한 TLS를 사용하며, 핸드쉐이크 과정을 통해 양측에서는 메시지를 교환하여 서로를 인식하고 서로를 검증하게 된다. SSL인증서서버는 신원을 확인받기 위해 CA 기관이 발급해주는 인증서가 필요하게 된다.인증서에는 다음 내용들이 포함된다.인증서가 발급된 대상 도메인 이름발급받은 사람, 조직, 장치발급한 인증 기관인증 기관의 디지털 서명관련 하위 도메인인증서 발급 날짜인증서 만료 날짜공개 키(개인 키는 비밀로 유지됨)인증서의 최대 유효 기간은 13개월으로, 유효 기간이 짧은 이유는 SSL/TLS 인증서가 악용될 가능성이 줄이기 위해서다.추후 나올 Let's Encrypt는 3개월이다. 현재 나는 WSL.. 더보기 useState란 무엇인가? React 개발 시 함수형 컴포넌트를 사용한다면 React Hooks기능을 활용할 수 있습니다. 여기서 가장 중요한 useState를 알아보겠습니다. useState란? : 함수형, 클래스형 컴포넌트의 상태를 관리하거나 변경할 수 있도록 도와주는 React Hook입니다. useState는 초기 입력될 상태 값을 인자로 받아 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 됩니다. 형태는 이와 같습니다. const [state, setState] = useState(초기값); state는 저장된 값이고, useState( ) 안의 인자값을 가지게 됩니다. setState는 state의 변경된 값을 저장할 수 있게 만들어 줍니다. setState를 사용해서 state를 변경하면 해당 컴포넌트는 .. 더보기 Virtual DOM (가상DOM) - React, Javascript 오늘은 Virtual DOM에 대해 알아보겠습니다. Virtual DOM이란 React.js, Vue.js등 javascript기반으로 된 프레임워크에서 사용되는 기술로 DOM조작을 효율적으로 만들어 주기 위한 기술입니다. 그럼 DOM이란 무엇일까요? 사전적 의미를 통해 제가 이해한 내용들만 작성해 보겠습니다. DOM이란 Document Object Model이라는 "문서객체모델"로서 여기서 Document는 HTML파일을 의미합니다. 즉, HTML 파일의 Object들인 Element(input,li,h1,button 등)들이 수정 또는 값을 입력받는 등 기능을 요할 수 있게 객체로 실체화된 형태를 DOM이라고 부릅니다. 이 DOM의 형태를 노트에 적어보면 나무가 가지치기한 모습처럼 보여지기에 이 구조.. 더보기 Vercel 빌드 중 " , ' 따옴표 오류 -> HTML 엔티티 "npm run build"를 통해 Vercel 빌드 중 따옴표 오류가 발생하였다. 이유는 HTML에 텍스트에 "(큰따옴표)와 '(작은 따옴표)를 그대로 작성하였기 때문이다. 표기 혼란을 막기 위해 HTML 엔티티를 사용해서 해결해야 한다 큰 따옴표 대신 "를 사용하고 작은 따옴표 대신 "를 사용하여 문제를 해결할 수 있다. 그 결과 기존 따옴표를 사용한 부분만 HTML엔티티를 사용하여 변경하면 문제없이 Vercel build도 가능해진다. 더보기 유저 랭킹기능 구현 - Next.js, Firebase, reactQuery 구현할 기능 게시물 갯수, 팔로워 수, 댓글 수 별 유저 랭킹 기능 구현 이유 50명의 유저에게 피드백 받은 후 게시물 게시 유도를 위한 추가기능 구현 참고 회의 내용 : https://www.notion.so/e7ae5984cf72445a8f9dff0042e7480c?v=035c9f9341a243668c11c1f213969cb5&pvs=4 The all-in-one workspace for your notes, tasks, wikis, and databases - Notion A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 기능 구현 reactQuery를 활용하여 데이터를 요청한다. 여기서 .. 더보기 저장(좋아요)기능 구현 - Next.js, Firebase 구현할 것 - 게시물 저장(책갈피) 기능 - 저장한 게시물 기능개발 이유 : 마음에 드는 게시물들을 저장하여 유저 사용성 개선 기능 구현 //! 저장할 게시물의 데이터를 firestore에 저장하는 코드 //* collection 저장 토글 state const [isCollect, setIsCollect] = useState(true); //* mutation 사용해서 collector값 보내기 const { mutate: onAddCollection } = useMutation(addCollectionData, { onSuccess: () => { setTimeout(() => queryClient.invalidateQueries('coll.. 더보기 Next.js 이미지 최적화 작업 -Image 태그 프로젝트 초기 유저 50명에게 피드백을 받았다 여기서 약 33%의 인원이 이미지 다운로드 속도에 불편함을 느끼고 있었다. https://docs.google.com/spreadsheets/d/1IalNNg2JjwTLLLNEvK1Z4rQ6riLbRE69wWgkOHuP6Dc/edit?resourcekey#gid=167254231 Picspot 사용자 피드백 설문 (응답) 설문지 응답 시트1 타임스탬프,동의하지 않으시면 설문 참여가 불가합니다. ,성함을 기재해주세요.,추첨을 통해 상품을 받으실 전화번호를 기재해주세요. 예) 010-1234-5678 ,사용환경과 운영 체제 docs.google.com 많은 사람들이 이렇게 느끼는 원인 너무 많은 양의 이미지를 받아오는 과정에서 발생하는 문제였다. 이미지 최적화가.. 더보기 이전 1 2 3 4 ··· 11 다음
