hueeng

프론트엔드 기술 면접 질문 리스트(라**)

후엥_ — Sat, 7 Sep 2024 03:33:47 +0900

Q. javascript 에서 var, let, const 의 차이가 뭐라고 생각하시나요?

A. 3가지 다 변수선언 방식입니다.

var 의 경우 함수스코프를 가집니다.

var로 선언된 변수의 경우 함수내에서 유효하며 블록 스코프를 가지지 않습니다.

그래서 if, for 문에 선언하더라도 바깥에서 접근할 수 있습니다.

또한 var함수의 경우 재사용이 가능합니다.

위에 var x라고 선언하였더라도 바로 아랫줄에 var x 의 다른값을 넣으면 재할당이 가능합니다.

이러한 이유로 요즘에는 var 보다 const 를 더 많이 사용합니다.

그리고 var의 경우 호이스팅이 됩니다. 호이스팅이 되면 선언된 함수가 최상단으로 올라옵니다.

하지만 선언만 되는것이며 할당이 된것이 아니라 undefined로 초기화 되어 만약 출력을 먼저 하게된다면 lundefined 가 출력됩니다.

Let 함수의 경우는 블록스코프 방식입니다.

만약 if 문이나 for문과 같은 블록내에서 선언된다면 밖에서는 접근이 불가능합니다.

또한 재할당은 가능합니다.

호이스팅이 되기는 하지만 변수가 초기화 되지 않습니다.(참조오류 발생)

const 의 경우 재할당 재선언이 불가능 합니다.

const 의 경우도 블록스코프 방식입니다.

if for 문 내에서 선언되면 밖에서 접근 불가능합니다.

호이스팅이 되기는 하지만 변수가 초기화 되지 않습니다.(참조오류 발생)

Q . react 의 virtual dom 에 대해 설명해주세요.

A . react 의 vitual dom 의 경우 메모리상의 가벼운 javascript의 객체로 실제 dom의 추상적인 표현입니다.

실제 Dom은 웹페이지의 구조를 표현하는 객체 모델이면 HTML 문서를 트리구조로 표현합니다.

브라우저는 Dom을 기반으로 웹페이지를 렌더링하고 javascript 를 통해서 dom을 조작하는데 비용이 많이 드는 작업이다 보니 react 에서는 virtual dom 을 활용해서 저렴한 비용으로 작업합니다.

react의 컴포넌트 상태가 바뀌면 react는 새로운 virtual dom을 생성하며

이전 virtual dom과 새 virtual dom을 비교해 차이점을 찾고.

차이가 있는 부분만 업데이트를합니다.

이렇다 보니 효율정이 렌더링이 가능하며 성능이 향상됩니다.

또한 코드의 유지봏수성이 확장됩니다.

Q. 화살표 함수에서 this 는 뭘 의미하나요?

A. 화살표 함수에서 this는 일반 함수와 다르게 작동합니다.

자신만의 this를 가지지 않고 상위스코프에서 this 값을 자동으로 바인딩 합니다.

this 는 화살표 함수가 선언된 위치의 this 를 따릅니다.

Next.js Vs React 둘은 무엇일까?

후엥_ — Wed, 22 Nov 2023 00:15:00 +0900

React, Next.js 서론

React, Next.js를 들어 보았는가?

프론트엔드 개발자를 지향한다면 React, Next.js 둘 중 하나는 꼭 들어봤을 것이다. 이 둘은 프론트엔드를 하는데 안 들어봤다면 공부를 안 한 것이다. 사실 React, Next.js는 그냥 개발 도구라고 생각하면 된다.

React 로고

React 란 무엇인가?

사용자 인터페이스를 만들기 위한 라이브러리가 바로 React 이다.

단어를 한번 풀고 넘어가자

사용자 인터페이스 : 사용자 인터페이스(UI)는 사용자가 어떻게 시스템 또는 소프트웨어와 상호 작용하는지를 나타내는 것

라이브러리 : 다양한 기능을 제공하고 코드를 구성하는 데 도움을 주는 코드 모음

한마디로 정리하자면 우리가 웹브라우저에 띄우는 모든 것을 담당하는 것을 React라고 할 수 있다.

next.js 로고

Next.js 란?

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크 라고 한다.

리액트에는 없는 서버 사이드 렌더링 server-side rendering(SSR), 정적 사이트 생성 static site generation(SSG), 증분 정적 재생성 incremental static regeneration(ISR)과 같은 다양하고 풍부한 기능을 제공

여기서도 단어를 해석해 보자

프레임 워크 : 새로운 애플리케이션을 보다 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음

서버사이드 렌더링 SSR : 새로운 애플리케이션을 보다 효율적으로 개발할 수 있도록 하는 재사용 가능한 소프트웨어 구성 요소의 모음

