지금까지 프로그래머스에서만 코딩테스트 문제를 풀고 있었는데오늘 처음 백준 문제를 풀어보려니 다 입력을 받아야한다.그 이유는 Programmers 같은 경우에는 계산에 더욱 초점을 맞추고자 입출력을 간소화하여 입력은 함수인자(parameter)로 주어지고 출력은 반환값 returen value으로 하는 것으로 대체된다.  js의 입력에 대해서는 따로 공부한 적이 없는데 이 기초도 모르고 있었다는게.. 따라서 Baeckjoon 에서 코딩테스트 연습을 위해서 입력에 대해서 공부해보려 한다.   ide(vscode)const filePath = process.platform === 'linux' ? '/dev/stdin' : 'example.txt';const input = require('fs').readFi..

firebase를 이용하여 사용자 관리에서 이미지를 처음에는 velog처럼 파일로 업로드 하기 위해서 데스크탑에서 파일을 찾아 업로드하는 코드를 짜고 firebase에서 기본으로 제공해주는 user의 photoURL 속성에 업로드하려하였는데다음과 같은 오류가 떴다. 이를 해결하는 과정이 너무 오래걸려서 정리해보려고 한다. 처음에는 디버깅 창에 Photo URL too long이라는 오류가 떠서 파일 data url의 길이가 길어서 생기는 오류라고 생각했다.   파일 업로드 코드  const [ImageUrl, setImageUrl] = useState(null); const { userInfo, setUserInfo } = useUserInfoStore(); //... const handlePro..

항상 var 와 let의 차이가 궁금하였는데 js를 공부하면서 가장 처음 기초로 알아야 할 문법이자 가장 중요한 문법이니 정리 해보고자 한다.  우선 변수에 대해서 알아야한다. 변수변수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소 라고 할 수 있다. let tistory; 할당 연산자 = 를 사용해 변수 안에 데이터를 저장할 수 있다.  let tistory;tistory = 'Hello' 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다.  상수const 는 상수이며 상수는 변하지 않는 값이다. 따라서 변하지 않는 값을 선언할 때는 let대신 const를 사용한다.  const myHeight = 165; 이렇게 const 로 선언한 변수를 '..

Path Parameter 1. Path paramete란? URL 로는 고유한 자원(resource, data)을 지칭 할 수 있다. http://haeo2.tistory.com http://naver.com/products 등을 보면 알 수 있듯이 특정 자원을 지칭한다. 하지만 게시물이 여러개가 있다면 게시물의 자원 가변적인 성격을 지니고 있기 때문에 이를 표현할 수 있는 파라미터가 필요하다 http://naver.com/products/1 등으로 가리키는 특정 리소스가 변경될 수 있다. 이를 변수로 지정해 둘 수 있다. 이 가변적인 변수의 이름을 Path Parameter라고 부른다. 백엔드 서버에서는 http://naver.com/products/:id와 같은 형태로 라우팅 할 수 있다. 변수로 ..

가끔 텍스트를 수정할 일이 생기면 항상 이 부분에서 막힌다.나중에 또 검색하겠지?이거 보고! 수정해!! git text 창에서 커밋 수정하려면 git commit --amend  i : 텍스트 수정 모드esc 누르고 : wq 누르고 종료

1. React 상태관리란? 리엑트는 우선 컴포넌트 기반의 라이브러리다. 이 컴포넌트는 각각이 독립적이다. props를 통해 부모-자식 간에 상태를 전파할 수있다. 하지만 컴포넌트가 많아지고 관리해야하는 상태 값이 많아진다면 상태가 시작된 시점과 어떤 컴포넌트들을 거쳐가는지 모든 흐름을 이해하기 힘들어진다. 상태를 어떻게 관리하는지에 따라 렌더링에 영향을 미칠 수 있다. 프론트엔드 개발자에게 상태관리는 중요한 임무가 되었다. 그렇기 때문에 상태 관리 툴을 이용하여 효율적으로 상태를 관리할 필요가 있다. 상태 관리를 위한 툴로는 Context API, Redux, React Query, Zustand 등이 널리 사용되고 있다. 2. Zustand란? Zustand란 상태라는 뜻을 가진 독일어이다. Zust..

