감귤밭 호지차 농장

북마크 저장 1. 서버에 저장 2. localStorage : 클라이언트 영구 저장소 브라우저 내에 있는 자체 Storage 예전에는 cookie 브라우저를 껐다 켜도 그대로 저장되어 있다. 하지만 다른 컴퓨터로 가면 동기화가 되지 않는다. Ex. 장바구니 3. 메모리 SPA라서 브라우저 끄기 전가지는 날라가지 않는다. # 무한 스크롤 Intersection observer API 로직 잘못 짜면 로직 상 에러 발생 비동기가 호출되는 시점 잘 지정 해야 합니다. 해야 되는 거 1. SSO : Single Sign OIn 카카오 / 구글 / 네이버 구현 2. 무한 스크롤 3. 반응형 웹 4. HM 클론 마무리 5. navbar 중단 후 다른 youtube api로 적용 6. 깃 정리 7. 코플릿 - 알고리..

1. Styled components 설치 에러 0 verbose cli C:\Program Files\dev\node.exe C:\Users\jhj19\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using npm@9.6.6 2 info using node@v18.16.0 3 timing npm:load:whichnode Completed in 2ms 4 timing config:load:defaults Completed in 2ms 5 timing config:load:file:C:\Users\jhj19\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 2ms 6 timing config:l..

보통은 React 프로젝트 생성할 때 속칭 ' CRA ' 라는 Create-React-App 명령어를 실행합니다. 하지만 CRA는 빌드하는데 시간이 너무 오래 걸리고 양이 커서 불편할 때가 있습니다.Vite 간결한 모던 웹 프로젝트 개발에 초점을 맞춘 빌드 도구입니다. 계속 CRA만 썼기 때문에 Vite로 조그마한 프로젝트를 만들어 보려고 합니다. Vite로 프로젝트 생성 과정 npm create vite@latest 이후 이런 식으로 선택지를 통해 프로젝트 기초를 설정할 수 있습니다. Javascript 뿐만이 아니라 Typescript도 선택할 수 있었습니다. SWC가 뭔지 모르겠지만 한번 선택해 보았습니다. SWC에 대해서는 위의 카카오 블로그에서 잘 설명 되어있으니 내일 읽어보려고 합니다. * p..

신입이 꼭 알아둬야 할 필수 알고리즘 * 참고 블로그 : 코딩테스트 문제 유형 정리 * 참고 블로그 : 알고리즘 공부 순서 * 코딩 테스트 사이트 : leetcode * 코딩 테스트 사이트 : 프로그래머스 * 코딩 테스트 사이트 : 백준 "" 구현 / 완전탐색(DFS/BFS) / DP "" Chapter 01. 자료구조 Chapter 02. 알고리즘s 1. 해시 테이블 * key-value쌍으로 저장되는 특성으로 자주 사용되는 자료 구조 프로그래머스 - 단어 변환 2020 KAKAO BLIND RECRUITMENT-주차 요금 계산 2. Stack & Queue * 단독 보다는 구현하는데 필요한 자료구조 : 스택 - DFS , 큐 - BFS * 선입 선출 / 후입 선출의 단서가 보이면 사용 프로그래머스-다..

