티스토리

윌리암의 개발일지

검색하기

블로그 홈

윌리암의 개발일지

william910.tistory.com/m

윌리암 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Cookie 의 maxAge 와 Expire 쿠키의 생존주기는 따로 설정해두지 않으면 브라우저 창을 닫을때 사라진다. 그래서 maxAge라는 옵션을 통해 브라우저와는 별개로 외부파일로 저장하는 것이 가능하다. setMaxAge() 메서드를 활용하면 만료날짜를 설정 할 수 있다. 비슷한 기능으로 Expire가 있는데 max-age가 얼마동안 유지할 것인지(예를 들어 5분) 를 설정하는 것이라면 expire는 만료되는 시간을 설정 하는 것이다. expire 는 setCookie('cookieName', 'cookieValue' , 365 ) ==> 이러면 365일 후 만료 공감수 0 댓글수 0 2023. 4. 4.
useRef 함수형 컴포넌트에서 useRef 를 사용하면 ref 오브젝트를 반환해준다. const ref = useRef(value) // {current: value} 반환된 오브젝트는 컴포넌트의 생애주기를 통해 유지가 된다. 그말은 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 것이다. 그럼 useRef는 언제 사용할까? 1. useRef 는 state와 비슷하게 어떠한 값을 저장해두는 저장공간의 용도로써 사용된다. state의 경우 state값이 바뀌면 -> 렌더링을 하고 -> 컴포넌트 내부 변수를 초기화 한다. state를 사용할때 우리는 원치않는 렌더링 떄문에 곤란해 질떄가 있다. 이떄 useRef를 사용하면 불필요한 렌더링를 막을 수있다. Ref의 값이 변경.. 공감수 0 댓글수 0 2023. 4. 4.
CSS position Position 1.static : 디폴트 값 2. relative - 자신의 본 위치를 기준으로 letf, right 등으로 바꿀 수 있음. 3. absolute - 자신의 바로 위 태그 중 가까운 태그가 relative를 가지고 있으면 그 태그를 기준으로 위치를 잡는다. ( 만일 바로 위 태그가 relative가 없다면 body를 기준으로 위치 조정 됨 ) ( 사이즈 또한 자기 컨텐츠의 값 만해지면, 즉 변화 ) 4. fixed - 부모가 relative가 있는지 신경 안 쓰고 태그 중 최상위 태그의 기준으로만 변경됨 ( 스크롤 무시 항상 그 부위에 고정되어 따라다님 ) 공감수 0 댓글수 0 2023. 3. 30.
HTTP HTTP (Hypertext Protocol) 서버와 클라이언트 간의 TCP/IP 통신 위에서 메시지를 교환하기 위해 사용되는 프로토콜이다. 잠깐! 프로토콜 이란? 네트워크를 통해 통신 가능한 기기 간 데이터 통신을 원할하게 하기 위한 일종의 규칙이다. 이러한 프로토콜을 통해 각 규칙들은 규칙의 역할에따라 TCP/IP 4계층으로 나눠 분류한다. TCP/IP 란? 인터넷 통신의 대부분은 패킷통신으로 이루어져 있는데 패킷 통신 규약중 하나이다. TCP(전송제어프로토콜) 과 IP 를 아울러 지칭하는 용어. *패킷: 네트워크에서 사용하는 작게 분할된 데이터 조각으로 네트워크에서 전송되는 데이터의 기본단위 IP 는 컴퓨터의 주소 라고 생각하면된다. 메시지가 목표로 하는 컴퓨터에 잘 도착할 수 있는 역할을 한다. .. 공감수 0 댓글수 0 2023. 3. 30.
Parameter 와 Argument 매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다. parameter는 함수 혹은 메소드 정의에서 나열되는 변수 명이다. argument는 함수 혹은 메소드를 호출할 때 전달 혹은 입력되는 실제 값이다. const foo = (파라미터1, 파라미터2) =>{ return 파라미터+1 파라미터2 } const foo2 = foo(아규먼트1,아규먼트2) 공감수 0 댓글수 0 2023. 3. 28.
호이스팅 과 TDZ 호이스팅에 대해 이야기 하기전에 먼저 변수에 대해 말해보겠습니다. 변수에는 let, const, var 가 있습니다. (사실 const 는 상수이지만 변수라고 묶어서 표현하겠습니다.) let 과 const 는 ES6 부터 생긴 문법입니다. 그런데 굳이 var 가 있는데 왜 let 과 const 를 만들었을까요? var 와 let 은 크게 다르지 않습니다. 대부분의 경우에는 둘을 바꿔서 사용해도 문제되지 않습니다. 그럼에도 불구하고 굳이 let을 쓰라는 이유가 뭘까요? var 는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = "Kim"; console.log(name); var name = "Park"; console.log(name); 반대로 let은 한번 선언된 변수를 다시 선언할 .. 공감수 0 댓글수 0 2023. 3. 28.
REST API가 뭔가요 REST API 는 무엇이냐 서버를 만들때 REST API 에 의거하여 만들어야 좋다고 한다. 이게 뭐냐면 일단 API (Application Programing Interface) 웹개발에서 API 는 서버와 클라이언트 간의 소통방법 이다. 어떻게 통신을 할지 정한 규약 server.js 에 써놓은 코드가 API다. 이것을 Restful 하게 짜면 REST API 임 그럼 어떻게 restful 하게 짜야하냐? Roy Fielding 이란 개발자가 만든 잘 짜여진 원칙에 의해서 쓰면 좋을것 같다 라고 논문을 썻는데 이게 유명해져서 정론으로 받아들여짐 논문 내용중에 있는 REST 원칙 6개 1. Unuform interface 하나의 자료는 하나의 URL로 URL 하나를 알면 둘을 알 수 있어야함 요청과 .. 공감수 0 댓글수 0 2023. 3. 27.
웹페이지가 브라우저에 렌더링 되는 과정 당 포스팅은 유튜브 채널 Code ON 코드온 의 영상내용을 정리한 내용입니다. 출처: https://www.youtube.com/watch?v=hITJM_t1WWY 브라우저의 주요 기능 -사용자가 요청한 HTML페이지, PDF, 이미지 등을 서버에서 요청해 보여주는것입니다. 이것을 어떻게 보여주나면, 브라우저가 화면에 나타나는 요소를 렌더링 할때 파이어폭스 - 개코 사파리 - 웹킷 크롬 - 블링크 라는 각각의 렌더링 엔진을 사용합니다. 이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줌 예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 겁니다. 총 6단계의 과정을 거치는데요 DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 ->.. 공감수 0 댓글수 0 2023. 3. 27.
[Next.js] styled-component 적용하기 문제 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 발생 Header 부분 표시하려고 스타일 컴포넌트 적용하니 오류 발생 원인 자바스크립트 코드가 적용이 되지 않은 페이지가 미리 렌더링되기 때문에 CSS-in-JS 로 스타일링을 하면 스타일이 적용되지 않은 html 코드가 먼저 렌더링 되는 문제가 발생하게 된다. Next.js는 첫 페이지 로드가 SSR로 동작 ⇒ 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라진다. 해결 html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소들을 주입시켜서 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제를 해결할 수 있다. Next.js에서 styled-components를 사용할 때 ⇒ **_d.. 공감수 0 댓글수 0 2023. 3. 16.
[Next.Js] Next.Script를 활용한 지도 개선 토이프로젝트 중간발표후 지도 개선이 필요하단 생각이 들었다 그러한 이유는 .. 문제상황 기존 로직은 지도를 움직일때 마다 지도를 다시 렌더링함 , 이로인해 좋지못한 ux 제공 및 성능저하를 야기했음 해결방안 로직자체를 바꾸기로 함 Next.Script 의 onReady 속성을 활용하여 Next.Script 가 있는 컴포넌트가 mount 될때마다 실행하게 로직을 바꿨다. 그 결과 멋진 성능 개선을 보여줬다! 공감수 0 댓글수 0 2023. 3. 8.
[NextJs] react-query(prefetching)로 SSR 구현 성능 개선의 필요성 인식 진행하고 있는 프로젝트의 상세페이지는 SSR로 구현 되어있다. 프로젝트 MVP 주간에는 페이지가 렌더링 되면 클라이언트 사이드에서 데이터를 요청하는 방식이였으나 SSR의 장점을 활용하지 못한다고 판단하였고 react query의 prefetching 을 활용하는 방향으로 성능 개선을 진행하였다. react-query 의 prefetching 활용 우리 서비스를 이용하는 사용자는 대부분 상세페이지를 클릭할 것이다. 이럴 경우 사용자가 상세페이지에 필요한 데이터를 기다릴 필요가 없도록 미리 데이터를 가져오면 보다 좋은 사용자 경험을 제공할 것이다. 이때 사용 할 수 있는것이 react query의 prefetching 이다. 상세페이지는 prefetching 을 사용함에 있어 적합한.. 공감수 0 댓글수 0 2023. 2. 28.
[Next.js] A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. 경고 Next.js 제목 경고 문제 title 지정 후 Next.js 에서 아래와 같이 경고하였다. A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client renderi.. 공감수 0 댓글수 0 2023. 2. 27.
새로고침시 데이터에 undefined가 들어온다면 문제 react-query 를 사용해서 get 요청한 데이터를 map함수를 돌려서 목록을 보여주었다. console.log 를 찍어보면 이렇게 undefined 가 나온다.그러나 새로고침시 데이터가 undefined 로 나와서 에러가 발생했다. 원인 처음 undefined된 값을 받아서 맵함수를 돌리니 당연히 목록이 나오지 않는것이다. 해결 useEffect 를 활용한다. data 의 값이 바뀔때마다 useEffect 실행 → 처음에 undefined 를 받더라도 잠시후 값들이 들어오기 떄문에 데이터를 잘 활용할 수있다. 공감수 0 댓글수 0 2023. 2. 23.
Next.js 에선 <img> 보다는 <Image> 문제 태그 사용시 Eslint 가 를 쓰라고 제안함 왜 ? Next/image 에서 제공하는 에 들어가는 파일의 유형을 webp 로 리사이징(최적화) 하여 기능개선에 도움을 준다. 해결 실제로 두개의 태그를 모두 사용하여 최적화 결과를 비교해 보았다. 브라우저 비교 결과 참고자료 Next.js 공식문서 https://nextjs.org/docs/messages/no-img-element no-img-element | Next.js No img element Prevent usage of element to prevent layout shift and favor optimized images. An element was used to display an image. Use next/image to impr.. 공감수 0 댓글수 0 2023. 2. 11.
API 분석 - GET 요청 시 필요한 데이터만 필터링하기 문제 const getData = await axios .get( `${BASE_URL}/${METHOD}?page=1&perPage=1500&serviceKey=${SERVICE_KEY}`, ) .then((res) => res.data.data.filter( (list: any) => parseInt(list.RCEPT_ENDDE.split('-').join('')) >= today, ), ); 기존 구조: API를 이용해서 1500개에 달하는 전체 데이터를 불러온 이후에 필요한 데이터만 필터링하면 3개밖에 남지 않는다. 3개의 데이터를 위해 1500개의 데이터를 모두 불러와야 하는 비효율적 구조. 원인 이러한 문제는 API문서를 꼼꼼하게 읽어보지 않은 것에서 발생됐다. 차근차근히 위에서 부터 읽어내.. 공감수 0 댓글수 0 2023. 2. 10.
Custom hook 만들기 Custom hook 이란? 반복되는 로직을 재활용 하는 방법 중 하나 -> 커스텀 훅은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위한 함수 이다. --> 중복되는 코드 하나로 합쳐서 사용할 수 있음 Custom hook 사용 시 주의할 점 1. 함수명이 use로 시작해야 한다. 2. 최상위에서만 호출할 수 있다. 3. 리액트 함수 내에서만 호출할 수 있다. 4. 꼭 return 값을 주자. UseInput 이라는 커스텀 훅 만들어 보기 // src/hooks/useInput.js import React, { useState } from "react"; const useInput = () => { // 2. value는 useState로 관리하고, const [value, setValue] =.. 공감수 0 댓글수 0 2023. 2. 1.
git 환경변수 API 키값이나 공개적으로 노출되서는 안되는 것들은 환경변수에 담아 처리할 수 있다. Node.js 에서는 보통 process.env 를 통해서 환경변수에 접근한다. Node.js.에서는 기본적으로 내장된 전역객체여서 별도로 임포트 할 필요없이 프로그램 어디에서든지 사용이 가능하다. 1. 환경 변수 파일 제작 2. 환경 변수 파일에 값을 채워 넣는다. //.env REACT_APP_FIREBASE_API_KEY = TESTABCD1234 REACT_APP_FIREBASE_AUTH_DOMAIN = TESTpikaeapp.com REACT_APP_FIREBASE_PROJECT_ID = TESTpika2 REACT_APP_FIREBASE_STORAGE_BUCKET = TESTpika.com REACT_APP_.. 공감수 0 댓글수 0 2023. 1. 29.
React-query removeQueries 검색결과 페이지에서 헤더에 있는 지역 검색을 하면 제목은 바뀌는데 데이터가 늦게 들어와서 목록이 바뀌지 않는 문제가 발생됬다. (잘되다가 간혈적으로 안됨) 이러한 현상은 많은 데이터를 불러오는 지역에서 더 많이 발생됬는데 추측하기로는 너무 많은 데이터를 요청해서 문제가 있나 싶었다. 만약 내가 사용자라면 검색 버튼을 눌렀을때 검색 결과가 바뀌지 않는다면 이상하다고 생각했을 것이다. 그래서 우리 팀원분중 한분이 생각 한게 removeQueries() 를 사용 하자는 것이 였다. removeQueries() 이 뭐냐면 기존 캐시값을 지워버리고 새롭게 데이터를 받아 온다 이렇게 생각하면 쉬울것이다. 그래서 데이터 요청시 새로운 캐시값을 만들어야 하기 때무네 -> isLoading 이 활성화 됨 // Searc.. 공감수 0 댓글수 0 2023. 1. 29.
React select 연동 두개의 셀렉트 박스를 연동하려고 하는데 첫번째 셀렉트박스에서 시, 도 를 검색하면 두번째 셀렉트박스에서 상세 지역이 나오는 로직이다. 내가 해결해야할 문제 1. 각 셀렉트에 노출될 리스트들이 오브젝트로 되어 있다. 2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 3. 검색 버튼 클릭시 첫번째 셀렉트, 두번째 셀렉트 값을 다른 컴포넌트로 전송해 주어야 한다. 1. 각 셀렉트에 들어갈 값들이 오브젝트로 되어 있다. 이걸 써먹으려면 코드 키를 태그의 벨류로 넣고 키값을 셀렉트 박스에 보여줘야한다. 내가 선택한 방식은 const [z1List, setZ1List] = useState([]); useEffect(() => { const arr = []; for (const [key, va.. 공감수 0 댓글수 0 2023. 1. 26.
Node.js [4/50]일 데이터를 DB에 저장 (Mongo DB) DB(Database) 는 무엇이냐 데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳이다. 우리가 가장 쉽게 접할 수 있었던건 MS엑셀 이다. 그러나 엑셀은 10만단위가 넘어가면 버벅거린다. 대표적인 관계형 데이터베이스는 RDBMS 는 MySQL MariaDB Oracle MS SQL Server 가 있지만 프론트엔드 개발자를 꿈꾸는 나에게는 SQL을 제대로 배워서 사용할 시간이 부족하다... 그래서 내가 사용할것은 Object 자료형으로 입출력이 가능한 NoSQL 이다. 특히 가장 유명한 MongoDB 를 사용할 것임 MongoDB MongoDB 는 무료로 512메가 바이트를 제공한다. https://account.mongodb.com/account/logi.. 공감수 0 댓글수 1 2023. 1. 21.
Node.js [3/50]일 POST 요청 HTML에서 input 값을 서버로 전송하려면 태그에 속성을 추가해줘야된다. submit 액션과 메서드 를 폼태그 안에 넣어주고 button태그에 타입을 부여해줘야한다. 버튼을 누르면 -> 폼태그 안에있는 액션과 메서드 에 따라 데이터들을 보낸다 (/add 경로로 POST 요청함) 서버는 어떤식으로 코드를 짜야 되냐면 //server.js app.post("/add", (req, res) => { res.send("전송완료"); }); 이런식으로 짜면됨 근데 내가 전송한 데이터들은 어디에 저장이 되는가?? 이 정보들은 어디에 숨어져있냐면 req라는 인자에 보관되어있다. 그럼 보관되어있는 데이터를 가져다 쓰려면 라이브러리를 하나 써야되는데 바로 body-parser 라는 친구다. 2021년 .. 공감수 0 댓글수 0 2023. 1. 20.
Node.js [2/50]일 서버 재실행이 귀찮을떄는 자동화 시킬수있는 라이브러리가 있다. 바로 Nodemon npm i -g nodemon 설치하면 껏다 킬 필요없이 nodemon server.js 만 입력하면 코드를 저장할때마다 서버를 알아서 껏다가 다시 켜준다. 서버에서 HTML 파일 전송 GET 요청시 HTML 파일 전송 GET 요청은 HTML 파일도 전송해 줄수있다. 아래처럼 sendFile(__dirname+"파일루트") 를 통해 가능하다. 잘나온다. 그래서 CSS 페이지를 따로 빼서 꾸며볼려고했는데 CSS 가 적용이안된다... 뭐가 문제지?? 너무 오랜만에 해서 까먹은건가?? HTML에 CSS/Javascript 파일 추가 하기 문법이 틀린건가 해서 여러번 확인해봤는데도 답이 안나왔는데 확인결과 https://goodm.. 공감수 0 댓글수 1 2023. 1. 18.
Node.js [1/50]일 Server 는 무엇이냐 클라이언트가 요청을 하면 서버가 그에 응답하여 요청한 내용을 보내주는 프로그램 예를들어 호프집 손님: 클라이언트 호프집 알바생:서버 호프집 사장님(호프집 알바생 메이커): 서버개발자 서버개발자가 짜는 코드 방식 어떤 사람이 www.google.com 으로 접속하면 메인 html을 전송해주라 서버: 요청을 받으면 요청한 내용을 보내주는 프로그램 여기서 요청이 뭐냐? HTTP 요청이라는건데 크게 1. 읽기(GET): "~~ 페이지 읽고싶음" 라고 요청 2.쓰기(POST): "새로운 글을 생성해 주세요" 라고 요청 3.수정(PUT): "~~글 수정해주세요" 라고 요청 4.삭제(DELETE): ""~~글 삭제해주세요" 라고 요청 네가지 형식이 있다. 이 네가지 형식을 통해서 사용자(클라.. 공감수 0 댓글수 0 2023. 1. 17.
Node.js 입문 [0/50]일 프론트엔드 부트캠프에 참가하며 여러가지를 배웠고, 여러 프로젝트를 진행하면서 웹서버에 대한 지식을 얻고자 하는 욕망이 늘어갔다. 클라이언트 사이드에서 서버에 요청하는 작업만 하다 보니, 서버에서 어떻게 제공하는지에 대한 궁금증이 커졌고, 그것을 조금이라도 이해한다면 클라이언트를 개발하면서 큰 도움이 될것이라고 판단하였다. 백엔드쪽을 공부하기 위해선 자바->Spring 을 배우는것도 좋은 방법이겠지만 지금 당장 자바를 배우기에는 시간도 부족하다. 그래서 자바스크립트 라는 언어의 이해도를 높일수 있으면서 서버 개발에 대해서 배울 수 있는 Node.js 를 학습하기로 결정했다. 하루에 한시간 두시간씩 조금씩 투자해서 50일 정도 꾸준히 학습하는 것을 목표로 했다. 1 -> 50으로 가는 그날까지 열심히 해봐야.. 공감수 0 댓글수 0 2023. 1. 17.
RN 토이프로젝트 회고 Keep 오류가 발생했을 때 포기하지 않고 다함께 해결했다. 프로젝트 첫날 세밀하게 기획했다. 코딩 컨벤션 (Git, 포맷, 디렉토리)을 정하고 프로젝트를 시작했다. Problem 스타일드 컴포넌트 사용에 통일성이 부족했다. 컴포넌트화를 세밀하게 하지 못하고, 리팩토링할 시간이 부족했다. 코드리뷰에 충분한 시간을 할애하지 못했다. Try Git Issue를 활용해보자. 플레이 스토어 / 앱 스토어에 배포해보자. 느낀점 파이어베이스 회원 관련된걸 많이 다루어 봐서 좋았다. 공감수 0 댓글수 0 2023. 1. 16.
프로그래머스 세균 증식 문제 설명 어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 10 1 ≤ t ≤ 15 입출력 예 n t result 2 10 2048 7 15 229,376 입출력 예 #1 처음엔 2마리, 1시간 후엔 4마리, 2시간 후엔 8마리, ..., 10시간 후엔 2048마리가 됩니다. 따라서 2048을 return합니다. 입출력 예 #2 처음엔 7마리, 1시간 후엔 14마리, 2시간 후엔 28마리, ..., 15시간 후엔 229376마리가 됩니다. 따라서 229,376을 return합니다. 나의 정답 const solution = (n, t) =>.. 공감수 0 댓글수 0 2023. 1. 15.
RN-이미지 변경 및 업로드 추가기능으로 프로필에서 프로필 사진을 추가 및 변경 하는 기능을 추가하려고 하였다. 리액트 네이티브는 이미지 업로드 기능이 있을까? 찾아 보니 expo에서 지원하는 imagePicker 라는게 있었음 https://docs.expo.dev/versions/latest/sdk/imagepicker/ ImagePicker docs.expo.dev 빠르게 읽어보고 설치 npx expo install expo-image-picker 임포트 해오고 import * as ImagePicker from 'expo-image-picker'; 내가 원하는건 카메라 촬영기능까지는 아니고 이미지 파일에 접근할 수 있는 권한만 얻으면 되기 떄문에 ImagePicker.useMediaLibraryPermissions() 요고 .. 공감수 0 댓글수 0 2023. 1. 13.
최신순으로 나누기 당 프로젝트에서 불러오는 API 의 날짜는 "2023-02-23 00:00:00.0" 이렇게 되어있다. 메인화면에서 보여줘야할 것은 지금 진행중인 행사와 곧 진행할 행사로 나눠야 했는데 저렇게 되어있어선 판단하기가 어려웠다 그래서 나는 1. 위 날짜 데이터를 이쁘게 가공한다. 2. 가공한 데이터와 오늘날짜를 같은형태로 만든다. 3. 비교한다. let startDate = parseInt(data[0].STRTDATE.replaceAll('-', '').splice(0, 8)); const year = String(new Date().getFullYear()); const month = String(new Date().getMonth() + 1).padStart(2, 0); const day = Strin.. 공감수 0 댓글수 0 2023. 1. 12.
firebase 사용자 재인증 firebase auth 로 로그인, 회원가입 기능을 공식문서를 보면서 쉽게 구현했다. 그러나 비밀번호 변경 기능을 구현하려고 하는데 auth/requires-recent-login 이런 오류가 자꾸 뜨더라 문서를 다시한번 자세히 읽어보니 이런게 있었네.. 여기서 TODO(you) 는 내가 직접 credential 함수를 만들어야 한다는 거다. 일반적으로 회원탈퇴를 하거나 비밀번호 변경을 할때 비밀번호를 한번더 입력하는 과정을 거치는데 credential 이 그 역할을 하는것 나는 이메일 계정을 통한 로그인 기능을 만들었기에 const credential = EmailAuthProvider.credential(user.email, password); // 비밀번호 확인작업, 여권을 만든다고 생각하면됨 이.. 공감수 0 댓글수 0 2023. 1. 11.
React native 에서는 display:block 이 안된다. 1. 내가 구현하고 싶은 기능은 해당 버튼을 눌렀을때 hide 되어있던 컴포넌트가 show로 바뀌는 것이였다. 그래서 display: none 으로 했다가 -> block 으로 바꾸면 되겠네 라고 생각하고 display에 props 를 주어서 실행시켰더니 .. 이런 에러가 발생함... 내가 문법을 잘못썻나 해서 여러번 봤는데 문법상 틀린건 없었음 역시나 구글신에게 물어보니 react native에 적용가능한 style 에는 display 가 없다고함 https://webisfree.com/2019-08-14/react-native-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0-hide react native 컴포넌트 숨기기, hide .. 공감수 0 댓글수 0 2023. 1. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.