일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 웹 성능 최적화
- tanStack Query
- 코드리뷰
- 프라미스체이닝
- 비동기 요청 처리
- html
- 국제화(i18n)
- JavaScript
- 자바스크립트
- css
- 자바스크립트공부
- fe
- 패키지 스크립트
- React
- #프론트엔드개발
- jsx
- 퍼포먼스 최적화
- 웹개발
- 웹 성능
- 비동기프로그래밍
- 리액트 기초
- 컴포넌트
- 상태 관리 라이브러리
- 풀스택 개발
- 동적 웹 페이지
- 프론트엔드
- dom
- Promise
- Node.js
- 웹 개발
- Today
- Total
목록All (71)
sodol-dotcom

𝜗𝜚 Intro서류처리가 끝나고 오늘부터 강의를 들을 수 있게 되었다. 급하게 시작했지만 지난 월,화,수,목은 주말에 다 보완해보도록 하겠다! 𝜗𝜚 Mission[미션 1] 웹개발 용어 정리스레드(Thread, 쓰레드)프로세스의 실행 단위 중 하나(CPU에서 실행되는 단위)프로세스가 동시에 여러 작업을 수행할 수 있게 하기 위한 방법으로 등장 하였음멀티스레드(Multi Thread, 멀티쓰레드)하나의 프로세스 안에 여러 개의 스레드가 있는 것하나의 프로그램에서 두가지 이상의 동작을 동시에 처리하도록 하기 위함스레드 간 자원 공유가 가능해서 자원의 효율적인 활용이 가능해지고 시스템 자원 소모가 줄어드는 장점이 있음도메인(Domain)웹사이트에 엑세스하는데 사용되는 인터넷 주소, 사람이 쉽게 기억하..

𝜗𝜚 Mission[미션 1] 웹개발 용어 정리HTML, CSS, JavaScript는 각각 어떤 차이가 있나요?HTML은 웹페이지의 뼈대를 만드는 언어이다. 예를 들어, 글씨나 이미지, 버튼 등 웹페이지에 보여줄 내용을 정의한다.CSS는 이 HTML로 만든 뼈대에 디자인을 입히는 역할을 한다. 색깔, 글자 크기, 배치 등을 조정해서 예쁜 웹페이지를 만든다.JavaScript는 웹페이지에 동적인 기능을 추가합니다. 버튼을 눌렀을 때 반응하거나, 사용자 입력에 따라 화면이 바뀌는 등의 역할 한다.JavaScript 기초문법 5가지를 간단하게 설명해주세요. 변수 선언: 데이터를 저장할 때 `let`, `const`, `var` 키워드를 사용해 변수를 만든다.조건문: if 문을 사용해 특정 조건이 참일 때..

𝜗𝜚 Mission[미션 1] 웹개발 용어 정리서버(Server) vs. 클라이언트(Client)상대적 개념으로 서버는 주는 쪽(서비스 제공자), 클라이언트는 요청하는 쪽(서비스 요청자)클라이언트: 서버에서 받은 서비스를 사용하는 사용자. 장치 또는 프로그램이 될 수 있다. 클라이언트 장치: 최종 사용자가 웹에 접속하는데 사용하는 시스템 (예: 데스크톱, 노트북, 스마트폰, 태블릿 등)클라이언트 프로그램: 웹 브라우저서버: 네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템프론트엔드(Front-end) vs. 백엔드(Back-end)프론트엔드 우리 눈에 보이는 영역을 개발사용자 인터페이스(UI) 개발: 사용자의 경험에 맞춰 서비스를 개발하여 최적의 인터페이스를 갖추도록 하는 일을 함React, A..