Next.js 속 React

사실 Next.js는 React가 이미 포함되어 있다.

그렇기 때문에 react를 공부했다면 자연스럽게 Next.js로 넘어갈 수 있다.

CSR vs SSR

SSR 과 CSR

둘을 사용해 봤다면 SSR이냐 CSR이냐 이 두 가지 말을 많이 들어봤을 것이다. 이 둘을 정리하자면

SSR은 Server Side Rendering이라는 단어의 약자로

서버에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

그럼 CSR은 무엇이냐? Client Side Rendering이라는 단어의 약자로

SSR과 다르게 클라이언트에서 렌더링이 일어나며 서버 측에서 HTML과 JS를 받아서 웹브라우저에서 렌더링이 된다.

자그러면 React는 CSR이며 Next.js는 SSR 기술이 사용되는데 둘의 차이를 하나 공부한 셈이다.

조금 더 자세히 설명해 보겠다.

CSR(client Side Rendering)

CSR 실행 순서

자 간단하게 정리를 해보자

1. User가 웹사이트를 클릭한다.

2. 그럼 Html 파일과 Js 링크를 클라이언트로 보내준다.

3. 클라이언트에 전달되는 순간 렌더링 준비가 되어있어 HTML은 즉시 렌더링된다.

-> 위 경우 사이트 자체조작이 불가능하게 된다.

4. 클라이언트가 Js링크를 받을걸 열어 JS를 다운로드한다.

5. 다운로드하여지고 있는 사이에 유저는 콘텐츠를 볼 수 있지만 사이트를 조작할 수 없다.

-> 이때 사용자 조작을 기억하고 있는다.

-> 짧은 시간이라 유저는 거의 인지하지 못한다.

6. 브라우저가 js 프레임워크를 실행한다.

7. js가 성공적으로 실행되면 기억하고 있던 사용자 조작이 실행되고 웹페이지는 상호작용 가능한 상태가 된다.

위과정이 CSR 과정이다.

자 여기서 외우자. CSR은 React에서 사용하는 기술이다.

이 정도까지 떠먹여 줬으면 외워야 한다.

자 이과정의 특징은 뭘까?

서버에서는 그냥 코드 덩어리를 보내주고 그 작업을 내 컴퓨터에서 하게 되니 당연히 모든 작업을 하기 전까지는 우리는 웹 페이지를 볼 수가 없다.

SSR (Server Side Rendering)

SSR 실행 순서

1. 유저가 웹사이트를 클릭한다

2. CSR과 달리 즉시 렌더링 가능한 HTML 파일을 제작한다.

3. 클라이언트에 전달되면 이미 렌더링 준비가 되어있어 HTML이 즉시 렌더링된다.

4. 클라이언트가 JS를 다운로드한다

5. 다운로드하는 사이에 유저는 콘텐츠를 볼 수 있지만 사이트를 조작할 수는 없다.

-> 이때 사용자가 조작한 것을 기억한다.

6. 브라우저가 JS 프레임워크를 실행한다.

7. JS가 실행되면 기억하고 있던 사용자 조작이 실행된다.

-> 이때 웹페이지는 상호작용이 가능한 상태가 된다.

SSR의 특징은 뭘까?

서버에서 렌더 한 상태로 클라이언트에 전달되기 때문에 JS가 다운로드되는 동안 사용자는 미리 볼 수 있다.

CSR vs SSR 차이

1. CSR 보다 SSR이 로딩 속도가 빠르다.

CSR을 사용한 네이버 블로그 로딩속도

위의 이미지는 CSR기술이 사용된 기존 네이버 블로그이다.

페이지가 노출되는 과정을 시간순으로 찍은 스크린 샷인데.

SSR을 사용할 경우 서버에서 렌더링이 된 이후 HTML을 보내주기 때문에 렌더링속도가 훨씬 빨라지게 된다.

2. SSR은 서버의 자원을 더 잡아먹는다.

서버에 요청할 때마다 무조건적으로 요청을 하기 때문에 당연히 자원을 잡아먹을 수밖에 없다.

꾸루루룽 꿍꾸꿍꿍우웅우우웅 후엥~

후엥_ — Sat, 18 Nov 2023 05:17:34 +0900

나는 아무생각이 없다.

요즘 한참 번아웃이 오면서 많은 것을 깨닫게 된 것 같다. 프로젝트도 손에서 놓고, 공부도 손에서 놓고, 알바도 손에서 놓고, 술만 마시러 다니고, 인간관계도 어느 정도 정리하고, 그냥 내 하고 싶은 대로 살면서.. 과연 이렇게 살아도 될까?라고 할 정도로 놀았던 것 같다.

아무생각 없는짤

