컴퓨터 IT
React 시작 Create react app, npm install 차이점
React 시작 Create react app, npm install 차이점
2022.11.01React를 시작하기로 마음먹었다면 이 포스팅을 보면 됩니다. 이번 포스팅에서는 리액트가 무엇인지, 컴포넌트가 무엇인지, node.js를 다운로드한 다음에 리액트 프로젝트를 띄우기 위한 create-react-app을 입력하는 방법, npm install을 사용하는 이유에 대해서 알아봅니다. React 시작하는 방법 React는 무엇인가? 리액트는 선언적이고 (declarative), 효과적이고 (efficient), 유연한 (flexible) 자바스크립트 라이브러리입니다. React를 이용하면 여러 개의 컴포넌트(component)로 복잡한 UI를 만들 수 있습니다. 참고로 바닐라 자바스크립트는 절차형 프로그래밍(imperative)입니다. 절차형(imperative)응 컴퓨터가 이해하기 쉽도록 명시적..
VSCode 커서 여러 개 선택하기, 멀티 커서
VSCode 커서 여러 개 선택하기, 멀티 커서
2022.10.28코드 강의를 보다가 선생님이 갑자기 커서를 여러 개 설정하고 한 번에 코드를 치는 모습에 당황하신 적 있으시죠? 멀티 커서의 존재를 알고 나면 선생님처럼 빠르게 코딩이 가능합니다. 반복되는 부분이 많을 때 사용하기 좋은 기능이에요. VSCode 멀티 커서, Alt + Shift 일반적으로 좌클릭을 하고, 코드 선택을 할 때 Wrapping selection이 됩니다. 위 그림처럼 클릭한 부분부터 현재 있는 커서까지 전체 줄이 선택됩니다. 이 상태에서 "expense-date" 부분을 그냥 "date"로 클래스 이름을 바꾸려면 하나하나 클릭해서 바꿔줘야 합니다. 클릭 버튼을 계속 누른 상태에서 alt+shift 버튼을 누르고 움직이면 wrapping selection에서 box selection으로 선택이..
JavaScript 에러 해결 방법
JavaScript 에러 해결 방법
2022.10.25이번 포스트에서는 JavaScript 코드를 입력하면서 만날 수 있는 error에 대해서 다루고자 합니다. 그리고 error와 관련된 JavaScript 개념을 함께 소개합니다. JavaScript 에러 해결 방법 Assignment to constant variable 타입 에러, const 변수에 재할당을 시도했을 때 보이는 에러입니다. TypeError: Assignment to constant variable. 아래 코드에서 myName='min'; 부분이 재할당하는 부분으로 보이는데, 이 부분을 없애거나, 다른 변수를 만들어서 해당 오류를 없앨 수 있습니다. 또는 const myName = 'max';이 부분을 let myName ='max';로 설정해주어서 여러 번 할당받을 수 있도록 설정할 ..
소스 트리 설치하기
소스 트리 설치하기
2022.10.10소스트리 설치 windows 환경에서 Sourcetree를 설치하는 방법을 설명합니다. 소스트리 공식 사이트 주소는 sourcetreeapp.com 입니다. 소스트리 홈페이지 소스트리는 Git을 사용자 입장에서 더욱 편리하게 사용하도록 만든 클라이언트 프로그램입니다. Windows와 iOS에서 사용 가능하고, 무료입니다. 소스트리는 버전 관리 이력을 직관적인 그래프와 색으로 표현해주기 때문에 code 버전 관리할 때 사용하면 좋은 프로그램입니다. 그리고 GUI 기반으로 동작하기 때문에, CLI 기반이 어렵다고 생각하는 초보자가 사용하기 더욱 적절한 도구입니다. https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Gi..
파이썬 다익스트라 2가지 방법으로 구현 (for, heapq)
파이썬 다익스트라 2가지 방법으로 구현 (for, heapq)
2022.10.09최단 경로 알고리즘은 길 찾기 문제에서 사용할 수 있는 알고리즘입니다. 주로 '어느 한 지점에서 다른 특정 지점까지의 최단 경로를 구해야 하는 경우', '모든 지점에서 다른 모든 지점까지의 최단 경로를 모두 구해야 하는 경우'에 사용합니다. 이번 포스트에서는 'start 지점에서 다른 정점까지의 최단 경로를 찾는 다익스트라(dijkstra) 알고리즘에 대해서 소개합니다. 파이썬 다익스트라 알고리즘 다익스트라 최단 경로 알고리즘 그래프에서 여러 개의 노드가 있을 때, 특정한 노드에서 출발하여 다른 노드로 가는 각각의 최단 경로를 구해주는 알고리즘입니다. 아이디어는 다음과 같습니다. 1. 출발 노드를 설정한다. 2. 최단 거리 테이블을 int(1e9)로 초기화한다. 3. 방문하지 않은 노드 중에서 최단 거리..
파이썬 다이나믹 프로그래밍 잘하는법
파이썬 다이나믹 프로그래밍 잘하는법
2022.10.04알고리즘 공부를 시작했을 때, 이름만 보고 거부감이 들기 쉬운 다이나믹 프로그래밍을 잘하는 방법을 소개합니다. 저는 코딩 테스트를 준비할 때 따로 학원에 다니지 않아서, 주변에서 '다이나믹 프로그래밍 문제 짜증이 나'라는 얘기를 들으면 약간 불안했습니다. 왜냐하면 이름만 듣고 주눅 들었기 때문이죠. '다이나믹 프로그래밍은 다이나믹한 기술을 사용하나? 어렵다고 하니까 정말 어렵나 보다.' 생각했습니다. 하지만 다이나믹 프로그래밍의 정의를 알고, 문제를 여러 개 풀어보니 다이나믹 프로그래밍은 수학 점화식을 찾아가는 과정이라고 결론 내렸습니다. 모든 알고리즘 문제가 그렇듯 특정 유형의 문제를 여러 개 풀어보니 dp가 두렵지 않았습니다. 아래 저의 solved.ac 결과를 보면 아시겠지만, 저는 dp, grap..
파이썬 이진 탐색 다양한 예제 코드
파이썬 이진 탐색 다양한 예제 코드
2022.09.28파이썬 알고리즘을 차근차근 알아가고 있는데요, 벌써 이진 탐색 부분입니다! 파이썬 이진 탐색 우선 이진 탐색은 탐색 범위를 반으로 좁혀가며 빠르게 탐색하는 알고리즘입니다. 이진 탐색은 배열 내부의 데이터가 정렬되어 있을 때 사용 가능한 알고리즘이고, 이미 정렬된 상황이라면 O(logN) 시간으로 빠르게 데이터를 찾을 수 있는 장점이 있습니다. 탐색 범위가 2000만을 넘어가는 경우 이진 탐색으로 문제에 접근하는 것이 좋습니다. 코딩 문제에서 처리해야 할 데이터의 개수나 값이 1000만 단위 이상으로 넘어가면 이진 탐색과 같이 O(logN)의 이하의 알고리즘을 생각해야 문제를 풀 수 있습니다. 파이썬 swap, 정렬 우선 이진 탐색을 하기 전에 필요한 sort 함수를 아래 코드를 통하여 알아보겠습니다. 첫..
파이썬 좌표 문제 입력 받는 방법(DFS, BFS) 퀵소트 코드
파이썬 좌표 문제 입력 받는 방법(DFS, BFS) 퀵소트 코드
2022.09.27파이썬 알고리즘 공부를 시작한 지 벌써 일주일이 지났습니다. 점차 2차원 리스트를 입력받는 부분도 익숙해지고, 함수 선언하는 부분을 자연스럽게 작성할 수 있게 됐습니다. 이번 포스트에서는 파이썬 좌표 문제에서 2차원 map이 주어졌을 때 입력받는 방법과 DFS, BFS를 다루고, 마지막 부분엔 퀵 소트 코드를 소개합니다. 파이썬 좌표 문제 C언어에서는 for문과 scanf()로 2차원 배열을 입력받는 것이 익숙했는데, 파이썬에서 2차원 리스트를 받으려면 조금 다른 발상이 필요합니다. [] 리스트로 먼저 초기화하고, append로 list안에 list를 채우는 방식으로 입력을 받을 수 있습니다. #2차원 리스트의 뱁 정보 입력 받기 #3 3 #001 #010 #101 graph =[] for i in ra..
파이썬 좌표 문제 쉽게 해결하는 방법
파이썬 좌표 문제 쉽게 해결하는 방법
2022.09.21파이썬 좌표 구현 문제 쉽게 해결하는 방법 알고리즘 문제 중에서 구현 문제로 좌표를 사용하는 문제가 자주 출제되는데, 좌표를 어떻게 받고, 이동하는 방법을 잘 외워두면 문제를 쉽게 해결할 수 있습니다. 파이썬 공백으로 구분되는 입력 받기 우선 문제를 풀려면 공백으로 입력되는 값을 잘 읽을 수 있어야 합니다. C언어라면 scanf()를 사용하여 받았겠지만, 파이썬에서는 input()을 이용하여 입력값을 받습니다. input().split()을 사용하면 공백을 기준으로 나누어서 저장할 수 있습니다. map(int, input().split())을 사용하는데, 공백을 기준으로 나눈 값을 int로 취급하겠다는 의미입니다. #입력값 #4 4 n, m = map(int, input().split()) #n=4, m..
이것이 취업을 위한 코딩 테스트다 파이썬 후기
이것이 취업을 위한 코딩 테스트다 파이썬 후기
2022.09.19이번 추석 연휴에 커리어에 대한 고민을 하면서, 코딩 테스트를 준비해야겠다고 생각했습니다. 이전에 '파이썬 알고리즘 인터뷰' 책을 가볍게 대충 읽었지만, 문제는 자세히 보지 않았는데, 본격적으로 파이썬 코딩 테스트를 준비하고 싶어서 이 책을 골랐습니다. 이것이 취업을 위한 코딩 테스트다 with 파이썬 IT 취준생이라면 누구나 가고 싶어 하는 카카오, 라인, 삼성전자의 2016년부터 2020년까지의 코딩 테스트와 알고리즘 대회의 기출문제를 엄선하여 수록하였다. 최근 5년간의 코딩 테스트 기출문제를 분석하여 반드시 알아야 하는 알고리즘을 8가지로 정리하였다. 8가지 핵심 알고리즘 이론을 쉽게 설명하고, 관련 실전 문제를 풀이했다. 출제 유형 분석, 이론 설명, 기출문제 풀이까지! 어떤 코딩 테스트도 이 책..
Git 책 추천 (초보): 팀 개발을 위한 Git, GitHub 시작하기
Git 책 추천 (초보): 팀 개발을 위한 Git, GitHub 시작하기
2022.09.11이전에 모두의 깃&깃허브 책을 읽고, 조금 더 어려운 내용을 알고 싶어서 '팀 개발을 위한 Git, GitHub 시작하기' 책을 읽었습니다. 개발자 동료가 추천해준 책이기도 하고, 7일 완성 로드맵도 있어서 따라 하기 괜찮다고 생각했습니다. 사실 '모두의 깃&깃허브' 책에서는 충돌, 버그 발생 시 해결하는 방법이 자세하게 나오지 않아서 아쉬웠는데, '팀 개발을 위한 Git, GitHub 시작하기' 책에서는 다양하게 방법을 알려주어서 실무에 도움이 되는 책입니다. 팀 개발을 위한 Git, GitHub 시작하기 리뷰 우선 이 책은 간단한 CLI 실습 -> 소스 트리 GUI 실습-> Git Bash CLI 실습으로 구성되어 있습니다. 첫 장부터 CLI가 나온다고 당황하지 말고, 술술 읽어보면 어느새 Git B..
do it 클론 코딩 영화 평점 웹서비스 후기: ReactJS 맛보기
do it 클론 코딩 영화 평점 웹서비스 후기: ReactJS 맛보기
2022.08.29이번에는 do it! 클론 코딩 영화 평점 웹서비스를 리뷰하려고 합니다. 최근에 프론트엔드에 관심이 생겨서 ReactJS를 경험해보고 싶은데 좋은 방법이 없을까? 고민했습니다. 바닐라 JS 클론 코딩 챌린지를 했을 때, 좋았던 기억이 떠올라서 웹서비스 클론 코딩에 도전했습니다. Do it 클론 코딩 영화 평점 웹서비스 후기 Do it 클론 코딩 영화 평점 웹서비스 책은 노마드 코더로 유명한 니코쌤이 쓰신 책입니다. 아래 홈페이지에 접속하면, 영화 평점 웹서비스뿐만 아니라, 바닐라 JS, CSS, Html, React 심화 등 다양한 클론코딩 강의를 보실 수 있습니다. https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를..