728x90 반응형 분류 전체보기362 리액트를 다루는 기술 _ 19장, 20장 얼른 React로 돌아가고 싶다. 19장. 코드 스플리팅 리액트를 완성해서 배포할 때는 빌드 작업을 거쳐야 한다. 빌드 작업을 통해 JS 속 불필요한 요소들을 제거해 파일 크기를 최소화하거나, 브라우저에서 JSX 등 최근 JS 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능! 그리고 이러한 작업은 웹팩(webpack)이란 도구가 담당한다. (웹팩에서 별도 설정을 하지 않을 시? 프로젝트 속 모든 JS, CSS 파일이 하나로 합쳐지고 만다) Create React-App의 기본 웹팩 설정에는 SplitChunks란 기능이 적용되어, node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 따로 분리시켜준다! 즉 우리가 SPA를 개발할 때... 아무런 .. 2021. 3. 23. 아이스크림 오늘 점심을 먹고 대표님이 아이스크림을 사주신다고 했다. 찬 바람 쌩쌩 + 오전 9시 35분부터 땡기던 카페인 탓에 나도 모르게 커피를 먹자는 말이 나와버렸다. 대표님의 성의를 발로 뻥 차버린 것 같아 마음이 아팠다. https://www.youtube.com/watch?v=OIN7NtTQP5E 이 노래 알면... 이제 할부지다. 주말에 신나게 못 쉬어서 그런가. 아직도 지난주 속에 사는 듯한 느낌이 든다. 시계를 볼 때마다... 벌써 화요일이야? 벌써 12시야? 하는 생각이 든다. 시간이 아이스크림 마냥 주륵주륵 녹는 것 같다. 2021. 3. 22. 리액트를 다루는 기술 _ 17장 월요일이라 피곤한 건지. 17장. 리덕스를 사용해 리액트 애플리케이션 상태 관리하기 React에서 Redux를 사용하면, 상태 업데이트에 관한 로직은 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다. React에서는 store 내장함수(dispatch, subscribe 등)를 사용하기보다 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용한다! 설치는 이렇게! medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%.. 2021. 3. 22. 리액트를 다루는 기술 _ 16장 이제 50% 다 와간다... 와우! 16장. 리덕스 라이브러리 이해하기 앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다. 16-1) 개념 정의하기 난생처음 접하는 여러 키워드들이 등장한다..! 1. 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 얘는 하나의 객체 형태며 { type: 'TOGGLE_VALUE' } 요런 형식으로 이뤄져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다), 그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: .. 2021. 3. 19. 삐리릿 전 신방 현 미컴과에서 들었던 강의가 기억난다. AI 어쩌고 인공지능 어쩌고. 교수님이 정말로 저 분야에 대해 알고 말씀을 하시는걸까..?하는 생각도 들었지만, 아무튼. 요는 기자도 조만간 사라질 것이라는 것. 단순한 사건 사고나 인터뷰를 담는 기사라면 인공지능도 사람 못지 않게, 아니 사람보다 훨씬 더 빠르고 정확하게 해낼 수 있다는 것. 학생들의 표정이 암울해지자 다시 교수님이 덧붙인 말씀. 하지만 사람다운 기자 는 그 어떤 기계도 대체할 수 없다. 하나의 현상을 사회구조적으로 받아들이고, 그 안에서 자기 나름의 문제점과 해결책을 찾아내, 이를 설득력 있게 전달하는, 그런 사람다운 기자는 기계에 절대로 대체되지 않는다. 그렇다면 사람다운 개발자 란 어떤 모습일까. 디자이너나 마케터가 요구한 시안과 똑.. 2021. 3. 19. 리액트를 다루는 기술 _ 15장 목요일은 역시 목요일이군. 15장. Context API Context API는 React 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능! (ex 로그인 정보, 애플리케이션 환경 설정, 테마 등) 여태 사용했던 stlyed-components, 리액트 라우터 등의 라이브러리도 Context API를 기반으로 구현되어 있다. 15-1) Context API를 사용한 전역 상태 관리 흐름 이해하기 그런데 전역 상태를 관리한다는 게 무슨 뜻? 지금껏 우리는 프로젝트 내에서 환경 설정, 사용자 정보와 같이 전역적으로 필요한 상태를 관리할 때 → 주로 최상위 컴포넌트인 App의 state에 넣어 관리했다! 왼쪽 그림에 해당하는 건데... App이 지닌 value를 F나 J에 전달하려면 여러 컴포넌트.. 2021. 3. 18. 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1. 비동기 작업의 이해 2. axios로 API 호출해서 데이터 받아오기 3. newsapi API 키 발급받기 4. 뉴스 뷰어 UI 만들기 5. 데이터 연동하기 6. 카테고리 기능 구현하기 7. 리액트 라우터 적용하기 출발! 14-1) 비동기 작업의 이해 동기적 처리 : 요청이 끝날 때까지 기다리는 동안 중지 상태 → 그동안 다른 작업 불가 비동기적 처리 : 웹 애플리케이션 멈추지 않음 → 동시에 여러 요청 처리 가능! 그런데 이미 비동기 작업을 사용해본 적이 있다! JS의 setTimeout 함수가 그 예. setTimeout이 사용되는 시.. 2021. 3. 18. 리액트를 다루는 기술 _ 13장 5시쯤 되니 정신이 혼미해진다... 흠냐. 13장. 리액트 라우터로 SPA 개발하기 13-1) SPA란? React의 핵심! 꽃! 스파! SPA는 Single Page Application의 약자로, 한 개의 페이지로 이뤄진 애플리케이션이란 의미. React와 같은 라이브러리 or 프레임워크를 통해 우선 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자와의 상호작용이 발생하면 필요한 부분만 JS를 이용해 업데이트 해주는 방식! 그런데 한 개의 페이지라면... 이용자에게 보이는 화면도 하나뿐인 것 아닌가? → No! 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 JS와, 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 이렇게 다른 주소에 다른 화면을.. 2021. 3. 17. 왜 우리 집은 중력이 다른가 상대성 이론에 대해 알고 있는가. 나는 잘 모른다. 문과 만세! 그런데 어디서 쭈워들은건 있다. 중력이 다르면 시간도 다르게 흘러간단다. 그런 점에서 볼 때... 우리 집, 특히 내 방은 중력이 좀 다른게 틀림없다. 왜 집에만 오면 시간이 무지막지 빨리 흐를까. 기분 좋게 퇴근 할 때만 해도, 남은 할 일을 집에서 처리하리라는 자신감이 가득했다. 물론 그 결과는... 25년간 매일같이 스스로에게 속는 중. 오늘 있었던 교육이 생각난다. OKR. 무엇이 중요하지 않은가를 가려내는 도구. 비단 팀의 목표 및 방향 설정에만 적용되는 게 아닌 듯 싶다. 어쨋든 퇴근 후 집에서 내가 보낼 수 있는 시간은 한정되어 있고, 이렇게 한정된 시간 속에서 원하는 성과를 이뤄내기 위해서는 무엇을 해야하는지, 무엇을 하지 않.. 2021. 3. 16. 이전 1 ··· 27 28 29 30 31 32 33 ··· 41 다음 728x90 반응형
