자바스크립트를 제압하는 자가 리액트를 제압한다

슬램덩크에 나오는 "리바운드를 제압하는 자가 시합을 제압한다" 라는 말을 살짝 바꾸어 보았다. 꼭 그런건 아니지만 ㅋㅋㅋ 써놓고 보니 되게 비장하네ㅋㅋㅋ 제목도 내 입장에선 대전쟁이었지만, 잘하는 사람들 입장에서 보면 정말 작디작은 문제풀이의 벽이었다ㅋㅋㅋ 과장을 좀 과하게 했다며.

프론트엔드를 공부하고 있기 때문에 리액트는 필수적인 것인데, 그 전에 자바스크립트를 명확하게 알아야 되지 않을까...

항해를 시작하기 전에도 코딩테스트가 궁금해서 몇번 프로그래머스 사이트를 들락날락 거렸지만, 이걸 풀수가 있나? 답을 써놓은건가? 긴가민가 했었다.ㅋㅋㅋㅋ 그 문제들은 지금 보니 난이도가 있는 문제가 맞았다.
처음에는 난이도 하하 문제도 전혀 손을 못대고 어디서부터 해야할지 모르겠고 수학적 지식을 박박 긁어서 풀어보곤 했는데, 더디지만 조금씩 진전이 있었다. 아주.. 더디지만.
알고리즘을 해결하는 능력 자체가 아직 적용이 되는 단계는 아니지만 그래도 언젠가는 필연적으로 필요한 능력이지 않을까 싶어 마음이 조급했다.

아무것도 없던 시절에 컴퓨터 언어를 가지고 운영체제도 만들고, 프로그램도 만들고 하던 천재들의 이야기를 동경했던 적이 있다. 넘을 수 없는 벽이 있다고도 생각을 했고.
그때에 비하면 지금은 정말 자료도 많고 볼 것도 많은데 대체 왜! 나는 이렇게 기어가고 있나 ... 매일매일 반성을 했던 거 같다.
그런데 뭐, 별 수 있나. 해내야지. 그냥 해 보는거지.

자바스크립트도 역사가 생각보다 길진 않다. 넷스케이프에서 근무하던 브랜든 아이크 라는 사람이 만들었다고 한다. 익스플로러와 넷스케이프가 자동으로 깔려있던 윈도우 95가 생각나네.. ㅋㅋㅋ 넷스케이프를 망하게한 익스플로러가 지금은 크롬에 의해 .. ㅎㅎ..
암튼 초기 자바스크립트는 10일만에 설계를 했던거라 초반에는 뭔가 많은걸 다루진 못하지 않았을까.. 넷스케이프 서버에서 애플리케이션을 만들기 위해 만든 언어였는데, 기능적으로 웹브라우저에 알맞았나보다. 마이크로소프트에서 이것을 채택하면서 성장해갔지만 버젼 문제가 발목을 잡았단다. 구글은 이때 String기반의 Data 전송방식을 Ajax라는 이름으로 선보이게 되면서 성장하고 있었고, 자바스크립트 표준화를 놓고 옥신각신하다가 구글이 마이크로소프트를 누르면서 표준문제가 다소 해결되었다고 한다. Ajax와 jQuery 등의 등장으로 javascript의 발전이 계속 되었고, Node.js가 등장하면서 서버사이드 언어로 탈바꿈하게 되었단다.

EMCA -262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어로 ES 를 달고 재탄생 되었다. 97년부터 지금까지 10개의 판이 출판되었다. 2019년까지 표준화 작업이 진행되었는데 1999년부터 2009년까지 공백의 10년이 있었던게 신기하다. 만들어졌던 4번째판 언어가 버려지면서 공백이 생겼다.

