TIL

css module과 css in js에 대한 고찰개인 과제오늘 팀원들과 프로젝트를 하면서 css module과 css in js을 이용해서 style을 핸들링하는 것에 대해 얘기를 나누었습니다.일단 css in js와는 다르게 시멘틱한 태그를 유지할 수 있다.js파일

프로젝트를 위한 회의프로젝트 구현논의 사항컨벤션 통일프로젝트 특성 상 많은 사람들이 함께 하나의 repository를 이용하다 보니 컨벤션 통일을 할 필요가 있었다.커밋 메시지브랜치컴포넌트 이름함수 이름위와 같은 것들을 통일 할 필요가 있었고 서로 많은 이야기를 나누며

검색이 잘 되는 개발자가 되자!다른 사이트들을 구경해보자.코드리뷰 중 팁.개발자와 다른 일반적인 직업의 차별점은 아무래도 개발자는 자신의 경험과 노력 그리고 정성을 저장하여 남에게 보여줄 수 있다는 점이 아닐까? 그런면에서 강사님께서는 남에게 보여줄 수 있는 부분을 강

알고리즘 문제 풀이개인과제https://velog.io/@yhnb3/Leet-Code-823.-Binary-Trees-With-Factors기존에 React에서 이벤트를 핸들링할때 합성이벤트를 받아서 e.target을 이용하여 Dom에 접근을 하였는데 e.cu

오늘은 인턴 카카오 코딩 테스트와 개인 과제로 대부분의 시간을 보냈습니다. 코딩 테스트는 칠 때 마다 느끼는 것이지만 매번 조금씩 아쉬운 부분이 존재하는 것 같습니다.코딩 테스트 후기 및 복기는 나중에 코딩테스트 결과 및 해설이 나오면 그때 다시 다뤄 보도록 하겠습니다

올게 왔다. 개인 과제를 오늘부터 시작 하였고 TS + Recoil을 이용해서 개인 과제를 하도록 마음을 먹었다. 하지만 Recoil은 한번도 사용해본 바가 없기 때문에 한번 공부하면서 사용하였습니다.기존에 React를 이용해 프로젝트를 진행하면 항상 Redux를 이용

오늘은 강사님의 수업이 있는 날이었다. 수업이 있는 날이면 항상 코드리뷰를 해주시는데 코드리뷰를 해주시는 부분을 정리 하였습니다.eslint, typescript를 잘 쓰는 사람이 되자.실습을 통한 삽질을 해봐야 성장할 수 있다.전설의 동물인 중고 신입 아니야? 의 주

오늘은 착잡한 날입니다. 하려고 하는 것도 잘 안되고 뭔가 집중도 잘 안되는 날이었던 것 같다.일단 오늘은 react-portal을 이용해서 modal을 구현하였습니다. React는 다음과 같이 id를 root로 가지는 엘리먼트 하위에 우리가 원하는 화면이 구현된다.

오늘은 하루종일 드래그 앤 드랍이랑 싸웠습니다. 드래그는 어찌 어찌 구현하였지만 드래그를 하면서 내가 넣고 싶은 곳에 공간을 비우는 것이나 드랍했을때 그 드랍할 위치에 어떤 아이템이 있었는지에 대해 감지하는 것에서 막혔다.1\. 드래그 아이템을 하면서 => 가능2\.

드래그 앤 드랍을 구현하는 것은 상상 속 유니콘으로 남겨두어야 하겠다. 열심히 노력했지만 구현할 수 없었고 라이브러리를 한번 써보기로 했다.dnd-kit 이 라이브러리를 쓰게 된것은 기존에 알고 있던 beautiful-dnd라는 라이브러리는 strict-mode관련 이

오늘은 대충 개인 프로젝트를 마무리하고 배포를 하였는데 배포가 안되서 매우 매우 매우 헤맸다. 그런데 진짜 어이없던 문제의 원인을 찾아 버렸다.짧게 말하면 로컬에서의 파일 이름과 git에서의 파일이름이 상이했던 것이다. 즉 로컬에 favorite으로 저장해두었지만 이전

