전체 글
블로그 공지
오랜만입니다.FE와 JS를 한참 공부하고 제가 3학년때부터 약 1년정도 쓰기 시작했던 블로그였는데, 카카오 화제사건으로 인해 색인이 다 빠져버린 뒤로 블로그 쓸 맛이 안나서 velog로 이사를 갔습니다.종종 제 글을 봐주시고, 또 저도 가끔 JS가 기억이 안날때 제 블로그를 뒤지기도 하는데요, 글을 하나 둘 씩 velog로 옮길 생각입니다.(JS ,TS를 다시 한번 보고싶거든요 !)제 근황은 게임개발로 완전 돌아섰습니다. 여러가지 이유가 있지만, 제일 큰건 개인적으로 Web이 재미가 없어졌습니다. 웹을 하면서 프로그래밍을 잘한다라기 보단 점점 프레임워크의 고수가 되어가는(?) 그런느낌을 받았기 때문에... 점점 스프링이 없으면 코딩을 못할것 같은 느낌이 들고, 모든 사고 방식이 하나의 프레임워크에 의존..
[React/Optimize/Memo] Component를 분리하고, 마지막으로 React의 Memorization을 활용해보자!
Component의 재사용성과 확장성을 갖기위해서 , 컴포넌트의 "합성"를 이용해서 , 좀 더 추상적인 컴포넌트를 만들고 혹은 재사용되는 컴포넌트를 만들고 구체화하는 방식으로 구현했습니다. 하지만, 그에 따른 부작용으로 컴포넌트간의 관계가 복잡해지고, 리렌더링 Issue가 생기기 시작했습니다. 현실적으로 FE 개발자에게 "생산성"은 빠질 수 없는 요소이기 때문에, 사실 이러한 이슈에 대해서 깊게 파고드는 것은 당장 필요한 사항은 아닐 수 있습니다. 세부적인 동작은 모두 React에 일임하고 , 우리는 그것을 사용하면 되니까요. 하지만,한번 깊이감있게 가져가보겠습니다. 재밌기도 하거든요! Memo를 사용하기 전에, 독립적으로 나눌 수 있는 Component가 없는지 확인해보자 . (By 공식문서) 저보다 ..
[React/Composition] 리액트 컴포넌트의 확장(React Composition)
React를 잘 사용하기 위해서는 , 컴포넌트 설계능력이 필수적이게 된다. 이건 경험적인 요소라 많이 쓸수록 자연스럽게 늘어나겠지만, 한번 의식적으로 확장을 해보자! 웹 환경에서의 재사용 웹에서는 생각보다 반복적인 작업이 많다. 예를들어, 아래와 같은 Modal 창을 구현한다고하자. Modal창은 구체화되서, "로그인창"이 될 수도 있고, "상세정보를 보여주는 Modal창"이 될 수도있다. 물론 , 각각 폴더로 분리해서 각각의 Component로 구현해도 무방하다. 하지만, 이번에는 "의도적"으로 Modal창을 추상화시키고, Login창과 Detail창을 구현해보도록 하겠습니다. 마치 "상속"과 비슷하지 않나요! React에서는 상속대신 , Composition https://reactjs.org/doc..
[JS/비동기/프로미스] JavaScript Promise에 대해서
오늘은 Front-End의 중요한 영역인 Data Fetching 에서 사용되는 Promise 문법에 대해서 알아보겠습니다. Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. - MDN promise는 ES6에서 나온 새로운 기능으로, 어떤 "문제점"을 해결하기 위해서, 나온 기능입니다. 즉, 그 문제점이 뭐냐를 이해하면 Promise의 정체를 밝힐 수 있을 것 같습니다. Promise의 등장배경 작은 규모의 웹에서는 비동기 요청이 많지 않아서, 각 비동기 요청간의 의존성이 크지 않았다고 합니다. 웹이 발전하고, 다양한 플랫폼으로 진출하면서 , 단순히 callback만으로는 모든 상태를 통제하기 어려웠다고 합니다. 예를들어, 로그인 과정에서 서버와 통신과정이 필요합니다...
[Python/Django/Framework] Django , WebFramwork에 대해서
Airbnb 클론코딩을 진행하면서, 다양한 개념에 대해서 알게되는것 같습니다! 오늘은 WebFrameWork 장고에 대해서, 배운걸 기록해보겠습니다. WebFramWork FrameWork는 "모든 레고가 준비되어 있는 큰 레고상자"라고 생각하면 저는 더 와닿았습니다. 특히, "조립법"까지 모두 정해져있는 레고상자입니다. "FrameWork"는 정해진 사용법이 있다는게 라이브러리와 큰 차이점인 것 같습니다. 코드 내에서의 차이점을 보자면, 라이브러리는 프로그래머가 가져와서 쓰고 , FrameWork는 프로그래머가 작성한 코드를 가져갑니다.(이게 무슨말이야) 즉, 라이브러리는 라이브러리 내의 일종의 함수를 내가 import해서 활용하는 측면이 강하다면, FrameWork는 이미 활용법이 정해져 있는 함수와..
[python/poetry/Django] Python Webproject 셋팅하기 -1
클론코딩을 진행하면서, ToyProject들을 진행해보려고 합니다.큰 마음을 먹고, 백엔드부터, 프론트까지 다 해볼 수 있는 노마드코더님의 Airbnb클론코딩을 질렀습니다! 기본적인 강의 내용을 자세하게 포스팅 하기보단, 제가 부딪혔던 문제들을 위주로 ,기록해보려고 합니다! Python Project 설정 Poetry 다운로드 패키징 시스템 중 하나입니다. 각각의 프로젝트에 대해서, 독립적인 개발환경을 만들어줍니다. 프로젝트에 따라서, 필요한 환경이 다르기 때문에, 독립적인 개발환경이 필요하게 됩니다. Poetry를 다운로드하면, 환경변수를 등록해주어야 합니다. 설치를 확인하기 위해, poetry --version을 입력하면, 실행할 수 없는 명령어라고 나올 수 있습니다. 환경변수 설정하기 [STEP1]..
[git/git-hub] 개발한 결과물을 관리해보자(Git)
Github을 지속적으로 썻지만, git을 CLI로 쓴적은 없습니다. 항상 github 홈페이지에 들어가서 페이지가 완성이 되면, 업로드하는 방식으로 개발을 자주 했다. 혹은 UI tool(Github Desktop)을 이용해서 그냥 commit을 하는 형태로 했다. 나의 스킬을 늘리기 위해서, Cli 환경으로 git을 이용해보는 연습을 해보려고 한다. Git hub에 흔적을 남기면서, 이제 프로젝트를 위한 준비단계라고 생각하면 좋을 듯합니다. Git Git은 분산버전관리 시스템입니다. 여러 대의 컴퓨터(여러 명의 프로그래머)에서 하나의 프로젝트에 대해서 "협업"을 위해 유용하게 사용할 수 있는 tool입니다. 그림으로 이해를 해보자면, 아래와 같습니다. 컴퓨터 A,B,C가 모두 같은 작업물에 접근하여,..
[JS/객체/프로토타입] JS의 프로토타입
JavaScript는 프로토타입형 객체지향 언어이기도 하고, 함수형으로 쓸 수도 있고, 뭐 다양한 측면을 가진 언어입니다. (non-blocking , single-Thread,concurrency ,asynchronized 언어이기도 하죠) 자바스크립트의 빼놓을 수 없는 특징 중 하나인, 프토로타입에 대해서 적어봅시다! 프로토타입 현실에서 "프로토타입" 이라는 말 많이 쓸 일이 없지만 , 프로토타입에 대해서 먼저 알아봅시다. 종종 영화같은데나 게임버전 같은데서는 Prototype이라는 용어를 씁니다. 아이언맨에서 "프로토타입"이라는 말이 나오는데요 , 구글링을 해보겠습니다. 아이언맨 1에 나오는 초기 슈트입니다! 감은 잡힙니다. "프로토타입"이라고 하면, 뭔가 초기버전 , 근본이 되는 1.0ver같은 ..