뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

많은 프론트엔드 공부를 하는 분들이 초반에는 html, css, javascript 위주로 공부를 하다가, 나중에는 데이터를 다루게 되는 공부를 하게 된다. 그런데 이 때 백엔드 지식이 아직 준비되어있지 않은 경우 데이터를 어디서 사용해야할지 고민하게 된다. 주로 APIs를 불러와서 사용하는 경우가 있는데, 이 외에 서버처럼 사용하는 경우 또한 연습을 할 수 있으면 좋을 것이다! 이렇게 백엔드 지식 없이 백엔드를 사용하여 프론트엔드를 연습해 볼 수 있는 것이 바로 json-server 이다. ref: https://www.npmjs.com/package/json-server 우선 CRA를 통해서 리액트를 설치해준다. 그리고 json-server와 concurrently를 설치해준다. yarn add js..

요 며칠 리덕스의 사용으로 인해 혼자서 고군분투 하고 있었다. 대충 큰 그림도 그려지고 Todo-list, counter 증감과 같은 정도는 해낼 수 있을 것 같은데 이 정도 레벨에서 사용하자니 "무려" redux를 사용하기에 무척이나 아깝게 느껴졌다. 이를 더 충분히 활용하지 못하는 느낌이 들었다. 과거에 redux-toolkit에 대해서 잠깐 보긴 했지만 당장 이것을 아는 것보다 원래의 Redux를 잘 아는 것이 더 중요하다고 생각하여 패스한적이 있다. 그러나 어차피 글로벌한 state 관리를 해야한다면 그리고 무조건 Redux를 사용해야 한다면 가능한 간편한 방법으로 사용하는 편이 효율적일 것이다. 그렇게 redux-tookit을 다시 찾아보게 되었다. toolkit에 관한 것은 유튜브와 공식문서..

Javascript를 이용한 함수형 프로그래밍을 공부하다가 Map 객체에 대해서 나와 과거에 잠깐 보았던 Map 객체에 대해서 가물가물하여, 정확하게 알아야겠다는 생각에 정리를 하게 되었다. MDN Map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Ref. site : https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming 우선 Javascript의 객체(Object)는 기본적으로 key : value 형태로 내부 프로퍼티를 관리하며 추가, 삭제 할 수 있으므로 컬렉션의 한 형태로 볼 수 있다. Map..

.... "Welcome to 자료구조!!" 날짜 바꾸는 것이 잘 되지 않아서 함께 스터디 하고 있는 분에게 물어봤더니 이런 말이 돌아왔다. 내가 아는 자료구조랑 달라서 "어? 이런 것도 자료구조에요?" 라고 물어봤더니, "문자형 데이터를 내 멋대로 조종하는 작업이니까요. 실제로는 Timestamp를 datetime으로 바꿔서 제공해주는데, 그걸 패트릭님이 숫자로 바꿔서 비교한 다음에 문자열로 결과물을 내놓는 거잖아요. 그렇기에 자료구조이지요." 라는 답이 왔다. 현재 회사 사정상 백엔드 없이 프론트 작업만 먼저 선행 되어야 하는 경우가 생겼다. 그래서 우선은 임시로 데이터들을 만들어놓고 그것이 작동을 하는지 정도만 알아보려고 했다. 이 후에 백엔드 분이 오시면 내가 만들어놓은 것을 보여드리고 비교해보고..

리액트에서 state를 관리하는 방법은 다양하다. 리액트는 단방향 워터풀 방식으로 부모에서 자식에게 props를 통해서 전달되어, 데이터 흐름이 일정하다. 그 말은 흐름을 비교적 알기 쉬워서 이해가 빠르게 된다는 장점도 가질 수 있다. 대표적으로 Redux, Mobx와 같은 것을 활용하여 state를 관리하게 되는데, Redux는 한번 사용하려면 귀찮다? 혹은 까다롭다? 라는 것이 따라붙는다. 큰 데이터도 아니고, 어떤 한 부분만 전달 하고 싶은 경우 굳이 Redux나 Mobx를 사용할 필요 없이 contextAPI를 활용할 수 있을 것이다. 특히 요즘은 contextAPI를 잘 만들어놔서 많은 경우 사용하기 좋다고 할 수 있다. 전체적으로 데이터를 전달해야하는 경우 Redux, Mobx를 사용하면 좋을..

오늘 아침부터 함께 스터디하며 도움을 받고 있는 분과 함께 재미있는 이야기를 했다. 요즘 Javascript와 Node.js의 내부 사정에 대해서 공부를 하고 있는데, 그러다보니 이런 문제가 나온 것 같다. 아마 당연하다고 생각하시는 분들도 있겠지만, 의외로 주니어의 경우 모르는 분들 또한 많을 것 같다고 생각 되어 정리를 해둔다. 첫 번째 문제는 이것이었다. var name1 = { name: "javascript" }; var name2 = { name: "javascript" }; name1 == name2 자 이것의 답은 무엇일까? name1과 name2는 같은 것일까? 이전에 정리해 둔 포스팅인 이벤트루프 편을 읽어보시면 조금 더 빨리 감을 잡을 수 있을 것이다! 정답은 바로! false 이다...

비전공자로써 처음 Javascript를 공부하기 시작한 분들이 아마 다 비슷비슷할 것이다. 처음부터 var, let, const 등을 시작으로 문자열, 객체, 클래스, 함수 등을 배우게 된다. 즉, 눈 앞에 코드를 쳐보면서 시작을 하는 것이다. 처음에는 그런 것이 재미있게 느껴졌기 때문에 시작을 하는 입장에서는 좋은 방법이라고 생각은 든다. 하지만 이제는! Javascript의 맛을 조금 봤다면, 발을 조금 담궈봤다고 한다면! Javascript의 Event Loop에 대해서도 공부를 해봐야 할 것이다. " Event Loop를 모른다면 Javascript를 안다고 말할 수 없다 " 라는 말을 하는 만큼 Javascript를 사용하는 분들이라면 누구든지 이벤트 루프에 대해서 알아야 할 것이다! 우선은 전..

(앞서 작성한 내용은 배움의 부족으로 나도 알아보기 애매해서... 다시 정리해서 올렸다.) 2021-10-22 수정 완료// (궁금한 점이 있거나, 틀린 부분이 있으면 말씀주세요~~!🧸) 프로젝트의 기획이 바뀌면서 모달을 만들어야 할 일이 생겼다. Modal은 리액트를 공부하다보면 한 번 쯤은 만들어보는 경우가 많이 있어서 간단하다고 생각했다. 그러나 공부를 할 때는 작동 방법에 대해서 배우느라 한 페이지에서 모달 창이 잠깐 나타나기만 하면 됐다. 하지만 프로젝트에서는 여러 곳에서 같은 Modal 창을 사용해야 한다. 그러면 단순히 component로 만들면 되지 않을까? 라고 생각 할 수 있지만 모달창은 의외로 복잡하다 (나만 그런가....) 한 사이트의 글을 발췌해보면 아래와 같다. "React's ..