개발에 도전합니다
-
FE 개발에 도전합니다 (번외 REDIS)개발에 도전합니다 2022. 7. 3. 02:34
PO 다마고치는 최근 2주간 두 가지 키워드에 머리를 앓고 있었습니다. 1번 BFF, 2번 REDIS 입니다. 하 히 후 헤 호 하는 선배와 곧 아버지가 되는 호드 선배 앞에서 BFF에 대해서 설명하다가 그거 REDIS와 뭐가 다른거야 하니 할 말이 없더라구요 (...) 단순 데이터 꺼내기 좋게 해주는게 아니라 로직도 들어가고 뭐도 들어가고... 했지만 그래서 한마디로 뭐야! 하니 할 말이 없었습니다. 어려운 것을 쉽게 설명해야 하는데, 다 소화하지 못해서 어렵게 설명하다 보니 정신이 혼미해졌습니다. 특히 데이터 꺼내기 어려워서 쉽게 주는거면 그거 REDIS와 뭐가 달라 하니 할 말이 없었습니다... 그래서 쓰는 REDIS VS BFF 특집! Anderson 경의 답변 도움을 받아 명료하게 정리할 수 있..
-
FE 개발에 도전합니다 (6)개발에 도전합니다 2022. 5. 24. 22:22
Babel에 도전합니다. 네 PO 다마고치는 크런치에 당해 FE 개발에 한동안 도전하지 못했습니다. 어려운 문서(DOM)에 이어 BABEL에 크런치 당하고, 피니쉬로 깃허브가 의지를 박살냈죠... 하지만 다시 level 1부터 시작해봅니다. 처음부터 그렇게 레벨이 높지 않았거든요. 리액트로 통일되기 전 프론트엔드는 춘추전국시대를 겪었습니다. 그래서 Hello, world!를 html로 쓰면 모든 언어는 오류를 뱉어내곤 했죠. 그래서 위대한 Babel이 등장했습니다 https://babeljs.io/ Try out을 하면 Babel의 세계가 열립니다. Javascript로 다 바꿔주죠. Babel · The compiler for next generation JavaScript The compiler fo..
-
FE 개발에 도전합니다 (5)개발에 도전합니다 2022. 5. 9. 05:21
코드를 줄이는 방법 6. Paragraph1, 2 없애기-Container와 Root를 사용하면 paragraph1, 2를 생략할 수 있습니다. 7. Container와 Root 없애기 - 함수와 들어가는 값만 존재합니다. 웹 개발을 할 때, DOM 갖고 조작하는 방식을 활용해서 만든 것입니다. 8. map 사용하기-map을 사용하면 좀 더 편하게 다른 것을 만들 수 있습니다. document를 반복하는 줄을 줄일 수 있습니다. 하지만 역시 호락호락하지 않네요... parsing이 잘못되었다는데 제 힘으로는 여기까지인 것 같습니다. 동료의 도움으로 백틱 ₩을 알게 되어서, 겨우 고쳤습니다. 여튼 강의는 끝. 이제 과제를 할 차례...
-
FE 개발에 도전합니다 (4) npm start개발에 도전합니다 2022. 5. 9. 02:51
Hello, World를 Webserver에서 표시하는 데에는 크게 네 가지 방법이 있었습니다. 1. 직접 넣어주기 - 패러그래프를 아래처럼 직접 html로 넣어줍니다. const element = document.getElementById('app'); element.innterHTML='Hello, world! 2. 한단계 거쳐서 넣기 - element 안에 paragraph 따로 지정해서 넣어줍니다. const element = document.getElementById('app'); const paragraph = document.createElement('p'); paragraph.innertext = 'Hello, world!'; element.appendChild(paragraph); 3. ..
-
FE 개발에 도전합니다 (3) 1주차 회고 "백문이불여일코"개발에 도전합니다 2022. 5. 8. 23:42
PO 다마고치의 1주차 TIL입니다. 1.우선 학습하고 실습하는 것에서, 강의 창 다른 모니터에 띄워놓고 실습하고 학습하는 것으로 바꿨습니다. 그럭저럭 이해했다고 생각했는데 실제 hello, world!!! 를 실행하려고 보니 난관에 부딪쳤습니다. 우선 vs code에서 명령어를 등록하지 않아서 terminal에서 왜 난 code .이 실행이 안되지 하고 당황하고 있었는데요 지인의 도움으로 command + shift + p + f1 을 써서 terminal에서 vscode가 돌아가게 설치하였습니다. 그리고 index.html에서 code를 치는데, meta 태그를 안 닫아서 실행이 안되었습니다. 겨우 hello world를 실행한 순간 이제야 첫발을 떼었다는 느낌이 듭니다. 그런데 벌써 밀렸네요... ..
-
FE 개발에 도전합니다 (2) DOM개발에 도전합니다 2022. 5. 6. 04:57
PO 다마고치는 예전부터 DOM과 친하지 않았습니다. DOM의 설명을 읽어봅시다 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 인생은 실전! DOM의 구조를 확인해봅니다. 자세히는 모르겠지만 노드에는 문서 노드, 요소노드, 어트리뷰트 노드..
-
FE 개발에 도전합니다 (1) 환경설정개발에 도전합니다 2022. 5. 6. 03:48
짜잔 VS code의 시간이 되었습니다. 강의는 18분 더 남아있군요. 18분을 이해하기 위해 90분을 돌려서 본 것 같습니다. 아오!! 오늘 배운 것을 적어봅시다. command line interface(까만 화면, DOS)는 다 매뉴얼이라 편의성이 떨어지므로 VS code를 설치합니다. 그리고 저번에 무지성으로 치던 npm i -D 는 npm install save dev (개발환경에서만 사용한다 라는 것을 알았습니다) 웹서버를 동작시키고 html을 입력한 다음에 띄워 봅니다. html입력은 head, body로 구성되어 있고, 이것저것 잡아줘야 합니다. html(hyper Text Markup Language)은 동적인 웹 페이지의 웹 브라우저를 위한 웹 페이지 양식입니다. 초기에는 hyper t..
-
FE 개발에 도전합니다 (0) 프롤로그개발에 도전합니다 2022. 5. 6. 01:48
PO 다마고치는 코드숨이라는 것을 시작하게 되었습니다. 매주 과제를 해결하기 위해 우선 강의를 듣게 되었는데요, 뭘 설치하는지는 모르겠지만 하나하나 설치를 하다보니 어느덧 윈도 환경에서의 Webpack 환경설정이라는 장애를 만나게 되었습니다(...) 그리고 알 수 없는 오류가 계속 되고, 뭔가 잘못 지우면 노트북이 박살날 것 같은 예감에 사로잡히고 다시 다 지우고 작업하는데 진행할 수 없는 문제가 생겼습니다. 그래서 5일 정도를 도전한 끝에 나는 환경설정을 할 수 없어 라는 트라우마와 코로나를 얻었습니다(+1) 코로나 후에 리트라이를 하면서 PO 다마고치는 만반의 준비를 했습니다. 바로 맥북과 주변 프론트엔드 개발자의 도움을 받아 미리 깔아둔 것이죠. mkdir로 work 폴더를 만들고, work 폴더에..