일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 모던 자바스크립트 Deep Dive
- 객체 리터럴
- 옵셔널 체이닝 연산자
- object
- 함수선언식
- 23년 상반기
- 이직
- null 병합 연산자
- 모던자바스크립트 Deep Dive
- 개발자 회고
- mobx react
- react
- Object Type
- Object.is
- useState
- 모던자바스크립트
- 회고
- 객체 속 객체
- 함수호이스팅
- 전역스코프
- 지역스코프
- Java Script
- Object in Object
- rerender
- 객체
- til
- 2023 회고
- Type {children: Element} has no properties in common with type IntrinsicAttributes
- 개발자
- type script
- Today
- Total
목록전체 글 (22)
Pie_Archive
들어가기 전에 글 전에 자극적인 제목 죄송합니다. 이 글은 정답이 아닙니다. 최근 공부하면서 여러 프론트엔드 개발자분들께 여쭤본 내용과 생각을 바탕으로 적은 글입니다. 한 사람의 의견이며, 피드백은 언제나 환영합니다. 0. 개요 최근 리액트로 프로젝트를 구성하면서 아키텍쳐, 테스트코드 등 여러 부분에 대해 공부하고 고민하는 중이었다. 특히 최근에 비즈니스 로직을 분리하여 코드 가독성과 재사용성을 높이는 방향에 고민중인데, 그러다보니 자연스럽게 함수형 프로그래밍과 메서드를 활용하게 되었다. 거기에 초안 작성을 끝낸 코드를 최적화 하기 위해 useCallback / memo를 활용하여 재랜더링을 막으려는데, useCallback과 memo를 정확히 사용했음에도 계속 컴포넌트가 재랜더링되는 문제가 발생하였다...
0. 글을 쓰게 된 계기 최근 Test Code 관련 강의를 수강하던 중, 소스코드의 input 이 아래와 같이 구현 된 것을 발견했다. const InputWithRef = () => { const inputRef = useRef(); const addPost = (post) => { // 글 추가하는 함수 } const onSubmit = () => { const { value } = inputRef.current; addPost(value) } return( ) } 코드 자체는 문제가 없는데, 무엇이 문제여서 글을 쓰게 됬을까? 1. 배운거랑 달라요! 정말 이 문제 때문이었다. 조금 더 자세히 말하자면 나는 input창을 useState를 이용하여 구현했는데, 해당 코드에서는 useRef를 이용하여..
최근, 예전에 못 풀었던 코딩테스트 문제들을 다시 보고있다. 최대한 풀려고 노력은 해 보지만 특별한 알고리즘을 써야하는 문제에선 그냥 꽉 막혀버리는 경향이 있다. 그래서 정확히 이해하고 반쯤 외우고자(?) 한번 정리해본다. 1. 순열 (nCr) 고등학교 수학시간에 배웠던 공식이다. 만약 4개 중 3개를 뽑는 상황이라면 (4!) / (3!) = (4*3*2*1) / (3*2*1) = 4 -> 4가지 경우의 수를 지닌다. 로 정리할 수 있다. const arr = [1, 2, 3, 4] const answer = [[1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4]] 검증을 위해 펜에 직접 적어가면서 경우의 수를 따져봐도 결과는 동일하게 4개의 결과가 나온다. 그럼 이걸 코드..
최근 프로젝트를 설계하면서 공용 컴포넌트를 어떻게 짜야되는지에 대한 고민이 깊다. 그래도 하나씩 설계하는 가운데, 팝업창 컴포넌트를 만드는 과정과 생긴 오류에 대해 적어보고자 한다. 0. 목표 설정 일단 이런 형태의 팝업창을 만들 예정이다. 안에 들어가는 컨텐츠에 대한 고민은 나중에 하기로 하고, 화면 가운데에 뜨는 하얀 창 + 외부 어두운 창 의 컴포넌트를 만들고 싶었다. 실패기 1. Styled-components로 만들기 사실 이건 볼것도 없이 실패했다. 팝업 창을 만들려면 내부 흰 부분 + 밖 검은 부분 두개의 div 가 필요한데, 재사용성을 위해 두개의 Outer, Inner 를 따로 사용하려면 여간 번거로운게 아니었다. 2. React Components 형태로 제작하여 Element 전달하기..
최근 데이터를 설계하다가 이런 구조를 짜게 됬다. (아래는 위 케이스를 간소화 한 코드입니다.) const projects = { name: "1번 프로젝트", files : { 0: ["1번 파일", "2번 파일"], 1: ["3번 파일", "4번 파일"], 2: ["5번 파일"] //... }, } // 실제로는 배열이 중첩되어 좀 더 복잡한 형태이지만, 간략하게 쓴다. 원래라면 Array 형태로 파일 형태를 구성했겠지만, 이렇게 Object의 각 연결된 index값을 key로 주는 편이 접근하기 용이할 것 같아서 이런식으로 구조를 작성했더니 인터페이스 작성에서 오류가 잔뜩 생겼다. 나름대로 코딩테스트 1 단계씩 통과한 머리로 열심히 머리를 굴려봤지만, 아래 실패작들밖에 짜지 못했다. 실패 케이스 1..
최근 리액트를 쓰지 않는 회사에 취직하게 되면서 사용하지 못했던 리액트 공부를 다시 시작했다. 막 공부할때는 Redux를 막 배우고 있었는데, Firebase와 연동할 때 ReduxFirebase라는 모듈을 제대로 사용하지 못해 반포기상태였다. 그러다 MobX라는 상태관리 라이브러리를 접하게 되었는데, 사용은 간단하지만 React hooks에 최신화 된 정보가 없어서 기록해 놔야겠다 생각했다. 🛠️ 사용한 환경 React 16.4.0 Type Script 4.6.3 mobx 6.5.0 mobx-react 7.3.0 ❗ 주의 처음 CRA로 프로젝트를 시작했을 때, React 버전이 18.0.0 이라면 mobx를 지원하지 않을 수 있다. 이럴땐 yarn add 를 통해 설치 해 주거나, React 버전을 낮..