나도 개발자 시켜주세요

교 육 기 간 : 2023. 02. 27 ~ 2023. 05. 22 교 육 과 정 : K-Digital training 웹 개발자 입문 과정 https://educs.posco.co.kr/home/info/business/kdigitalTraining.do2 POSCO K-Digital Academy 사업소개 K-Digital Training K-Digital Training 디지털 핵심 실무인재 양성 사업 K-Digital Training ※ POSCO는 K-디지털 트레이닝의 주요 디지털·신기술 기관 이며, 코딩온은 전문훈련업체 입니다. POSCO K-Digital educs.posco.co.kr 졸예도 아니고 고졸인 나에게 부트캠프 구하기란 쉽지 않았다. 보통 기업에서 해주는 부트캠프는 취업예정자들만..

🗣️ 프로젝트 소개 TalkFlow-KR : chat-gpt를 활용한 회화 서비스 개발 ⏰ 개발 기간 2023.05.02 ~ 2023.05.15 ⚙️ 개발 환경 ront-End : React, OpenAI(text-davinci-003모델 사용), STT(Speech-to-Text, React-Speech-kit API 사용) Back-End : Node.js Server : Mysql ✍ TalkFlow 기능 - stt api 사용해서 음성 데이터 처리 - OpenAI gpt-3 모델 사용 ✍ 코드 기술 데이터베이스 설계 AQueryTool 을 사용해서 초기 설계 후 VScode extension 으로 MySQL DB 연결 설정 파일 ('config/config.json')에서 데이터베이스 연결 정보를..

