잔잔한 물결로 파도 만들기

이번 기수부터 추가된 '실력 다지기' 기간이 끝났다. 해당 기간은 프론트엔드/백엔드에 주로 쓰이는 웹 프레임워크를 2주동안 자율적으로 학습하는 시간이다. 나는 프론트엔드에 흥미를 느꼈기 때문에 HTML, CSS에 대한 복습부터 자바스크립트, 리액트에 대한 학습을 진행했다. 하루에 대략 15~16시간을 학습했지만, 그럼에도 2주라는 기간이 이 지식들을 충분히 익히기에는 많이 부족하다고 생각한다. 그래서 어떻게 하면 이 기간을 의미있게 쓸 수 있을까에 대해서 많이 고민했다. 결국 2주간 최대한 이해도를 높여서 프로젝트에 들어가는 것이 목적이었기에, 노레퍼런스/노기획/노디자인의 CRUD 게시판을 만들면서 리액트 프레임워크 활용법에 대해 고민하고 익숙해지는 것에만 대부분의 에너지를 썼다. 결과물로 나온 게시판..

만일 다음과 같은 코드가 있다면, const str = 'abcde'; [...str].map((e)=>console.log(e)); [...str].forEach((e)=>console.log(e)); map을 이용한 출력문과 forEach를 이용한 출력문은 각각 같은 결과를 낼 것이다. a b c d e 여기에 쓰인 스프레드 연산자, map 함수, forEach 함수는 자바스크립트 개발에서 아주 유용하게 쓰이는 것들이다. 스프레드 연산자 [... OO]에 대하여 [... OO] 구문에서 '...'에 해당하는 부분은 자바스크립트에서 '스프레드(spread) 연산자'라고 불린다. 이 연산자는 이터러블(iterable) 객체의 개별 요소를 분리하여, 각 개별 요소들을 새로운 배열에 담아 반환한다. 위 예제..

이전에 TCP/IP 모델 이론에 대해서 공부한 적이 있다.네트워크 모델 | (1) OSI 모델, TCP/IP 모델 개요네트워크 모델 | (5) 데이터 단위와 흐름 이해하기<a style="color: #0070d1;" href="https://hyuga.tistory..

Life cycle: 마운팅 - 업데이트 - 언마운팅 Mount: 컴포넌트가 화면에 나타나는 것 Update: 컴포넌트가 업데이트되어 리렌더되는 것 Unmount: 컴포넌트가 화면에서 사라지는 것 useEffect로 생명주기 핸들링하기 리액트는 라이프 사이클마다 실행할 수 있는 메서드를 가지고 있는데, 이들은 함수형이 아니라 클래스형 컴포넌트에서만 사용할 수 있다. componentDidMount componentDidUpdate componentWillUnmount 그러나 앞서 배웠듯 이러한 메서드들은 리액트 훅을 통해 함수형 컴포넌트에서도 사용 가능해졌다. 컴포넌트 생명주기를 핸들링하는 기능은 useEffect 라는 훅을 통해 구현된다. 첫번째 파라미터에는 콜백함수(Clean-up 함수)가 들어간다...

자바스크립트는 싱글 스레드 언어로 설계되었다. 그러나 Blocking I/O를 효율적으로 처리하기 위해 비동기 처리를 가능케 하는 여러 메커니즘과 함께 동작한다. 이러한 메커니즘은 자바스크립트 엔진(V8 엔진 등)과 런타임 환경(대부분의 경우 웹 브라우저, 또는 Node.js 같은 서버 사이드 환경)에 의해 제공된다. 이들을 포함한 자바스크립트의 핵심 구성 요소에는 콜 스택, 힙, 이벤트 루프, 태스크 큐(또는 이벤트 큐)가 있으며, 추가적으로 마이크로태스크 큐와 웹 API도 중요한 역할을 한다. 시간관계상 더 자세한 내용은 다음에 학습하기로 하고, 오늘은 오버뷰만 해보도록 하자! 1. 자바스크립트 엔진 내부 구성요소 자바스크립트 엔진(대표적으로 크롬의 V8) 내부의 구성요소로는 콜 스택, 힙이 있다. ..

AWS General Immersion Day 포지션 소개 Solution Architects: 엔터프라이즈에서 서비스 런칭할 때 AWS 상 아키텍쳐 조언 Technical Account Manager: 기업에서 발생하는 각종 이슈들 조언 AWS 글로벌 인프라 대체로 가까운 리전, 가용영역(AZ)에 서비스 연결 하나의 가용영역(AZ)이 뻑나도 문제 없게 설계. 데이터센터 뿐 아니라 글로벌 네트워크도 갖고 있음. 가용 영역(AZ)은 AWS 리전에서 중복 전력, 네트워킹 및 연결을 지원하는 하나 이상의 개별 데이터 센터입니다. AZ를 사용하면 단일 데이터 센터보다 더 높은 가용성, 내결함성 및 확장성을 갖춘 프로덕션 애플리케이션과 데이터베이스를 운영할 수 있습니다. 서브넷에서 실행되는 애플리케이션을 여러 A..

State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제를 ..

드디어 리액트 라이브러리를 익힐 때가 왔다! 처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다. 그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다. 그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보면, 보이..

비동기 처리 발전과정 요약 현대의 프론트엔드 개발에서 비동기 프로그래밍은 필수적이다. 서비스는 사용자의 요청에 신속하게 응답하고, 동시에 백그라운드에서 데이터를 로드하고 처리하는 등의 복잡한 작업을 수행해야 하기 때문이다. 초기의 자바스크립트에서는 이러한 비동기 작업을 주로 콜백 함수를 통해 처리했다. 그러나 서비스의 규모가 커지고 로직이 복잡할수록 콜백 지옥이라는 부작용이 발생했으며, 이는 가독성 저하와 유지 보수 난이도 상승으로 이어졌다. 이러한 문제를 해결하기 위해 ES6(ECMAscript 2015)에서 Promise가 도입되었다. Promise를 통해 비동기 작업 완료 실행될 작업을 연기하는 것이 수월해졌고(Promise 객체 리턴값을 변수에 담은 후에 나중에 활용하는 식으로), 또한 체이닝을 ..

동기 처리, 비동기 처리 자바스크립트는 기본적으로 싱글 스레드 언어이다. 따라서 하나의 작업 흐름을 따라 처리한다. 그러므로 이전 작업이 진행 중이라면, 다음 작업을 수행하지 않고 기다린다. 이를 동기적 방식, 혹은 blocking 방식 이라고 부른다. 이렇게 했을 때의 문제점이 있는데, 바로 실행 시간이 긴 하나의 함수를 뒤의 함수가 계속해서 기다리는 경우가 생긴다는 것이다. CPU 스케줄링에서 FIFO 방식의 부작용을 그대로 상상하면 된다. 사용자 경험을 위한 언어인 자바스크립트 특성상 이는 치명적인 단점이다. 따라서 비동기적 방식, Non-blocking 방식이 도입되었다. 싱글 스레드이지만 마치 병렬처리를 하는듯한 착시를 일으키자는 것! 비동기식 프로그래밍에서는 특정 작업이 백그라운드에서 실행되며..