오늘은 개인 과제를 마무리하고 강사님이 다른 사람들의 프로젝트를 보면서 리뷰해주시는 부분에서 내가 느낀 점들에 대해 정리해 보았다.검색 결과에 따라 페이지를 달리 보여줄 수 있는부분을 처리했어야 했는데 깜빡하고 처리하지 않았다.이부분은 좀 크리티컬한 실수 였던거 같다

출처React앱에는 data를 fetching하는 전형적인 방법이 존재하지 않아 개발자들이 다들 자기만의 방법으로 data를 fetching해 왔습니다. 그들은 React hooks의 state와 effect를 이용하여 하거나 좀 더 일반적인 목적의 상태관리 라이브러리

오늘은 새로운 프로젝트 준비를 위해 혼자 공부를 좀 하였습니다. React Query사실 비동기 처리하면서 개발할 때마다 좀 일관적이지 않은 컨벤션으로 계속해서 개발 해왔던 것 같은데 React Query를 이용하면 일관적인 형식으로 관리 할 수 있을 것 같다는 생각이

lazy loading은 react-lodable을 추천하셨다.render 단에서는 map을 쓰지말고 컴포넌트로 만들어서 useMomo로 감싼 후 넣자.삼항 연산자도 render단에 쓰지말자. => 가독성이 떨어진다.useMemo나 useCallback을 쓰는 이유는

NextJS맛 보기사실 nextjs를 이전에 프로젝트에 사용하여서 좀 부담감이 없다는 생각을 많이 했었는데 어제 강의를 들으면서 내가 하던게 nextjs가 아니었나 하는 생각이 들어서 살짝 현타가 왓었습니다.그래서 다시 한번 nextjs를 이용해서 혼자서 토이 프로젝트

간만에 해서 그런가 생각보다 진전이 잘 안되었다. 기초적인 부분도 놓치면서 계속 스스로 제자리를 빙빙 돈것 같다. 다음에는 놓치지 않기 위해 많은 노력을 하였다.새로고침을 사용하면 상태 관리 라이브러리가 초기화 된다.아주 기초적인 부분인데 이 부분을 계속 놓치고 있었다

오늘은 팀원들과 함께 구현해 놓은 것들은 머지하는 시간을 가졌다. 정확하게 컴포넌트 단위로 역할을 나누지 못한 탓에 컨플릭트가 문제가 될 것같아서 함께 모여서 머지하였다.일단 검색어 추천을 inputValue이 변할때 마다 하게끔 구현하여서 키보드를 이용해서 추천 검색

오늘은 프로젝트를 거의 마무리로 가면서 구현 해놓은 것들을 리팩토링하는 시간을 가졌다. 그러면서 조금은 개인적으로 가치관에 따라 차이가 날 수 있을 수 있는 구현 방법에 대해 이견이 있었는데 그런 부분에 대해 한번 얘기해보겠다.재사용 가능한 컴포넌트를 무조건 사용해야

모바일 반응 UI를 제작하지 못했다.api가 느린 부분을 서버를 만들어 대체 하였다.빈 글자를 검색하는 예외처리를 놓쳤습니다. (눈물 ㅜㅜ)span태그 안에는 잡다한거 넣으면 안된다!!!HTML을 잘 알아야한다.a태그 안에는 li를 넣으면 당연히 안된다.span안에는

오늘의 시작과 끝은 victory js 적응기였다. 주어진 과제랑 최대한 비슷하게 하려고 하다 보니 기본적인 차트에서 스타일을 바꾸어가며 변경해야할 것들이 많았습니다.멀티 라인 차트 과제의 요구사항은 멀티 라인 차트를 그리되 오른쪽에도 axis를 추가해야 한다는 점

제목은 거창하나 아직은 victory js한테 얻어 맞는 중 입니다.axis label 위치 조정하기y축의 값들이 grid의 아래에 위치하게끔 하려면 그냥 VictoryAxis로는 불가능 합니다. VictoryAxis 안에 tickLabelComponet라는 것을 이