과제형 코딩 테스트 연습 n초부터 1초마다 1씩 감소하는 타이머를 구현해보려고 한다. stop 버튼을 누르면 타이머가 멈추도록 할 것이다. react에서는 useState hook과 useEffect hook을 활용하여 설정할 수 있다. 자바스크림트에서는 setTimeout 과 setInterval 함수로 해결할 수 있다. 그 중 setInterval()를 호출해서 고정된 시간 지연으로 함수를 반복적으로 호출하고 setInterval 이 반환한는 interval ID를 clearInterval() 함수로 제거한다. import { useState, useEffect, useRef } from 'react'; const Time = () => { //컴포넌트는 useState 훅을 사용하여 min, sec..

어디서부턴가 꼬여버린 깃으로 브랜치를 생성한 뒤 삭제할 수 없었다. 항상 쓰던 jiyoung 브랜치를 사용해서 add > commit > push origin jiyoung 해주고 Merge한 뒤 브랜치를 delete 해주고 내 로컬에서도 delete 하려고 했는데 중간에 많은 문제가 생겨서 돌고 돌아 겨우 깃 살려놨더니, 나한테 또 닥친 시련이다. git branch -a 명령어로 생성되어있는 브랜치 목록을 확인한다. 다른 팀원 분들의 브랜치도 엄청 많이 쌓여있다. 제발 깃에 merge하고 나면 삭제해주세요. 내 브랜치만 확인하다면 일단 jiyoung을 지우고 싶다. 로컬 브랜치에서는 git branch -d 브랜치이름 으로 삭제하면 된다 그럼 원격저장소에 올라가있는 git push origin --d..

🗣️ 프로젝트 소개 Full stack Mini Project ⏰ 개발 기간 2023.04.28 ~ 2023.04.30 ⚙️ 개발 환경 Front-End : React Back-Ent : Node.js Express Server : Mysql ✍ Todo List 기능 - 파비콘 설정 - document.title 변경 - 엔터 입력/ 빈값 입력 x - 반응형 -show / create / edit / delete - 취소선 - 내림차순 정렬 - checkbox 크기 변경 ✍ 코드 기술 Client Public index.html에서 favicon.ico 수정 src components AppTodo.js OnBuutonClick addItem 함수 실행 공백 입력 X input 초기화 onEnterKe..

더보기 지금까지 프론트와 백을 배우면서 다르게 구현만 해봤지 같이 합친 경우는 이번이 처음이었다. 아무런 문제 없이 합쳐지기 위해서는 CORS가 그 중심에 있었고 Full stack mini project에 사용했던 CORS에 대해 더 궁금해져서 찾아보게 되었다. CORS(Cross-Origin Resourc Sharing) CORS는 HTTP 헤더 기반 메커니즘으로 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침이다. Origin Origin= 프로토콜+도메인+포트 번호 Origin: https://miunoribird.tistory.com url : https://miunoribird.tistory.com/62#mount%C2%A0-1 https:/..

웹 브라우저의 렌더링이라 .. 그럼 브라우저는? 브라우저 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Explorer 등이다. 브라우저는 웹에서 페이지를 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 한다. 유저가 선택한 페이지의 요소들을 서버로부터 받아와서 유저에게 보여준다. 실시간으로 웹 사이트가 그려지는 과정, 이 과정이 웹 브라우저의 렌더링 과정이다. 인터넷 웹 브라우저는 두 개의 엔진이 있다. 1. 렌더링 엔진 사용자가 볼 화면을 그려내는 역할 압축파일을 해제해 파일을 실행하는 것과 유사 크롬, 엣지 브라우저는 크롬의 블링크 렌더링 엔진을 사용 2. 자바스크립트 엔진 - 자바스크립트 코드를 읽고, 기능을 작동시키는 역할 담겨진 내용 HTML :..

더보기 🙌 자바스크립의 메서드 map, filter, concat 등을 먼저 복습하고 react에서 응용하여 실습 코드를 작성했다. 배운 메서드만 적용하는 것이 아닌, 실습 코드에서 필요한 'Enter 입력' & '공백 입력x' & 'input 값 초기화'까지 추가했다. JavaScript 메서드 복습 map() 함수 메서드는 배열 내의 모든 요소 각각에 대한 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 필요에 따라 반복문처럼 사용 가능 arr.map(callbackFunc, [Arg]) callbackFunc : 새로운 배열의 요소를 생성하는 함수로 3개의 인수(currentValue, index, array)를 가질 수 있다. [Arg]는 생략 가능한 것으로 callbackFunc에서 ..

더보기 이미 나도 모르게 쓰고 있었다. 생각보다 별 거 없으니 쫄지 말 것. Synthetic Event는 이벤트가 너무 많아서 찾아보면서 사용하고, 익혀야 할 것 같다. Event Handling html Event : react event : 괄호x 카멜케이스 함수 이름 자체 전달. 기본 dom 요소에만 이벤트 설정 가능 synthetic Event : 웹브라우저에서 사용하는 기본 이벤트를 감싸는 새로운 기능, =리액트 고유 이벤트 객체 Synthetic Event 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤드 래퍼 SyntheticEvent 객체를 전달 받는다. =리액트 고유 이벤트 객체 import { useState } from 'react'; function Synt..

더보기 몇 주차 회고록인지 까먹었다. 리액트는 순수 자바스크립트랑은 비슷하면서도 다른 느낌이다. 그래서 더 기존 자바스크립트 개념이 흔들려서는 안 되겠다고 생각했다. 클래스형 컴포넌트는 잘 사용하지 않지만, 알아두면 좋을 것 같다. 계속 함수형 컴포넌트만 사용하다가 클래스형 컴포넌트를 마주했을 때, 어색하지 않을 정도로만 익혀두자! state React에서 앱의 유동적인 데이터를 다루기 위한 개체 컴포넌트 내에서 지속적으로 변하는 특정 값을 관리하기 위해 사용 state가 변경될 경우 자동으로 재랜더링 state 사용 state의 값을 변경하기 위해서는 반드시 setState 함수를 사용. state 값을 임의로 변경X, setState 함수를 이용해서 값을 변경!! setState 내에 변경할 값 넣기..