분류 전체보기
-
portals을 이용한 리액트 모달창(modal) 만들기Front-end/React 2021. 7. 6. 17:20
(앞서 작성한 내용은 배움의 부족으로 나도 알아보기 애매해서... 다시 정리해서 올렸다.) 2021-10-22 수정 완료// (궁금한 점이 있거나, 틀린 부분이 있으면 말씀주세요~~!🧸) 프로젝트의 기획이 바뀌면서 모달을 만들어야 할 일이 생겼다. Modal은 리액트를 공부하다보면 한 번 쯤은 만들어보는 경우가 많이 있어서 간단하다고 생각했다. 그러나 공부를 할 때는 작동 방법에 대해서 배우느라 한 페이지에서 모달 창이 잠깐 나타나기만 하면 됐다. 하지만 프로젝트에서는 여러 곳에서 같은 Modal 창을 사용해야 한다. 그러면 단순히 component로 만들면 되지 않을까? 라고 생각 할 수 있지만 모달창은 의외로 복잡하다 (나만 그런가....) 한 사이트의 글을 발췌해보면 아래와 같다. "React's ..
-
웹 개발자라면 알아야 할 "CORS"에 대해서!Web 2021. 7. 5. 19:32
얼마 전 좋은 기회를 해볼 수 있었다. 바로 신입 프론트엔드 개발자 면접 자리였다. 항상 면접자로서만 준비를 해봤지 면접관으로서의 생각은 못해봤는데 이렇게 경험을 해볼 수 있어서 좋았다. 물론 내 처지에 누가 누구한테 질문을 하겠냐만은... 기술면접은 시니어분에게 맡기고 나는 주로 평소 공부 방법, 학습을 즐기는지, 계속 공부를 해나가야하는데 부담스럽지 않은지 등에 대한 질문을 했다. ( 주변에서 회사에 들어갔다고 안도감에 공부를 놔버리는 경우를 봤기 때문이다...ㅠ_ㅠ ) 어차피 신입 개발자를 뽑는 자리이기 때문에 어렵지 않은 질문들을 했다. 그 중에서도 대답을 곧 잘 하는 사람들의 경우 조금 더 깊은 질문을 하기도 했는데, 그 정도가 바로 CORS 였다. 그런데 CORS를 겪어도 보았고, 블로그에 정..
-
리액트로 기간(날짜) 지정하기 date range ( react-flatpickr )Front-end/React 2021. 7. 5. 17:40
사실 사람들이 많이 사용하는 것으로는 react-datepicker, react-calendar, react-dates 등이 있다. 하지만 나는 이번 프로젝트에서 템플릿을 기반으로 사용하기 때문에 이미 설치 되어있는 react-flatpickr를 사용해보려고 한다. 어떠한 단점이 있어서 사람들이 많이 사용하지 않는 것 같은데, 결국 어떤 date picker던지 그 코어는 비슷하다고 생각되어 하는 김에 정리를 해놓으면 나중에 다른 것을 사용할 때도 도움이 될 것이라고 생각된다. 어디든지 사용 할 수 있는 flatpickr라는 것이 있는데 내가 사용한 것은 react를 위해서 나온 react-flatpickr 이다. 1. Installation 설치는 npm, yarn 두 가지 중 아무거나 사용할 수 있다..
-
Javascript Scope (스코프) 기초Front-end/Javascript 2021. 6. 28. 11:21
Javascript를 공부할 때 흔히들 헷갈린다고 하는 것이 있는데 그것이 바로 오늘의 주제이다. 오늘은 스코프(Scope)에 대해서 정리를 해보려고 한다. 우선 Scope에 대한 정의는 강의를 하는 사람, 혹은 책 마다 조금씩 다르다. 몇 가지를 살펴보자면 아래와 같다. 1. 참조 할 수 있는 유효범위에 있으면 접근 가능한 것 2. 변수에 접근 할 수 있는 범위 3. 값이나 표현식이 보이거나 참조 할 수 있는 현재 범위 그런데, 이들을 살펴보면 공통적인 것이 있다. 바로 범위, 접근과 같은 단어들이다. 총싸움 게임을 하거나, 총 관련 혹은 군대 관련 한 것을 좋아하는 분들은 scope 라고 하면 느낌이 올것이다. 바로 저격총 위에 꽂는 망원경을 스코프라고 말한다. 스코프는 이와 비슷하다고 할 수 있다...
-
초보 개발자의 Redux 깨우쳐보기! (thunk)Front-end/Redux 2021. 6. 25. 18:17
Redux는 이제 애증이 되어버렸다. Redux 외에도 contextAPI, mobX 등이 있는데, 물론 필요에 따라서 사용을 한다면 도움이 될 것이다. 하지만 나는 단순히 Redux가 어렵다는 이유로 피해왔고, 그로 인해서 다른 선택을 했었다. 그러나 아무리 mobX가 뜰 것 같다고 하고, 쓰기 편하다고 하더라도 여전히 Redux를 사용하는 회사나 프로젝트가 많고, 최소한 이해는 하고 있어야한다고 생각했다. 더불어 지금 하는 프로젝트를 템플릿을 통해서 실시하다보니 템플릿은 Redux와 context API로 이루어져있었다. 그리고 토이 프로젝트로 하는 것도 state 관리가 필요해서 어떤 것을 사용할까 고민했는데, 겸사겸사 Redux를 사용하기로 했다. 내가 Redux를 무서워하는 이유는 이해가 잘 되..
-
풀리퀘스트 방법 (pr, pull request)Git&Github 2021. 6. 24. 16:33
회사에서 어떤 식으로 github를 통한 repository 관리를 하는지에 대해서 들었고, 그 결과 각 branch를 나누고 feature 단위로 pr 하기로 했다. 다행히 저번에 pr(pull request)을 해본 경험이 있어서 그리 어렵지 않게 해냈지만 그럼에도 잊을 수 있어서, 그리고 처음 해보는 사람들을 위해서 작성해주려고 한다. "코드 만든거 pr 해주세요", "repository 포크 떠서 수정 후 pr 보내주세요" 등 다양한 말을 사용한다. 나도 처음 했을 때는 무슨 말인지 몰라서 물어보기도 하고 시행착오를 겪었다. 그러나 협업을 할 때는 Pull Request를 할 일이 많아질 것이라고 생각되니 알아두면 좋을 것이다. 요약 1. branch 생성 2. 작업 완료 후 add, commit..
-
Hello world Javascript cli versionCoding-Training 2021. 6. 24. 10:51
Javascript를 포함해서 어떤 언어를 공부하던지 가장 먼저 해볼 수 있는 것이 바로 console.log("hello world") 일 것이다. 나는 hello world를 출력하는 것을 좋아한ㄷ. 어떤 언어를 공부하던 hello world를 출력해보는 것은 그것을 본격적으로 시작한다는 느낌이 들기 때문이다. 하루에 하나씩 공부를 시작하려고 하는 '코딩 트레이닝' 이라는 책에서도 hello world를 출력하는 것이 가장 먼저 나온다. 나름대로 Javascript를 공부하면서 조금씩 알아간다고 생각했는데, 알고보니 Javascript의 일부분도 잘 모르고 있었다는 사실에 최근 꽤 충격을 받으면서 다시 공부를 하고 있다. 일반적으로 Javascript를 익히게 되면 가장 먼저 console.log를 ..