Route를 이용해서 페이지 단위로 구분할때페이지 내에서 사용하는 컴포넌트 들에서 공용으로 사용하는 것들은 \_shared에 넣는다.컴포넌트내에서 사용하지만 공유하는 컴포넌트가 아닌경우는 그냥 컴포넌트 내부에 넣는다. TS에서 각 객체를 변수로 참조할 싶을때 오류

원티드 프리 온보딩이 끝을 바라보게 되다보니 매일이 프로젝트 마감같고 매일이 급박하다보니 뭔가 매일 일하는 느낌을 받고 있습니다. 그리고 한동안 혼자서 공부하면서 이런 팀프로젝트나 이런 것들이 굉장히 고팠었는데 너무 좋은 경험을 하고 있는 것 같아서 정말 기분이 좋습니

자바스크립트는 객체의 상속을 프로토타입으로 해결합니다. 그래서 자바스크립트를 잘 이해하기 위해서는 프로토타입에 대해 이해해야합니다.일단 프로토 타입이 쓰이는 곳에 대해 언급을 하자면 가장 대표적인 객체 생성 연산자인 new가 있습니다.새로운 객체를 생성하기 위해 생성자

개인 프로젝트를 해야합니다. 주제 자유.. 창의성이라고 1도 없는 저에게 자유 주제는 너무 가혹한 처사가 아닐 수 없습니다. 그래서! 저번에 살짝 하려고 시작했던 갤럭시 날씨앱 클론 코딩을 해보려고 합니다. 이것참 클론 코딩이라는게 뭔가 남의 것을 날름 뺏어 베끼는 것

사용할 색깔은 정해놓고 변수로 사용하자.카카오 맵 같은 것을 사용할때 script를 index.html에 직접 삽입하지 않는 이유는 맵 관련 컴포넌트에서만 쓰는 script이기 때문항상 주니어와 시니어의 차이는 어떤 것을 하기 위해 삽질을 해봤느냐이다. 그러니까 어떤

오늘은 인터뷰에서 잘 대답하지 못한 김에 웹팩에 대해 간단하게 정리하겠습니다.일반적으로 javascript 기반 언어로 개발을 할때는 js 파일들을 모듈화 하여서 여러 파일로 관리하는 방식으로 개발합니다. 웹팩은 이런 개별로 저장되어 있는 js 파일들을 한 파일에 모아

경력 -> 무슨 일을 했는지 적어라.React - virtualDom 은 어떤식으로 비교되고 faint 될까?virtualDom과 현재 Dom을 비교한 후 재조정을 통해 바뀐 부분만 faint 된다.test code를 짜본 경력은 있었나?함수 컴포넌트가 dom 렌더링

여러 날짜 날씨 확인 하게 하기naver geocoding 연결하기react query에서 useQuries를 사용하면 suspense: true을 설정해 두어도 제대로 suspense 기능을 하지 않는 것을 알지 못하고 좀 오랫동안 헤맸습니다. 그래서 조금 가독성이

포트폴리오 정리하기막상 포트폴리오를 정리하다보니 너무 예전에 한 프로젝트들은 너무 구식이라 쓸만한 프로젝트들이 많이 없었다. 지금 하는 프로젝트들을 포트폴리오화 하여서 잘 만들어 놔야 겠다는 생각이 들었습니다.데이터를 어떻게 불러와야 할 것인가.개인 프로젝트를 하면서

원티드 프리 온보딩에서 마지막 과제 제출을 마쳤습니다~ 뭐 아직 정식으로 끝난 것도 아니고 정규과정이 조금은 남아있지만 그런 것들은 취업 관련이고 뭐 일단 더 이상 독촉하는 일이 없다는게 뭔가 홀가분 하기도 하고 시원 섭섭하기도 하고 그렇습니다. 2020년도는 Ssaf