사실 아무생각이 없다고 말은 하지만 사실 다들 속으로는 혹시 모르는 불안감들이 다들 내재되어 있을 거다. 나도 그렇다. 말로는 그냥 포기하고 놀아~ 이러지만 난 아무런 생각 안 해 하지만. 내심 속으로는 술을 마시면서 이래도 될까? 이런 생각을 가지고 놀았던 것 같다. 그렇다 보니 진심으로 놀지도 못하고, 진심으로 놀지 못하니 기간이 늘어지고, 기간이 늘어나니 번아웃 기간은 더 늘어나고, 더 늘어나다 보니 원래 해야 할 것들에 대한 기억은 다 사라지고... 악순환의 반복이었다.

재대로 놀아보자

깨달았다. 애매하게 놀 바에는 그냥 화끈하게 놀자. 기간도 짧게 화끈하게 놀고 다시 전의 후잉으로 돌아가자. 즐기는 자에 들어간 난 2주일간 미친 듯이 술을 마시고 놀아봤다.

네.. 망했어요

그렇다.. 망한것 같다.. 공부가 더 하기 싫어졌고 플젝은 더 하기 싫어졌다.

하지만 그렇다고 논 것을 후회하느냐?

그건 절대 아니다.

만약 고삐 안 풀었으면 난 할 일도 안 하고 놀지도 못하는 애매모호한 멍청한 녀석이 되었을 거다.

그리고 지금 블로그도 쓰지 않고 그냥 흑흑.. 하기 싫어하고 있겠지..

그래도 지금은 조금 하고 싶은 마음이 생겨서 git 잔디도 심고, 플젝도 진행하고, 공부도 진행하고 있다.

현타가 오기 전의 갓생까지는 아니더라도 지금은 현생은 살고 있는 느낌이다.

내 github 잔디

나름 열심히 한다고 했는데.. 초반과 지금을 보면 아주 내 마음가짐을 극명확 하게 나타내준다.

공부하자 후에아..

플젝하자 후엥아..

라고 말하지만..

내 마음은 술 먹자라고 외치는걸.... 어떻게 하니...

그렇다고 성과가 아예 없는 것은 아니었다.

이번학기 받은 대상

나름 이번학기에 대상도 타고..

창업동아리 지원도 선정되어서 지원금도 타고..

사업자 등록증도 내었다.!!!

근데.. 다 같은 거네... 흑흑...

이러면 안 되는데.. 다양하게 멋있게 나와야 하는데..

왜 이럴까..

내가 담근 귤청

나름 술 먹지 말자고 귤청도 담가보고 그랬다.

사실 귤을 한 박스 잘못사서.. 처리 못해서 담군거 기는 하지만...

그래도 나름 맛 좋고 호평 많았다.

글이 두서가 없고 정신없는데..

그것이 사실이다.

왜냐면...

난 지금..

제정신이 아니기 때문이다..

내일부터.. 정상적인 글쓰기로... 돌아가자...

나느... 멋쟁이 후엥...

