공부 기록일지📚

npm install 과 npm ci 차이? 둘 다 의존성 패키지를 설치하는 명령어이다. 차이점은 기준이 되는 파일 npm install은 package.json을 기준으로 의존성을 설치한다. npm ci(clean install)은 package-lock.json을 기준으로 의존성을 설치한다. => 최종 빌드 시에 사용하면 good 위의 차이점을 알기 위해서는 Semantic versioning 개념에 대한 이해가 있어야 한다. Semantic versioning(SemVer) npm은 시멘틱 버저닝(SemVer)이란 버전 표기법을 따른다. - 이 시점에는 이 기능을 제공할 겁니다!라는 의미(버전 업이 된다면 새로운 기능을 제공(혹은 업데이트)할 거야) 이 개념을 알면 라이브러리의 상세를 보지 않더라도..

[진행 기간]: 23.06.26(월) ~ 30(금) [교육 내용] FE 개발자끼리의 협업을 위한 기본 세팅(환경 설정), 생산성을 높여주는 배포 자동화 등.. 서버와 클라우드 컴퓨팅 AWS 개념, CI/CD with GitHub Actions 5명 이상의 개발자끼리의 공유 리포, git 연습(best practice를 추합해서 main에 병합하는 식으로 진행) 서로 코드를 공유하고 best practice 선정하기 (어떤 코드가 좋을 지, 어떻게 더 개선할 수 있을 지, 스택 선정 사유 등) [느낀 점] 1. git CLI 및 컨벤션 프로젝트를 여러 번 진행했고 3명 이상의 FE 취준생들과 같이 github으로 작업을 했음에도 불구하고 막상 다시 브랜치를 분기해서 PR을 올리고 PR형식과 commit 형..

찾게된 이유: checkout 을 할 때, 변경사항이 있다면 다른 브랜치로 체크아웃이 안된다. 또한, 해당 브랜치에 내 로컬의 변경 사항을 commit하려고 할 때, 원격저장소(gitHub)에 변경사항이 있다면 pull을 한 뒤, commit 해야 한다. => 사실 이 경우에는 그냥 pull 한 뒤, 내 파일들과 같이 commit하면 된다. (커밋과 풀의 순서만 바뀐 것뿐) 위와 같은 상황에서 아예 변경사항을 원래 상태로 되돌리고 싶을 때 아래의 명령어를 사용해주면 된다. 나는 restore . 명령어를 통해서 기존에 작업했던 것들을 모두 이전 상태로 되돌린 다음 pull 명령어를 실행시켜주었다. (이유: css 작업하다가 결국 내가 원하는 모양이 안나와서 변경파일들을 그냥 다 이전상태로 되돌리고 싶었다..

컴포넌트 기본 구조 컴포넌트 명의 폴더 ├─ index.tsx # 화면에 보여질 컴포넌트 ├─ styles.tsx # emotion(CSS in JS)으로 만들어진 UI 파일 프로젝트 폴더 구조 및 파일별 기능 설명 👩‍🦰 폴더 설명 components - 페이지를 구성하는 작은 단위의 컴포넌트를 모아놓은 폴더(기능 별 구분) contexts - 전역으로 공유되는 값들을 담은 context폴더 투두리스트 컨텍스트, 권한 컨텍스트 hooks - 커스텀 훅을 모아놓은 폴더 pages - 라우팅의 기준점이 되는 페이지 컴포넌트를 모아놓은 폴더 typings - 공유 타입들 정의 폴더 utils - 독립적인 기능을 모아놓은 폴더 axios 인스턴스, 유효성 검사 로직 👩‍🦰 구현 기능 라우팅 URL별 페이지 생..

websocket 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 프로토콜, HTTP와 구별된다. 간단히 말하면 서버와 클라이언트 간의 메세지 교환을 위한 통신 규약(프로토콜) 웹 소켓의 특징 양방향 통신(full-duplex) 데이터 송수신을 동시에 처리할 수 있는 방법 통상적으로 HTTP 통신은 client 가 요청을 보내는 경우에만 Server가 응답을 하는 단방향 통신이지만, 웹 소켓은 양방향 통신이 가능하다. 실시간 네트워킹(Real Time Networking) 웹 환경에서 연속된 데이터를 빠르게 노출하는 것 e.g.) 채팅, 주식 소켓 이전의 통신 방식 1. Polling(폴링) 웹 소켓이 나오기 전의 통신 방식으로는 폴링(polling)방식을 사용하였다. [개념] 일정한 주기로 서..

표준 함수 문자열 함수 #include 헤더 파일 추가해야 문자열 함수 사용 가능 1. strcat(String Concatnate) 문자열끼리 연결하는 함수 strcat(dest ,src) : src 문자열을 dest 문자열 뒤에 붙인다. dest + src strncat(dest, src, maxlen): src의 문자열에서 maxlen의 개수만큼 dest문자열 뒤에 붙임 dest 문자열은 해당 함수를 사용하여 문자열이 늘어나면 원본도 변하는 거 같음 2. strcpy(String Copy) 문자열 복사하는 함수 strcpy(dest, src) src의 문자열을 dest 문자열에 복사 (덮어쓰기 개념) strncpy(dest, src, maxlen) : src 문자열에서 maxlen 의 개수만큼 de..

🛠사용 스택: typescript + craco(웹팩 설정 override) + CRA 사용 🛠상세: 리액트 18 버전, 리액트 라우터 돔 6버전 이상, 타입스크립트 4버전 이상 🛠운영체제: 윈도우 [문제 상황] vercel로 github과 연동된 SPA프로젝트를 배포하려고 했다. 배포는 성공했으나 페이지 접속 시, 리액트 라우터로 url을 변경하면 동작이 되지 않았다. 예를 들어, 헤더에 포함된 Link to="/path" 가 동작하지 않았다는 것이다. 대신에 새로고침을 하면 해당 경로의 페이지가 렌더링됐었는데 이유를 짐작하기 어려웠다. [문제 원인 분석] 1. 타입스크립트가 JS로 변환되지 않아서 발생하는 문제일 것이다. 배포된 사이트의 소스를 확인해보니 JS로 컴파일된 형태가 아니라 TS문법으로된 ..

최근에 CRA없이 webpack을 직접 설정하거나 Vite를 사용했기 때문에 CRA의 경우는 따로 webpack 설정을 해본 적이 없다. 또한, CRA는 따로 보일러 플레이팅 작업을 하지 않아도 이미 세팅되어 있기 때문에 여기서 더 건들이는 것보단 있는 그대로 사용한 경우가 대다수였다. 이번에 원티드 사전 과제를 진행하면서 프로젝트 조건으로 CRA 사용이 있었고 여기서 나는 typescript를 적용했기 때문에 웹팩과 타입스크립트 config만 수정해주면 된다고 생각했다. 하지만, CRA를 사용하면서 웹팩의 config는 본적이 없다. 그 이유는 CRA에 설정파일이 숨겨져 있기 때문이다. CRA는 내부적으로 프로젝트 디렉토리를 간결하게 유지하기 위해 웹팩 설정(webpack config)나 script ..