본문 바로가기

JavaScript45

[세미나] HTML, CSS, JavaScript개념 사내에서 진행했던 세미나 발표 자료, 스크립트 정리1. 웹의 역사와 세 가지 핵심 기술의 탄생1.1 웹의 탄생1990년: 팀 버너스-리가 최초의 웹 브라우저이자 편집기인 월드 와이드 웹을 개발.1991년: 팀 버너스-리는 첫 번째 웹사이트를 공개, HTML과 하이퍼링크 개념을 설명.1.2 웹의 발전과 세 가지 기술의 등장HTML: 1991년, 웹 페이지의 구조화와 정보 연결을 위한 마크업 언어로 등장.CSS: 1996년, 웹 페이지의 레이아웃과 디자인을 담당하는 기술로 도입.JavaScript: 1995년, 웹 페이지에 동적인 기능과 사용자 상호작용을 추가하는 언어로 도입.2. HTML2.1 HTML의 정의와 개념HTML: HyperText Markup Language의 약자, 웹 페이지의 구조와 내용을.. 2024. 8. 9.
[TIL] Vite-React-Eslint Prop-Types 검사 에러 없애기 프로젝트 프론트 테스트 중 Vite로 구축한 React 환경에서 컴포넌트에 props를 넘기는데'error' is missing in props validationeslintreact/prop-types위 에러가 계속 나서 내가 처음에 타입스크립트로 잘못 선택했나 싶었는데 에러창을 잘 살펴보니 eslint 에서 문제가 있는 것 같아 찾아봤다. 이유는 vite로 프로젝트 구축할 때 자동으로 생성되는 .eslintrc.cjs 파일의 extemds 부분에 있는 "plugin:react/recommended" 가 문제였다. 이 설정은 React 컴포넌트에서 PropTypes를 사용하여 props의 타입을 검사하도록 권장해서 PropTypes를 정의하지 않았을 때 경고 또는 오류를 발생시킨다고 한다. (출처 Ch.. 2024. 6. 14.
[백준] 1934번: 최소공배수 (JavaScript, node.js) [백준] 1934번: 최소공배수 (JavaScript, node.js)https://www.acmicpc.net/problem/1934https://github.com/jwc406/algorithm_Solving/tree/main/%EB%B0%B1%EC%A4%80/%EC%B5%9C%EC%86%8C%EA%B3%B5%EB%B0%B0%EC%88%98 algorithm_Solving/백준/최소공배수 at main · jwc406/algorithm_Solving알고리즘 풀이 저장소입니다. Contribute to jwc406/algorithm_Solving development by creating an account on GitHub.github.com let input = require("fs").readFi.. 2024. 5. 27.
[뉴딜IT인턴] 9일차 - 자바스크립트 서버 프레임워크(NodeJS) 실습 1. Node.js란?웹 브라우저 바깥에서(윈도우, 리눅스, macOS 등) 자바스크립트 코드를 실행할 수 있는 자바스크립트 런타임 환경자바스크립트 런타임 환경웹 브라우저 환경에서는 웹 페이지에 대한 사용자 인터페이스를 만들고, 사용자와의 상호작용을 관리하며, 웹 서버와의 통신을 처리하는데 사용됩니다. 브라우저의 자바스크립트 런타임 환경은 DOM(Document Object Model), 웹 API (예: Fetch API, Web Storage API 등), 이벤트 루프 및 콜 스택과 같은 요소를 포함합니다.따라서 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 특정 컨텍스트를 제공하며, 코드가 어떻게 실행되고, 어떤 API가 사용 가능한지, 코드가 어떻게 스케줄링되고 관리되는지 등을 결정합니다.. 2024. 5. 20.
[프로그래머스] 바탕화면 정리 (JavaScript) https://school.programmers.co.kr/learn/courses/30/lessons/161990?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.krfunction solution(wallpaper) { let fileLocation = []; // 파일 위치 배열 for(i=0; i{ xValues.push(coord[0]); yValues.push(coord[1]); }) const minX = Math.min(...xValues); const minY =.. 2024. 5. 14.
[React, JavaScript] ChatGPT 질의응답 - styled-components와 JavaScript 표현식 styled-components에 대해서 공부하다가 props 사용 중에 해당 문법이 어떻게 동작하는지 궁금해져서 물어봤다.딥다이브 스터디 할 때 분명 배운 것들인데 또 헷갈린다 ㅠㅠ역시 JavaScript에 대해서 잘 알아야 하겠다...  Q1. background-color: ${(props) => props.bgColor}; 이런 식으로 css 코드에서 $과 {}를 사용하는 이유와 동작 방식이 궁금해A1. styled-components에서 CSS 코드 내에서 $와 {}를 사용하는 것은 JavaScript 표현식을 문자열 템플릿(template literals) 내에 삽입하기 위한 ES6(ES2015) 문법의 일부입니다. 이러한 문법은 태그된 템플릿 리터럴(tagged template litera.. 2024. 1. 17.
[프로그래머스] 문자열 내림차순으로 배치하기 (JavaScript) https://school.programmers.co.kr/learn/courses/30/lessons/12917 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { return s.split("").sort().reverse().join(""); } 코드 해설 - 입력받은 s 문자열을 split("")를 통해 하나씩 나누어 배열로 변환해 준 후, sort()를 통해 유니코드 순서대로 정렬 (유니코드 상 대문자가 앞순서이므로, 만약 acdbeB였다면 Bedcba로 정렬됨) - reverse()를 통해 뒤집어 정렬 (ab.. 2024. 1. 17.
[프로그래머스] 문자열 내 마음대로 정렬하기 (JavaScript) [프로그래머스] 문자열 내 마음대로 정렬하기 (JavaScript) https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(strings, n) { return strings.sort((a, b) => { const charA = a[n]; const charB = b[n]; if (charA === charB) { return a.localeCompare(b); } return charA.localeCompare(ch.. 2024. 1. 17.
[리액트 숙련주차] 2-21~23 비동기 프로그래밍 2-21 비동기 프로그래밍 입문 1. 동기 방식과 비동기 방식 동기적(synchronous) 방식 - 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 - 일반적 프로그래밍 세계에서 코드는 모두 동기적으로 실행됨 비동기적(not synchronous) 방식 - 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 - setTimemout, addEventListner 등 - 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 - 대표적으로 서버 통신과 관련된 로직들을 포함함 ex) 중식집에서 배달 후 배달원이 다먹을때까지 기다렸다가 그릇을 회수하지 않고, 다른 집도 갔다가 다시 찾으러 오는 것과 비슷함 2. 콜백지옥 - 콜백함수를 익명함수로 전달하는 과정이 반복.. 2023. 7. 11.
[TIL] 230707 - CS 스터디 질문 제출, Lv.3 과제 진행, JS스터디 오늘 한 일 - CS 스터디 질문 제출 - Lv.3 과제 진행 - JS 스터디 - CS 스터디 알고리즘 풀이 - 깃허브 레포 합치기 CS 스터디 질문 키워드 1 : 자료의 표현 1. 질문 : ASCII와 유니코드&UTF-8에 대해 서술해주세요. 아스키코드 (ASCII)는 영문 알파벳과 일부 특수문자를 표현하기 위한 7비트 인코딩 방식입니다. 유니코드는 전 세계 모든 문자를 표현하기 위한 코드 체계입니다. UTF-8은 유니코드를 인코딩하는 방식 중 하나이며, 아스키 코드와 유니코드 문자를 호환 하면서 효율적인 인코딩을 제공합니다. 1-1. 꼬리질문 : 위의 인코딩 방식이 사용 되는 예시에 대해 설명해주세요. 아스키 코드는 이메일 주소와 파일명에서 사용 되고, 유니코드는 멀티언어 문서 및 웹 페이지에서 사용.. 2023. 7. 8.
[TIL] 230701 - 리액트 숙련주차 수강, 스터디 발표 오늘 한 일 - 리액트 숙련주차 React Router Dom 까지 수강 - vscode 리액트 익스텐션 설치 - 스터디 발표 리액트 관련 vscode 익스텐션 1. Auto Import - ES6, TS, JSX, TSX - 사용 가능한 모든 가져오기에 대한 코드 작업 및 코드 완료를 자동으로 찾아 구문 분석하고 제공합니다. (익스텐션 공식설명) - 자동으로 컴포넌트나 파일의 import 해주는 익스텐션 - 맨날 임포트 치기 귀찮았는데 짱짱 편함 2. Reactjs code snippets - 형식 자동 입력 스니펫 - 함수형 컴포넌트 만들 때 : rfc - 화살표형 컴포넌트 만들 때 : rsc - 다른 것도 많던데 참고해서 적절히 사용하면 좋을 듯 https://breathtaking-life.tis.. 2023. 7. 6.
[리액트 숙련주차] 2-12~18 Redux 2-12 Redux 소개 1. 리덕스가 필요한 이유 - 리덕스란? 상태 관리 라이브러리 - useState의 불편함 : prop-driling - state를 공유하고자 할 때, 부모 관계가 아니여도 되고 중간 컴포넌트를 거치지 않아도 됨 - 자식에서 만든 state를 부모에서도 사용할 수 있게 해 줌 => 즉, 중앙 데이터 관리소 (context API vs Redux context는 상위 컴포넌트의 값 하나만 바뀌어도 하위가 모두 렌더링되어야 하는 단점 有) 2. Global state, Local state - Local state 지역 상태란? 컴포넌트에서 useState를 이용해서 생성한 state - Global state 전역 상태란? 중앙화 된 특별한 곳에서 생성됨. 중앙 state 관리소.. 2023. 6. 30.

티스토리툴바