전체 글11 [NPM] 프로젝트 생성 프론트엔드 개발에 Node.js가 필요한 이유 1. 최신 스택으로 개발할 수 있다: 자바스크립트의 발전 속도에 비해 브라우저의 지원 속도가 늦기 때문에, 두 사이의 간극을 채워줄 바벨, 웹팩, NPM 같은 기술이 필요하고 이를 사용하기 위해서 Node.js 환경이 필요함. 2. 또한 TS, SASS와 같은 고수준 프로그래밍 언어를 사용하기 위한 트랜스파일러 역시 Node.js 환경이 필요함. 3. 빌드 자동화: 개발 이외의 후속 작업이 많아지고 있는 추세에서 빌드 과정을 거치는데 Node.js가 필요함. 라이브러리 의존성 해결, 각종테스트 자동화에도 사용함. 4. 개발 환경 커스터마이징: 직접 개발 환경을 구축해야할 때 Node.js 지식이 필요함. NPM으로 프로젝트 생성하기 npm init 으로 프로.. 2024. 4. 8. [TS] 1. Why TS? 1. 타입 스크립트를 공부하는 이유? - more productive - type safety 2. type safety를 통해 얻을 수 있는 것? - minimize runtime error 3. type safety가 보장되지 않을 때? - JS는 굉장히 유연한 언어이기 때문에, 사용자(개발자)에게 에러를 보여주지 않기 위해서 매우 노력함 - 그래서 아예 잘못된 연산에 대해 오류를 보여주지 않아서, 잘못을 시정할 기회가 없어짐. - Runtime error: 프로그램이 실행 중에 발생하는 오류. 즉, 코드가 실행되는 도중에만 일어나며, 개발자가 예상하지 못한 상황 대문에 발생함. 2024. 4. 8. [CS] 2주차: 1.2. 프로그래밍 패러다임 프로그래밍 패러다임: 프로그래밍 관점을 갖게 해주는 역할을 하는 개발 방법론 - 선언형, 명령형으로 나뉨 - 선언형의 하위 집합은 함수형 - 명령형의 하위 집합은 객체 지향형, 절차 지향형 선언형 declarative programming: - 무엇을 풀어내는가에 집중 - 프로그램은 함수로 이루어진 것 - 함수형 프로그래밍은 선언형 패러다임의 일종 함수형 프로그래밍: - 순수 함수들을 블록처럼 쌓아 로직을 구현, 고차함수를 통해 재사용성을 높인 프로그래밍 패러다임 - 자바스크립트가 이에 속함 고차 함수: - 함수가 함수를 매개변수로 받아 로직을 생성할 수 있는 것 - 고차함수를 쓰기 위해서는 해당 언어가 일급 객체라는 특징을 가져야함 일급 객체 - 변수나 메서드에 함수를 할당할 수 있음 - 함수 안에 함.. 2024. 3. 27. [CS] 3주차: 2-1. 네트워크 기초 ~ 2-3. 네트워크 기기 네트워크: 노드(node)와 링크(link)가 서로 연결되어 리소스를 공유하는 집합을 의미 - 노드: 서버, 라우터, 스위치 등 네트워크 장치 - 링크: 유선 또는 무선 좋은 네트워크란: 많은 처리량을 처리할 수 있으며 지연 시간이 짧고 장애 빈도가 적으며 좋은 보안을 갖춘 네트워크 1) 처리량 throughput: - 링크 내에서 성공적으로 전달된 데이터의 양. 보통 얼만큼의 트래픽을 처리했는지를 나타냄. 즉, 많은 트래픽 = 많은 처리량. - bits per second, bps를 단위로 사용함. 초당 전송 또는 수신되는 비트수. - 트래픽, 네트워크 장치 간의 대역폭, 네트워크 중간에 발생하는 에러, 장치의 하드웨어 스펙에 영향을 받음. - 트래픽: 특정 시점에 링크 내에 흐르는 데이터의 양을 의미.. 2024. 3. 27. SEO 효과를 높이기 위한 개발자의 접근과 시행착오 (1): 📍사이트맵 (sitemap.xml)의 동적 생성 SEO 효과를 높이기 위한 개발자의 접근과 시행착오 (2): 사이트맵 (sitemap.xml)의 동적 생성 사이트맵 적용을 위해 공부한 내용과 프로젝트 적용 과정을 정리한 것입니다. 잘못된 정보가 있을 경우, 댓글로 알려주세요! 📍사이트맵(Sitemap.xml)이란? - 사이트맵은 검색 엔진이 웹사이트의 페이지를 더 잘 이해하고 크롤링할 수 있도록 도와주는 파일이다. - 보통 기술적(Technical) SEO 영역에 속한다고 본다. - 기본적으로 XML 형식을 사용하여 다음과 같이 작성한다. http://www.example.com/ 2022-01-01 daily 1.0 http://www.example.com/about 2022-01-10 monthly 0.8 - 특정 페이지의 사이트맵을 확인하고 싶다.. 2024. 3. 4. meta name="csrf-param" 태그는 뭘까? meta name="csrf-param" 태그는 뭘까? SEO를 잘 활용한 웹사이트들을 스터디하면서 우리 회사 페이지에 벤치마킹하는 작업을 하고 있다. 오늘은 당근의 태그들을 구경하면서 처음 보는 태그가 나와서 정리해본다. 해당 태그는 아래와 같다. 1. CSRF란? csrf는 Cross-Site-Request-Forgery의 줄임말로 사용자가 서버에 의도하지 않은 공격을 하게 되는 위조 요청의 줄임말이다. 위키피디아의 CSRF의 설명은 다음과 같다. Cross-site request forgery, also known as one-click attack or session riding and abbreviated as CSRF (sometimes pronounced sea-surf) or XSRF, i.. 2024. 2. 12. [누구나 자료구조와 알고리즘 01] 1. 자료 구조가 중요한 까닭 본 포스팅은 해당 책을 읽고 공부한 내용을 정리하였습니다. 자료 구조가 중요한 까닭 1. 자료구조: 데이터를 조작하는 방법 2. 코드가 자료 구조와 상호작용하는 일반적인 방법: 연산 읽기: 자료 구조 내 특정 값의 위치 파악 검색: 자료 구조 내에서 특정 값을 찾아내는 것 삽입: 새로운 값을 추가 삭제: 값을 제거 3. 단순히 데이터를 조작하는 방법 자체가 중요한 것이 아니라, 데이터 조직이 코드의 실행속도에 미치는 영향이 크다는 것을 아는 것이 중요함 4. 연산 속도가 얼마나 빠른가 하는 것은 단순히 시간 관점에서 보는 것이 아니라, 얼마나 많은 단계를 거치는지가 중요함 5. 연산의 속도 측정 = 연산의 시간 복잡도 [배열] 6. 읽기: 배열 내 특정 인덱스에 어떤 값이 들어 있는지 찾아보는 것 컴퓨터.. 2024. 1. 30. [next.js] next.js에서 환경 변수 사용하는 방법 next.js(React)에서 환경 변수 사용하는 방법 `환경 변수`는 API키와 같은 민감한 정보 = 리모트에 올라가서 공유되면 안되는 정보를 코드베이스에 직접 포함시키지 않고 사용할 수 있도록 해주는 설정이다. 보안을 강화하는 동시에, 또한 값이 변경될 경우에 변경이 용이해 유지 보수에도 좋아서 반드시 사용법을 알고 있는 것이 좋다. 환경 변수 할당하는 방법 사용할 환경 변수를 `.env` 파일에 - React의 경우,`REACT_APP_` 접두사를 사용하여 할당한다. - Next.js의 경우, `NEXT_PUBLIC_` 접두사를 사용하여 할당한다. REACT_APP_API_KEY = YOUR_API_KEY NEXT_PUBLIC_API_KEY = YOUR_APY_KEY 환경 변수 사용하는 방법 환경변.. 2024. 1. 18. [JS] 0. 자바스크립트란? 이 포스팅은 자바스크립트 강의를 들으며 복습한 내용을 정리한 것입니다. JavaScript 자바스크립트란? 브라우저에서 동작하는 프로그래밍 언어 현재는 Node.js를 통해 브라우저 외의 환경에서도 동작시킬 수 있음 Node.js 구글 V8 JS 엔진으로 빌드된 JS runtime environment 브라우저의 JS engine에서만 동작하던 JS를 브라우저 이외의 환경에서도 동작할 수 있도록 JS engine을 독립 HTML, CSS와 함께 웹을 구성하는 요소 중 하나 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 가볍고, 번역되는, 실시간 적용의 1급 함수 기능 웹페이지를 위한 언어이지만, 브라우저가 아닌 컴퓨터 환경에서도 사용이 가능 (Node.js, Apache, CouchDB, Adobe A.. 2024. 1. 5. 이전 1 2 다음