Github에서 제공하는 issue 가 무엇인지 어떻게 사용하는지 알아보고 적용해보려 한다. Github를 사용하면서, 브랜치 전략은 기능별로 fix, feat로 파서 merge하는 방식의 흐름만 알고 있었다. 이번에 프로젝트를 하면서 제대로 정리해보고 적용해보여 깃허브를 정확히 다뤄보고자 한다. Issue란 프로젝트의 기획, 버그 수정, 기능 개선 사항, 새로 추가될 기능 등을 다룬다. 깃허브에서는 원할한 커뮤니케이션을 위해 모든 활동에 대하여 이슈를 등록하고 그것을 기반으로 작업을 진행할 수 있다. 우선 Assignees에는 이슈를 담당하는 사람을 지정해줄 수 있다. Labels에는 여러 리스트가 있는데 enhancement는 기능 향상, feature은 새로운 기능 , bug는 버그 수정으로 볼 수..

https://kasterra.github.io/setting-yarn-berry/ Yarn Berry란? Yarn Berry는 node.js를 위한 새로운 패키지 관리 시스템으로 기존의 깨져있는 npm 패키지 관리 시스템을 혁신적으로 개선한다. 그렇다면 NPM의 문제점은 무엇일까? NPM의 문제점 NPM은 Node.js설치에서 기본으로 제공되어 범용적으로 사용되고 있으나, 비효율적이거나 깨져있는 부분이 많다. NPM은 파일 시스템을 이용하여 의존성을 관리한다. 익숙한 node_modules 폴더를 이용하는 것이 특징이다. 이렇게 관리 했을 때 의존성 검색은 비효율적으로 동작한다. NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다. 따라서 패키지를 바로 찾지 못할..

1. OSI 7 계층이란? OSI 7계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 1. Physical Layer 이 계층에서는 전기적, 기계적, 기능적인 특성을 이용해서 통신 케이블로 데이터를 전송하게 된다. Data Link Layer와는 다르게 일대 일 통신을 하고 하드웨어(칩으로 구현)으로 이루어져있다. 안테나나 케이블로 신호를 쏘는 마지막 단계라고 볼 수 있다. 이 계층은 단지 데이터를 전달만 할 뿐 전송하려는 데이터가 무엇인지, 어떤 에러가 있는지에 대해서는 신경쓰지 않는다. 데이터를 전기적인 신호(0과1)로 변환해서 주고 받는다. 2. Data Link Layer = MAC Layer 이 계층은 MAC 주소를 가지고 통신한다. physical 계층에서 송수신되는 정보..

알아서 잘 딱 깔끔하고 센스있게 정리하는 TypeScript 핵심개념 [전자책]알아서 잘 딱 깔끔하고 센스있게 정리하는 TypeScript 핵심 개념 - 예스24 - 자바스크립트도 아직 잘 모르는데 타입스크립트를 배우기엔 이른 것이 아닐까?- 요즘 기업에서 타입스크립트를 할 줄 아는 사람을 뽑는다던데?- 타입스크립트를 어디서 들어봤는데 여기저기 www.yes24.com 해당 블로그는 이 책을 읽고 정리한 내용이다. 3.Type의 종류 자바스크립트에는 없는 타입스크립트만의 고유한 개념 중 가장 핵심이 되는 것은 타입이다. 타입스크립트와 자바스크립트는 서로 호환되어야 한다. 이를 위해 타입스크립트는 자바스크립트가 사용하는 타입은 물론 타입스크립트의 타입도 사용할 수 있게 제공하고 있다. 3.1 자바스크립트와..