전체 글 (39) 썸네일형 리스트형 State State React를 활용하여 프로젝트를 진행하다 보면 State의 개념이나 사용 방법이 익숙하지 않아 이로 인해 스트레스를 많이 받았던 경험이 있으리라 예상한다. 이처럼 반복되는 스트레스를 줄이고자 State에 관한 글을 적어 보려고 한다. State란 요약하자면 컴포넌트 내에서 관리하는 변수 이다. 이러한 state를 사용하기 위해선 아래처럼 useState를 활용하여 선언 및 초기화 해야 한다. ( React hook 기준 ) const [number, setNumber] = useState(0) React 에서는 number의 값을 변경하고 싶은 경우 setNumber를 활용하여 변경해야 한다. const onClickButtonEventHandler = () => { // add number .. Shallow copy && Deep copy Shallow copy 얕은 복사는 참조(주소)값을 복사한다. const obj = {} obj.a = 10 const newObj = obj newObj.a = 20 console.log(obj.a) // 20 console.log(obj === newObj) // true obj 객체를 새로운 newObj 객체에 할당했다. 하지만 참조 값을 할당했으므로 newObj의 값을 변경하더라도 obj의 값이 변경된다. 또한 === 연산으로 두 객체를 비교한 결과 값이 true 로 나온 것을 확인할 수 있다. 위의 결과로 확인할 수 있는 것은 obj 의 메모리 주소를 newObj가 동일하게 가리키므로 결국 하나의 객체를 공유하고 있는 것이다. Deep copy 깊은 복사는 값 자체를 복사하는 것을 의미한다. c.. Functional programming Pure vs Impure Functions Pure function은 input에 따라 output이 변경되지 않는 값을 내놓는다. 또한 함수 밖의 변수에 영향을 받지 않는다. const add = (a, b) => a + b 위에서 add 함수는 Pure function이다. 함수에서 받는 parameter a와 b에 따라서 항상 a + b 값을 결과로 반환하기 때문이다. const NUMBER = 42 const getNumber = (a) => NUMBER * a 위의 getNumber 함수는 Pure function이 아니다. 바깥의 NUMBER라는 변수의 영향을 받고 있기 때문에 항상 같은 결과값을 반환한다고 보장할 수 없다. 이러한 상황에서 우리가 debug를 할 때 다양한 어려움에 겪을 확.. Prototype Prototype JavaScript는 Prototype 기반 객체지향 프로그래밍 언어이다. ES6에서 Class가 도입되었으나 ES6의 Class가 기존의 Prototype 기반 객체지향 모델을 대체하는 것은 아니다. 사실 Class도 Function이며 기존 Prototype 기반 패턴의 일종이다. Prototype, Class JavaScript는 Class라는 개념이 존재하지 않는다. 대신 Prototype이라는 것이 존재한다. Class라는 개념이 없으므로 상속이란 기능도 존재하지 않는다. 따라서 Prototype을 기반으로 상속을 구현하여 중복을 제거한다. 여기서도 마찬가지로 ES6부터 Class가 도입됐다고 해서 JavaScript가 Class기반으로 바뀌는 것은 아니다. // Constru.. Lexical Environment Lexical Environment Lexical Environment: 실행중인 함수나 스크립트 전체, 혹은 코드블럭은 본인만의 Lexical Environment가 있다. 환경레코드, 외부 렉시컬 환경으로 구성. 환경레코드 지역변수를 객체로 저장. function, this경우 매개변수 포함. function add(a, b) { let number = 1 return a + b + number } add() // 환경레코드 => { number: 1, a: undefined, b: undefined }외부 렉시컬 현재 렉시컬 환경보다 상위의 렉시컬 환경. Script는 최상위 렉시컬 환경. Script 내부에서 호출된 함수나 코드블럭은 외부 렉시컳 환경으로 Scirpt 렉시컬 환경 참조. 렉시컬 환.. 실행에 옮기지 못했을 뿐이다. 프로젝트 작업이나 공부를 하다 보면 모르는 부분이 존재하기 마련이다. 이러한 문제들에 직면할 때마다 습관적으로 하는 생각이 있다. "일단은 어떻게든 완성하고, 나중에 공부해야지." 이렇게 가벼운 마음으로 넘긴 내용은 6개월 후에 생각나곤 한다. 직면한 문제를 회피하고 기록해두지 않는 습관 덕에 매일같이 반복되는 문제들이 나의 발목을 붙잡게 된다.똑같은 내용을 반복적으로 검색하고 동일한 문제로 같은 시간동안 고뇌한다.이러한 행동들은 소모적인 행동이 아닐 수 없다. 이제는 이런 습관들을 버리고 발전할 때가 된 것 같다.부트캠프를 진행하면서 비전공자부터 전공자, 그리고 현업자까지 다양한 사람을 만나게 됐다.사람들은 발전하기 위해 본인의 잘못된 행동을 인지하는 것에서 시작해 이를 보완하기 위한 방안을 마련한다... 왜 그렇게 다들 블로그에 집착하는가 너 블로그 해 ? IT 공부한다면서 개발 블로그 이런 것도 없어 ? 긴 시간을 살아온 것은 아니지만 시간표면 시간표, 일정표면 일정표, 지겹도록 작성해 본 것들이다. 한 번도 지켜지지 않을 것을 알면서 남들이 작성하니까 똑같이 작성할 뿐이다. 이러한 일반적인 것들이 나에게 무슨 큰 의미가 있을까..? 딱히 눈에 띄고 싶거나 특별하고 싶다는 생각은 하지 않는다. 그저 "누구나 다 하는 거잖아." "너한테 유리한 거 아니야?" 이런 말들에 현혹되어 따라 할 뿐이다. 이 블로그 역시 나의 수많은 일정표 중 하나일 뿐이다. 요즘 나는 어딘가에 내 생각을 적어내고 싶었고 그 핑계가 티스토리였을 뿐이다. 하지만 부디 이번에는 티스토리가 나에게 유리했으면 하는 마음뿐이다. 그래. IT를 공부하고 있으니까. 남들 다 .. 이전 1 2 3 4 5 다음