구현 기능_01 : weather api에서 날씨 온도에 따라 제공되는 아이콘 불러오기 [ 오류 발생 & 실수 구덩이 ] ㅇㄹㅇㄹㅇㄹ 구현 기능_02 : 도시를 option 선택으로 변경할 수 있게 구현하기 [ 오류 발생 & 실수 구덩이 ] 옵션을 선택했을 때의 값을 props로 넘기면 바로바로 값이 바뀔 것으로 생각했으나 바뀌지 않아 한참을 고민하다가 작업을 종료 했었습니다. 그러다가 자려고 누워서 생각해보는데 아차차!!! useRef 로 api를 처음 페이지가 랜더링 될 때 딱 한번만 불러오도록 설정했다는 것이 기억 났습니다. 그렇다면 선택 값이 바뀔 때마다 재 랜더링을 할 수 있게 설정한다면 되지 않을까? 해서 다시 코드를 수정해보았습니다. 깃 충돌 : 깃 PR 후 merge 충돌 에러 [ 오류 발..

OSI 7 계층 Open Systems Interconnection 의 약자로 1984년 국제 표준화 기구 (ISO) 에서 발표한 컴퓨터 통신 기능을 계층 구조로 나누어 정리한 통신 규칙 모델입니다. OSI 7 계층 및 TCP/ IP 4계층 이전의 프로토콜들을 표준화하기 위한 목적으로 만들어졌습니다. TCP / IP 4 계층 1970년대 말 부터 미국 국방부에서 개발되고 정의되었으며, 초기 인터넷부터 현재까지 가장 널리 사용되고 있는 네트워크 통신 표준 모델 입니다. 왜 OSI 7계층 보다 TCP / IP 계층을 더 많이 사용할까요? TCP/IP 모델은 OSI 모델보다 구조가 간단하고 유연하며 이미 대부분의 인터넷에서 사용되는 프로토콜들이 이 모델을 따르기 때문에 현재에도 많이 사용되고 있습니다. 또한 ..

릴레이 블로깅 챌린지 3탄의 주제가 네트워크 로 선정 한 만큼 겸사 겸사 미뤄왔던 모든 네트워크 정리를 몰아서 해보도록 하겠습니다. 글 정리하다보니 네트워크 편을 쓰다 만 것이 3개나 있었더군요. 반성하는 마음으로 제대로 정리해보도록 하겠습니다. ※ 속편 심화 편들은 작성 중이며, 전체 작성 완료 시 이 문구는 사라집니다. ※ Network 란 ..? 네트워크는 두 대 이상의 컴퓨터가 데이터나 자원 (하드에어, 소프트웨어)를 공유할 수 있도록 연결 되어 있는 구조를 의미합니다. 유선 / 무선으로 연결되어있으며 " 인터넷 " 과 같은 다양한 네트워크가 존재합니다. 우리는 네트워크를 통해 데이터를 " 패킷 " 단위로 주고 받을 수 있으며 공통으로 사용하는 자원에 접근하여 작업을 수행할 수 있습니다. 패킷 (..

# 특정 문자 제거하기 function solution(my_string, letter){ const answer = my_string.split(letter).join(''); return answer; } 굳이 my_string을 split( ' ' )으로 나눌 필요 없이 빼야 하는 요소 letter을 기준으로 분리 한다음에 join( )으로 합칠 수 있었습니다. . . function solution(my_string, letter){ return my_string.replaceAll(letter, ""); }​ replaceAll( ) replace( ) 메소드를 사용하면 일부 문자열을 바꿀 수 있습니다. replaceAll( ) 메소드를 사용하면 전체 문자열에서 일괄적으로 대체할 수 있습니다. ..

🍀 오늘의 날짜 : 23년 04월 27~ 28일 🍀 오늘의 주제 : 웹 표준 : 시멘틱 태그 / 마크업 / ..etc 스크린 리더를 통해 본 TAB 의 좋은 구조 예시 1 예시 1 setCurrentTab1(0)}>{tab.tab1.title} setCurrentTab1(1)}>{tab.tab2.title} setCurrentTab1(2)}>{tab.tab3.title} {tab.tab1.content.map((el,idx)=> {el})} {tab.tab2.content.map((el,idx)=> {el})} {tab.tab3.content.map((el,idx)=> {el})} 예시 2 예시 2 setCurrentTab2(0)}>{tab.tab1.title} {tab.tab1.content.map((..

피보나치 : fibonacci 피보나치를 JavaScript로 구현을 해보겠습니다. 이왕 하는 김에 시간 복잡도도 고려해보면서 다양한 방식으로 구현해봅시다요. 0 1 1 2 3 5 8 13 21 34 55 ,,, 1. 기본 피보나치 function fibonacci(n){ //0항과 1항은 그대로 0 과 1임 if(n