TypeScript는 기본적으로 파일을 글로벌 스코프(전역 공간)로 인식한다. 그래서 변수나 함수가 다른 파일에서 중복으로 사용될 경우 충돌할 수 있다. 해결 방안으로 아래 두가지 방법이 있다. 1. 각 파일에 `export {};`추가하기이 방법은 각 TypeScript 파일의 맨 아래에 `export {};`라는 코드를 추가하는 것이다.이 코드를 넣으면 TypeScript가 해당 파일을 모듈로 인식한다.하지만 모든 파일에 이 작업을 일일이 추가해야 하므로, 관리가 번거롭다. 2. `tsconfig.json`에서 `"moduleDetection": "force"` 설정하기`tsconfig.json` 파일은 TypeScript의 설정을 관리하는 곳이다. 여기서 `"moduleDetection": "f..

자바스크립트에서는 모듈 시스템을 통해 코드를 분리하고, 필요한 부분만 불러와 사용할 수 있다.모듈 시스템은 특히 규모가 커진 프로젝트에서 코드를 관리하고 재사용하는 데 매우 유용하다. 웹 개발에서 자주 사용되는 두 가지 주요 모듈 시스템이 있다. CommonJS와 ES 모듈(ESM) 시스템이다. 1. CommonJS(CJS)CommonJS는 주로 Node.js 환경에서 사용하는 모듈 시스템이다. 서버사이드 자바스크립트에서 널리 사용되고, 코드를 모듈로 분리하고 가져오는 방법을 제공한다.(CommonJS가 서버에서 실행되는 자바스크립트 코드에서 널리 사용한다는 말. 쉽게 말해, 브라우저가 아닌 서버에서 자바스크립트를 사용할 때 CommonJS가 많이 쓰인다는 것이다.)특징 :`require`로 모듈 가져..

서버사이드를 쉽게 설명하면, 웹 애플리케이션에서 서버에서 일어나는 일이라고 생각하면 된다.웹사이트를 사용하다 보면 로그인, 회원가입, 상품 검색 등 여러가지 기능을 사용하게 되는데 이때, 사용자가 요청한 작업을 처리하고 데이터를 보내주는 부분이 서버사이드이다.1. 서버사이드의 역할서버사이드는 웹 서버에서 실행되는 코드로 주로 다음과 같은 일을 한다.데이터 처리: 사용자가 입력한 데이터를 받아서 계산하거나 가공해 준다.(예: 사용자가 로그인할 때, 서버에서 입력한 아이디와 비밀번호를 확인하고, 맞는지 검증하는 작업)데이터베이스와 연결: 서버는 데이터베이스와 연결되어, 사용자 정보나 상품 목록 같은 데이터를 저장하거나 불러온다.(예: 쇼핑몰에서 상품 검색을 할 때, 서버가 데이터베이스에서 해당 상품 목록을 ..

0. 들어가기 전에TypeScript로 프로그래밍하기 위해 필요한 개발 환경 설정부터 패키지 설치, 코드 작성, 컴파일 및 실행까지의 과정을 단계별로 설명TypeScript는 자바스크립트의 슈퍼셋 언어로, 타입을 명시해 오류를 사전에 방지할 수 있는 장점이 있다. 1. 실습용 폴더 만들기먼저 프로젝트 코드를 보관할 폴더를 만든다.`onebite-typescript`라는 폴더를 만들고, 그 안에 `section1`이라는 하위 폴더 생성한다.폴더 이름은 자유롭게 정해도 되고, 포인트는 프로젝트별로 폴더를 나누어 관리하는 것. 2. Node.js 패키지 초기화하기Visual Studio Code를 열어서 위에서 만든 폴더를 열어준다.터미널을 열고 아래 명령어를 입력해 Node.js 패키지를 초기화 한다.여..

1. 문제 개요문제 제목: 문자열 가운데 글자 가져오기문제 설명: 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 2. 문제 해결 전략단계 1: 문자열 길이 확인문자열의 길이가 홀수인지 짝수인지 확인한다. 문자열 길이가 짝수면 가운데 두 글자, 홀수면 가운데 한 글자를 반환해야 하기 때문에 이를 구분하는 것이 중요하다.단계 2: 가운데 글자 위치 계산문자열의 길이에 따라 가운데 글자의 위치를 계산한다. 홀수일 경우 가운데 글자 하나를 반환하고, 짝수일 경우 가운데 두 글자를 반환한다.단계 3: 조건에 맞는 글자 변환조건에 맞게 문자열에서 필요한 글자를 추출하고 반환한다. 3. 코드 분석// 30. 가운데 글자 가져오기..

map 함수는 JavaScript의 배열 메서드 중 하나로, 배열의 각 요소에 대해 특정 작업을 수행하고 그 결과로 새로운 배열을 만들어준다.초보자가 이해하기 쉽게 구조와 사용 방법을 보면, 1. map 함수의 구조const newArray = originalArray.map((element, index, array) => { // 작업을 수행하고 반환할 값})originalArray(원본 배열)map 함수를 호출하는 배열. 이 배열의 각 요소에 대해 작업을 수행한다.예를 들어, const numbers = [1, 2, 3] 가 원본 배열이다.newArray(새로운 배열)map 함수가 반환하는 새로운 배열. 이 배열은 원본 배열의 각 요소에 대해 수행한 작업의 결과로 만들어진다.예를 들어, numbers..

1. 문제 개요문제 제목: 제일 작은 수 제거하기문제 설명: 주어진 정수 배열에서 가장 작은 수를 제거한 배열을 반환합니다. 만약 배열이 비거나 요소가 하나뿐인 경우에는 -1을 포함한 배열을 반환해야 합니다. 2. 문제 해결 전략단계 1: 배열의 길이가 1 이하인지 확인한다. 이 경우에는 `[-1]`을 반환한다.단계 2: 배열에서 가장 작은 수를 찾는다.단계 3: 찾은 가장 작은 수를 배열에서 제거하고, 수정된 배열을 반환한다. 3. 코드 분석function solution(arr) { // 배열이 비었거나, 요소가 하나라면 -1 반환 if (arr.length num !== minValue);}3-1) 메소드 및 함수 설명메소드/함수 이름: `Math.min()`용도: 주어진 숫자들 중..