FrontEnd
![[React] Deep Dive 모던 리액트(4) JSX](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FAR7My%2FbtsB8Vt7NK0%2FAAAAAAAAAAAAAAAAAAAAAPfyOa3gG2wOwBkHpyHNuZ8UBTiVHITO9LnDQgQYVstS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D0eQDt3%252F8VNTtZr89tr%252B6QOBLmj4%253D)
[React] Deep Dive 모던 리액트(4) JSX
이제 리액트의 핵심 요소들을 하나씩 알아보자. JSX(JavaScript XML) 많은 프론트엔드 개발자들이 착각하는 것은 JSX가 리액트의 전유물이라는 것이다. 물론 JSX가 리액트가 등장하며 소개된 구문인점은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 해당 코드를 바로 실행하면 에러가 발생한다. 따라서 JSX를 활용하려면 트랜스파일러를 거쳐서 의미있는 JS 코드로 변환하는 작업이 필요하다. JSX의 주 목적중 하나는 HTML이나 XML을 JS내부에 표현하는 것이다. 그 외에도 JSX내부에 트리구조로 표현하고 싶은 다양한 것들을 작성하고 이를 JS가 이해할 수 있는 코드로 변경하는 것이 주된 목적이라고 할 수 있다. JSXEle..
[JS] 불량 사용자
정규표현식과 set , dfs 를 활용하여 해결한 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정규표현식은 불량 사용자인지 아닌지를 가져오기 위해서 사용했는데 굳이 정규표현식이 아닌 반복문을 활용해서 풀었어도 상관은 없을 문제인듯 하다. 1. 정규표현식으로 banned_id마다 가능한 아이디의 조합을 가져오기 EX) TEST CASE 3 [ [ 'frodo', 'fradi' ], [ 'frodo', 'crodo' ], [ 'abc..
[JS] [카카오인턴] 보석 쇼핑
투포인터와 MAP,SET자료형을 활용하여 해결해보았다. https://school.programmers.co.kr/learn/courses/30/lessons/67258 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 효율성 테스트가 있는 문제이기때문에 시간복잡도를 O(n)에 가깝게 풀어야 해결할 수 있을 것이라 생각했다. 문제를 접근&해결한 방식은 아래와 같다. 1. 배열을 순회하며 해당 인덱스의 보석은 무조건 포함된다고 생각 2. 그 보석이 포함된 기준으로 가장 짧은 길이를 계산 2.1 만약 모든 보석이 포함되지 않았다면 길이를 계산하지 않고 map에 ..
[JS] 경주로 건설
DP와 BFS를 적절히 활용해야 하는 재미있는 문제였다! https://school.programmers.co.kr/learn/courses/30/lessons/67259# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr dp[r][c] = r행 c열까지 도달하는데 드는 최소 비용 이라고 두자. BFS로 장애물을 피해가며 모든 경우의수를 탐색하는데, 만약 dp보다 큰 값으로 해당 칸에 도달했다면 그 경우의 수는 생각하지 않아도 괜찮다. 단 해당 문제에서는 조금 생각할만한 점이 몇가지 있다. 1. BFS에서 비용을 계산할때 직선이면 100 , 커브이면 600..
![[React] Deep Dive 모던 리액트(3)타입스크립트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FB8dvi%2FbtsB2RZr8PW%2FAAAAAAAAAAAAAAAAAAAAABLONj1JvG--Wn1bb5K8x_5kPyyH_tS_Zuz7Pc15seTX%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DR2Od16Bu8tDtbQCV51SQDK5nC9E%253D)
[React] Deep Dive 모던 리액트(3)타입스크립트
최근 대다수의 자바스크립트 프로젝트는 타입스크리트 기반으로 작성되는 경우가 많다. 코드 작성환경에서 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 짤 수 이쎅 도움을 주고 잠재적인 버그들 또한 줄여주기 때문이다. 타입스크립트 ? TypeScript is JavaScript with syntax for types. 기존 자바스크립트 문법에 타입을 가미한 것 JS는 기본적으로 동적 타입언어이다. 이는 편리하기도 하지만 대부분의 에러를 코드를 실행하는 단계에서 알 수 있다라는 단점이 있어 프로젝트 규모가 커질수록 발목을 잡게 된다는 단점이 존재한다. 아래 함수를 한번 보자. function test(a,b) { return a/b } test(5,2) // 2.5 test('안녕하세요','하이')..
![[JS] 풍선 터트리기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcziKa0%2FbtsB1Jni0iE%2FAAAAAAAAAAAAAAAAAAAAAIj_fXIoAdJ1LK54mixstxDppBVgod2oowflhnHB0gGL%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DQpHD19YylU3aV2YiCz5j3OcsEfQ%253D)
[JS] 풍선 터트리기
풍선을 터트리는 문제였다 큰 알고리즘 기법이라기 보다는 문제에서 주어진 요구를 잘 읽으면 해결할 수 있는 문제였다. 굳이 말하면 dp라고도 할 수 있을 것 같다. https://school.programmers.co.kr/learn/courses/30/lessons/68646 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 유의있게 볼만한 조건은 a의 최대길이가 1,000,000으로 이중반복문을 사용하면 안될거란 것과 a의 모든 수는 다르단 것 정도이다. 결국 나보다 작은 풍선을 한번만 터트릴 수 있다는 표현은 , 본인을 제외하고 좌측과 우측의 풍선을 모두..