전체 글 (122) 썸네일형 리스트형 <Swift> UIPickerView의 작동 방식 js를 하다가 swift같이 타입에 깐깐한걸 하려니까 헷갈려 죽을 맛이다ㅠ UIPickerView 는 아마 날짜나 알람 맞출때 많이 본 컴포넌트일 것이다.만드는 순서를 간단하게 정리해 둔다. 게시할 화면 ViewController에 다음을 상속한다 UIPickerViewDataSource, UIPickerViewDelegate 자동완성을 보면 옆에 Pr 이라고 되어있다.프로토콜이라는 뜻으로 틀이 정해져있다는 의미이다.그래서 상속만하면 왜 프로토콜대로 require 메소드등을 구현하지 않냐고 오류가뜨고 친절하게 자동완성도 해준다. - command + 해당 프로토콜로 들어가보면 더 자세하게 볼 수 있다. 스토리보드에 picker를 추가해준다. 그리고 스토리 보드의 화면과 클래스가 연동되어있는지 확인한.. <Swift> Swift에서도 변수 호이스팅이 될까? 변수의 스코프에 대해서 공부하다가 문득 스위프트에서도 호이스팅이 되는지 궁금해졌다.그래서 다음과 같은 코드를 실행해봤다.print(a)var a = 1 오...? 뭔가 호이스팅 비스무리 하게 되는 것 같아보였다. js 는 일단 undefined를 할당해주는 것처럼 0을 할당해주는 것 같아 보인다. 그렇다면 swift 선언시에 값을 할당해 주는걸까?그래서 다른 타입도 출력해봤다 print(a)print(b)var a = 10var b = "string" 음... 에러가 떠서 print 문을 다시 써봤다 print(a)print("b 출력 : \(b)")var a = 10var b = "string" 좋지 않은 접근이라고 한다...! 그래서 챗GPT에게 물어봤따다 swift는 지역변수를 선언하면 자동.. <Swift> 범위 연산자, ClosedRange<Int> 란 뭘까...? 범위 연산자?그동안 js만 하다가 swift를 보니 let, var가 낯설어지던중에 범위연산자를 처음 봤다...., .. 결과값으로 ClosedRange 라는게 나왔길래 내가 이해하기로는 위의 예시에서 1이 좌항 5이 우항으로 ...가 연산을해서 뱉어낸 결과값의 타입이 ClosedRange 인줄 알았다. 일단 찾아보니 저게 인스턴스란다. 엥..? 인스턴스는 클래스의 결과물인데 내장함수니까 클래스라고 이해하는건가? 그래서 물어봤다 챗GPT에게ㅋㅋㅋ 도와줘 인공지능...!! 구조체에 대해서도 물어봤더니 정말 친절하게 클래스와 구조체의 차이부터 짚어줬다. 어슴푸레하게 구조체 == 객체타입 아닌가? 라고 생각하고 있었는데 좀 달랐다 - 클래스 : 참조타입, 클래스를 인스턴스화 하면 그때 값이 특정 메모리 주소.. < React > React.memo() / useCallback() 이란? / useMemo() vs useCallback() 의 차이 지난 글에서 React.memo( ) 를 사용해도 계속해서 컴포넌트가 재랜더링 될 때에 대해서 해결책을 이야기 해보려고 한다. ( 클로저가 무엇인지 알아야 이해하기 쉽다.) 제목에도 적혀있듯이 바로 useCallback() 을 사용하는 것이다! useCallback( ) 이란? - 컴포넌트 실행 전반에 걸쳐 함수를 저장(메모라이제이션)할 수 있게 해주는 훅 - 리액트에게 내가 어떤 함수를 저장할 것이고, 해당 함수를 재 생성할 필요가 없다고 알려줄 수 있다. - 쉽게 이해하자면 함수가 저장된 메모리 위치 값을 통해 해당 주소에 저장된 함수를 꺼내 비교할 수 있게 해주는 것 같다. ( 원시타입과 참조타입의 차이를 생각해보자 ) 사용하는 방법은 다음과 같다. 이전 글의 참고 const toggleBtnHan.. <JAVASCRIPT> 호이스팅?? let과 const는 호이스팅이 된다? 안된다? 호이스팅이란? - 변수와 함수의 선언이 최상단으로 끌어올려지는 것 처럼 보이는 현상 JS를 공부하는 중이라면 아마 호이스팅에 대해 한번쯤은 들어봤을 것이다. 처음엔 단순하게 코드의 최상단으로 변수선언 한걸 끌어올려줘서 함수나 변수를 선언한 위치와 상관없이 인식한다고만 알고 있었는데 사실은 끌어올려주는게 아니라 그런 '것 처럼' 보이는 현상이다. 바로 예시로 확인해보자! console.log(a); myFn(); var a = 1; function myFn() { console.log("함수 선언문 호이스팅"); } 예시1을 실행시키면 결과가 어떻게 나올까? 변수에 값을 할당하고 함수를 선언한 것보다 호출하는 코드가 먼저 쓰였다. 결과는...?? 띠용!!!! undefined가 떴다. 분명 .. [ React ] React.memo() / 컴포넌트 재평가와 리랜더링(re-rendering)은 같지않다. / 함수 재평가 막기 리랜더링이 모야? 를 얘기하기 전에 리액트의 동작 방식을 알아야 한다. 리액트는 사용자 인터페이스 구축을 위한 JS 라이브러리이다. 리액트(여기서의 리액트는 리액트 자체! ) 는 브라우저가 동작하는 것과 상관 없으며 리액트는 컴포넌트와 상태객체를 관리하고 다른 객체의 상태와 컴포넌트의 변화를 감지하고 비교하는 라이브러리이다. 모두 알겠지만 간단하게 짚고 넘어가자면 React 는 virtual Dom에 미리 한번 노드들을 비교, 배치 등등 해보고 실제 Dom에 화면을 그려준다. 어? 그럼 두번 그리는거라 비효율적인거 아닌가? 싶겠지만 virtual Dom에서 그려보고 비교하고 등등등 뭘 하는 것들은 메모리 안에서만 이루어 지기때문에 묵직한 real Dom에 실제로 그리는 것과 비용적인 측면에서 비교가 안된.. [ React ] react 생명주기란? - 생명주기 테스트 코드 자... 이어서 생명주기 함수들이 정말 순서대로 작동하는지 알아보기 위해 예시코드를 갖고왔다. 그럼 바로...!!! 컴포넌트 전문 import React from "react"; class LifecycleExample extends React.Component { static getDerivedStateFromProps() { console.log("getDerivedStateFromProps 호출"); return {}; } constructor(props) { super(props); // getDerivedStateFromProps 함수를 사용하므로 // 경고메세지를 건너뛰기 위해 state 초깃값을 설정 this.state = {}; console.log(".. [ React ] react 생명주기란? - 생명주기 함수들 React의 생명주기란 무엇일까? - 일단 리액트는 컴포넌트 기반의 사용자 인터페이스를 구축하는 JAvascript의 라이브러리이다. - 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 부르는데 이 생명주기 함수들을 이용하면 특정 시점에 우너하는 동작을 하도록 만들 수 있다. 오.... 구글에서 가져온 그림인데 보기에는 좀 복잡해보이지만 안을 뜯어보면 생각보다 복잡하지 않다. 생명주기를 크게 3가지 과정으로 나눌 수 있는데 자세하게 살펴보자. 먼저 텍스트로 어떤 생명주기 함수가 어떤 과정에 호출되는지 보고 직접 그 순서를 써보면 이해가 훨씬 잘 될 것이다. 1. 생성과정 - 4개의 생명주기 함수 호출 1 - 1. constructor ( props ){ } // 첫 번째로.. 이전 1 2 3 4 5 6 ··· 16 다음