점점 발전하면, 점점 공부할게 많아지는 것이 인지상정.
처음에는 쉬웠던 언어가 맞겠지만.. 표준화 이후 버젼이 업그레이드 될때마다 많은 기능들이 추가되면서 ^^ 결코 만만하지 않은 언어가 되었다..
지금 배우면서 끙끙 앓는 내용들이 대거 등장하기 시작한건 2009년 ES5판이 출판되면서부터인가보다.
99년에 3판이 나오고 4판이 버려졌으니까 그중 일부를 취해서 5판이 나오기까지 그 사이 10년이라고 하면 대대적인 업그레이드가 있어도 이상하지 않을 기간이긴 하다.
그때 등장했던 메소드들이 나의 알고리즘 풀이에 많은 도움을 주었다.
그뒤로 ES6이 나오기까지 또 공백이 어느정도 있는데, 이때도 대거 개선된 버젼으로 갱신되었고 이 이후로는 급격하게 변화하는 웹생태계로 인해 저의 주기적으로 1년에 한번씩은 갱신이 되고 있다고 봐야한다.
ES6는 ES5에 비해서 호이스팅을 개선해서 효율성을 높였고, let과 const도 생겼다. 화살표 문법도 지원이 되었단다.
편리하게 좋아지고 있는 느낌이다. 익숙해지면 말이다. ES6에서 대부분의 문제가 해결되어 있었기 때문에 개발환경이 ES6으로 거의 통일화 되면서 ES6판까지의 문법이 주를 이루지만 가끔은 그 이후에 나온 문법도 알고리즘 풀때 썼었다는 것이 함정.. ㅋㅋㅋ

리액트도 ES6에 맞춰 개발환경 셋팅을 했기 때문에 집중해서 공부하지 않으면 코베일거야..

알고리즘 문제를 풀 때 나의 문제점이라고 하면, 그 문제를 '나라면 어떻게 해결할까' 고민하는 시간이 너무 길었다는 점이다. 컴퓨터와 싸우고 있었다는... 그렇지만, 내가 풀면 뭐하나.. 컴퓨터가 인식하도록 공식을 만들어주고 답을 도출해 내야하는데...
그래서 너무 오래 끙끙 앓고 있던 것은 그냥 답을 찾아서 보고 사용된 함수나 풀이 방식을 찬찬히 살펴보기도 했었다.
접근 방식이나 풀어가는 과정은 맞는데 자바스크립트 문법이 아직 서툴러서 답을 내지 못한 경우에도 그냥 답을 봤다.
사람마다 답이 달라서 그렇지.. ^^
다양한 메소드를 알면 쉽게 풀 수 있다고 하는데, 해결법 자체를 내 스스로 떠올리지 않으면 소용 없을 거 같아서 어떻게든 해결 방법에 대한 접근은 스스로 해보고 싶다. 메소드 공부도 틈틈히 해야하고.
아직 요약해서 짧게 쓰는걸 못하니깐, 최대한 console.log를 활용해 오류를 초기에 발견하는 방식으로 푼게 나에게는 조금 맞았던거 같다.

주어진 54문제까지를 수월하게 다 풀고 남은 시간을 쉬었던 사람이 있는 반면.. 28문제까지만이라도 다 풀었어야 했는데 26문제만 풀었던 나는 테스트가 끝나고도 남은 두문제를 풀었고, 그 뒤페이지를 이제서야.. ^^.
목표는 틈틈히 한두문제라도 풀어낸다는 것인데, 시간을 너무 많이 잡아먹으면 안되니깐... 정말 틈틈히.. 풀어본다...

문제를 풀면서 생각했던건 여전히 반복문을 쓸 때, 내가 정확하게 알고 쓰는건 아니라는 생각이 들었다. 조건을 설정하는 것, 반복문을 통해 도출해내야 하는 답, 답이 도출되는 과정등이 아직 머리에 선명한 것은 아니어서 답을 보고 나서야 이해는 됐지만, 또 막상 혼자서 써보라고 하면 머리에 잘 없는게... ㅋㅋㅋㅋ

무언가를 배울 때, 단기간에 익히는게 정말 효과는 좋지만, 빨리 배운 만큼 잊어버리는 속도도 빠를 것이라는 게 조금 걱정이라 다소 느리더라도 차근차근 정확하게 알아가야 하는 부분이라고 생각했다. 잊을만 할 때 계속 되새김질을 하다보면 잊지 않고 평생 가지고 갈 내용이 되기 때문이다. 자전거나 1곡을 달달 외워서 치는 피아노곡이 그렇다. 머리가 외우고 눈이 외운게 아니라, 손이 외우고 있어서, 틀리면 처음부터 쳐야한다는 것이 함정이지만 ㅋㅋㅋ