다들 아시다시피 React에서 setState는 비동기적으로 동작합니다. 저도 너무 많은 state의 변화에 따라 리렌더링을 하면 성능에 이상이 생길 수 있기 때문에 setState를 모아서 한번에 처리해야하기 때문에 비동기적으로 해결 하는 것으로 알고 있습니다만 공

이터레이터는 ES6에 도입된 새로운 개념입니다. 제너레이터가 이터레이터에 의존하는 개념인 만큼 이터레이터에 대한 개념을 확실히 하고 가는 것이 좋습니다.js를 가지고 개발을 하다보면 iterable하지 않습니다라는 오류를 자주 접하게 되는데요. 쉽게 말하면 iterab

제너레이터란 이터레이터를 사용해 자신의 실행을 제어하는 함수 입반적인 함수는 매개변수를 받고 값을 반환하지만, 호출자는 매개변수 외에는 함수의 실행을 제어할 방법이 전혀 없습니다. 함수를 호출하면 그 함수가 종료될 때까지 제어권을 넘기지만 제너레이터는 그렇지 않습니다.

타입스크립트는 함수에서 변수들의 타입을 정해주기 위해 사용한다는 사실은 다들 알것이라 생각합니다. 그러다보니 함수를 선언하는데에 어느정도 제약사항이 생기게 됩니다. 우리가 어떤 함수를 선언한다고 할때 특정 변수타입만을 사용하는 경우도 많지만 그렇지 않은 경우도 있습니다

인터뷰에서 자주 등장하는 콜백과 Promise의 차이점에 대해 한번 알아보는 시간을 가져보도록 하겠습니다.콜백은 중첩하여 사용하기 위해서는 흔히 말하는 콜백헬때문에 가독성이 떨어지는 코드가 탄생하게 됩니다. 하지만 Promise를 이용하면 then메소드 때문에 가독성이

async await는 Promise를 쉽게 다룰 수 있게 해주는 문법이다.async await는 비동기적인 함수를 동기적으로 작성 할 수 있게 한다고 들 많이 얘기한다. 즉 위의 예처럼 Promise를 이용하면 체인을 이용하여 작성해야 하지만 async awai

,연산자는 =연산자보다 우선순위가 낮다.&&와 ||는 순서대로 동작하는 것이 아니라 &&가 우선순위를 가진다.단락 평가는 &&과 ||을 이용한 특성으로&&앞에 falsy한 값이 오면 뒤에 값을 평가하지 않고 앞의 값으로 인식한다.당연하게도 &&의 앞에 falsy한 값이

프로그래밍을 하면 변수를 저장하고 변수를 다시 사용하기 마련이다. 그러기 위해서는 특정 규칙이 필요한데 이러한 규칙을 스코프라 한다.자바스크립트는 컴파일러 언어이며 소스코드가 실행 되기 전에 컴파일레이션단계를 거치게된다. 이는 3단계로 이루어져 있는데토크나이징/렉싱파싱

엔진은 스코프 버블의 구조와 상대적 위치를 통해 어디를 검색해야 확인자를 찾을 수 있는지 안다.다음과 같이 함수를 정의 하면 스코프 버블은 3개로 나눌 수 있다.foo()가 정의된 글로벌 스코프b와 bar가 정의된 foo()스코프그리고 bar()스코프그럼 어떤식으로 검

그 이유를 일단 얘기하자면 컴파일러는 컴파일레이션 단계 그리고 실행단계를 거치기 때문이다.예를 보면다음과 같은 js파일이 있으면 모두가 알다시피 log의 결과로 2가 출력될 것이다.컴파일레이션 단계에서 var a가 실행되고실행 단계에서 a=2; console.log(a

이전에 this는 함수가 호출 될때를 잘 보아야 한다고 했다. 그래서 함수 호출부 즉 함수 호출코드부터 확인하고 this가 가르키는 것이 무엇인지 찾아보도록 하겠습니다.함수의 호출 지점으로 돌아가면 금세 확인할 수 있을거 같지만 코딩 패턴에 따라 그리 쉽지 않는 경우가