Weekly I Learned

항해99 0주차, 이번주에 나는 무엇을 배웠을까?

01 Keyword : 됨됨이

항해99 0주차에 대한 복기, 역시 사람이 중요하다.

항해를 시작하며 가장 많이 들은 말은 "말 이쁘게 하세요"이다.

사전스터디로부터 시작해서, 토이프로젝트, 풀스텍미니프로젝트까지 3번의 만남과 협업의 과정이 항해를 본격적으로 시작하기 전에 있었던 만남들이다. 먼저 사전스터디는 나를 포함해서 3명의 멤버가 모여서 항해를 시작하기 전에 함께 공부를 진행했었다. 항해를 본격적으로 시작하기 전에 마음을 가다듬기 좋은 모임이었고, 지금까지도 멤버들과 소통하고 있기에 좋은 만남이었다. 또한 공감이 되는 부분에 있어서의 하소연?을 할 수 있는 내적친밀감이 있는 존재들이 있다는 것은 큰 힘이 되는 부분이다.

토이프로젝트, 항해를 시작하며 만날 수 있는 지옥이었다. 협업을 하는 것인지, 본인의 프로젝트를 위해 멤버들을 활용하는 것인지 싶은 마음에 한 주가 울적했다. 대화는 없었고, 소통도 없었고, 무엇인가를 완성하기는 했지만 외형만 있을 뿐 내가 작성한 코드의 흔적은 살펴볼 수 없을 정도로 개인화된 심한 변형이 있었을 뿐이다. 그러나 자세한 내용은 언급하지 않겠다.

풀스텍미니프로젝트, 항해를 시작하며 만날 수 있는 천국이었다. 이전 만남의 4일이 너무 힘들어서 그랬는지 몰라도, 무박2일(토 AM 09시 ~ 일 AM 07시)의 기간 너무 좋았다. 우리는 22시간 동안 대화했고, 22시간 동안 협업했고, 22시간 서로를 존중했고, 22시간 서로에게서 용기를 얻었다. 또한 22시간 동안 스파르타코딩클럽에서는 항해출신의 기술매니저님들이 밤새 도움을 주셔서 프로젝트가 막힐 때마다 해결할 수 있었고, 용기와 도전을 받았다. 기술매니저님의 방문은 그러나 이번이 처음이 아니다. 토이프로젝트 시에도 방문해주셨지만, 대화가 소원했던 팀이었기에 질문도 못했고, 가벼운 대화도 할 수 없었다. 반면에 이번 프로젝트에서는 5시간 이상 매니저님들과 소통했고, 도움을 받았다. 물론, 가벼운 대화만으로도 즐거운 22시간을 보낼 수 있었서 너무나 좋았다.

• 팝업HTML
  

신기한 부분이었기에 공부해서 구현을 했지만, 최근의 동향이 불필요한 광고를 제한하는 팝업차단 기능을 활성화되고 있기에 회원가입과 같은 중요한 정보는 팝업으로 구현하는 것이 적절하지 않음에 대해서 진솔한 구현을 받을 수 있어서 좋았다.

또한 가지의 사례를 보자. 팀원들과 2시간 가량 해당 문제에 대해서 이해하기 위해 논의하고 논의를 했던 것 같다. 코딩을 공부한지 18시간이 넘어가자 뇌에 과부화가 걸렸다. 서로의 말이 잘 이해되지 않아서 문제를 해결하는 부분에 어려움이 있었지만, 포기하지 않았고 도전했다. 그래도 되지 않아 1분의 매니저님을 모셔왔다. 그리고 해결되지 않아서 또 한 분의 매니저님을 모셨다. 2분의 매니저님과의 소통 가운데, 결국은 문제가 해결되었다. 역시 머리를 맞대면, 좋은 결과를 이루는 것은 사실인 것 같다. 이러한 좋은 협업의 모델을 누릴 수 있어서 너무나 좋았다.

스르릉 사이드 바의 핵심은 input태그를 관리하는 CSS의 인접요소선택자의 복잡한 구조를 통해서 구현된 부분이었다.

input[id='login_sidebar']:checked + label + div {
  right: 0;
  z-index: 2;
}

input:unchecked 상황 시에는 오른쪽으로부터 -300px 숨어져 있다가. input:checked 상황이 발생되면 오른쪽으로부터 0px로 변경되며 나타난다. 이때 transition: all 0.35s; 효과를 통해서 부드럽게 나타나도록 설정되었다.

문제는 로그인이 된 상황에서도 해당 이벤트가 작동한다는 점이었다. 그러나 이번 협업에서 복잡한 선택자를 사용하는 방법을 제어했는데, 이러한 복잡한 선택자를 제어할 수 있는지에 대한 부분 때문이었다. 복잡한 이 과제는 추후에 REACT를 활용하면 문제없겠지만, 그렇지 않은 상황에서는 어려운 문제였다. 그러나 문제는 아직 나는 REACT를 다루지 못한다는 것이다. JS를 통해서 이를 제어하는 것은 단순한 이론상의 과정이었지만, 이것을 코드로 구현하는 것은 쉽지 않은 과정이었다. 그러나 문제는 2분의 매니저님의 도움 속에서 30여분 만에 해결되었다.

코드의 세계는 참으로 독특하고 유연하며 창의적이다.

과정의 첫번째는 문제의 시작에 놓여있었다.

<input type="checkbox" id="login_sidebar"
	onclick="return isSign()"/>

input태그를 처음부터 제거하는 것이다. 또한 onclick이벤트를 return을 포함해서 작성하는 것에 대해서 처음으로 살펴보기도 했다.

