[React.js] state가 undefined일 때 - this 바인딩

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 배경 boostcamp AI Tech 1기에 참여하여 팀 프로젝트로 리액트 앱을 개발한 적이 있었다. CSV 형태의 평가 데이터를 입력하면 그에 따른 모델 예측 결과를 이미지로 확인하는 애플리케이션이었다. 사용자가 CSV 파일을 입력하고 전송 버튼을 클릭하면 즉시 로딩 화면(스피너)이 보이면서 모델 서버에 요청을 보내게 된다. 서버로부터 응답을 받고 나면 상태 변화에 따라 예측 결과를 화면에 보여준다. render 메서드의 초기 화면(CSV input, button) render() { const { isLoadin..

→2022.03.08

[Log] 피드백과 회고로 성장하기

어떻게 하면 잘 성장할 수 있을까? 실력적으로, 내면적으로 잘 성장하고 싶기 때문에 온/오프라인 가리지 않고 롤모델을 많이 찾아다니게 된다. 유튜브에 한 번이라도 들어봄직한 개발자라면 거의 영상을 다 찾아본 것 같다. 정말 모든 분들에게 배울 점들이 가득가득했다🥲 그저 주어진 자리에서 최선을 다하는 것이 가장 중요하지만, 어떤 알 수 없는 갈증을 채워줄 인사이트를 찾아다니는 성향 때문에 이런 추상적인 질문에 대해서 답변을 찾아다니고 많은 생각을 하게 된다. 내 mbti가 ENFP인데 엔프피 성향에 대해서 묘사한 내용을 보면 상당 부분 공감이 된다. 활동가형 사람은 인간관계나 사람의 감정, 혹은 생각과 관련하여 이들이 원하는 만족스러운 대답을 찾을 때까지 끊임없이 찾아 헤매고 다닐 것입니다. 그리고 진정 ..

→2022.02.28

[Vue.js] Vuex 언제 action을 사용해서 Store를 변경하는걸까?

배경 Vuex를 사용하여 쇼핑몰 애플리케이션에서 장바구니를 구현하고 있었다. 장바구니 페이지는 사용자가 장바구니에 담아놓은 상품들이 있고, 각 상품에는 해당 상품을 장바구니에서 지울 수 있는 삭제 버튼이 존재한다. 컴포넌트는 [부모 컴포넌트]장바구니(CartPage) -> [자식 컴포넌트]상품(CartItem) 방식으로 설계를 해두었고, 상품(CartItem) 내부에 구현된 삭제 버튼을 클릭할 때, Store에서 해당 상품을 제거하는 이벤트가 발생하게 된다. 기존에는 삭제 버튼을 클릭하는 경우, 부모 컴포넌트로 이벤트를 emit하여 부모 컴포넌트에서 Store 업데이트 작업을 처리하도록 구현했었다. 그러나, 코드 리뷰를 통해서 해당 기능은 Vuex를 사용하고 있으므로 부모 컴포넌트로 event를 전달하기..

→2022.02.22

[FE] img 태그 alt 속성 내용

아래의 Item 컴포넌트(Vue)는 상품 목록 페이지(ItemList)에서 하나의 상품 카드를 렌더링하는 컴포넌트이다. 과제를 완료하고 pull request를 통하여 피어리뷰를 진행하면서 다른 분께 받은 리뷰 내용이다. 평소 alt 속성의 내용이 중요하다는 점을 인지하고 있지 않았기 때문에 "image not found", "404 not found"와 같은 텍스트를 사용하고 있었다. 그런데 만약 이미지를 불러오는 과정에서 오류가 생기거나, 시각장애인이 서비스를 이용한다면 이 페이지를 통해서 얻어가는 정보는 "image not found" 밖에 없는 것이다ㅠㅠ 클라이언트를 개발하는데, 사용자가 필요한 정보를 얻지 못한다면 큰 문제라고 생각했다. 따라서 이미지가 로딩에 실패하거나, 스크린 리더를 사용하는..

→2022.01.28

[FE] jsconfig.json 알아보기

jsconfig.json 파일이 무엇인가? 타입스크립트 config 파일인 tsconfig.json를 상속받았다고 생각하면 된다. 해당 파일이 위치한 경로가 JS 프로젝트의 root 디렉토리라고 명시하는 역할을 한다. jsconfig 파일이 필요한 경우는 언제인가? 파일 스코프 - jsconfig 파일이 필요하지 않다. 어떤 방식으로도 a 파일과 b 파일이 서로 참조하지 않는 경우(import이든, CommonJS의 module이든) jsconfig는 없어도 된다. 즉, 이때는 VSCode에서 작업하는 JS 파일들은 각각 독립적인 유닛으로 처리된다. 명시적인 프로젝트 - jsconfig 파일이 필요하다. JS 프로젝트는 jsconfig 파일을 통해 구성된다. jsconfig 파일이 위치한 경로가 root..

→2022.01.06

[JS] 자바스크립트 함수를 변수에 할당할 수 있는 이유

이 본문은 자바스크립트 함수의 개념을 다룹니다💪🏼 본문을 시작하기에 앞서 자바스크립트의 리터럴과 표현식에 대한 개념을 간단히 정리하고자 한다. 리터럴(Literal) 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다. // number literal 3 123; 이 예제의 123은 단순한 숫자값이 아닌 숫자 리터럴이다. 사람이 이해할 수 있는 아라비아 숫자 표현을 사용해 숫자 123을 코드에 기술하면 자바스크립트 엔진은 이를 숫자값 123으로 평가한다. 즉, 사람이 이해할 수 있는 표현을 사용하여 자바스크립트 엔진이 값을 생성하는 것이다. 아래에서 다시 언급하겠지만, 자바스크립트는 함수를 하나의 객체로 정의한다. 즉, 객체 리터럴로 객체를 생성하는 것처럼 함수 리터럴..

→2021.12.07

[JS] 자바스크립트 원시 값과 객체(Immutability, Mutability)

ECMAScript6(ES6)는 7개의 데이터 타입(number, string, boolean, undefined, null, symbol, object)을 제공한다. 이는 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 자바스크립트 원시 타입(Primitive Type) 값의 변경이 불가능한 값(Immutable Value) 변수에 할당된 값은 더 이상 변경이 될 수 없다!! 여기서 중요한 포인트는 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다. number, string, boolean, undefined, null, symbol 타입이 이에 해당된다. 자바스크립트의 객체 타입(Object Ty..

→2021.12.06

[Python] python의 변수 스코프

Python의 with 개념을 공부하다가 문뜩 궁금한 점이 생겼다. 아래의 코드에서 contents와 my_file 값이 with 구문을 벗어나도 읽힐까? with open("text.txt", "r") as my_file: contents = my_file.read() print(my_file) # print(contents) # hello 매우 잘 읽힌다... 왜지🤔 https://stackoverflow.com/questions/45100271/scope-of-variable-within-with-statement Scope of variable within "with" statement? I am reading only firstline from python using : with open(fil..

→2021.12.02

[프로그래머스] 카펫 / 완전 탐색(Brute-force Search)

💭 문제 이해 갈색 타일의 개수와 노란색 타일의 개수가 입력으로 주어질 때, 전체 카펫의 가로 길이와 세로 길이를 구하는 문제이다. 수식으로 정리해본다면, 1. 가로를 테두리를 포함해서 \(x+2\) 로 표현하고, 세로는 테두리를 포함하여 \(y+2\) 로 표현한다. 2. 위 수식을 기준으로 전체 칸 수는 \((x+2)(y+2) = brown + yellow\) 로 표현할 수 있다. 3. 노란 부분은 \(xy = yellow\) 로 표현할 수 있다. 4. 전체 칸 수를 나타내는 수식을 전개하면 \(xy+2x+2y+4=brown+xy\) 가 되고, 이를 정리하면 \(x+y = \frac{brown-4}{2}\) 라는 관계가 성립된다. 즉, \(y = \frac{brown-4}{2}-x\) 관계를 만족하며 ..

→2021.03.18

[프로그래머스] 소수 찾기 / 완전 탐색(Brute-force Search)

💭 문제 이해 한 자리의 숫자들이 나열된 문자열을 조합해서 만들 수 있는 소수의 갯수를 구하는 문제이다. 파이썬의 기본 모듈인 itertools.permutations를 이용하여 모든 경우를 구하고, 소수 판별은 숫자 범위가 0~9로 적으므로 2~n-1까지 나눠보면서 직접 찾아냈다. 구현 언어: Python from itertools import permutations # 소수 판별 함수 def is_prime_number(num: int) -> bool: if num < 2: return False for i in range(2, num): if num % i == 0: return False return True def solution(numbers): answer = set() # 중복되지 않는 모..

→2021.03.17