전체 글

즐길 수 있는 일을 하자

    restAPI 호출 코드

    const getMainApi = async () => { try { axios.defaults.baseURL = APIURL; axios.defaults.headers.common["Authorization"] = `Bearer ${AUTH_TOKEN}`; axios.defaults.headers.post["Content-Type"] = "application/json"; axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest"; const [slidesResult, cateResult] = await Promise.all([ axios.get("test-slides"), axios.get("test-categories"), ]); if (..

    엑스포 관련 명령어

    expo doctor --fix-dependencies - 패키지 호환문제 해결

    이력서

    google.com 검색시

    브라우저가 캐시공간 4곳을 뒤져보고 없으면 dns서버에 요청해서 google.com으로 설정된 ip 주소를 받아온다 (가까운 통신사 서버부터 묻고 묻고 물어서 ) ip주소를 받아오면 그ip주소에 (커넥션을 위해 소켓을 열고 잘 연결되는지 검증을 위한 패킷을 주고받는다 [요청, 응답, 확인] 검증이 성공하면 드디어 웹서버와 연결이되서 웹서버한테 html 내놔 하고 요청을 보내고 웹서버가 알았어 하고 잘보내준다 추가로 정적인컨탠츠는 브라우저에 캐싱되서 또 요청안한다고 하는데 왜 정적컨텐츠에 대해 접속할때마다 요소들의 트래픽이 소모되는지 모르겠다

    rest api란

    rest :Representational State Transfer 대표적 상태전달 클라이언트와 서버간 통신방법 중 하나 url 과 http 메소드를 활용하고 url 에 리소스(자원ex : user.uid)를 명시하고 http 메소드로 crud 를 처리한다 목적: api이해도 및 호환성을 위해, 일관적인 컨벤션 암튼 rest 규칙에 맞게 잘 만들어야하고 그렇게 규칙을 준수해서 만든api를 restfullapi 라고한다 나중에 만들어봐야지~

    바닐라 자바스크립트로 display : 보이기 , 숨기기 (block,none ) 하기

    제이쿼리로 만들어진 예제들을 위주로 사용하다 바닐라 자바스크립트 사용을 지향하여 바닐라로 된 간단한 코드를 작성해보았다. 토글메뉴 햄버거 메뉴 등 응용하여 사용하면 좋을 것 같다. function openclose() { const 숨길것 = document.querySelector("숨길것") if(숨길것.style.display == 'block'){ 숨길것.style.display = "none"; } else{ 숨길것.style.display = "block" } } let tolle = document.querySelector("버튼"); tolle.addEventListener("click",openclose)

    제이쿼리 버튼 한개로 디스플레이 와 텍스트 토글 기능

    가장 간단한 토글기능 function openclose(){ let statu = $("#post_box"); statu.toggle(); }​ 디스플레이 와 텍스트 토글 기능 $("#post_box").css("display",'none'); function openclose() { let status = $("#post_box").css('display'); let statu = $("#post_box"); if( status == 'block' ){ statu.hide(); $(".tolle").text("포스트박스열기") } else{ statu.show(); $(".tolle").text("포스트박스닫기") } } html 태그 안에 onclick="openclose()" 를 추가하면 사용가능 ..

    스크롤값, 윈도우 높이, 문서 높이 구하기

    제이쿼리로 스크롤값, 윈도우 높이, 문서 높이 구하는 방법 $(window).scroll(function() { let 윈도우 스크롤 값 = $(window).scrollTop(); let 문서 스크롤 값 $(document).scrollTop(); let 윈도우 높이 값 $(window).height(); let 문서 높이 값 $(document).height(); }); 윈도우 스크롤과 문서 스크롤 값은 동일함 아무거나 쓰자 윈도우 스크롤(문서) + 윈도우 높이 값은 = 문서 높이와 동일하다 위의 공식을 사용해서 if($(window).scrollTop() + $(window).height() = $(document).height() ) { $('# ).addClass('.'); } else{ $('..

    useEffcet 사용법

    출처: https://ko-de-dev-green.tistory.com/18 [독일개발자초록이] 위의 링크에서 너무 설명이 잘되어 있어서 저장

    react-native cli 시작 방법 ( 클론한 레포지토리 실행방법 )

    https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev 공식홈페이지 1. jdk 다운로드 먼저 프로젝트를 클론할 경우 자바 jdk8 설치를 해야한다 ( jdk 버전이 맞지 않으면 오류가....) 파이썬도 설치해야 한다는 글이 있는데 꼭 해야하는지는 아직 테스트 해본적 없지만 저는 했습니다. window https://www.oracle.com/kr/java/technologies/javase/javase8-archive-down..

    그리드 레이아웃 샘플 코드를 만들어보자

    1 2 3 4 5 6 7 8 9 10 11 12 13 Grid layout grid system 1 2 3 4 5 6 7 8 cs .container { width: 1000px; border: 3px solid red; padding: 1rem; } .grid { display: grid; height: 430px; width: 1000px; grid-template-rows: repeat(4,1fr); //가로로 4줄로 쌓인다 ( 1fr = 같은비율로 ) grid-template-columns: 100px 100px 100px 세로로 3줄로 나뉜다 ( 픽셀로도 표현 가능) grid-row-gap: 10px; grid-column-gap: 10px; } .item { background-color: c..

    useRef 로 컴포넌트 안의 변수 만들기

    컴포넌트는 그 컴포넌트의 state나 props가 변경될 때마다 호출되는데(re-rendering), 함수형 컴포넌트는 일반 자바스크립트 함수와 마찬가지로 호출될 때마다 함수 내부에 정의된 로컬 변수들을 초기화합니다. 따라서 , const nextId = { current: 4 }; nextId.current는 함수가 호출될 때마다 4입니다. 반면 useRef로 만들어진 객체는 React가 만든 전역 저장소에 저장되기 때문에 함수를 재 호출하더라도 마지막으로 업데이트한 current 값이 유지됩니다.