분류 전체보기 143

왜 Call by reference가 필요할까?

면접에서 call by value와 call by reference의 차이를 물어보시는 질문에는 잘 답했지만, 이어지는 후속 질문인 '왜 call by reference를 쓰는 지 아나요?' 란 질문에는 답변을 못했다. 메모리 주소만 복사되기 때문에 변수를 복사해 수정하면 원본 값에도 손상이 가는 call by reference는 과연 왜 쓴는 걸까? 어떤 상황에서 쓰게 되는 걸까? 를 조사해봤다. 1. 함수 내부에서 변수가 가리키는 메모리 그 자체를 변화시킨 것이 반영된다. (참고로 JS에서 함수에 값을 넣으면, 그 변수에 담긴 메모리에 대한 참조값이 원시값처럼 복사되므로, 함수 안에서 메모리의 값 자체를 변경한건 적용되나, 함수에 아예 다른 메모리 주소를 할당하면 함수 외부의 원래 변수와는 연결이 아..

React 디자인패턴 공부 - 1. 컨테이너와 프리젠터

참고한 자료: https://burning-camp.tistory.com/84#%EC%BB%A-%ED%--%-C%EC%-D%B-%EB%--%--%--%ED%--%--%EB%A-%AC%EC%A-%A-%ED%--%B--container-presenter-%--%ED%-C%A-%ED%--%B- - 컨테이너와 프리젠터(container-presenter) 디자인 패턴은 비지니스 로직과 뷰를 분리하는 방식이다. MVC 패턴과 유사함을 느낄 수 있다. 컨테이너 프리젠터 패턴이란? - 컨테이너는 data와 state를 가지고, api를 불러온다. 그리고 모든 로직을 처리한다. - 프리젠터는 데이터를 보여줄 뿐이며, state를 갖고 있지 않은 단순한 함수형 컴포넌트이다. - 프리젠터는 스타일, 컨테이너는 데이터의 개..

개발 공부/React 2022.12.22

가장 쉬운 리액트 12강

가장 쉬운 웹개발 with Boaz 12강. React component, element, instance 끝내기 React Components, Elements, and Instances 번역글 Managing the Instances hkc7180.medium.com 더보기 Managing the Instances 기존 UI model(OOP) class Form extends TraditionalObjectOrientedView { render() { // Read some data passed to the view const { isSubmitted, buttonText } = this.attrs; if (!isSubmitted && !this.button) { // Form is not yet ..

개발 공부/React 2022.12.16

가장 쉬운 리액트 11강

가장 쉬운 웹개발 with Boaz 11.Thinking in React 11.Thinking in React (React 공식문서의 main concepts 번역 글입니다.)함께보면 이해가 쏙쏙https://youtu.be/J3iNl63vbYMhttps://youtu.be/rs_3C-8I5ysReact는 Javascript로규모가 있는 Web app을 만드는 빠른 방법이다.이번 글에서는 React를 활 davidhwang.netlify.app 더보기 React는 Javascript로 규모가 있는 Web app을 만드는 빠른 방법이다. 이번 글에서는 React를 활용해서 제품 검색 App을 구현할 것이다. 구체적인 예시(제품 검색 App)를 React로 직접 구현하면서 그 과정을 익혀보자. Mockup ..

개발 공부/React 2022.12.16

가장 쉬운 리액트 10강

가장 쉬운 웹개발 with Boaz 10.Composition vs Inheritance 10.Composition vs Inheritance (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙https://youtu.be/T6Wj2pbkorA 과 는component를 만드는 2가지 다른 패턴이다.(https://www.youtube.com/watch?time_continue=238&v=wfMtDGfHWpA)(위 영상을 참 davidhwang.netlify.app 더보기 composition과 inheritance는 component를 만드는 2가지 다른 패턴이다. 둘 다 중복을 제거하기 위해 사용한다. (https://www.youtube.com/watch?time_..

개발 공부/React 2022.12.16

가장 쉬운 리액트 9강

가장 쉬운 웹개발 with Boaz 9.Lifting state up 9.Lifting state up (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙https://youtu.be/ZkfeVp-YnCUhttps://youtu.be/GMcP6ZhwbXo여러 component들에게 data의 변화를 모두 반영해야 할 때각 component의 state를 통합해야 davidhwang.netlify.app 더보기 이것이 state를 끌어올리는 것, 즉 lifting state up이다. 현재 상태를 가진 component로 부모 component로 state를 끌어올리는 것이다. 여러 component들에게 data의 변화를 모두 반영해야 할 때 각 component의 s..

개발 공부/React 2022.12.16

가장 쉬운 리액트 7~8강

가장 쉬운 웹개발 with Boaz 7.Lists and Keys 7.Lists and Keys (React 공식문서의 main concepts 번역 글입니다.) 함께보면 이해가 쏙쏙 https://youtu.be/7xZMLyfsQc8component로 list를 구성할 때key를 활용하여 각 component를 구분해야 한다. 그래야만 ReactDOM이 각 component를 비 davidhwang.netlify.app 더보기 React에서 array의 아이템 하나하나를 component로 만들어 리스트에 저장한다. 다수의 component를 rendering 하기(list 만들기) elements를 item으로 갖는 array를 만들 수 있다. 이 array를 {}를 통해 JSX안에서 사용할 수 있다..

개발 공부/React 2022.12.15

[TIL] 함수형 프로그래밍과 람다에 대해

러닝 리액트 56 ~ 64p 함수형 프로그래밍의 역사는 람다 계산법으로 거슬러 올라가야 한다. 람다 계산법을 이후 존 맥카시가 리스프란 이름의 프로그래밍 기법으로 바꾼 것이 오늘날의 함수형 프로그래밍이다. 함수형 프로그래밍은 선언형 프로그래밍의 일종이다. 선언형 프로그래밍 vs 명령형 프로그래밍 선언형은 what 에 집중, 명령형은 how 에 집중. 선언형 프로그래밍은 함수명을 통해 다음에 처리할 일을 추론하기 쉬워 주석을 많이 안달아도 된다. 또 각 함수의 구현 방식은 추상화로 감출 수 있다. 함수형 프로그래밍의 핵심 개념은 5가지이다. 불변성, 순수성, 데이터변환, 고차함수, 재귀 (++ 이 부분부터는 직접 코드를 따라치며 익혀보기) 컬리 기술블로그 람다 (http://thefarmersfront.g..

가장 쉬운 리액트 1~4강

강의를 들은 이유: React 문법을 잘 알고있단 확신이 없어서😅 그동안 React를 쓸 때 내가 정말 React 문법을 깊이 있게 이해하고 있다는 확신이 들지 않아 공식 문서를 쉽게 한국어로 풀어서 강의해주시는 데이비드님의 '가장 쉬운 React(https://youtu.be/MTzS8XnD6-Q)'강의를 보게 됨. [가장쉬운 리액트] Elements - 가장 쉬운 웹개발 with Boaz 공식문서는 여기. https://reactjs.org/docs/rendering-elements.html Rendering Elements – React A JavaScript library for building user interfaces reactjs.org 1강: JSX 1.JSX (React 공식문서의 ma..

개발 공부/React 2022.12.13