어쨌거나 알고리즘 문제를 처음 봤을때 한 문제도 못풀던 것을, 이제는 접근자체는 하고 있다는 것으로 '고무적이다.' 라고 생각을 하고, 더디지만 조금씩 발전하고 있다며 셀프응원했다. 왠지 포기해야겠다는 생각은 안드네. 이상하다. 분명히 잘한건 아닌데 ㅋㅋㅋ 너무 수학을 못했어서 그런가 ㅋㅋㅋ가끔 풀리는 쉬운 문제를 만나면 자신감이 쉽게 달라붙어버림 ... ㅋㅋㅋㅋ

리액트 공부가 시작되었다

불안불안하지만 일단 진도는 나가야 하니까.
리액트 기초자료를 찬찬히 보면서 느낀거지만 정말 자바스크립트 언어 기반이 맞았다. 처음엔 이게 뭐지 했던 용어들이 1주 봤다고 살짝 낯이 익은거 보니..

함수 선언식 코드와 함수 표현식 코드는 자바스크립트 공부하면서 봤던 내용인데, 호이스팅의 영향이 없는 함수 표현식 코드를 주로 많이 쓴단다.
이것은 잘 체크해놔야겠다. 물론 유지보수를 위해서는 모두 익혀두는 것이 좋아서 차별없이 공부해야겠지만서도..

구조분해할당도 설명해보라고 하면 아직 무어라 말할순 없지만 배열의 구조를 분해하고 객체를 재할당하는 형태라고 보면 되려나...
공부가 더 필요하다.

Map함수와 Filter함수를 자주 쓰게 된다고 하니 그 문법을 정확하게 알아둬야겠다.

리액트에서 가장 많은 혼란을 가져다 주는 부분이 State와 Props인데, 예문을 수도 없이 쳐보고 암기하면서 대충 어떤 방식으로 써야하는지에 대한 감을 익히고 있다.

개발환경 설정하느라 시간이 조금 걸렸지만...
구글링 하면 방법이 어떻게든 나오니까 ^^
OS버전과 Xcode 버젼 맞추는걸 처음부터 확인하고 다운로드를 받았어야 했는데, 확인없이 젤 최신부터 받아내려오다가 아무것도 호환이 안되어서 그제서야 호환 확인을 했다. 다음에는 잘 체크해야겠다.

카멜케이스로 쓰는 법도 아직은 좀 어색하다.
귀찮으면 소문자, 어쩔수 없이 대문자를 쓰는 나의 알고리즘부터 수정을 해야할 거 같다.

HTML이 이제서야 눈에 좀 익나 싶었는데, 리액트로 넘어가니 또 다른 느낌이었다. 다행히 기술매니저님의 열강 덕분에, 뭐라 설명할 순 없지만 저렇게 사용하는거구나를 알게 되었나보다. 혼자 해보기 조금 수월해졌다.

물론 여전히 예제를 통째로 암기해서 그 흐름을 파악해보려 하고 있다.

화살표 함수를 쓸 때는 어쩔수 없이 그 형태를 외워야 하기 때문에, 눈에 익고 손에 익을 때까지 쳐야할거 같다.

다른 팀원분의 정보에 의하면, 부모 자식 컴포넌트의 개념도 이해는 되지만 직접 웹사이트를 개발한다고 생각하면 이게 순서가 어떻게 되어야 하는지 혼란이 온다고 한다.
나는 아직 거기까진 진도가 나가지 않았었는데, 그 말을 참고해서 페이지 구조와 기능을 한번 정리해 보았다.
가장 오래 보여지는 순서대로 할아버지 컴포넌트 아빠 컴포넌트 이렇게 잡으면 되지 않을까 싶은데, 이것은 다음주에 진행을 해봐야 겠다.

vs code로 프로젝트에 접근하는 방법을 아직 모르겠다. yarn start를 해서 한 프로젝트를 켜놓고, 다른 프로젝트를 참조하고 싶을 때... 그 파일만 열어보면 되는것이긴 하지만, 각각의 vs code가 열리면 편하대서..ㅎ
이거 찾는다고 해놓고 밀린 집안일과 건강챙기기에 일요일이 순삭 되었다.
다시 일주일이 시작될텐데, 이번에는 어버버 하지말고 정신을 똑바로 차리자.