(#3) 기숙사 프로젝트 사용 기술

후엥_ — Fri, 13 Oct 2023 15:07:39 +0900

개발도구

저번에는 소통을 위한 개발도구를 설명했다면 이번에는 프론트엔드가 개발을 위해 사용한 기술을 설명해 보려고 한다.

스프링, java는 백엔드, mysql은 벡엔드에서 사용한 기술이라 정확히 잘 몰라 패스하도록 하겠다.

프론트엔드는 2명이서 제작을 하였으며 디자이너 없이 제작을 하다 보니 많은 어려움이 있었다.

내가 기획한 의도를 정확하게 파악을 하였는지, 잘 진행이 되었는지, 등등 중간중간 확인을 해야 했고, 중간중간 내 의도와 다른 부분은 계속 수정을 요청했다.

React

React 기술

React기술을 사용했는데 React를 사용한 이유는 여러가지가 있었다. 그것을 나열해 보도록 하겠다.

컴포넌트 기반이다 보니 개발분담을 잘 할 수 있었다.
가상 DOM을 사용하여 렌더링 비용을 아낄 수 있다.
새로고침을 줄여 사용자의 몰입을 깨지 않기 위해 사용하였다.

여러 이유가 있지만 대표적인 이유는 위 3가지가 있었다.

React를 사용하다보니 조금 더 react 구조에 대해 알게 되었고 useMemo, useEffect, React.Memo, CallBack에 대해 조금 더 조사하게 되었고 최적화에 대해서도 조금 더 공부하게 되었다.

TypeScript

타입스크립트 조합으로 이용하였는데 JavaScript를 이용하지 않고 TypeScript를 이용한 이유는 딱히 크게 없다. 하지만 굳이 얘기하자면

javascript보다 typescript가 에러를 찾기 수월하다.
1. 타입을 지정하다보니 타입에 대한 에러를 미리 찾을 수 있고 우리는 페이지 제작이 많다 보니 그만큼 코드의 양도 많아질 것으로 예상했다. 런타임 에러를 줄이기 위해 썼다.
데이터를 확인하기 수월하다.
1. 타입지정을 하다보니 데이터 확인이 수월하였음

Styled-Components

styled-components

css는 styled-components를 사용했다. 사용한 이유는 컴포넌트별로 CSS를 적용할 수 있는 장점이 있어서 사용하였다.

CSS는 사실 별로 특별한 기술이 아니라 기술할 부분은 없는 것 같다.

Vercel

vercel 화면

vercel은 실 배포가아닌 프론트와 벡의 소통을 위해 사용되었다고 할 수 있다. 제작기술이라고 할 수 는없지만 vercel로 배포를 하는 사람들도 있기에 그냥 제작 쪽에 적게 되었다.

실제로 벡엔드에서 테스트도 가능하며, github에 marge를 할 경우 자동을로 연동되어 빌드를 하고 자동배포를 한다.

프론트에서는 이렇게 진행이 되었다. 다음 편은 후기로 작성하려고 한다.

1차 배포의 마무리를 다음 편에서 다룰 생각이다.

(#2) 기숙사 프로젝트 사용 기술

후엥_ — Thu, 12 Oct 2023 15:50:36 +0900

github에 올린 사용기술

프로젝트를 진행할 때는 협업을 위해 많은 도구를 어쩔 수 없이 사용해야 한다. 소통을 위한 도구로 사용되기도 하며, 개발의 용의성을 위한 용도로 사용되기도 하며, 기능개발에 필요하기 때문에 사용되기도 한다.

각각의 개발한 사용기술을 한번 정리해보고 어떠한 점이 좋았고 어떠한 점이 별로였는지 한번 작성해 보려고 한다.

나는 프론트와 기획 디자인 관점에서 이 글을 작성하다 보니 백의 관점을 정확하게 파악하기는 어렵다. 그건 다른 블로그를 보고 한번 찾아보면 좋을 것 같다.

의견조율을 위한 사용 기술

Notion(노션)

notion 메인페이지

Notion회의나 한걸 기록하는 용도로 사용하는 편이다. 메인화면에는 우리의 간략한 소개를 적고 그 밑으로는 회의 내용 및 기획서 및 각종 자료를 작성한다.

현재 진행상황 갤러리

위 항목은 우리의 결과물을 적는 칸이라고 볼 수 있다. 예를 들자면 어떠한 한달동안 어디까지 제작이 되었는지, 그리고 어떤 결과물이 있는지, 또는 대회 출품을 어떻게 하였는지 등등 우리의 자랑을 남기는 공간이라고 볼 수 있다.

notion 회의

또한 우리가 회의 한 내용은 구체적으로 정리해서 관리 하고 있는 중이다. 우리가 이때 이러한 회의를 진행했고 이 회의로 인해 결정 난 방향이 어디인지 각 페이지별로 상세히 기록하였다.

매주 1회씩 전체회의를 진행하고 프론트끼리의 회의나 벡엔드끼리의 회의도 따로 진행했다.

notion 기획서

기획은 말그래도 방향성이나 기획 관련 게시글을 작성하였다. 아무래도 근로지 상황을 정확하게 알고 있는 사람은 나 혼자밖에 없다 보니 상세히 작성해야 했고 그걸 확실하게 인지시켜야 했다.

소통란 notion

여기는 질의응답을 받는 곳이라고 할 수 있다. 위 항목은 보통 팀원들이 나에게 질문하는 용도로 많이사용되었다. 앞에서 말했든 근로지의 상황을 알고 있는 것은 나밖에 없었고 그렇다 보니 기능이나 기획도 내가 해야 했다.

Figma

figma 전체화면

Figma의 경우 내가 생각하는걸 전달하는 용도로 사용하였다. 원래 Figma는 기획적 요소도 있지만 디자인 요소가 더 많이 포함될 것이다. 하지만 시간이 없고 어떤 식으로 동작하는지만 알려주면 되기에 최대한 간단하게 설명하는 방식으로 프로젝트를 진행하였다.

물론 디자인을 완벽하게 해서 보내주면 좋지만 4명의 인원으로 완벽하게 하기라는 쉽지 않았다 그렇다 보니 어느 정도는 포기하고 개발속도를 높이기 위해 간략하게 동작구조만 보여준 뒤 디자인은 본인이 할 수 있게끔 선택권을 주었다.

figma input 항목 모음

이렇게 자주 쓰이는 항목들은 input 으로 묶어서 한 번에 관리하였고 이로 인해 프트의 UI/UX의 통일감은 한층 더 높아졌다.

페이지 예시

이건 어떤식으로 이루어지는지 과정을 보여주기 위해 하나의 페이지를 가져왔다. 기본적으로 내가 어떻게 구현하고 싶다 설명을 한 뒤 이런 Figma를 통해 보여준 뒤 벡엔드와 프트엔드에게 작업을 지시하였다.

다만 아쉬웠던건 Figma를 잘 다루지 못해 시뮬레이션이나 각종 기능을 사용하지는 못하였고 그냥 대략적인 구성정도만 알려주기 적합하였다.

POSTMAN

POSTMAN 예시

벡엔드에서 github에 벡엔드를 배포를 할 경우 프론트엔드에서 이해할 수 있게 기술문서를 작성하였음. 예시를 작성할 수 있으며 테스트 또한 간다 하게 가능하여 프트에서 빠른 이해 + 빠른 작업이 가능하였음.

프론트엔드보다는 벡엔드에서 많이 기술하여서 자세히는 모르지만 프론트 단에서는 그냥 코드 설명서 + 테스터 느낌으로 활용되었다.

지금까지 소통을 위한 툴을 소개하였고 다음에는 기술소개를 하도록 하겠다.

(#2) 롤모델

후엥_ — Wed, 4 Oct 2023 14:15:51 +0900

롤모델

나한테 롤모델은 과연 누구일까? 이러한 주제를 정말 오랜만에 생각해 본 것 같다.

초등학생 때는 why 책을 감명 깊게 읽어서 안철수(정치적 발언 아닙니다.) 중학생 때는 이건희 고등학생 때는 스티브잡스 계속 바뀌어왔다.

그럼 지금의 롤모델은?

정말 주제에 미안하게도 유명한 롤모델은 없다. 내가 잘났기 때문에 가 아닌 내 주변이 아닌 다른 사람에 대해 신경 쓸만한 여유가 없어서라고 해야 할 것 같다.

나의 롤모델은 늘 내 주위에 있었다. 그래서 유명인이 아닌 주위 사람들을 적어보겠다. 너무너무 많지만 몇 명만 적어보겠다.

전 회사 대리님

내가 일을 시작하면서 정말 많이 배웠던 대리님이 계셨다.

게임기획을 하셨으며 NC에 다니던 선임이셨다.

항상 나에게 게임에 대해 분석하는 법을 알려주시고 내가 궁금한 걸 물어보면 즉각 즉각 대답이 나오던 그런 사람이었다.

멋있다고 생각한 건 물어봐서 바로 나오는 그런 점 때문이 아니었다.

본인이 했던 일을 바탕으로 논리적으로 설명해서 나를 이해시켜 주며 어려운 말을 최대한 피해서 설명해 주는 그러한 점들을 배우고 싶었다.

짜장을 좋아하던 친구

이 친구는 그냥 내 친구이다.

처음 학교에 입학해서 어색하고 두려움이 많았을 시기에 나에게 많은 힘이 돼주었던 친구이다.

학교에서 친구들도 많고 정말 멋있었다.. (짜장만 안 좋아했으면. )

이 친구의 성격을 닮고 싶어서 많이 노력했던 것 같다. 누구와도 쉽게 친해질 수 있는 친화력.

재미있는 말 등등 과거 나의 롤모델이었다.

독특한 친구

학교에 들어온 지 4년 만에 처음 안 친구이다.

이 친구는 개인적으로 대단하다고 느껴서 적게 된 것 같다.

쉬는 날도 코딩을 하고 쉬지 않는 날도 코딩을 한다.

아무리 봐도 대단하고 본인의 능력대로 지금 멋진 꿈을 펼치고 있는 친구이다.

닮고 싶지만 닮을 수 없다는 벽을 느낄 정도로 멋있는 친구이다.

내가 공부를 계속하고 있는 이유는 이 친구를 보고 멋있다고 생각해서인 것 같다.

롤모델로 삼아서 얻은 점은?

많은 걸 배우고 많은 것이 변하게 된 것 같다.

공부라는 걸 하지 않던 나는 이상한 친구를 본받고자 공부를 하게 되었고. 결과적으로 프로젝트도 진행하게 되었다.

친구를 못 사귀던 나는 짜장 좋아하는 친구를 본받고자 성격을 하나둘씩 뜯어고쳤다.

그 밖에도 블로그를 쓰게 되었으며, 일정을 빡빡하게 하여 바쁘게 사는 사람들이 되었으며 결국에는 현재 코딩보틀에 들어오게 된 것 같다.

내가 여기까지 오게 하는 데에는 멀리 있던 유명한 롤모델이 아닌 내 주위에 있던 나만의 롤모델 덕분에 여기까지 오게 된 것 같다.

롤모델이란 존경하거나 닮고 싶은 사람. 사전에서는 이렇게 정의하고 있다

나는 내 주위에 항상 롤모델이 존재한다.

물론 후배도 있고 선배도 있고 친구도 있다

마무리

나도 그런 멋진 사람이 되고 싶다.

다른 사람이 나를 본받고 싶고 배우고 싶어 할 수 있는 그런 사람.

하지만 그런 내가 되기에는 아직 너무 많이 부족하다고 느낀다.

그런 사람이 되기 위해 노력해 볼 생각이다.

나의 나쁜 습관들을 버리고 누군가의 롤모델이 되는 그날까지.

(#1) 기숙사 프로젝트 시작 이유

후엥_ — Tue, 3 Oct 2023 16:21:12 +0900

4명의 인원이서 기숙사프로젝트를 4개월 동안 진행하였다. 중간 배포를 하게 되면서 어떻게 개발하였는지 어떠한 과정이 있었는지 어떻게 개발을 진행했는지 1차 개발동안 부족한 부분은 무엇이 있었고 잘한 부분은 어떠한 점이 있었는지 상세히 풀어서 작성해보려고 한다.

프로젝트 진행일을 계산 해 보았다.

인원은 총 4명이서 5월 28일 부터 9월 25일 총 121일간의 일이다. 프런트 2명 백엔드 2명 이렇게 프로젝트를 진행했으며 내가 사람을 모았고 기획을 해왔기 때문에 기획과 디자인을 겸해서 진행하였다.

확실한 건 인원과 시간이 많이 부족했던 것 같다. 나 혼자 진행하기에는 많은 업무처리량이 있었고 학업, 일정, 알바 등 다양한 일을 해야 하는 나는 많이 힘들었고 지쳤다.

개발 목표

성공회대 행복기숙사

필자는 성공회대 행복기숙사 국가 근로생이었다. 나는 6개월이라는 짧은 기간동안 행복기숙사에서 국가근로를 진행했고 행복기숙사 절차에 많은 불편함이 있음을 깨달았다.

여기서 말하는 불편함은 일이 힘들다 보다는 불필요하게 과정이 많이 생성 되는 불편함이었다. 몇 가지를 설명하자면

근로자들끼리의 소통창구가 없다.

만약 문제가 터지거나 다른 근로생이 처리한 업무를 물어볼 일이 생기면 해당 사람에게 전화를 해서 어떻게 업무를 처리했는지 어떻게 답변해 주면 되는지 전화다 개인카톡을 해야 했다.

한 명이 파일을 열고 있을 경우 다른 사람이 수정 불가능

기숙사 행정실 특성상 엑셀을 굉장히 많이 쓴다. 이 엑셀은 많은 수정이 이뤄져야 함은 당연하고 빠르게 동기화가 되어야 한다.

하지만 내가 근로하는 곳은 그러지 못했다. 구글 엑셀이나 오피스 온라인 엑셀을 쓰는 것도 아니다 보니 누군가 파일을 저장하고 닫기 전까지는 엑셀 파일을 열기가 쉽지 않았다.

그렇다 보니 작업을 하더라도 다른사람이 작업한 결과물이 날아가거나 복사본으로 저장되어 그걸 다시 하나하나 체크해서 병합하는 과정이 필요했다.

각종 설명서에 부재

기숙사행정실 직원의 경우 최신 기계 최신 설비에 대해 많이 이해도가 떨어졌다.

그렇다 보니 에어컨 설명서, 보일러 설명서, 각종 기능고장이 일어날 경우 구글에서 설명서를 매번 검색 후 다운로드하여야 했으며 다운로드 후 파일을 찾아야 했다.

뒤죽박죽인 일정

일정이 정해지면 그대로 정해지는게 아닌 변동이 잦다 그렇다 보니 캘린더가 더럽기도 했다.

이렇게 보니 진짜 문제가 많았던 것 같다.

이찌되었건 이러한 이유로 프로젝트를 진행하게 되었다.

(#1) 시작

후엥_ — Mon, 2 Oct 2023 16:44:32 +0900

시작

시작전 모두 노래를 BGM을 추천하는것을 보고 저도 한번 추천해 봅니다. 윤하-사건의 지평선

속담중에 시작이 반이다 와 가만히 있으면 반이라도 간다 라는 2가지 말이 있다. 그중 나는 시작이 반이다 라는 단어를 굉장히 좋아한다.

둘다 어느정도 합리적인 말이라고 생각된다. 일을 제대로 마치지 못하고 끝마치는 사람이면 가만히라도 있어야하고. 일을 제대로 마치는 사람은 시작이 반이될 것이다. 그중 나는 일을 제대로 마치는 사람이 되려고 노력하는 편이다.

위에서 시작이 반이다 라는 말을 좋아하듯 나는 시작하는것을 좋아하는 편이라고 할 수 있다. 내가 말하는 시작과, 남들이 생각하는 시작이 다를 수 있어서 말해보자면 내가 말하는 시작은 일을 벌리는 행위 라고 볼 수있다.

같은 걸 하더라도 남들보다 튀었으면 좋겠고, 더 많은 지식을 얻어가고 싶고, 더 많은 사람들을 사귀고 싶다.

한마디로 말하자면 욕심그득그득한 사람이다.

나는 어떤 사람이냐?

위에서 내용을 보면 나는 굉장히 두려움없고 새로운 길을 개척하는 사람처럼 보일것 같다고 생각한다.

하지만 아니다. 그냥 두려워서 이것저것 벌려보는것 같다. 두렵다워서 벌리다 보니 어느순간 좋아하게 된건지 아닌지도 모르는 상황까지 왔따.

18학번때 나는 시작이 두려워 모든 동아리에 가입을 하지 않았고. 사람들에게 말거는 것이 무서워 친구 또한 2~3명만 친하게 지내고 바로 학교 끝나고 술도 안먹고 집에 들어가던 착한아이? 였던 시절이 있다.

또 학교 뿐만 아니라 아르바이트에서도, 학원에서도, 그냥 내 인간관계에서 시작이라는것은 찾아보기 힘들었다. 왜 힘들게 일을 벌리고 시작을 해야하는가? 라는 생각이 들었다.

하지만 5년 정도 흐른 지금은 다르게 생각된다. 오히려 시작을 안해서 고립되는 무서움을 알기 때문에 시작을 하게되었다.

공부를 안하면 취업을 못한다는 고립 말을 걸지 않으면 친구를 사귈 수 없다는 고립 아르바이트를 하지 않으면 생활이 어렵다는 고립 동아리를 하지 않으면 정보를 얻을 수 없다는 고립 털어놓을 수 있는 친구가 없다는 고립 나름 억지가 있기는 하지만 다양한 고립의 무서움을 5년 사이에 많이 겪어왔다.

그렇기 때문에 성격도 바꾸어보고, 이것저것 시도해보고, 공부도 시도하다 보니 현재의 이현우가 만들어진것이다.

별명후엥을 쓰는 이유도 비슷하다. 이현우를 누군가 부르면 뭔가 뒷말을 할것 같고 무섭지만. 후엥을 부르게 되면 내가 아닌 다른 캐릭터를 공격하는것 같아서 덜 무서운 느낌이 든다.

다른 사람들의 시선은 굉장히 의식하는 편이고 그것에 대해 다양한 두려움을 느낀다고 할 수 있다.

과거 어떤 시작을 했는가?

나는 휴학을 하고 다양한 시작을 했던것 같다. 다양한 아르바이트를 경험해보고, 다양한 회사에 들어가보고, 다양한 친구들을 사귀어보고, 다양한 환경을 접해보고

그시작이 다 좋은 결말로 끝나지는 않았다. 하지만 좋은 결말인지 안좋은 결말인지 난 끝을 알고있다. 시작하지 않았으면 전혀 모를 결말을 알고있다는 것 자체가 하나의 큰 경험이라고 본다.

시작에 대해서

시작이란 독이될 수 도 약이될수도 있는 도구라고 생각한다. 시작할때 말했든 시작이 반이다 와 가만히 있으면 반이라도 간다 시작을 어떻게 하느냐에 따라서 본인의 성장이 결정된다고 본다.

칼도 도둑이 쓰면 흉기지만 요리사가 쓰면 훌륭한 기구이다. 근데 보통 칼은 훌륭한 도구이지 흉기로 쓰이는건 손에 꼽는 일이라고 생각한다.

나는 시작이라는 도구를 어떻게 활용해야 할까 생각을 해봤다.

주위 사람에게 떠벌리고 다니기 1. 주위사람들의 시선이 의식되서라도 내가 할일을 하게된다. 2. 주위사람들이 물어보면 답변을 위해서라도 하게된다.
캘린더에 기입해두고 주기적으로 알림설정하기 1.계속해서 이 일정이 있다고 리마인드 해야한다. 2. 일정의 압박을 느껴야하며 체계적으로 진행되어야 한다.
지금일정과 새로운 일정이 추가되었을때 못할것 같다면 포기하기 1. 무조건 포기하라는 것이 아니다. 2가지 일정을 소화 가능하지 확인하고 하라는 것이다. 2. 식사도 과하면 체하듯 시작도 마찬가지라고 생각한다. 너무 많을걸 한번에 하려고 하면 체하듯이 방전이 오거나 무기력증이 오거나 번아웃이 오거나 현타가 오거나 멘탈이 부서진다.
나 혼자 생각하지말고 주위 사람을 생각하기. 1. 같이 시작을 한 주위사람을 생각하자 나를 믿고 따라온 사람들이다.
개인시간을 너무 줄이지 말기 1. 나는 현재 개인시간이 일주일에 밤 1~2시간 빼고는 거의 없다. 개인시간을 너무 줄이면 위에서 말한 체함이 나타나기 시작한다. 2. 스트레스는 풀 수있을 정도가 되어야한다.

마무리

시작에 대해서 다양하게 생각을 하는 사람들이 있지만 그래도 나의 말에 어느정도 공감을 해주는 사람도 있을거라고 생각된다.

시작은 위대하고 거창하지만 또 어떻게보면 하찮고 보잘것 없는 애매한 단어이다.

사실 마무리를 어떻게 지어야 할지 모르겠다 ㅎㅎ 그냥 눈 딱감고 여러 시도를 해봤으면 좋겠다. 모두 파이팅~

동기와 비동기란 무엇일까?

후엥_ — Mon, 4 Sep 2023 07:50:47 +0900

흠.. 면접 때 질문했던 주제 중 하나인 동기와 비동기이다.

대답하지 못했다. 근데 이걸 처음 접한 건 아니다.

그냥 대답하지 못한 거다.

그냥 공부를 안 했다고 하자. 멍청한 놈!!@!@!@

동기 synchronous 란?

데이터의 요청과 결과가 한자리에서 일어나는 걸 말한다고 한다.

일단 실행하면 이건 컴퓨터가 터지는 일이 있어도 다음단계로 넘어가지 못한다.

시킨 업무를 완수해야 다음 문장으로 넘어갈 수 있다.

답을 주지 않으면 그냥 컴퓨터는 다른 일을 할 수 없는 것이다.

비동기 Asynchronous 란?

요과 결과가 동시에 일어나지 않는 것을 비동기라고 한다.

한마디로 일단 이거대로 진행하고 결과가 나오지 않더라도 다른 작업이 가능한 것이다.

병행작업이 가능하다 고 보면 될 것 같다.

내가 비동기 이것 때문에 문제가 터졌었다.

서버에서 요청을 하고 받아오지 않았는데 다음 코드가 작동해 버려서 데이터가 없는데 실행하려고 해서 Error가 계속 뜬 기억이 난다.

하지만 이때는 그냥 비동기? 이게 뭐야? 하고 대충 에러만 잡고 넘어가버렸다.

음.. 이제부터는 에러이유를 명확히 파악하고 글을 써야겠다.

그럼 코드로는 어떻게 표현될까?

동기 synchronous

fuction num1(){
	console.log("첫번째 출력이다 이놈아!")
    num2();
}

fuction num2(){
	console.log("두번째 출력이다 이놈아!")
    num3();
}

fuction num3(){
	console.log("세번째 출력이다 이놈아!")
    num3();
}

num1();
//첫번째 출력이다 이놈아!
//두번째 출력이다 이놈아!
//세번째 출력이다 이놈아!

비동기 Asynchronous 란?

function num1(){
    console.log('num1');
    num2();
}

function num2(){
    setTimeout(function(){
        console.log('num2');
    }, 0);
    num3();
}

function num3(){
    console.log('num3');
}
func1();
/*
실행결과
num1
num3
num2
*/

일단 글작성은 여기까지 다음 글에서 이어서 하겠다.

음.... 망했다..

후엥_ — Sun, 3 Sep 2023 06:30:31 +0900

음... 일단 난 코딩을 클론코딩으로 시작했다.

그러다 보니 기초가 전혀없다.

전혀 생각지 않고 있었는데 동아리면접보면서 깨닳았다.

음.. 기초가 전혀없어

딱 위 상태이다.

코드는 짜지만 오류가 나면 gpt와 무수한 검색으로 만들어지는 코드들..

이론을 모르니 그냥 작동이 우선시 되는 코드들..

수정할때 하나를 손대면 모두가 동작하지 않는 기적들..

이제 이해했다..

일단 얘기를 나눠보니 나한테 문제점을 몇가지 깨닳았다.

1. 기초기술 공부가 너무 부족하다.

음... 하찮다 못해 쓰레기다.

리엑트를 쓴다지만 사실 그냥 처음 접해서 공부를 하는거고 재미붙여서 하는거다.

2. github를 그냥 공유드라이브로 사용하고 있다.

github 작성시 commit 을 정확히 날려야 하지만.

나 후엥은 그냥 개대충날린다.

허허.. 사실

이렇게 날린건 어떻게 날려야할지 안배웠다.

그냥 일단 되니 하는거고.

블로그도 되니 하는거다.

음.. 글렀어..

친구가 한 github 를 보니..

음... 저런식으로 해야하는구나...

라고 감이 안잡힌다.

흠.. 이건 따로 찾아서 공부를 해봐야겠다.

흠... 아무리 생각해도 ☆졌다..