분류 전체보기97 [크롬 시작화면] 2일차: 검색창 구현하기 프로젝트 명: 나만의 크롬 시작 화면작업 기간: 2024.06.05 ~ (진행 중)사용 스킬: TypeScript, ReactGithub Repository: https://github.com/Rayched/MyChrome_custom_page1. 작업 내용이번에는 크롬 시작화면의 검색창을 구현하는 작업을 진행하였다.먼저 'SearchBar.tsx' 파일을 생성하고, 본격적으로 검색창 Component의 구현을 시작하였다.① 검색어를 Console에 출력하기상단의 이미지는 작년에 개발을 완료하고, 현재 사용 중인 크롬 시작화면의 검색창이다. 기본적인 알고리즘은 검색창에 검색어를 입력하고, 키보드의 Enter 키를 누르면해당 검색어에 대한 구글 검색 결과를 보여주는 식이다. 이를 구현하려면 제일 먼저 검색.. 2024. 6. 11. [TypeScript] 객체 타입 1. 객체 타입 / 비원시 타입① objectJavaScript의 객체 Object의 정의에 맞게 대응되는 타입'any' 타입과 유사하게 모든 타입 값을 유동적으로 할당할 수 있음const player : object = { name: "홍길동", age : 25, isMarried: false}; player 객체의 타입을 object로 지정하고, 이후 name, age, isMarried 속성을 추가하였다.다만 이 방식은 객체 속성의 타입을 지정할 수 없다는 특징을 가지고 있다.② '{ }' JavaScript에서 객체를 생성할 때는 'new Object()' 혹은 '{ }' (객체 리터럴) 방식을 사용한다.이와 마찬가지로 TypeScript에서 변수 타입을 object로 지정할 때o.. 2024. 6. 10. [TypeScript] Data Type's 메모 TypeScript의 Data TypeC, C++, Java와 같은 강타입 언어처럼, 변수 선언 시 타입을 명시할 수 있다.물론 JavaScript처럼 별도의 타입 지정 없이 변수만 선언하는 것도 가능하다.변수 선언 시 타입을 명시하지 않았다면, TypeScript가 자체적으로변수에 할당된 값의 타입에 따라, 해당 변수의 타입을 추론한다. (타입 추론)let a = "hello"; //TypeScript가 자체적으로 변수 a가 string 타입 변수라고 추론한다.a = "Hello World"; //문제 Xa = 10; //Error, //변수 a는 String 타입의 변수라고 파악했는데//number 타입의 값, 10을 할당하려고 시도하면 Error가 발생함.//변수 타입과 값, 데이터의 타입 불일치로.. 2024. 6. 10. [크롬 시작화면] 1일차: 오늘 날짜 및 현재 시간 표시하기 프로젝트 명: 나만의 크롬 시작 화면작업 기간: 2024.06.05 ~ (진행 중)사용 스킬: TypeScript, ReactGithub Repository: https://github.com/Rayched/MyChrome_custom_page0. 프로젝트를 시작하게 된 이유위의 이미지는 작년에 개발을 마치고 현재 노트북에서 사용하고 있는 크롬 시작화면이다.VanillaJS로만 구현한 프로젝트이며 내게 있어서 처음으로 완성까지 한 사이드 프로젝트이다. 사이드 프로젝트를 마치고, 자택에 있는 데스크톱에선 사용하지 않고코딩용으로 쓰고 있는 노트북에서 주로 사용을 하고 있는데 막상 쓰다 보니깐 고치고 싶은 부분이 많이 생겼다. 예를 들어서 검색창을 클릭했을 때 이전 검색 내역이 나오는 기능을 추가하거나북마크 .. 2024. 6. 5. [React] Plugin "react" was conflicted between "package.json 1. Error 발생저번 주에 동미참을 끝내고, 오래간만에 노트북을 들고 카페에서 코딩을 하게됐다.Project에 TypeScript 설치하고 코딩을 좀 하다가, 저번 주 수요일에 자택에 있는 데스크탑으로해당 프로젝트를 commit 했던 기억이 갑자기 떠올라서 평소에 했던 것처럼 git pull 하고 npm start 입력해서 Project를 실행했는데 생전 처음보는 에러가 내 눈 앞에 보였다.Plugin "react" was conflicted between "package.json 번역기를 돌려보니 plugin "react"가 "package.json"에서 충돌했다는 내용이다.일단 이를 해결하기 위해서 구글링을 해보니 아래와 같은 해결책을 확인할 수 있었다.1. 'package.json' 다시 저장.. 2024. 6. 3. 2024년 정처산기 필기 회고록 0. 개요이 글을 쓰는 시점에서 엊그제, 2024년 5월 20일 월요일에 정보처리 산업기사 필기 시험을 보고 왔다.가채점 기준이지만 일단 필기 점수는 다음과 같이 나왔다.📑 정보처리 산업기사 필기 점수1. 정보시스템 기반 기술: 60점2. 프로그래밍 언어 활용: 80점3. 데이터베이스 활용: 55점전 과목 평균: 65점 실질적으로 필기에 집중한 기간은 일주일 정도였기 때문에, 이 정도 점수면 감지덕지라고 생각한다.제일 자신 있었던 2과목 '프로그래밍 언어 활용'을 제외하고는 나머지는 고만고만한 수준이기도 했으니깐 말이다. 필기 시험의 결과가 합격/불합격에 상관 없이, 준비했던 과정을 기록으로 남겨두기로 결심했고결과적으로 합격을 하긴 했으니깐 가벼운 마음으로 블로그에 글로 남겨두기로 했다.1. 필기 접수.. 2024. 5. 22. [TypeScript] create-react-app에 TypeScript 설치하기 1. 'create-react-app'에 TypeScript 설치하기npx create-react-app my-app 위의 명령어는 React App을 만들 때 사용하는 명령어이다.여기서 아래와 같이 '--template typescript' 추가하면 TypeScript를 같이 설치할 수 있다.npx create-react-app my-app --template typescript설치가 완료되면, 기존에 'create-react-app'으로 생성된 React App 초기 파일에서TypeScript와 관련된 파일이 추가 혹은 변경된 것을 확인할 수 있다.(CRA 기본 프로젝트와 관련된 파일들을 개별적으로 정리한 뒤에 캡쳐한 것이다.)앞에서 다룬 명령어는 React App을 처음부터 생성하는 명령어이다.즉,.. 2024. 4. 20. [JavaScript] Promise 1. Promise 2. Promise 객체 내부 Property 3. '.then()' / '.catch()' / '.finally()' ① .then() ② .catch() ③ .finally() 4. Reference 1. Promise Promise란 비동기 작업을 처리할 때 Callback 함수 대신 유용하게 활용할 수 있는 JavaScript 내장 객체로, 비동기 작업을 수행하고 나서 작업의 성공/실패 여부와 그 결과 값을 나타낸다. const prom = new Promise((resolve, reject) => { //executor, 실행자, 실행 함수 }); 위의 예시처럼 'new Promise()' 연산자를 통해 Promise 객체를 생성할 수 있다. 여기서 Promise 객체를 생성.. 2024. 4. 10. 최대 공약수 구하는 Logic function GetGCD(num1, num2){ let gcd = 1; for (let i = 2; i 2024. 4. 2. 이전 1 2 3 4 5 ··· 11 다음