function isSign() {
  const username = localStorage.getItem('nickname');

  // checkbox = true : 사이드바 나와야됨
  if (!username) {return true;} 
  
  // checkbox = false : 사이드바 안나와야됨
  else {return false;}
}

localStorage에 저장된 사용자의 username의 유무에 따라서 input태그가 존재되도록 설정하였다. username이 존재하지 않다면(!) 항상 true:checked가 허용되도록 되도록 했다. 함수에 대한 값이 true가 return 되도록 했다. 단순히 함수가 호출되는 것이 아니라, 함수의 값이 헤당 이벤트의 return 값으로 전달되도록 한 것이다.

반면에 username이 존재한다면, 아무리 클릭을 해도 함수를 통해서 전달되는 return의 값은 false가 전달되기에 클릭 자체를 막아버릴 수 있다.

이번 풀스텍프로젝트에는 많은 것들을 이해할 수 있고 내가 이전에 이해하지 못한 것들에 대해서 조금 쉽게 스터디의 과정을 통해서 접근할 수 있다는 점에서 좋은 경험이었고, 유익했다.

말을 이쁘게 해야되는 이유는 또 있다. 매니저님들 또한 항해에서의 인연을 통해서 매주 스터니를 하며, 항해가 끝난 다음에도 함께 스터디를 하면서 나아가고 있다는 말을 들었을 때, 단순한 프로젝트가 아니라 같이 공부할 맴버를 찾아가는 과정이 항해99 숨겨진 교육서비스라는 점에서, 이번 풀스텍 프로젝트는 너무나 소중했고 귀중했다.

02 Keyword : API

Application Programming Interface(애플리케이션 프로그램 인터페이스)

나의벨로그, 0주차 목요일 플라스크(Flask) Jinja2, JWT
간략하게 말해서 API는 두 애플리케이션(서버-클라이언트) 간의 서비스 계약(요청과 응답)을 정리하는 방식에 대한 부분이다. 협업에 대한 부분에서는 무엇보다 용어를 사전에 설정하는 것이 원활한 코드 작성을 가능하게 할 것이다. 이번 프로젝트에서는 처음주터 API에 있어서 남들이 기록한 부분을 복사해 온 부분이 아니라, 우리가 제공할 서비스에서 필요한 항목들에 대해서 어떤 정보들이 필요하고 어떤 용어를 설정함으로 대화를 주고 받을 것인지에 대해서 논의를 했다. 그 결과 산만하지 않은 이전보다 깔끔한 작성이 가능했던 것 같다.

API가 꼼꼼한 프로젝트들은 코드도 간결하다는 점에서 너무나 유용한 부분이었다. 뿐만 아니라, HTML(link, script)/CSS(link)/JS(script)를 서로 연결했을 시에도 해당부분에 대한 인지는 너무나 유용하였다. 그 결과 3개의 파일들이 유기적으로 작동되는 부분에 있어서 보다 간결하고 쉽게 코드를 작성할 수 있었다. 물론 작동 방식에 따라서 코드가 기록될 파일들을 구분하는 것도 필요하다. 이러한 부분까지 논의를 해야 할 것이다.

우리의 프로젝트에서는 하나의 문제가 있었는데, 아래와 같았다.

• 2개의 HTML
• 1개의 JS

1HTML이 새로고침되면 새로고침되도록 JS에 연결지었다. 그러나 2HTML에서는 해당 조건이 실행되면 안되었다. 그러나 이런 상황임에도 파일을 만이 만들기 싫어서(!) 1개뿐인 2HTML의 함수 때문에 JS파일을 새로 만들어야 하냐고 해서, 하나의 JS에 기록했는데, 그 결과 원하지 않은 이벤트가 제어되지 않았었다. 그런데 이러한 부분에 대해서 지식이 부족해서, 이번 프로젝트에서는 조건에 따라 프로그램이 작동되는 우리가 작성한 버그에 대해서 곤란해 한 경험이 있었다. 아래는 이번 프로젝트 가운데 커리큘럼 매니저님께서 제공해 주신 소스인데, 차분하게 읽어봐야 겠기에, 해당 포스트에 기록해 놓는다. 2일 안에 읽자.
코딩끄적끄적, Python flask blueprint

03 Keyword : 좋은 개발자

결국에 일은 사람이 하는 것이다. 즉 관계를 통해서 정보를 얻을 수도, 정보를 잃을 수도 있다. 이번 프로젝트에서 매니저님과의 채감상 5시간?의 소통은 그런 부분에서 너무나 유용했다. 문제를 접근했을 때, 디버깅을 하기 위해서 코드조직을 보는 방법에 대해서, 또한 앞으로의 공부의 방향에 대해서, 빌런에 대한 이야기들을 통해서 좋은 협업의 멤버가 되는 것 등에 대해서 간접적인 교육효과를 누릴 수 있었다.

뿐만 아니다. 지옥(OT주차, 토이프로젝트)과 천국(1W, 풀스텍미니프로젝트)의 상황에서, 후자의 경험에서 좋은 모델을 경험했다. 정말 우리는 많은 대화를 했고, 대화했고, 대화했다. 서로를 도울 수 있었고, 도움의 과정에서 내가 아는 것을 설명해야 했기에 확실하게 내용들을 복기할 수 있었고, 자신감을 얻을 수 있었다. 그러기에는 더 많은 배려와 타인이 코드를 바라보는 관점을 이해하기 위해서, 나 역시 그들과의 소통을 위해서 결국에는 공부를 게을리하지 않는 것, 그것이 가장 중요한 것에 대해서 더 느끼는 한 주였다. 그러기에 나는 오늘도 나아간다.