분류 전체보기

[React] 양방향/단방향 바인딩, 부모 컴포넌트의 state 바꾸기

↔ 양방향 바인딩? 양방향 데이터 바인딩에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터가 서로 양방향으로 흐른다. 부모와 자식 모두 데이터를 직접 변경할 수 있다. model(JavaScript)과 view(HTML)가 있을 때, 양방향 데이터 바인딩은 model이 업데이트 되면 view가 업데이트 되고, 반대로 view가 업데이트되면 model이 업데이트 되는 것이다. 이를 자동 동기화라고도 한다. 상호 구독 관계라고 생각하면 이해하기 쉽다. 하지만 변화 가능성이 열려있다 보니 데이터 흐름을 예상하기 어렵다는 단점이 있다. 이같은 단점의 대표적인 사례로 페이스북의 알림 버그가 있다. 👇 리액트는 단방향 바인딩 리액트에서 일반적으로 state 관리를 할 때는 props를 통해 부모에서 자식 컴포넌트로의..

[WIL] ES란? | 이노베이션 캠프 동북권 - 2주차 회고

🚢 이번 항해는? 금요일부터 시작한 6일간의 알고리즘 주차가 딱 6월에 끝이 났다. 2주차 팀원분들과 프로그래머스 1단계 50문제를 풀었는데, 달리기반으로 주어진 문제보다 12문제를 더 푼 셈이다. 우리 팀은 노션을 적극 활용했다. 각자의 풀이도 공유하고 참고하면 좋은 글들이나 필요했던 개념들을 계속 노션에 추가해 나갔다. 6일만에 제법 쌓여서 복습할 때 활용하면 좋을 것 같단 생각이 든다. 뒤로 갈수록 1단계 내에서도 문제가 길고 조금 생각을 해야 하는 (주로 카카오) 문제들을 접할 수 있었다. 알고리즘을 알면 쉽게 풀렸던 비밀지도 문제나, 정규표현식으로 깔끔하게 푼 풀이를 보고 놀랐던 다트게임 문제 등이 기억에 남는다. 빠른 시일 내에 집중해서 1단계 문제들을 대부분 살펴볼 수 있어서 의미있는 시간이..

[S.A.] JavaScript 이해 | 이노베이션 캠프 - 리액트 입문주차

7월과 함께 항해99 동북권 이노베이션 캠프의 리액트 입문주차가 시작되었다. 본격적인 리액트 공부에 앞서 JavaScript의 필수 개념을 초반에 확실히 짚고 넘어가고자 한다. 이번 주는 JavaScript의 특성 및 자료형, 객체의 특성과 불변 객체, 얕은 복사와 깊은 복사, 스코프와 호이스팅, 실행 컨텍스트 개념 등을 살펴볼 것이다. 컴파일러 vs 인터프리터 언어 전통적인 컴파일러 언어는 소스코드 전체를 한번에 머신 코드로 변환해 실행 파일을 만드는 컴파일 단계와 실행 단계가 분리되어 있어 코드 실행 속도가 빠르다. 인터프리터 언어의 경우 코드 실행 단계인 런타임에 문 단위로 한 줄씩 바이트코드로 변환하고 즉시 실행한다. 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되기 때문에 코드 실..

[WIL] 이노베이션 캠프 동북권 - 1주차 회고

🚢 항해 시작 월요일부터 목요일까지 풀스택 미니 프로젝트 주차 순항 후 금요일부터는 알고리즘 주간을 진행 중이다. 0주차 사전 스터디 분들과 웹툰 추천 및 리뷰를 남기는 툰숲(TOONSOUP) 토이프로젝트를 만든 뒤 친해져서 이후로도 지속적으로 교류를 하고 있다. 스터디 분들이 1주차에 전부 팀장이 되어 신기하기도 했다. 알고리즘 주간 팀은 우리 팀이 3명으로 가장 인원이 적은데, 0주차 팀장분과 또 만나서 반가웠다. 지금까지 모두 좋은 팀원들을 만나서 함께 성장하는 기쁨을 느끼고 있다. 🚖 프로젝트 - 주차어디 월요일 9시에 바로 1주차의 풀스택 미니 프로젝트 팀원이 정해지고, 해야할 일들이 쏟아졌다. 우리 팀은 주특기 리액트 지망 2명과 스프링 지망 2명으로 구성되었다. 그리고 팀장을 맡게 되어 월요..

[JavaScript] Array 생성자 함수와 Array.of, Array.from

Array 생성자 함수 꼭 new 연산자와 함께 호출하지 않아도 배열을 생성하는 생성자 함수로 동작한다. 생성자 함수 내부에서 new.target을 확인하기 때문! Array와 Array.of의 차이 Array 생성자 함수는 인수로 숫자 하나를 전달받으면 해당 인수를 length로 갖는 빈(희소) 배열을 생성한다. Array.of는 숫자 하나를 전달해도 그 인수를 요소로 갖는 배열을 생성한다. Array.from 이란 Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다. 첫 번째 인수로 전달한 유사 배열 객체에 의해 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다. 유사 배..

[S.A.] 주차어디 프로젝트 개요 | 이노베이션 캠프 - 1주차 5조

1. 프로젝트 명 주차어디 (ParkWhere) 2. 소개 "주차 어디 할 데 없나?" 내 주변에 있는 주차장 위치 및 정보를 간편하게 찾고 별점리뷰를 남겨 공유할 수 있습니다. 3. 와이어 프레임 4. 개발해야 하는 기능들 5. Public GitHub Repo https://github.com/Boyage99/park-where

[JavaScript] 화살표 함수와 this

화살표 함수(Arrow Function) function 키워드 대신 화살표=>를 사용해 간략하게 함수를 정의할 수 있다. 표현 뿐 아니라 내부 동작도 기존의 함수보다 간략하다. 특히 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다. 화살표 함수는 함수 선언문이 아닌 함수 표현식으로 정의해야 한다. const arrow = () => { ... }; 만약 매개변수가 한 개인 경우 소괄호( )를 생략할 수 있고, 함수 몸체가 표현식인 문 하나로 구성되어 있으면 중괄호{ }를 생략할 수 있다. const power = x => x ** 2; // const power = (x) => { return x ** 2 }; 와 동일함 화살표 함수가 객체 리터럴을 반환하는 ..

[Python] Flask 서버를 AWS EC2로 배포하기

AWS 서버 구매 AWS EC2를 사용해 리눅스 우분투 운영체제 컴퓨터를 빌릴 수 있다. 프리 티어 계정(무료)은 두 대 이상 동시 사용이 안되고 한 대만 사용 가능하다. 새로 발급하고 싶을 경우 인스턴스 중지가 아니라 인스턴스 종료를 눌러야 기존 컴퓨터가 반납된다. 서버 세팅 Window 기준 Git Bash를 켜서 아래와 같이 입력해 준다. ssh -i keypair경로 ubuntu@퍼블릭IPv4주소 ssh는 secure shell protocol을 의미하는데, 다른 컴퓨터에 접속할 때 쓰는 프로그램으로 보안이 뛰어난 편이다. keypair 경로는 인스턴스 생성할 때 만들어진 keypair 파일을 Git Bash에 가져다 놓으면 경로가 자동으로 들어가고, 퍼블릭 IPv4주소는 EC2 인스턴스 대시보드..