-
[React/TypeScript] Input의 event.target.value을 string이 아닌 특정 타입으로 명시할 수 있을까?
안녕하세요. 캡스톤 프로젝트 중 경험한 Trouble Shooting을 공유해보고자 글을 작성하게 되었습니다! 다들 구글 폼, 네이버 폼과 같은 서비스를 많이 이용해보셨을까요?현재 진행 중인 캡스톤 프로젝트에서 학생들에게 행사 참여 신청를 받기 위한 폼 (설문) 서비스를 제공하기 위해, 폼 생성 페이지를 직접 만들게 되었는데요.폼 생성 페이지에서는 많은 이벤트들(추가, 삭제, 수정 등)이 이루어지므로, 이에 따라 여러 Input 컴포넌트들의 상태를 업데이트해줘야 해서 신경 쓸 부분이 많은 페이지라 볼 수 있습니다. 타입스크립트까지 이용한다면 Type Guard까지 신경써줘야 하는데요🥲 폼 생성 페이지에서는 useState로 관리되는 questionList를 맵핑하여 질문 박스 컴포넌트들을 렌더링합..
-
[CS/네트워크] 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어날까?
IT 개발자 필수 상식인 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어나는지에 대하여 정리해보겠습니다. 과정1. 리다이렉트 → 2. 캐싱 → 3. DNS → 4. IP 라우팅 → 5. TCP 연결 구축 → 6. TTFB (Time to First Byte) 시작 → 7. 컨텐츠 다운로드 → 8. 브라우저 렌더링 → 9. 네이버 화면 표시 🥳 단계별 설명1. 리다이렉트먼저 리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다.2. 캐싱캐싱 단계에서는 해당 요청의 캐싱 가능 여부를 파악합니다.캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며, 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다.캐싱: 요청된 값의 결과..
-
[JS Deep Dive] 16. 프로퍼티 어트리뷰트
16장 프로퍼티 어트리뷰트 (1) 내부 슬롯과 내부 메서드 프로퍼티 어트리뷰트 이해하기 위해 필요한 개념 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMA 사양에서 사용하느 의사 프로퍼티와 의사 메서드 ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들 [[ . . . ]] ECMAScript 사양에 정의된 대로 구현 → 자바스크립트 엔진에서 실제로 동작 🔔 개발자가 직접 접근할 수 있도록 공개된 객체의 프로퍼티 ❌ 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직 ⇒ 원칙적으로 직접 접근 · 호출 방법 제공 ❌ 일부 내부 슬롯과 내부 메서드에 한하여 간접적 접근 수단 제공 (ex) 모든 객체는 [[Prototype]]이라는 내부 슬롯 가짐 내부 슬롯은 자바스크립트 엔진의 내부..
-
[JS Deep Dive] 15. let, const 키워드와 블록 레벨 스코프
var 키워드로 선언한 변수의 문제점(1) 변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언 가능초기화문 유무에 따라 다르게 동작초기화문 有: 자바스크립 엔진에 의해 var 키워드 없는 것처럼 동작 (var x = 10;)초기화문 無: 무시됨 (var x;)(2) 함수 레벨 스코프var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정⇒ 함수 외부에서 var 키워드로 선언한 변수 → 코드 블록 내에서 선언해도 모두 전역 변수var x = 1; if (true) { // 코드 블록 안이지만 함수 외부이므로 전역변수 x 중복 선언 var x = 10; } console.log(x); //10(3) 변수 호이스팅var 키워드로 변수 선언 → 변수 선언문이 스코프의 선두로 끌어올..
-
[JS Deep Dive] 14. 전역 변수의 문제점
무분별한 전역변수 사용 지양해야 함 (1) 변수의 생명 주기 선언에 의해 생성 → 할당을 통해 값 가짐 → 소멸 자신이 선언된 위치에서 생성되고 소멸함 전역 변수의 생명 주기= 애플리케이션의 생명 주기 함수 내부에서 선언된 지역변수= 함수 호출시 생성 → 함수 종료시 소멸 = 함수의 생명주기와 같음 💡 전역 변수 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행됨 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행됨 함수 내부에서 선언한 변수 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행됨 (변수 먼저 선언되어 undefined로 초기화된 후 함수 몸체를 구성하는 문들이 순차적으로 실행되기 시작할 때 변수 할당문..
-
[JS Deep Dive] 13. 스코프
스코프 (유효범위)자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념✅모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 스코프 = 식별자가 유효한 범위 = 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 (어떤 변수를 참조할지 결정) 💡자바스크립트 엔진은 코드 실행시 코드의 문맥 고려 코드의 문맥은 렉시컬 환경으로 이루어짐 이를 구현한 것이 실행 컨텍스트 모든 코드는 실행 컨텍스트에서 평가되고 실행됨 렉시컬환경 코드가 어디서 실행되며 주변에 어떤코드가 있는지 프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함스코프 내에서 식별자는 유일해야 함다른 스코프에는 같은 이름의 ..
-
[JS Deep Dive] 12. 함수
함수일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것매개변수함수 내부로 입력을 전달받는 변수인수입력반환값출력함수호출인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시함수 호출시 코드 블록에 담긴 문들 일괄적 실행 후 반환값 반환 함수 리터럴자바스크립트의 함수 = 객체 타입의 값함수도 함수 리터럴로 생성 가능function 키워드, 함수이름, 매개변수, 함수 몸체로 구성함수 리터럴은 평가되어 값(객체) 생성함수는 객체지만 일반 객체와 달리 호출 가지며 함수 객체만의 고유한 프로퍼티 가짐함수가 객체라는 것은 다른 언어와 구별되는 중요한 특징 함수 정의함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출됨함수 표현식아래의 경우 자바스..
-
[JS Deep Dive] 11. 원시 값과 객체의 비교
원시타입 vs 객체타입 원시값 → 변경불가능한 값 / 객체(참조) 타입의 값 (객체) → 변경가능한 값 변수 할당 원시값 변수(확보된 메모리 공간)에 할당 → 실제 값이 저장됨 객체를 변수에 할당 → 참조 값이 저장됨 변수를 다른 변수에 할당 원시 값을 갖는 변수 → 다른 변수에 할당 ⇒ 원본의 원시 값이 복사되어 전달 = 값에 의한 전달 객체를 가리키는 변수를 다른 변수에 할당 ⇒ 원본의 참조 값이 복사되어 전달 = 참조에 의한 전달 원시값 변경 불가능한 값, 읽기 전용 값 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 값: 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과 원시 값 자체를 변경할 수 없다는 것 ! 변수는 언제든지 재할..
-
[Algorithm/BOJ] 04673 : 셀프넘버.js
문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다. 33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ... n을 d(n)의 생성자라..
-
[JS Deep Dive] 10. 객체 리터럴
자바스크립트 객체 기반의 프로그래밍 언어 구성 요소 대부분이 객체 원시 값 제외한 나머지 값 = 모두 객체 함수, 배열, 정규 표현식 원시 타입 vs 객체 타입 원시 타입 단 하나의 값만 나타냄 객체 타입 (object/reference type) 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 원시 값 또는 다른 객체 원시 값 (원시 타입의 값) 변경 불가능한 값 객체 타입의 값 (객체) 변경 가능한 값 객체 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 구성 요소 키(key) 값(value) 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음 함수는 일급 객체이므로 가능 프로퍼티 값이 함수일 경우 메서드라 부름 객체는 프로퍼티와 메서드로 구성된 집합체 프로퍼티: 객체의 상태를 나타내는..
-
[JS Deep Dive] 09. 타입 변환과 단축 평가
1. 타입 변환이란? 명시적 타입 변환 · 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환 · 타입 강제 변환: 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 두 타입 변환 모두 기존 원시값을 직접 변경하는 것 아님 원시값 = 변경 불가능한 값 ⇒ 변경할 수 없음 타입 변환: 기존 원시값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 2. 암묵적 타입 변환 빈 문자열, 빈 배열, null, false는 0으로 변환 true는 1로 변환 자바스크립 엔진은 불리언 타입이 아닌 값을 Truthy 값 (참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값)으로 구분함 제어문의 조건식과 같이 불리언 값으..
-
[Project/ReactTS] Chart.js로 원형 차트(Doughnut Chart) 구현
아래와 동일하게 원형 차트를 구현하고자 한다. Setting npm install chartjs npm install --save chart.js react-chartjs-2 chartjs 라이브러리를 설치한다 기본적인 DoughnutChart 컴포넌트 작성 일단 정적 데이터를 기반으로 차트를 그려봤다. 차트 컴포넌트는 'data' props를 필수적으로 포함해야 한다. 차트에 필요한 데이터는 string 배열 'labels'와 number 배열 'data'이다. 아래 예시는 ['가','나','다','라','마'] 와 [1,2,3,4,5] 로 데이터를 설정하였다. DoughnutChart.tsx import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.j..
-
[Project/ReactTS] 재사용되는 게시판 레이아웃 내 컨텐츠를 페이지별로 다르게 나타내기⚒️
리뉴얼될 총학생회 사이트는 회칙, 공지, 청원 페이지 등의 게시판 글 목록을 같은 레이아웃으로 Infinite Scroll하여 나타낸다. 이 페이지들은 레이아웃은 같아도 목록을 구성하는 컨텐츠가 각각 다르기 때문에 이를 어떻게 구현할지 고민하게 되었다.예전 같았으면 새로운 페이지를 작성할 때마다 기존 레이아웃의 코드를 복사 붙여넣기하여 몇몇 부분을 수정하였겠지만, 이번 프로젝트에서는 Atomic Pattern을 도입하기로 하여 개선해보기로 하였다!또한 이전 총학생회 사이트에서는 페이지마다 중복되는 함수들(axios(),useState()...)이 많아 수정사항이 있으면 페이지별마다 모두 바꿔야 했던 게 불편해서 이 점을 꼭 고치고 싶었다.그래서 이번에는 마음 먹고 새로운 페이지를 작성할 때 기존 레이아웃..
-
[CS/운영체제] 운영체제란?
운영체제 컴퓨터의 하드웨어를 관리하는 소프트웨어 응용프로그램들의 기반을 제공하고 컴퓨터 사용자와 컴퓨터 하드웨어 사이의 중개 역할을 함 사물 인터넷 장치를 포함하는 차와 가전제품에서부터 스마트폰, 개인용 컴퓨터, 기업 컴퓨터, 클라우드 컴퓨팅까지 어디에나 존재 현대의 컴퓨팅 환경에서 운영체제의 역할을 탐구하기 위해서는 먼저 컴퓨터 하드웨어의 조직과 구조를 이해하는 것이 중요함 여기에는 CPU, 메모리, I/O 장치 뿐만 아니라 저장소도 포함 운영 체제의 기본적인 책임은 이러한 자원을 프로그램에 할당하는 것 운영체제 역할 컴퓨터 시스템 관점 (1) 하드웨어 : 컴퓨터의 기본적인 컴퓨팅 자원을 제공함 CPU (Central Processing Unit) 메모리 I/O 장치 운영체제 하드웨어를 제어 다양한 사..
-
[eclipse/오류해결] Version 1.8.0_261 of the JVM is not suitable for this product. Version: 17 or greater is required.
Eclipse를 실행하려는데 이런 오류창이 떴다. 구글링 해본 결과, eclipse가 설치된 폴더에 있는 구성 설정 (ini) 파일을 열고 가장 위에 이 두줄을 추가해주면 된다. -vm C:\Program Files\jdk-18.0.2\bin\javaw.exe 위 경로는 사용자마다 다르니 수정이 필요할 듯하다. 아래와 같이 수정해주고 저장하니 정상적으로 실행되었다. -vm C:\Program Files\jdk-18.0.2\bin\javaw.exe -startup plugins/org.eclipse.equinox.launcher_1.6.400.v20210924-0641.jar --launcher.library C:\Users\gaeun\.p2\pool\plugins\org.eclipse.equinox.la..
-
Node.js 설치
Node.js 설치https://nodejs.org/en/왼쪽에 LTS로 다운받아서 설치한다 Node.js Setup 설치시 위 부분은 추후에 필요할 때 설치하면 되므로 체크하지 않아도 된다이 부분을 제외한 나머지 부분들은 모두 Next를 눌러주면 된다 설치 확인Window + R을 누르고 cmd에 들어간 후 node -v를 쳤을 때 아래와 같이 설치한 버젼이 알맞게 뜨면 설치 완료이다 js 파일 실행실행하려는 js 파일의 경로로 이동한다 cd 경로그리고 node 파일명.js를 입력하면 된다
-
[TypeScript] TIL #01
타입스크립트의 목적 런타임에러를 방지하기 위해, 코드를 실행하기 전에 에러를 잡아내기 위해 사용함 타입스크립트 = Stronly Typed Programming Language 그러나 브라우저는 타입스크립트가 아닌 자바스크립트를 이해하기 떄문에 자바스크립트로 코드를 변환해줘야 함 참고로 Node.js 는 JS와 TS 모두 이해할 수 있음 일단 타입스크립트 코드를 작성해서 그 코드를 컴파일하면 보호장치 없는 자바스크립트가 되지만, 만약 타입스크립트 코드에 에러가 있으면 그 코드는 자바스크립트 코드로 컴파일되지 않음 이런 보호 장치는 유저가 코드를 실행하는 런타임에 발생하는 것이 아님 자바스크립트는 타입 추론을 하기 떄문에 문제가 됨 #2.1 Implicit Types vs Explicit Types (06..
-
[ReactJS] 리액트 200제 _ ex013 ~ 015 ( 화살표 함수, forEach(), map() )
013 화살표 함수 사용하기 화살표 함수 function 대신 =>을 사용하며 retrun 문자열을 생략할 수 있음 ES6에서 등장함 콜백 함수에서 this를 bind 해야 하는 문제도 발생하지 않음 콜백함수 : 다른 코드의 인수로서 넘겨주는 실행 가능한 코드 this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자 this는 함수가 호출되는 방식에 따라 동적으로 결정됨 this 바인딩 : this를 고정시키는 것 참고 문서 https://kamang-it.tistory.com/entry/JavaScript07this-this바인드편bindcallapply import React, { Component } from "react"; class R013_ArrowFunction..
-
[ReactJS] 리액트 200제 _ ex009 ~ 012 (문자열, 변수, 전개연산자, 클래스)
009 템플릿 문자열 사용하기 ES (ECMA Script) 는 표준화된 스크립트 언어이고, 그 뒤에 붙는 숫자는 버전을 의미한다 2011년부터 ES5가 웹 표준처럼 사용되고 있고, 2015년 발행된 ES6는 자바스크립트가 따르는 기술 규격이다 React도 ES6의 모든 기능을 사용할 수 있다 `hello ${변수명} world` 문자열과 함수 합치기 위해서 백틱과 ${ }를 사용한다 startsWith() 변수 앞에서부터 일치하는 문자열이 있는지 찾는다 endsWith() 변수 뒤에서부터 일치하는 문자열이 있는지 찾는다 includes() 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단한다 return 값 자료형 = Boolean 010 var, let, const 사용하기 var : (ES5..
-
[ReactJS] 리액트 200제 _ ex006 ~ 008 (생명주기 함수)
06 getDerivedStateFromProps(props, state) 컴퍼넌트가 새로운 props를 받게 되었을 때 state를 변경해줌 constructor( ) 함수 다음으로 실행된다 App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값 가져옴 보다시피 constructor > getDerived > render 순으로 실행되었다. 07 componentDidMount( ) 생명주기 함수들 중에서 가장 마지막에 실행됨 render( ) 함수가 코드를 화면에 그려준 후 실행됨 화면 그려지는 것이 끝난 후의 이벤트 처리, 초기화 등 가장 많이 활용되는 함수임 08 shouldComponentUpdate() 생명주기 과정 중 component의 변경(prop..
-
[ReactJS] 리액트 200제 _ ex001 ~ 005
003 component: 특정 코드 뭉치를 다른 부분에 이식하거나 재 사용하기 위해 사용하는 코드 블록 단위 004 생명주기: component의 생성, 변경, 소멸 과정을 뜻함 component 생성 함수 render() constructor() getDerivedStateFromProps() componentDidMount() 005 contructor 함수가 헷갈려 검색해봤다 참고 문서 https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-컴포넌트-생명주기 https://www.javatpoint.com/react-constructor contructor(props) 컴포넌트가 실행될 때 가장 먼저 호출되는 함수 생명주기 함수 중 가장 먼저 실행됨 처음..
-
[Algorithm/BOJ] 01920 : 수 찾기.py
문제 N개의 정수 A[1], A[2], …, A[N]이 주어져 있을 때, 이 안에 X라는 정수가 존재하는지 알아내는 프로그램을 작성하시오. 입력 첫째 줄에 자연수 N(1 ≤ N ≤ 100,000)이 주어진다. 다음 줄에는 N개의 정수 A[1], A[2], …, A[N]이 주어진다. 다음 줄에는 M(1 ≤ M ≤ 100,000)이 주어진다. 다음 줄에는 M개의 수들이 주어지는데, 이 수들이 A안에 존재하는지 알아내면 된다. 모든 정수의 범위는 -231 보다 크거나 같고 231보다 작다. 출력 M개의 줄에 답을 출력한다. 존재하면 1을, 존재하지 않으면 0을 출력한다. 내 풀이 n = int(input()) fa = set(list(map(int, input().split(" ")))) m = int(inp..
-
[Algorithm/BOJ] 11399 : ATM.py
문제 인하은행에는 ATM이 1대밖에 없다. 지금 이 ATM 앞에 N명의 사람들이 줄을 서있다. 사람은 1번부터 N번까지 번호가 매겨져 있으며, i번 사람이 돈을 인출하는데 걸리는 시간은 Pi분이다. 사람들이줄을 서는 순서에 따라서, 돈을 인출하는데 필요한 시간의 합이 달라지게 된다. 예를 들어 총 5명이 있고, P1 = 3, P2 = 1, P3 = 4, P4 = 3, P5 = 2인 경우를 생각해보자. [1,2,3,4,5] 순서로 줄을 선다면, 1번 사람은 3분만에 돈을 뽑을 수 있다. 2번 사람은 1번 사람이 돈을 뽑을 때까지 기다려야 하기 때문에, 3 + 1 = 4분이 걸리게 된다. 3번 사람은 1번, 2번 사람들이 돈을 뽑을 때까지 기다려야 하기 때문에, 3 + 1 + 4 = 8분이 필요하게 된다. ..
-
[NextJS] NextJS 깃헙 페이지 배포하기 (NextJS Github Pages Deployment)
참고 영상: https://youtu.be/dalXCXCIPHM 1. VS Code Setting 먼저 아래와 같이 package.json 파일의 scripts에 "export": "next export",를 추가한다 그리고 npm run build를 터미널에 입력한다 나는 npm run build 입력했더니 오류 발생하여 https://plming.tistory.com/211 를 참고하여 오류를 해결하였다 그리고 next.config.js의 nextConfig에 다음의 코드를 추가해준다 images: { loader: "akamai", path: "", } 그리고 npm run build와 npm run export를 터미널에 입력한다 npm run export를 입력한 뒤에는 아래처럼 out 폴더가 ..
-
[NextJS] Fetching Data & Redirect & Rewrite (API Key 숨기기)
Fetching Data Redirection next.config.js의 nextConfig에 아래의 코드를 추가한다 async redirects() { return [ { source: "/contact", // user가 source로 이동한다면 destination: "/form", // 유저를 destination으로 보낸다 permanent: false, // ㄴ redirection이 영구적인지 아닌지에 따라서 // 브라우저나 검색엔진이 이 정보를 기억하는지의 여부가 결정된다 } ] } 그리고 next.config.js를 수정하였기 때문에 터미널에 npm run dev를 다시 입력해준다 그러면 localhost:3000/contact에 접속하였을 때 localhost:3000/form 주소로..
-
[NextJS] Layout & Head Component
(1) Layout Pattern Layout pattern은 많은 사람들이 NextJS를 이용할 때 따르는 아주 흔한 패턴이다. 이는 custom app component를 사용할 때 쓰이는 패턴으로 _app.js 파일이 커지도록 하는 것을 방지하기 위해 레이아웃 파일을 따로 만들어 _app.js에 넣는 것이다 사용법 먼저 Layout.js라는 react component를 만들고 children prop을 넣어준다 children이란 react.js가 제공하는 prop으로 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다 그리고 _app.js 를 을 으로 감싸준다. ./components/Layout.js import Layout from "../components/La..
-
[Python] 람다 함수
람다함수는 익명의 함수 또는 표현식으로 불린다 변수명 = lambda 매개변수 : 함수의 형식으로 작성된다 plus_two = lambda x : x+2 print(plus_two(1)) # 3 출력 람다함수는 내장함수의 인자로 사용될 때 매우 편하다 일반함수는 다음과 같이 함수를 정의해야 map 함수에 사용될 수 있는 반면에 def plus_one(x): return x+1 a = [ 1, 2, 3 ] print(list(map(plus_one, a))) # a 리스트의 원소를 각각의 매개변수로 'plus_one' 함수를 실행하고 # 그 결과를 리스트로 출력한다 # [ 2, 3, 4 ] 출력 람다 함수는 정의 없이 바로 사용 가능하다 a = [ 1, 2, 3] print(list(map(lambda x..
-
[NextJS] CSS Module & Styles JSX & Custom App Component
(1) CSS Module CSS module 사용법 1. 파일명.module.css 파일을 만든다 NavBar.module.css .nav { display: flex; justify-content: center; background-color: tomato; } 2. 생성한 module을 css를 사용하고자 하는 파일 상단에 import 하고 다음과 같이 사용한다 NavBar.js import styles from "./NavBar.module.css" export default function NavBar() { const router = useRouter() return ( Home About ) } CSS Module의 장점 css.module 형식은 클래스 이름을 추가할 때 클래스 이름을 텍스..
-
[Algorithm/BOJ] 01356 : 유진수.py
문제 유진수는 어떤 수를 10진수로 표현한 뒤 그 수를 두 부분으로 나눴을 때, 앞부분 자리수의 곱과 뒷부분 자리수의 곱이 같을 때를 말한다. 예를 들어, 1221은 유진수이다. 12와 21로 나눴을 때, 앞부분 자리수의 곱 1*2는 뒷부분 자리수의 곱 2*1과 같기 때문이다. 1236도 마찬가지로 유진수이다. 하지만, 1234는 아니다. 수를 나눌 때 항상 연속된 자리수를 나눠야하고, 각 부분에 적어도 한자리는 있어야 한다. 예를 들어, 12345는 총 4가지 방법으로 나눌 수 있다. 1-2345, 12-345, 123-45, 1234-5 어떤 수 N이 주어질 때, 이 수가 유진수인지 아닌지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 수 N이 주어진다. 이 수는 2,147,483,647보다 작거나 ..
-
[Algorithm/BOJ] 01268 : 임시 반장 정하기.py
문제 오민식 선생님은 올해 형택초등학교 6학년 1반 담임을 맡게 되었다. 오민식 선생님은 우선 임시로 반장을 정하고 학생들이 서로 친숙해진 후에 정식으로 선거를 통해 반장을 선출하려고 한다. 그는 자기반 학생 중에서 1학년부터 5학년까지 지내오면서 한번이라도 같은 반이었던 사람이 가장 많은 학생을 임시 반장으로 정하려 한다. 그래서 오민식 선생님은 각 학생들이 1학년부터 5학년까지 몇 반에 속했었는지를 나타내는 표를 만들었다. 예를 들어 학생 수가 5명일 때의 표를 살펴보자. 위 경우에 4번 학생을 보면 3번 학생과 2학년 때 같은 반이었고, 3번 학생 및 5번 학생과 3학년 때 같은 반이었으며, 2번 학생과는 4학년 때 같은 반이었음을 알 수 있다. 그러므로 이 학급에서 4번 학생과 한번이라도 같은 반..
-
[Algorithm/BOJ] 01292: 쉽게 푸는 문제.py
문제 동호는 내년에 초등학교를 입학한다. 그래서 동호 어머니는 수학 선행 학습을 위해 쉽게 푸는 문제를 동호에게 주었다. 이 문제는 다음과 같다. 1을 한 번, 2를 두 번, 3을 세 번, 이런 식으로 1 2 2 3 3 3 4 4 4 4 5 .. 이러한 수열을 만들고 어느 일정한 구간을 주면 그 구간의 합을 구하는 것이다. 하지만 동호는 현재 더 어려운 문제를 푸느라 바쁘기에 우리가 동호를 도와주자. 입력 첫째 줄에 구간의 시작과 끝을 나타내는 정수 A, B(1 ≤ A ≤ B ≤ 1,000)가 주어진다. 즉, 수열에서 A번째 숫자부터 B번째 숫자까지 합을 구하면 된다. 출력 첫 줄에 구간에 속하는 숫자의 합을 출력한다. 내 풀이 n, m = map(int, input().split(" ")) k = 1 ..
-
[Flutter] Flutter + Firebase 연동
Firebase 프로젝트 생성 1. 프로젝트 추가 후 프로젝트명 설정 2. 애널리틱스 설정 해제 3. 프로젝트 생성 완료 Flutter에 Firebase 추가 1. 안드로이드 앱 선택 2. Android 패키지 이름에 android > app > build.gradle >> android { defaultConfig }의 applicationId를 붙여 넣은 후 앱등록을 누른다 3. 다운받은 google-services.json을 아래와 같은 경로에 추가하고 다음을 누른다 4. Firebase SDK 추가 android > build.gradle에 아래와 같이 붙여 놓는다 android > app > build.gradle에 아래와 같이 붙여 넣는다 그리고 minSdkVersion을 21로 수정한다 4...
-
[Algorithm/BOJ] 01259 : 팰린드롬수.py
문제 어떤 단어를 뒤에서부터 읽어도 똑같다면 그 단어를 팰린드롬이라고 한다. 'radar', 'sees'는 팰린드롬이다. 수도 팰린드롬으로 취급할 수 있다. 수의 숫자들을 뒤에서부터 읽어도 같다면 그 수는 팰린드롬수다. 121, 12421 등은 팰린드롬수다. 123, 1231은 뒤에서부터 읽으면 다르므로 팰린드롬수가 아니다. 또한 10도 팰린드롬수가 아닌데, 앞에 무의미한 0이 올 수 있다면 010이 되어 팰린드롬수로 취급할 수도 있지만, 특별히 이번 문제에서는 무의미한 0이 앞에 올 수 없다고 하자. 입력 입력은 여러 개의 테스트 케이스로 이루어져 있으며, 각 줄마다 1 이상 99999 이하의 정수가 주어진다. 입력의 마지막 줄에는 0이 주어지며, 이 줄은 문제에 포함되지 않는다. 출력 각 줄마다 주어..
-
[Algorithm/BOJ] 01236 : 성 지키기.py
문제 영식이는 직사각형 모양의 성을 가지고 있다. 성의 1층은 몇 명의 경비원에 의해서 보호되고 있다. 영식이는 모든 행과 모든 열에 한 명 이상의 경비원이 있으면 좋겠다고 생각했다. 성의 크기와 경비원이 어디있는지 주어졌을 때, 몇 명의 경비원을 최소로 추가해야 영식이를 만족시키는지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 성의 세로 크기 N과 가로 크기 M이 주어진다. N과 M은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 성의 상태가 주어진다. 성의 상태는 .은 빈칸, X는 경비원이 있는 칸이다. 출력 첫째 줄에 추가해야 하는 경비원의 최솟값을 출력한다. 내 풀이 row, col = map(int, input().split(" ")) status = [] sec_row = 0 ..
-
[Algorithm/BOJ] 01193 : 분수 찾기.py
문제 무한히 큰 배열에 다음과 같이 분수들이 적혀있다. 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … … 3/1 3/2 3/3 … … … 4/1 4/2 … … … … 5/1 … … … … … … … … … … … 이와 같이 나열된 분수들을 1/1 → 1/2 → 2/1 → 3/1 → 2/2 → … 과 같은 지그재그 순서로 차례대로 1번, 2번, 3번, 4번, 5번, … 분수라고 하자. X가 주어졌을 때, X번째 분수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 X(1 ≤ X ≤ 10,000,000)가 주어진다. 출력 첫째 줄에 분수를 출력한다. 내 풀이 # 문제 : https://www.acmicpc.net/problem/1193 num = int(input()) cpy = n..
-
[Algorithm/BOJ] 01157 : 단어 공부.py
문제 알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다. 입력 첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다. 출력 첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다. 내 풀이 word = input().lower() num = [0] * 26 for i in word : j = int(ord(i)) - 97 num[j] += 1 maxNum = max(num) c = num.count(maxNum) if c != 1 : print("?") ..
-
[NextJS] NextJS Set up
1. cmd에 cd 경로명을 입력하여 프로젝트 생성을 원하는 공간을 지정한 후 npx create-next-app@latest을 입력하여 프로젝트를 생성한다 2. code 프로젝트명을 입력하여 vsc에서 프로젝트를 연다 3. npm run dev를 vsc 터미널에 입력하여 문제가 없는지 확인한다 4. url에 접속하였을 때 아래와 같이 뜨면 정상적으로 작동 중인 것이다 5. pages 폴더에서 index.js를 제외한 모든 파일들은 지운다 6. index.js를 페이지를 나타내는 필수적인 코드인 다음의 코드로 수정한다 index.js export default function Home() { return () } 6. next.js에서의 pages 폴더 안의 파일은 그 파일명의 url 페이지를 생성한다 ..
-
[Flutter] Trouble Shooting
1. 키보드 Toggle시 Bottom Overflowed 해결 2. Android Studio VI mode 중 insert 끝내는 법 crtl + c 누르기 3. git commit message 수정 https://velog.io/@mayinjanuary/git-커밋-메세지-수정하기-changing-commit-message
-
[Flutter] Flutter 기본 설정
프로젝트 생성 1. 'New Flutter Project' 클릭하여 프로젝트 생성 2. flutter SDK 파일 경로 설정 3. 프로젝트명 설정 ( * 띄어쓰기 없이 영어 소문자로 작성 / 띄어쓰기는 언더바로 대체 ) Git 연동 1. Git Repository 생성 2. Android Studio와 Git 계정을 연동한다 3. Android Studio의 터미널에 git init을 입력하여 프로젝트가 git의 관리에 들어가도록 설정한다 4. github 연동을 위한 첫번째 커밋을 하기 위해서 git add .와 git commit -m "feat: First Commit"을 터미널에 입력한다 5. github에 생성한 repository와 로컬 저장소를 연결하기 위하여 터미널에 아래와 같이 입력한다 ..
-
[ReactJS] Firebase Auth #02
로그인 방법 Firebase Project에 들어가 로그인 방법을 설정한다 Manage Users https://firebase.google.com/docs/auth/web/start?hl=ko 이 문서를 바탕으로 사용자를 관리한다 State Persistence 문서: https://firebase.google.com/docs/auth/web/auth-state-persistence State Persistence는 사용자들을 어떻게 기억할 수 있는지 선택할 수 있게 한다 session은 탭이 열려있는 동안에는 사용자 정보를 기억하는 것을 의미한다 local은 탭을 닫더라도 사용자 정보를 기억하는 것을 의미한다 (기본값) none은 사용자 정보를 기억하지 않는 것이다 On Auth State Chang..
-
[ReactJS] Firebase Auth #01
Firebase Auth Firebase Auth를 사용하려면 먼저 import를 해야 한다 /src/fbase.js import "firebase/auth"; /components/App.js import firebase from "../fbase" Absolute Imports 절대적인 경로로 import하려면 jsconfig.json 파일을 생성하여 아래의 형식 같이 코드를 작성하면 된다 참고: https://create-react-app.dev/docs/importing-a-component jsconfig.json ( 파일 경로가 src로부터 시작되게 설정하는 코드 ) { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } 그리고 상대적..
-
[Algorithm/BOJ] 10733 : 제로.py
문제 나코더 기장 재민이는 동아리 회식을 준비하기 위해서 장부를 관리하는 중이다. 재현이는 재민이를 도와서 돈을 관리하는 중인데, 애석하게도 항상 정신 없는 재현이는 돈을 실수로 잘못 부르는 사고를 치기 일쑤였다. 재현이는 잘못된 수를 부를 때마다 0을 외쳐서, 가장 최근에 재민이가 쓴 수를 지우게 시킨다. 재민이는 이렇게 모든 수를 받아 적은 후 그 수의 합을 알고 싶어한다. 재민이를 도와주자! 입력 첫 번째 줄에 정수 K가 주어진다. ( 1
-
[ReactJS] Router Setting
1. /src에 components와 routes 폴더를 생성한다 2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다 /src/index.js import App from './components/App'; 3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다 Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다 /src/routes/Auth.js import React from "react" const Auth = () => Auth; export default Auth; 4. npm i rea..
-
[ReactJS] Firebase 연결하기
1. https://console.firebase.google.com/u/0/?hl=ko로 이동하여 프로젝트를 만든다 2. 생성한 프로젝트에 들어가 웹 App을 생성한다 3. npm i firebase@9.6.1를 입력하여 Firebase를 설치한다 4. 아래 표시한 부분을 복사한다 5. src 폴더에 fbase.js를 생성하여 아래와 같이 입력한다 import * as firebase from "firebase/app" // 복사한 코드 붙여넣기 export default firebase.initializeApp(firebaseConfig) 6. npm run start를 했을 때 문제가 없으면 된다 7. 그리고 index.js 파일에 firebase를 import한다 import firebase fr..
-
[ReactJS/VSC] 깃헙 페이지 Deploy하는 방법
1. Repository를 생성한 후 vs 명령창에 git remote add origin https://github.com/gaeunnlee/ReactJS-Twitter-App.git을 입력한다 2. git branch -M gh-pages을 입력하여 gh-pages가 main branch가 되도록 설정한다 3. git add ., git commit -m "MESSAGE"로 변경 사항을 gh-pages branch에 commit한다 4. git push -u origin gh-pages를 입력하여 깃헙에 push한다 5. package.json 파일 밑에 깃헙 페이지 주소를 아래와 같이 추가한다 "homepage": "https://gaeunnlee.github.io/ReactJS-Twitter-Ap..
-
[Algorithm/BOJ] 01978 : 소수 찾기.py
문제 주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오. 입력 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. 출력 주어진 수들 중 소수의 개수를 출력한다. 내 풀이 n = int(input()) data = [] result = 0 data = list(map(int,input().split())) for num in data: k = 2 while True: if num % k != 0 and k
-
[Algorithm/BOJ] 01181 : 단어 정렬.py
문제 알파벳 소문자로 이루어진 N개의 단어가 들어오면 아래와 같은 조건에 따라 정렬하는 프로그램을 작성하시오. 길이가 짧은 것부터 길이가 같으면 사전 순으로 입력 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. 출력 조건에 따라 정렬하여 단어들을 출력한다. 단, 같은 단어가 여러 번 입력된 경우에는 한 번씩만 출력한다. 내 풀이 n= int(input()) words = [] result = [] for i in range(n): word = input() words.append(word) words.sort() words.sort(key=len) ..
-
[ReactJS] TIL #11
Coin Tracker App 만들기 Coin Tracker App을 만들기 위해서는 API를 사용해야 한다 const [coins, setCoins] = useState([]); // api로 받은 코인들을 나타내기 useEffect (() => { fetch("https://api.coinpaprika.com/v1/tickers") .then(response => response.json()) // response로부터 json 추출 .then((json) => { setCoins(json) // json 값을 coins 배열에 담는다 }); }, []) useEffect()를 통해 API를 처음 한 번만 가져오게 하고 fetch()를 통해 api를 호출한다 response로 받은 json을 추출하여..
-
[ReactJS] TIL #10
ReactJS로 To Do List 만들기 리스트에 item 추가하기 ...array명은 array의 모든 item들을 가리킨다 이를 이용하여 리스트에 item을 다음과 같이 추가할 수 있다 const food = [apple, banana] const new_food = [orange, ...food] // new_food = [orange, apple, banana] map() map()은 array 각각의 원소들에 대해 함수를 실행하게 하고 그 결과를 array로 return한다 map 함수의 첫번째 argument를 통해 현재의 item을 가져올 수 있다 const array = ['hello','who','are','you'] array.map(() => "mapped!") // return [..
-
[Algorithm/BOJ] 01110 : 더하기 사이클.py
문제 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리수로 만들고, 각 자리의 숫자를 더한다. 그 다음 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6=8이다. 새로운 수는 68이다. 6+8=14이다. 새로운 수는 84이다. 8+4=12이다. 새로운 수는 42이다. 4+2=6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시시오. 입력 첫째 줄에 N이 주어진..