전체 글 17

STS(Speech-To-Speech) 프로젝트 구현기

목차 동기 1월 초중순 어느 날, 내 친구 A로부터 메시지를 받았다. "혹시 내 목소리를 TTS 보이스로 나오게 하는 프로그램 만들어 줄 수 있어?"라는 내용의 메시지였다. 친구 A는 인터넷 방송을 시작한지 얼마 안되었는데, 본인의 목소리를 직접적으로 방송에 내보내길 원하지 않았다. 하지만 시청자들과의 소통에 많은 불편함을 느꼈고, 처음엔 TTS(Text-To-Speech) 기능으로 소통하는 방법을 생각해냈다. 하지만, 방송에 집중하면서 TTS를 사용하기 위해 텍스트를 타이핑하는 과정이 비효율적이라 생각했다. 결국 앞서 말한 방식으로 작동하는 프로그램을 찾는데 실패했고, 내게 물어보게 된 것이었다. 서비스 서치 하기 TTS(Text-To-Speech) 기능이나 STT(Speech-To-Text) 기능을 ..

토이 프로젝트 2022.02.14

리액트 추가 Hook 살펴보기

목차 리액트 훅이란? 함수형 컴포넌트를 클래스형 컴포넌트처럼 기능을 구현할 수 있게 해주는 기능입니다. 즉, 기존에 단순 view 역할밖에 수행하지 못했던 함수형 컴포넌트에서 상태를 관리할 수 있고(useState), 라이프 사이클에 따른 동작(useEffect)를 구현할 수도 있게 해 줬습니다. 이번 글에선 리액트 공식문서에서 보여주는 기본 Hooks가 아닌, 추가 Hooks에 대해 알아보겠습니다. 1. useReducer useState의 대체 함수로, state를 reducer의 형태로 관리하게 해 줍니다. 즉 (state, action)이 주어지면, 주어진 action에 따라 state를 newState로 만들어 반환해줍니다. // useReducer 사용 예제 const initialState ..

개발/React 2022.02.08

자바스크립트 기본 개념 QnA (feat. 면접 뽀개기)

목차 자바스크립트에서 스레드에 대해 아는데로 말해주세요. 자바스크립트는 싱글 쓰레드 기반으로 동작하는 언어입니다. 그리고 비동기 처리를 위한 이벤트 루프 기반으로 작동합니다. 자바스크립트에는 싱글 스레드 방식으로 함수를 처리하는 콜 스택이 있고, 들어온 비동기 코드들은 Web API 로 인해 콜백 큐로 이동해 대기하고 있다가, 실행 순서가 되면 메인 콜 스택으로 불러와 실행됩니다. 그리고 이 과정이 이벤트 루프에 의해 이루어집니다. 이런 과정을 통해 비동기 코드를 처리해 동시에 코드가 돌아가는것처럼 실행됩니다. 추가) - 멀티 쓰레드 방식으로 작동한다면 동시성 문제를 해결해야하고, 이를 위한 복잡한 시나리오들을 신경써야 합니다. 일급 객체의 개념을 자바스크립트와 관련지어 말해주세요. 아래 3가지 조건을 ..

2021년을 마무리 하며

서론 22년이 시작된 지금 21년 회고 글을 쓰는건 살짝 늦은감이 있지만, 내 인생에 있어 작년 한해는 돌아볼만한 일들이 좀 많았다 생각이 들어 조심스레 작성해보려한다. 개인적으로 한해를 새롭게 맞이하며 무언가를 새롭게 시작하는 행위는 지양하려한다. 오랜 경험상 동기부여의 주체가 '신년'이었던 목표들이 잘 지속하지 못하는 편이기에 구체적인 새로운 목표 세우기보다는 올해 한해는 무엇을 할지 커다란 목표를 세우는데 만족하려 한다. 작년 이맘때는 작년에 세웠던 한해의 목표는 바로 '우아한테크코스를 통해 성장하기' 였다. 대학교 4학년 과정을 졸업프로젝트와 함께 마무리하던 시기였던 만큼 미래에 대한 불안감이 가장 많지 않았나 싶다. 취업 준비와 학습을 계속해 나갔지만 무엇보다 나 자신의 역량에 대한 의심이 너무..

회고 2021.12.27

리액트 기본 개념 QnA. 2탄 (feat. 면접 뽀개기)

children prop이란 무엇인가요? 커스텀 컴포넌트 태그 사이에 삽입되는 태그들을 해당 커스텀 컴포넌트 태그에서 children이라는 prop으로 받아서 사용할 수 있습니다. 만약 이를 타입스크립트와 같이 사용한다면 React.ReactNode 라는 타입으로 선언해 사용하면 됩니다. function App() { return ( This is Title Hello World! ) } // === function CustomTag({children}) { // children에서 위 기준 h1, p 태그를 담고 있습니다. return (...) } 클래스 컴포넌트의 super constructor가 존재하는 이유가 무엇일까요? super는 부모 클래스 생성자를 참조한다는 것을 의미하기에 자바스크립트 ..

리액트 기본 개념 QnA. 1탄 (feat. 면접 뽀개기)

목차 리액트 면접 대비용으로 QnA 형태로 주요 개념을 나열한 글입니다. React란 무엇일까요? 리액트는 페이스북이 만든 자바스크립트 라이브러리입니다. 주로, 사용자 View 영역을 만들기 위해 사용됩니다. 리액트는 라이브러리인가 프레임워크인가? 우선, 라이브러리와 프레임워크의 주요 차이점은 앱의 흐름 제어권을 누가 가지고 있는지에 따라 나누어집니다. 라이브러리는 내가 주도성을 가지고 가져와 호출해 사용하는 개념이고, 프레임워크는 자체적으로 주도성을 가지고 있고, 내가 거기에 들어가서 사용하고 호출하는 개념입니다. 리액트는 UI 렌더링에만 관심을 가지고 있고 그 외 동작 (라우터, 상태 관리, 빌드, 테스트 등)들을 수행하기 위해서 다른 기술 스택들을 사용해야 한다는 관점에서 보면 리액트도 결국 뷰 관..

개발 블로그 여정 (feat. 개발자로서의 내 이야기)

목차 서론 티스토리 블로그를 새로 시작하게 된 기념으로, 19년 초부터 시도해본 블로그들의 이야기를 기반으로 내가 무엇을 경험했고, 어떤 성장을 경험했는지 위주로 작성해보고자 한다. 티스토리 기록 블로그 (19.03 ~ 19.12) 군대 전역 후, 복학을 하며 처음으로 블로그를 시작했다. '차얀의 프로그래밍 노트'라는 이름으로 시작했었는데, 대부분의 내용이 대학교 전공 과정에서 배운 것을 정리해두고 보기 위한 목적으로 시작했었다. 단순 요약의 목적으로 시작한 첫 블로그였기에, 지금 보면 내용 측면에서나, 가시성 측면에서나 많이 부족함이 있다. (내 글솜씨가 하찮은 것도 한몫했다) 그래도, 이 블로그는 내게 정량적인 성장과 함께 수상의 경험을 남겨주었기에 아직도 기억에 많이 남는 블로그로 남아있다. 전공 ..

회고 2021.12.09