반응형 분류 전체보기50 [네트워크] 비전공자 네트워크와 HTTP 이해하기 - OSI 7 계층의 Layer 1 물리계층(Physical Layer) [네트워크] 비전공자 네트워크와 HTTP 이해하기 - OSI 7 계층의 Layer 1 물리계층(Physical Layer) 오늘은 물리 계층에 대해 공부해 봅시다. 요호호! 물리계층이란? 물리계층이란 OSI 7계층의 맨 아래에 위치한 1계층이다. 보통은 랜카드와 같은 하드웨어로 표현된다. 물리계층은 시스템끼리의 물리적 연결을 통해 0과 1 같은 이진데이터를 전기신호로 변환 및 제어하여 상대의 컴퓨터로 전송하는 일을 한다. 전기신호 네트워크 통신에서는 0과 1의 이진 데이터만을 사용한다. 즉 우리가 전송하고자 하는 데이터들은 모두 0과 1로 변환되어 전송된다. 이렇게 0과 1로 이루어진 비트열로 변환된 데이터는 다시 전기 신호로 변환 한 뒤에 상대의 컴퓨터로 전송되고, 상대의 컴퓨터는 수신 받은 전기신호를.. 2023. 7. 5. [Node] Node.js의 버전을 변경해보자.(nvm) [Node] Node.js의 버전을 변경해보자.(nvm) nvm을 왜 써야하지?회사 개발 환경과 나의 개인 PC의 개발 환경이 상이하여 프로젝트가 실행이 안될 수 있기 때문에, nvm(node version manager)을 사용하면 node.js를 버전을 스위칭할 수 있다. 쉽게 말하면, nvm은 내가 원하는 node.js의 버전을 쉽게 오가는 매니지먼트 시스템인 것이다. NVM 설치 및 사용법(윈도우) [윈도우]https://github.com/coreybutler/nvm-windows GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.A node.js ve.. 2023. 7. 4. [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자바스크립트 스택(Stack) [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자바스크립트 스택(Stack) 자바스크립트 자료구조 스택에 대해 가볍게 배워봅시다 ;0 !! 스택이란? (Stack) 스택이란(stack): 먼저 들어온 데이터가 나중에 나가는 자료구조 형식이다. 새로운 원소를 삭제할 때에는 마지막 원소가 삭제 된다. 자바스크립트 스택(Stack) 자료구조에 대한 시간 복잡도 연산 복잡도 설명 삽입(push) O(1) 스택에 원소를 삽입하는 연산 추출(pop) O(1) 스택에 원소를 추출하는 연산 최상위요소(top) O(1) 스택의 최상위 요소 -> 마지막에 들어온 원소를 확인하는 연산 empty (true/false 반환) O(1) 스택이 비어있는지 확인하는 연산 자바스크립트에서 배열(Array)로 스택.. 2023. 7. 4. [라이브러리] 정말 쉽고 간결한 리액트 상태관리 라이브러리 Zustand! Zustand란? 리액트 상태관리 라이브러리이다. context 사용시의 중첩 Provider 지옥을 벗어날 수 있고 hook처럼 사용 가능하다. 코드가 매우 간결! 상태 변경시에만 컴포넌트를 렌더링하는 메모이제이션도 가능하다. 1. Zustand 설치 방법 npm install zustand # or yarn add zustand 2. Zustand 사용법 // store.js // Devtool 연동 없이 store 생성 방법 import create from "zustand"; // create로 zustand를 불러옵니다. const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bear.. 2023. 7. 4. [네트워크] 비전공자 네트워크와 HTTP 이해하기 - 클라이언트, 서버, OSI 7계층 [네트워크] 비전공자 네트워크와 HTTP 이해하기 - 클라이언트, 서버, OSI 7계층 네트워크와 http를 모른다면 프론트엔드 개발자라고 할 수 없다..! 이참에 배워보자. 몰라도 공부하다 보면 언젠가 알게 될 지니 🥹 1. OSI 7계층 1-1. 클라이언트 - 서버 모델 네트워크의 기본 구조로 클라이언트와 서버 두 개의 구조로 이루어져 있다. 클라이언트가 요청(Request)를 보내면 서버가 응답(Response)을 해준다. (클라이언트가 요청만 보내는 경우도 있다.) 클라이언트는 브라우저와 프론트 뿐만 아니라 서버가 서버에게 요청을 보내기도 한다. 그렇기 때문에 통상적으로 요청을 보내는 쪽을 모두 클라이언트로 이해하면 된다. 1-2. 클라이언트와 서버간의 요청과 응답: OSI 7계층 클라이언트와.. 2023. 7. 3. [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자바스크립트 자료구조(배열과 리스트) [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자바스크립트 자료구조(배열과 리스트) 오늘은 자바스크립트 자료구조 중에서 배열과 리스트에 대해 공부했다. 당장 이해되지 않고 모르는 것이 많더라도 킵고잉 ~~ :) 자바스크립트 자료구조 - 배열과 리스트 1. 배열(Array) 1. 가장 기본적인 자료구조이다. 2. 여러개의 변수를 담는 공간으로 배열은 인덱스(index)가 존재한다. ⇒ 배열의 인덱스는 0부터 시작 3. ⭐️ 특정 인덱스에 직접적으로 접근이 가능하다. 수행시간 O(1) - 상수시간 4. 컴퓨터 메모리상에서 배열은 연속적으로 할당된다. 장점: 캐시 히트 가능성이 높다. 조회가 빠르다. 단점: 배열의 크기를 미리 지정하는 것이 일반적이라, 데이터의 추가 삭제에 한계가 있다. .. 2023. 6. 30. [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자료구조 개론 [자료구조] 비전공자 자바스크립트 자료구조와 알고리즘 이해하기 - 자료구조 개론 자료구조와 알고리즘을 이해해서 프로그램에 알맞은 코드를 짜 보는 것이 목표..! 공부하다보면 언젠가 깨닫게 되겠지 !! 저는 자바스크립트로 공부합니닷! 자료구조 개론(자료구조란) 1. 자료구조란 자료구조란 다수의 Data를 담기 위한 구조이다. 1-1. 자료구조의 필요성 시스템 기능에 따른 절한 자료구조를 선택하는 것이 최종 성능을 크게 좌우한다. 따라서 자료구조와 알고리즘을 제대로 이해하지 못하면 불필요하게 메모리와 계산(연산)을 낭비 할 것이다. 2. 자료구조의 종류 2-1. 선형 자료구조 하나의 데이터에 다른 데이터가 하나 존재하는 자료구조. 즉, 데이터가 일렬로, 연속적으로 연결되어 있는 형태. 예) 배열, 연결리스트.. 2023. 6. 29. [Error] 윈도우 맥 포트 죽이기(Error: listen EADDRINUSE: address already in use) [Error] 윈도우 맥 포트 죽이기(Error: listen EADDRINUSE: address already in use) 눈누난나 이슈 처리하려고 npm run dev 돌렸더니 Error: listen EADDRINUSE: address already in use :::8082 이런 에러가 나왔다. 컨트롤 + C 해서 종료 해봤지만 여전히 포트가 살아있는 상태여서 발생한 문제이니 강제로 포트를 죽이자. 윈도우 포트 죽이는 방법 1. 커맨드 창 열기(관리자 권한) 2. netstat -a -o 명령어 입력 // 명령어 입력 netstat -a -o 2. 찾고자 하는 포드번호 리스트 찾기(나의 경우 8082) 3. 8082 리스트의 PID 번호 기억하기(나의 경우 21448) 4. taskkill /f.. 2023. 6. 29. [Figma] 피그마 개발자 모드 업데이트 및 VSCode 플러그인(Figma Dev mode with Figma for VS Code) [Figma] 피그마 개발자 모드 업데이트 및 VSCode 플러그인 (Figma Dev mode with Figma for VS Code) 후후 어도비 이놈들 피그마를 완전 유료화(?) 시킬 빅픽쳐를 그리는 것인가 엄청난 것을 업데이트 했군.. 후후후 개발자 모드라니!! 심지어 VScode 플러그인 까지 출시 하다니! 피그마의 개발자모드 출시(2023.06.22) 얼마전 한국 시간으로 6월 22일 오전 1시 피그마 컨퍼런스 2023(config 2023)에서 엄청난 것을 선보였습니다. 피그마에 개발 지향적 업데이트가 이루어졌는데요. 바로 개발자모드(Dev mode)를 공개한 것입니다. 전체적으로 패널이 변경 되어서 마치 크롬 개발자 모드 창을 오픈한 것과 같은 느낌으로 변했습니다. 컴포넌트의 값과 반응형.. 2023. 6. 28. 이전 1 2 3 4 5 6 다음 반응형
