전체 글 썸네일형 리스트형 [TypeScript] 타입스크립트 시작해보기 타입스크립트란 무엇일까? 자바스크립트의 확장된 언어로, 자바스크립트 + 타입을 부여한 언어이다. 자바스크립트 코드와 타입스크립트 코드를 비교해보자. // js const name = 'hj'; // ts const name: string = 'hj'; 변수에 :를 쓰고 타입을 붙여주는 것이다. 그런데 굳이 타입을 하나하나 붙여주는 이유는 무엇일까? 어떤 장점이 있길래 대부분 자바스크립트 대신 타입스크립트를 사용하는걸까? 타입스크립트를 쓰는 이유? 크게 2가지 이유가 있다. 에러의 사전 방지 코드 가이드 및 자동 완성 1. 에러의 사전 방지 먼저 첫 번째 이유인 에러를 어떻게 사전에 방지할 수 있는지 알아보자. 코드를 짜다보면 타입을 잘못 사용하여 예상치 못한 에러들을 마주하게 되는 경우가 있다. 예를 들.. 더보기 [python] keyError 예외 처리하기 문제 발생 https://school.programmers.co.kr/tryouts/85912/challenges 위의 문제를 풀던 중 id_pw: ["rabbit04", "98761"] db: {'rardss': '123', 'yyoom': '1234', 'meosseugi': '1234'} 이와 같은 입력 값을 넣게 되었을 경우, 딕셔너리에서 해당하는 key 값을 찾지 못해((없는 key 값에 접근하려고 할 때) 발생하는 keyError가 발생하였다. 하지만 이 문제에서 해당하는 key 값을 찾지 못하였을 경우(즉 해당 id가 db에 없는 경우), fail이라는 메시지를 리턴해야한다. 그러기 위해서는 해당 에러를 예외 처리를 해야한다. 문제 해결 keyError가 발생하였을 때 예외 처리는 어떻게 해.. 더보기 React Hooks에 대해 알아보자. (2) 지난 글에서는 Hooks가 무엇인가에 대해 알아보고 useState Hooks와 이를 이용한 useInput, useTabs라는 새로운 훅도 만들어보았다. 이번 글에서는 useEffect에 대해 알아보고 사용법과 이를 이용하여 새로운 훅들을 만들어 볼 것이다. useEffect란? useEffect의 역할은 3가지가 있다. componentDidMount componentWillUpdate componentWillMount 즉, 리액트의 생명 주기를 관리할 수 있다는 것이다. 또한 위의 3가지 상황에 모두 동작하는 것이 아니라, 선택해서 특정 상황에만 렌더링되도록 할 수도 있다. 먼저 useEffect를 어떻게 사용하는지 살펴보자. useEffect(함수, [deps]); useEffect는 첫 번째 인.. 더보기 React Hook에 대해 알아보자.(1) 리액트 훅이란 무엇일까? 간단하게 말하면, 함수 컴포넌트에서 state(상태)를 가질 수 있도록 해주는 것이다. 그럼 Hook을 사용하지 않고는 함수 컴포넌트에서 state(상태)를 다룰 수 없을까? Hooks가 나오기 전까지, 함수 컴포넌트에서는 state를 다룰 수 없었다. state(상태)를 다루기 위해서는 클래스 컴포넌트를 사용하여 didmount, didupdate 등 컴포넌트의 생명 주기를 관리해야 했다. 하지만 React Hooks가 나오게 되면서 클래스 컴포넌트에서만 가능했던 것을 함수 컴포넌트에서도 똑같이 가능하도록 된 것이다. 또한 훅을 사용하여 함수형 프로그래밍을 하게 되면서 짧고 가독성도 더 좋은 코드를 작성할 수 있게 되었다. 훅의 역사 recompose 라는 라이브러리에서 시작되.. 더보기 Topological Sorting(위상 정렬)의 개념, 구현 방법 DAG (Directed Acyclic Graph) 사이클이 없는 방향 그래프 ex) 작업들의 우선순위, 학과 선수과목, 라면 끓이기 Topological Sorting(위상 정렬) DAG에서 모든 정점을 순서대로 정렬 정렬 기준: 모든 간선(Vi, Vj)에 대해 Vi가 Vj보다 앞에 위치 위상 정렬 구현 1) 진입 간선이 0인 노드부터 순서대로 탐색하는 방법 #include #include #include using namespace std; int n, m; // n: 노드, n: 정점 int s, e; // s: 시작지점 e: 끝지점 vector adjArray; vector inDeg; // 진입간선의 수 queue q; // 진입간선이 0인 노드를 저장하는 큐 vector A; // 결과값 저장.. 더보기 [조코딩 웹 개발 5주 완성] 5주차 정리 - DB없이 게시판 만들기, CRUD DataBase(DB) 여러 사람이나 프로그램이 데이터를 쉽게 공유하기 위해 체계적으로 관리되는 데이터의 집합 변수나 리스트가 데이터베이스와 개념은 같지만 차이점은 변수나 리스트는 프로그램을 종료하면 없어져버리고 데이터베이스는 그렇지 않다는 것이다. DB없이 게시판 만들기 1. 리스트 변수 만들기 2. content라는 변수에 req.body 값을 넣어주고 comment 리스트에 push한다. (제대로 값이 넣어졌는지 확인을 위해 comments를 출력해본다.) 3. index page에 댓글 목록 보여주기 index.js(백엔드) ⬇ index.ejs(프론트엔드) 4. post 방식에 작성한 코드를 보면 응답을 hi라고 보내준다고 되어있는데 다시 get 방식 '/' 경로로 가도록해야 index page.. 더보기 [조코딩 웹 개발 5주 완성] 5주차 정리 - EJS, Form 태그 이용해서 Get/Post 요청 보내는 방법 EJS Embedded JavaScript templating HTML + JavaScript 1. vscode를 열고 새 폴더에 index.js 파일을 만든다. 2. npm 사용을 위해 터미널에 npm init을 입력한다. 3. (웹 백엔드 만들 때 사용하는 프레임워크인) express를 설치한다. https://www.npmjs.com/package/express express Fast, unopinionated, minimalist web framework. Latest version: 4.18.1, last published: 4 months ago. Start using express in your project by running `npm i express`. There are 64010 ot.. 더보기 [조코딩 웹 개발 5주 완성] 4주차 정리 - node.js, npm, Express Module이란? 별도의 코드를 작성하지 않아도 모듈을 다운로드하여서 쓸 수 있는 기능 단위 node.js에서 사용하는 모듈: npm node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽 버전으로 다운로드를 해준다. 정상적으로 설치된 모습이다. 이제 vscode를 켜서 새로운 파일 index.js를 만들어준다. 코드를 입력해준뒤 터미널 창을 켜서 node index.js(파일명)을 적어주면 코드가 node로 실행된다. 이까지 완료되면 node.js가 컴퓨터에 깔려서 컴퓨터에서 JavaScript를 실행할 수 있는 환경이 생기게.. 더보기 이전 1 2 3 4 ··· 11 다음
