전체 글
-
타입스크립트 : TS올인원 강좌 1-2 [제로초님 강의]Dev/타입스크립트 2022. 8. 11. 23:08
강의의 목적은 다양한 라이브러리의 타입들은 분석 및 수정할 수 있도록 하는것이다. 실제 소스를 분석하는것이 아니라 타입을 분석하는 방법 위주. 오늘 강좌는 기본지식 위주로 알아본다. https://github.com/ZeroCho/ts-all-in-one 기본 지식 * 타입스크립트는 최종적으로 자바스크립트로 변환된다. (deno는 타입스크립트 그대로 실행 가능하다.) * 타입스크립트는 언어이자 컴파일러(tsc)이다. 컴파일러는 ts코드를 js로 바꾸어 준다. * tsc는 tsconfig.json (tsc --init 시 생성)에 따라 ts 코드를 js(tsc 시 생성)로 바꿔준다. 인풋인 ts와 아웃풋인 js 모두에 영향을 끼치므로 tsconfig.json 설정을 반드시 봐야 한다. * 단순히 타입 검사..
-
타입스크립트 : TS올인원 강좌 1-1 [제로초님 강의]Dev/타입스크립트 2022. 8. 11. 22:58
해당 강의는 제로초님의 TS 올인원 강좌를 보며 작성한 글입니다. 왜 타입스크립트를 배워야 하는가? 타입스크립트가 자바스크립트보다 더 안정적이다. 안정적이라는것은 에러가 적게 발생한다는 것. 우리는 프로그램을 만들고자 프로그래밍을 하는 것이며 에러가 적은 프로그램을 만드는것이 좋다. 자바스크립트 코드를 타입스크립트로 바꾸면 안정성이 늘어난다. 프로그래머에게 에러가 발생하는 것 만큼 무서운 상황은 없다. 하지만 타입스크립트가 자바스크립트의 모든 에러를 잡아주지는 않는다. 하지만 자바스크립트보다 자유도가 많이 줄어들지만 실무에서는 자유도 보다는 에러가 적은게 더욱 좋다. 자바스크립트를 배우시는분들은 꼭 타입스크립트를 배워서 실무에 도입하였으면 좋겠다. 자바스크립트로 개발을 하면서도 머리속에는 타입에 대한 생..
-
YOU DON'T KNOW JS : 타입과 문법, 스코프와 클로저 CH01. 타입과 문법Dev/프론트엔드 2022. 8. 8. 21:09
자바스크립트를 공부하기위해 교과서격인 YOU DON'T KNOW JS를 구매하였다. 기존에 자바스크립트 딥 다이브를 읽었지만 해당 책을 읽어보는 것이 도움이 될거라는 말에 구매를하게 되었다. 기초부터 다시 재정비하는 느낌으로 책에 읽은 내용을 정리해보자 --- ## 01. 타입과 문법 ### 7가지 원시 타입 1. null 2. undefined 3. boolean 4. number 5. string 6. object 7. symbol (ES6 추가) `undefined`와 `undeclared`가 같다고 보는 개발자들이 많다고한다. 하지만 엄연히 다르며 자`undefined`는 객체의 프로퍼티나 선언이 되어있는 변수이며 값을 할당할 수 있는 변수이지만 `undeclared`는 선언조차 되지않은 변수를 ..
-
알고리즘 - 10주 완성 알고리즘 코딩테스트 (코딩몬스터) : 버블정렬 구현하기Dev/알고리즘 2021. 10. 7. 22:17
알고리즘 코딩테스트 버블정렬 구현하기 문제2G - 버블정렬 구현하기 버블정렬 import java.io.*; import java.lang.*; import java.util.*; public class Main { public static final Scanner scanner = new Scanner(System.in); public static void bubbleSort(int[] data, int n) { int cnt=0; for(int i = 0 ; i data[j+1]){ int temp =0; temp = data[j]; data[j] = data[j+1]; data[j+1] =..
-
알고리즘 - 10주 완성 알고리즘 코딩테스트 (코딩몬스터) : 데스티니Dev/알고리즘 2021. 10. 7. 00:04
이직하고 리액트, 엘라스틱서치, 노드js를 공부하고 개발하느라 블로그에도 소홀해지고 알고리즘 공부도 하지 못하였다. 대신 자바스크립트나 리액트에 대하여 많은 공부를 할 수 있었던 것 같다. 코딩몬스터 님이 구름에듀에서 진행하는 알고리즘 코딩테스트 강의가 개편되고 있어 다시 강의를 듣기 시작하였다. 문제를 유출할 수 없으니 앞으로 내가 풀었던 문제들의 정답만 올리도록 하겠다. 문제2F - 데스티니 import java.io.*; import java.lang.*; import java.util.*; public class Main { public static final Scanner scanner = new Scanner(System.in); public static void main(String[] ar..
-
React :: 17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기Dev/프론트엔드 2021. 8. 3. 14:33
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 이번 장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법을 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태관리가 번거로워질 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화해 줄 수도 있습니다. 앞에서 바닐라 자바스크립트 환경에서 리덕스를 사용..
-
React :: 16. 리덕스 라이브러리 이해하기Dev/프론트엔드 2021. 8. 2. 11:22
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적입니다. 물론 리덕스를 사용하는 것이 유일한 해결책은 아닙니다. 이전에 배운 Context API를 통해서도 똑같은 작업을 할 수 있습니다. 리액트 v16.3이 릴리즈되면서 Context API가 개선되기 전에는 사용 방식이 매우 불편했기 때문에 주..
-
자바스크립트 :: 비동기처리 & 이벤트 루프Dev/프론트엔드 2021. 7. 30. 11:00
자바스크립트 비동기 처리 자바스크립트 엔진중 가장 많이 사용하는 v8엔진을 기반으로 작성되었습니다. (구글 크롬) 자바스크립트의 비동기 처리는 특정 코드의 연산이 실행되고있지만 결과를 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 자바스크립트 엔진 자바스크립트 동작 방식은 아래이미지로 표현이 됩니다. V8엔진은 크게 두 부분으로 구성됩니다. 메모리 힙 (Memory Heap) : 메모리 할당이 이루어지는 곳 콜 스택 (call Stack) : 코드가 실행되면서 스택 프레임이 쌓이는곳 콜 스택 (Call Stack) 자바스크립트는 콜 스택이 하나이기에 싱글쓰레드 프로그래밍 언어입니다. 따라서 한번에 하나의 일만 처리할수 있습니다. 콜스택에 쌓인 함수나 코드를 위에서 아래로 차례..
-
React :: 15. Context APIDev/프론트엔드 2021. 7. 26. 10:58
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있겠지요. Context API는 리액트 v16.3부터 사용하기 쉽게 많이 개선되었습니다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있습니다. 예를 들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있습니다. 이번 실습은 다음 흐름으로 진행됩니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 - 기본적인 사용법 익히기 - 동적 Context ..
-
React :: 14. 외부 API를 연동하여 뉴스 뷰어 만들기Dev/프론트엔드 2021. 7. 23. 11:59
이 글은 김민준(벨로퍼트)님의 - 리액트를 다루는 기술 도서를 참고하여 학습하는 글 입니다. 지금까지 배운 것을 활용하여 카테고리별 최신 뉴스 목록을 보여주는 뉴스 뷰어 프로젝트를 만들어보자. https://newsapi.org/ 에서 제공하는 API를 사용하여 데이터를 받아 오고, 9장에서 배운 styled-components를 활욯하여 프로젝트를 스타일링 해보자. 이번 실습은 다음 흐름으로 진행된다 비동기 작업의 이해 - axios로 API 호출해서 데이터 받아오기 - newsapi API 키 발급받기 - 뉴스 뷰어 UI 만들기 - 데이터 연동하기 - 카테고리 기능 구현하기 - 리액트 라우터 적용하기 14.1 비동기 작업의 이해 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예..