티스토리

크롱의 Dev Log

검색하기

블로그 홈

크롱의 Dev Log

crong-dev.tistory.com/m

이것저것 해보고 싶은 크롱의 개발 블로그

구독자: 18

방명록 방문하기

주요 글 목록

그로스 해킹 (양승화) 리뷰 세 줄 리뷰 그로스 해킹에 관심이 있고, 데이터를 활용해 서비스를 개선시키고자 하는 사람이라면 한 번쯤 읽어볼만한 책. 특히 그로스 해킹을 처음 도입하려는 사람한테 추천. 그로스해킹 전반적인 개념과, 활용 방법, 하기 좋은 실수가 모두 담겨 있는 책. 그로스 해킹 개념을 어느 정도 아는 상태에서 읽었는데 반은 아는 내용이긴 했지만, 그래도 배우고 얻을 게 있는 책. 이 책에서도 이야기하고 제품 만들면서도 생각하지만 "무엇이 문제인지 아는 것", 지금 단계에서 어떤 문제가 가장 중요한지 아는 것이 제일 중요하다. 아니면 삽질 제대로 하고 스타트업은 망하기 좋다! 좋아하는 챕터 3.3.4) 코호트별 전환율 쪼개보기 실제로 어떤 지표를 볼 때 코호트 분석이 굉장히 유의미한 경우가 많다 3.4) 리텐션 리텐션,.. 공감수 2 댓글수 0 2022. 10. 9.
프로덕트 오너 (김성한 저) 리뷰 랜선 사수로부터 일하는 방식 배우기 현업에 있는 업계 선배한테 업무 조언을 받은 기분이다. 어떻게 일하는지, 어떻게 하면 좋은지 본인이 경험하고 생각한 걸 공유해주는 선배를 만난 기분. 마치 선배가 일하는 거 지켜보면서 나도 어떻게 일하면 좋을지 생각해 볼 수 있는 기회였다. 물론 쿠팡과 내 스타트업은 규모나 일하는 방식이 다를 수 밖에 없다. 그냥 큰 곳은 이렇게 일하는 구나 싶었다. 기억하고 싶은 부분 2. 고객의 목소리를 어디까지 반영할 것인가 (1) 고객은 제품을 사지 않는다, 고용한다 🛒 고객은 해결해야 할 일이 생길 때, 그것에 도움을 주는 제품을 ‘고용(구매)’한다. 모든 제품과 서비스를 고용의 대상으로 바라보면, 각각 어떤 일을 고객을 위해 해줘야 하는지 알 수 있다 → 그것이 고객에게 전.. 공감수 1 댓글수 0 2022. 9. 25.
인스파이어드 리뷰 마티 케이건의 인스파이어드 리뷰 IT 제품을 만드는 모든 사람에게 추천할 만한 책 인스파이어드 책 자체를 사실 반년 전부터 읽기 시작했는데 이제서야 다 읽었다. (역시 강제성이 없으면 안 읽게 돼) 읽는데 오래 걸렸던 이유는 책이 두껍다거나 어려워서는 아니다. 읽으면서 계속 멈추고 내 상황에 대입해서 판단, 분석, 고민을 하다보니 오래 걸렸다. 다 너무 어려운 고민들이라 쉽게 끝나지 않았고, 계속 읽다가 멈추고 고민하다보니 시간이 더 오래 걸렸다. 엄청 공감하면서 읽었던 부분도 있고, 이 책을 통해 새롭게 알게 된 지식들도 꽤 있다. 놀라웠던건 내가 갖고 있는 고민에 대한 언급과 해결법이 읽다가 나오는 경험을 종종 할 수 있었다. 스타트업을 경영하면서 놓치고 있던 부분들에 유의미한 질문을 많이 던져주는 .. 공감수 1 댓글수 3 2022. 9. 11.
비대면 체육수업 지원 서비스 개발 회고 || tfjs posenet + react 사용법 프로젝트 진행 동기 "중고등학생 동생이 비대면 수업을 받는 것을 보며 자연스럽게 문제의 심각성을 깨닫고, 해결해야겠다는 결심이 프로젝트 진행으로 이어졌습니다." 코로나19 바이러스로 인해 학생들이 학교에 가지 못하고 집에서 비대면 수업을 받게 되었습니다. 중고등학생 동생이 집에서 수업을 받는 모습을 자연스럽게 지켜보게 되었습니다. 분명히 수업을 하고 있을 시간인데 동생이 침대에 누워서 자는 것을 보고 의아하게 생각했습니다. 저는 자고 있는 동생을 깨워서 수업시간에 왜 잠을 자느냐고 혼을 냈습니다. 그러자 동생은 체육 시간이라며 아무 것도 하지 않고 영상만 틀어준다며 자도 된다고 했습니다. 그때 저는 굉장한 충격을 받았습니다. 비대면 체육 수업이 제대로 이루어지고 있지 않는 문제의 심각성을 인식했고, 선생.. 공감수 3 댓글수 1 2021. 11. 15.
[코어 자바스크립트] 02. 실행 컨텍스트 01) 실행 컨텍스트란? 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장함. “동일한 환경”이란? 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval() 함수, 함수 등이 있음. 자동으로 생성되는 전역공간과, eval을 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수 실행뿐임. 처음 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담김. 최상단의 공간은 코드 내부에서 별도 실행 명령이 없어도 브라우저에서 자동 실행하므로 자바스크립트 파일이.. 공감수 1 댓글수 0 2021. 8. 5.
[코어 자바스크립트] 01. 데이터 타입 정리 01. 데이터 타입 01) 데이터 타입의 종류 - 자바스크립트의 데이터 타입은 크게 두 가지: 기본형(원시형, primitive type), 참조형(reference type) - 기본형: 숫자, 문자열, 불리언, null, undefined 등 + Symbol(ES6) - 참조형: 객체(배열, 함수, 정규표현식, Map, WeakMap, Set, WeakSet 등이 객체의 하위 분류) - 기본형은 불변성을 띔 02) 데이터 타입에 관한 배경지식 1. 메모리와 데이터 - C/C++, Java 등의 정적 타입 언어는 메모리 낭비 최소화를 위해 데이터 타입별로 할당할 메모리 영역을 2바이트, 4바이트 등으로 나누어 정해 놓음. 그 범위를 벗어나는 데이터를 입력하면 오류가 나거나 잘못된 값이 저장됨. 메모리 .. 공감수 1 댓글수 1 2021. 7. 30.
유튜브 조회수 상승을 위한 제목 및 썸네일 추천 서비스: 유튜브 API 사용법, AWS Rekognition 사용 방법 및 얼굴 인식 데이터로 조회수 예측하기 등 목차 프로젝트 진행 동기 프로젝트 요약 프로젝트 진행 상황과 본인 역할 YouTube API를 활용한 데이터 수집 썸네일에서 사람 얼굴을 인식해 feature를 추출 얼굴 인식 데이터를 바탕으로 조회수를 예측하는 모델 개발 프로토타입 개발 프로젝트 진행 동기 다들 유튜브 많이 보시죠? 저도 많은 시간을 유튜브를 보며 보내곤 합니다. 국민 83%가 한 달에 평균 30시간을 유튜브 시청에 사용하고 있다는 통계 자료가 있습니다. 유튜브 시장과 크리에이터 수도 꾸준히 증가하고 있습니다. 주변에 유튜브 크리에이터로서 영상을 만들고 업로드하는 친구들도 늘어났습니다. 유튜브 채널을 운영하는 사람들은 어떻게 하면 조회수가 잘 나올지에 대해 많은 고민을 합니다. 저는 영상 컨텐츠나 퀄리티도 중요하지만 사람들의 이목을 끄.. 공감수 8 댓글수 2 2021. 5. 28.
코드 포매터 Prettier 설명 및 설치 방법 (+저장 시 자동 포맷 설정 방법) 코드 포매터(Code Formatter), Prettier가 무엇인가요? 코드 포매터란 정한 코딩 컨벤션(코드 작성 스타일 규칙)에 따라 코드 스타일을 알아서 정리해주는 도구입니다. Prettier는 VSCode Extension으로, 코드 포매터입니다. 코딩 컨벤션을 정하고 코드 포매터를 활용하면 아래 밈처럼 두 개발자 사이의 시빌워가 생기지 않습니다. 정한 코딩 컨벤션에 맞춰 알아서 포맷팅해주기 때문에 코딩 컨벤션을 지키지 않아 다른 개발자를 화나게 하는 일 혹은 추후에 수정해야하는 노고를 줄여줍니다. 또한 개발할 때도 코딩 컨벤션을 일일이 찾아보면서 스타일을 맞추는 수고없이 코드를 짜기만 하면 됩니다. Prettier 설치 및 설정 방법 (+저장 시 자동 정렬 설정) 좌측 메뉴바의 Extension.. 공감수 1 댓글수 0 2021. 4. 23.
SW마에스트로 12기 코딩테스트 및 면접 회고 드디어 소프트웨어 마에스트로 12기 선발의 전 과정이 끝났다. SW마에스트로(이하 소마) 12기를 뽑는 과정은 아래와 같이 이루어 졌다. 참고로 전형별 결과는 바로 다음 금요일에 알려줬다. 2월 18일까지 서류 접수 2월 27일 1차 코딩테스트 3월 13일 2차 코딩테스트 3월 26일 ~ 28일 심층 면접 1. 서류 접수 서류 접수 단계에서는 인적사항, PC활용능력, 자기소개서 등을 제출하게 된다. 자기소개서 문항은 바뀌지 않는 것 같으니 소마에 지원할 계획이 있다면 미리 적어두는 것도 좋을 것 같다. 문항은 다음과 같다. (*필수) [자기소개1] 소프트웨어분야 전문성을 키우기 위해 남들과 달리 특별한 노력을 한 경험을 서술해 주시기 바랍니다. (최소 400자, 최대 3,000자 입력가능) (*필수) [.. 공감수 12 댓글수 4 2021. 4. 5.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : String, Date String, Date 루시와 엘라 찾기 (Level 2) SELECT ANIMAL_ID, NAME, SEX_UPON_INTAKE FROM ANIMAL_INS WHERE NAME IN ('Lucy','Ella','Pickle','Rogan','Sabrina','Mitty');이름에 el이 들어가는 동물 찾기 (Level 2) SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE NAME LIKE '%el%' AND ANIMAL_TYPE = 'Dog' ORDER BY NAMELIKE를 사용하면 원하는 패턴의 문자열을 찾을 수 있다. LIKE 다음에 찾고자 하는 문자열.. 공감수 1 댓글수 0 2021. 3. 19.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : JOIN JOIN JOIN은 여러 테이블을 하나로 합칠 때 사용한다. 없어진 기록 찾기 (Level 3) SELECT ANIMAL_ID, NAME FROM ANIMAL_OUTS WHERE ANIMAL_ID NOT IN (SELECT ANIMAL_ID FROM ANIMAL_INS) JOIN을 사용하지 않고 서브쿼리를 사용해 쉽게 해결했다. 있었는데요 없었습니다 (Level 3) SELECT ANIMAL_ID, I.NAME FROM ANIMAL_INS I JOIN ANIMAL_OUTS O USING (ANIMAL_ID) WHERE O.DATETIME < I.DATETIME ORDER BY I.DATETIME 두 테이블 간 같은 컬럼이 있고 둘이 의미하는 바가 같고 그걸 기준으로 합치고 싶다면 USING을 사용하면 된.. 공감수 0 댓글수 0 2021. 3. 19.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : IS NULL IS NULL WHERE 다음에 오는 조건에서 NULL인 것 혹은 아닌 것을 찾으려면 = 혹은 != 대신 IS와 IS NOT 을 사용하는 것만 알아두면 된다. 또한 IFNULL을 사용해 NULL인 데이터를 일괄적으로 치환할 수 있다. 이름이 없는 동물의 아이디 (Level 1) SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NULL이름이 있는 동물의 아이디 (Level 1) SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NOT NULL ORDER BY ANIMAL_IDNULL 처리하기 (Level 2) SELECT ANIMAL_TYPE, IFNULL(NAME, "No name"), SEX_UPON_INTAKE FROM ANIMAL.. 공감수 0 댓글수 0 2021. 3. 19.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : GROUP BY GROUP BY group by는 값은 값을 가진 데이터끼리 묶어주는 역할을 한다. 뒤에 having과 함께 사용할 수 있고, having은 반드시 group by 뒤에만 나올 수 있다. having 뒤에는 조건을 적는다. 고양이와 개는 몇 마리 있을까 (Level 2) SELECT ANIMAL_TYPE, COUNT(*) AS count FROM ANIMAL_INS GROUP BY ANIMAL_TYPE ORDER BY ANIMAL_TYPE ASC 동명 동물 수 찾기 (Level 2) SELECT NAME, COUNT(NAME) FROM ANIMAL_INS GROUP BY NAME HAVING COUNT(NAME)>1 ORDER BY NAME ASC 입양 시각 구하기(1) (Level 2) SELECT D.. 공감수 1 댓글수 0 2021. 3. 19.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : SUM, MAX, MIN SQL에는 avg, min, max, sum, count 등과 같은 aggregate function이 있다. 이를 사용하면 원하는 데이터를 쉽게 뽑아 낼 수 있다. avg: 평균값 반환 min: 최솟값 반환 max: 최댓값 반환 sum: 합 반환 count: 개수 반환 SUM, MAX, MIN 최댓값 구하기 (Level 1) SELECT MAX(DATETIME) as 시간 FROM ANIMAL_INS최솟값 구하기 (Level 2) SELECT MIN(DATETIME) FROM ANIMAL_INS동물 수 구하기 (Level 2) SELECT COUNT(*) FROM ANIMAL_INS중복 제거하기 (Level 2) SELECT COUNT(DISTINCT NAME) FROM ANIMAL_INSaggrega.. 공감수 0 댓글수 0 2021. 3. 16.
프로그래머스 SQL 고득점 Kit 코드 총정리 (MySQL) : SELECT SELECT (Level 1) 모든 레코드 조회하기 SELECT * FROM ANIMAL_INS ORDER BY ANIMAL_ID 역순 정렬하기 SELECT NAME, DATETIME FROM ANIMAL_INS ORDER BY ANIMAL_ID DESC 아픈 동물 찾기 SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE INTAKE_CONDITION = "Sick" ORDER BY ANIMAL_ID 어린 동물 찾기 SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE INTAKE_CONDITION != "Aged" ORDER BY ANIMAL_ID 동물의 아이디와 이름 SELECT ANIMAL_ID, NAME FROM ANIMAL_INS ORDER.. 공감수 0 댓글수 0 2021. 3. 16.
2021년 2월 회고 삼정kpmg아이디어톤 준비 2월은 공모전 준비하느라 바빴다. 머신러닝 분야로 프로젝트를 해본적이 없어서 시작할 때 막막했다. 구현하고자 하는 것을 정하고 어떻게 구현할지에 대해 책과 캐글 예제 등을 살펴보며 학습했다. 학습 과정과 구현한 것에 대해 자세한 회고를 작성하고 싶었으나 깃허브 레포지토리 연결을 통해 대신한다. 리드미와 위키에 개발 내용과 서비스에 대한 설명이 자세히 정리되어 있으니 궁금하신 분은 가서 확인 :) github.com/eunsolkang/review-analysis-web-report eunsolkang/review-analysis-web-report trop.er : AI-based review analysis web report. Contribute to eunsolkang/r.. 공감수 1 댓글수 0 2021. 3. 2.
개강을 맞이해 적어보는 새학기 목표 1. 건강해지기 제1의 목표이다. 우선순위가 가장 높은 목표로 항상 두지만 어느샌가 우선순위에서 밀리고 마는 목표다. 그래도 이번 학기에는 꼭 제일 우선적으로 생각하고 싶다. 그러려고 본가에 내려온 것도 있으니까 말이다. 건강한 신체와 건강한 정신을 얻고 싶다. 정신을 건강하게 만드는 법은 여러가지가 있고, 그 방법들을 건강해지기 분류 안에 다 못 적을 것 같으니 신체의 건강으로 한정해서 서술하겠다. 일단 몸이 건강해야 정신 건강도 따라오는 것 같긴 하다. a. 제때 자고 제때 일어나기 잠은 정말 중요하다. 내가 직접 느꼈다. 잠이 부족하거나 새벽에 자서 점심쯤 일어나면 몸이 안 좋아진다. 몸이 안좋아지면 정신건강도 같이 나빠진다. 잠을 제때 자고 제때 일어나자. 하지만 컴퓨터공학전공인 나는 밤새는 일이.. 공감수 5 댓글수 3 2021. 2. 28.
2021년 1월 회고 시간이 참 빨리 간다. 새해 카운트다운이 엊그제 같은데 벌써 2월이다. 1월은 잔잔히 바빴던 것 같다. 머신러닝 강의 완강 12월 말부터 친구들과 함께 머신러닝을 공부해 보기로 했다. 일단 첫 시작은 Coursera에서 Andrew Ng 교수님의 머신러닝 강의를 듣는 것으로 결정했다. 이 강의를 머신러닝 공부 입문 강의로 많은 추천을 받아 선택하게 되었다. 교수님 설명도 친절하셨고 과제와 퀴즈도 적절했지만 난 생각보다 힘들었다. 다들 이게 제일 쉽고 좋다고 하던데 수업 들으면서 바로바로 이해가 가지 않아 조금 속상했다. 그리고 1학년 이후로 보지 않은 미적분과 선형대수학을 복습해야겠다고 느꼈다. 그래도 강의 끝까지 들었다. 중간중간 Andrew Ng 교수님의 격려가 없었더라면 중간에 탈주했을지도 모른다... 공감수 3 댓글수 4 2021. 2. 3.
[카카오/추천팀] 2020 가을 인턴십 코딩테스트 후기 2021년 새해가 시작된지도 벌써 한달이 되었지만 작년 여름에 쳤던 코딩테스트에 대한 후기를 이제서야 작성하고자 한다. 주변에 지원하시는 분들을 위해 최대한 기억을 끄집어 내서 적어본다. #0 지원서 접수 카카오 추천팀 인턴 공고가 뜬 카카오 영입 홈페이지에서 접수했다. 다른 양식은 다른 카카오 채용 지원 양식과 동일했고, 자기소개서 문항도 글자수 제한 없는 "자기소개"라는 질문이 전부였다. 기존에 적어놨던 지원서를 그대로 활용했다. #1 1차 코딩테스트 지원하면 모두 1차 코딩 테스트 응시 자격이 주어지는 것으로 알고 있다. 카카오 추천팀은 코딩 테스트 플랫폼으로 해커랭크를 사용한다. HackerRank HackerRank is the market-leading technical assessment a.. 공감수 15 댓글수 1 2021. 1. 28.
백준 1016: 제곱 ㄴㄴ수 (C++) 문제 링크: www.acmicpc.net/problem/1016 1016번: 제곱 ㄴㄴ 수 어떤 수 X가 1보다 큰 제곱수로 나누어 떨어지지 않을 때, 제곱ㄴㄴ수라고 한다. 제곱수는 정수의 제곱이다. min과 max가 주어지면, min과 max를 포함한 사이에 제곱ㄴㄴ수가 몇 개 있는지 출력한다. www.acmicpc.net 풀이 방법 [min, max] 구간의 최대 원소 개수는 1000001이므로 bool arr[1000001]을 선언하고 여기에 min~max구간의 수가 제곱ㄴㄴ수인지 아닌지 저장해줬다. arr[0]: min이 제곱ㄴㄴ수인지, arr[1]: min + 1이 제곱ㄴㄴ수인지 ... 일단 모두 제곱ㄴㄴ수라고 가정하고 시작한다. (memset을 통해 모두 true로 초기화한다.) 그다음 2부터.. 공감수 0 댓글수 2 2021. 1. 24.
2020년 회고 뭐했다고 벌써 2021년이지? 싶어 올해 뭐 했는지를 월별로 되돌아보고자 한다. 개발자로서의 회고라기보다는 그냥 나의 1년을 되돌아보는 글이다. 대학 입학 후 첫 계절학기 수업을 들었던 1월 1학년 말까지도 전공 고민을 계속했고 솔직히 컴퓨터공학을 전공하게 될지 몰랐다. 그래서 1학년 전공 기초 중 안 들은 것이 많은데 그중 하나인 파이썬 프로그래밍 과목을 수강했다. 대학 입학 후 첫 계절학기였는데 마지막 계절학기가 될 것 같다. 계절학기는 나와 맞지 않는 것 같다. 방학 때는 쉬고 싶다. 1학년 1학기 전공기초여서 난이도 자체도 쉽고 난 이미 파이썬 문법을 알고 있었기에 딱히 배워가는 것도 없었다고 느꼈다. 30만 원짜리 기상 스터디에 등록한 기분이었다. 동아리 내 계절학기 소모임(다꾸와 맛집 탐방) .. 공감수 13 댓글수 8 2021. 1. 1.
백준 2213: 트리의 독립집합 (C++) 문제 링크: www.acmicpc.net/problem/2213 2213번: 트리의 독립집합 첫째 줄에 트리의 정점의 수 n이 주어진다. n은 10,000이하인 양의 정수이다. 1부터 n사이의 정수가 트리의 정점이라고 가정한다. 둘째 줄에는 n개의 정수 w1, w2, ..., wn이 주어지는데, wi는 정점 i의 www.acmicpc.net 새로 알게 된 것 int& result = cache[stage][idx]; 는 cache[stage][idx]라는 변수에 result 라는 별명을 붙여주는 개념.(같은 주소를 참조함) 즉, 두 개는 이름만 다르지 같은 변수이다. result의 값을 변경하면 cache[stage][idx]의 값도 같이 바뀐다. 소스 코드 #include #include #includ.. 공감수 1 댓글수 1 2020. 12. 30.
프로그래머스 카펫 : 완전탐색 (C++) 문제 링크: programmers.co.kr/learn/courses/30/lessons/42842 코딩테스트 연습 - 카펫 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 programmers.co.kr 카펫의 가로 세로 길이를 구하는 문제이다. 가로 길이를 x, 세로 길이를 y라고 하자. 테두리 1줄이 갈색이고, 나머지 안쪽은 노란색이라고 했다. 네 변에 접한 타일(갈색 타일)의 개수는 양변의 길이를 두번씩 더하고 겹치는 모서리를 한번 빼준 값인 2x+2y-4이다. 안쪽의 타일(노란 타일)의 개수는 (x-2)*(y-2)이다. 갈색 타일과 노란색 타일을 더한 .. 공감수 0 댓글수 0 2020. 12. 28.
[번역] next/link 공식 문서 2020년 12월에 번역된 글로 현재와 다른 내용이 있을 수 있습니다. 다음은 nextjs 공식문서의 nextjs api 레퍼런스 중 next/link에 대한 글을 번역한 것이다. nextjs.org/docs/api-reference/next/link next/link | Next.js Enable client-side transitions between routes with the built-in Link component. nextjs.org next/link 예제 앱 Hello World Active className on Link 읽기 전에, Routing Introduction을 읽어볼 것을 권한다. 클라이언트 사이드에서 경로간의 이동은 Link 컴포넌트(exported by next/link).. 공감수 5 댓글수 2 2020. 12. 22.
[JSX element type 'Component' does not have any construct or call signatures.ts(2604)] 에러 해결 리액트 컴포넌트와 숫자를 인자로 받아 숫자만큼 리액트 컴포넌트를 복제해서 반환하는 duplicate 함수를 만들었다. function duplicate(Component: JSX.Element, number: number) { return ( {Array.from({ length: number }).map((value, index) => ( ))} ); }그러자 JSX element type 'Component' does not have any construct or call signatures.ts(2604)라고 에러가 떴다. duplicate 함수의 인자로 리액트 컴포넌트를 만드는 consturctor를 넘긴 것이 아니라 만들어진 instance를 넘겨서 문제가 되었던 것이다. 아래와 .. 공감수 1 댓글수 0 2020. 12. 22.
[Warning: Each child in a list should have a unique "key" prop.] 에러 해결 문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )}React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열은.. 공감수 10 댓글수 0 2020. 12. 22.
위상 정렬 알고리즘 이론과 문제 풀이(C언어 소스 코드 포함) 선수 과목 체계 등 선행 관계가 있는 자료구조를 정렬할 때 필요한 알고리즘이 바로 위상정렬(topological sort)이다. 방향이 있는 그래프(단, 사이클이 없어야 함) 정점들의 선행 순서를 위배하지 않으면서 모든 정점을 순서대로 나열하는 알고리즘이다. 유향 그래프(방향이 있는 그래프)에서 에지 가 있다면 정점u가 정점v를 선행한다.  위상 정렬 방법 ① 진입 차수(내차수)가 0인 임의의 정점 (선행자가 없는 정점) 출력 ② 출력한 정점에 부착된 모든 에지들을 제거하여 진입 차수 재계산 ③ 모든 정점이 제거될 때까지 ①~② 반복 ④ 진입 차수가 0인 것이 없으면, 그래프가 사이클을 포함한 것으로서 해가 존재하지 않음.  위상 정렬 알고리즘 (C언어) 아래와 같은 입력 형식의 사이클이 없는 방향그.. 공감수 0 댓글수 2 2020. 12. 6.
티스토리에서 코드 css (코드 보여주는 스타일) 변경 방법 일단 관리 탭> 플러그인에서 코드 문법 강조 플러그인을 사용했다. (지금도 사용 중이긴 함) 하지만 폰트도 그렇고 마음에 안들어서 자체 css를 적용하기로 했다. 블로그 관리 > 스킨 편집 > html 편집 > css탭을 들어간다. 위에 원하는 폰트를 import 해준다. 이후 code태그의 스타일링 부분을 찾아간다. font-family를 원하는 폰트로 바꿔준다. 폰트 변경 이외에도 배경색, 마진, 패딩, 모서리 둥글게 등을 추가 설정해줬다. +) 원하는 웹폰트 찾는 법 구글 폰트에서 검색 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 개발자 도구로 스타일링이 잘 적용된.. 공감수 0 댓글수 0 2020. 12. 6.
[JavaScript] 자바스크립트 전개 속성(JSX Spread Attributes) JSX 전개 속성 컴포넌트에 배치하려는 모든 속성(props)을 알고 있다면 JSX를 사용하기 쉽습니다: var component = ; 가변 Props는 좋지 않습니다 어떤 속성(props)를 설정할지 모르는 경우, props를 나중에 추가하고 싶을 지도 모릅니다: var component = ; component.props.foo = x; // bad component.props.bar = y; 이는 나중에까지 올바른 propTypes를 확인할 수 없으므로 안티 패턴입니다. 이는 propTypes 오류가 암호화 스택 추적(cryptic stack trace)으로 끝남을 의미합니다. 이 시점에서 props는 불변으로 간주되어야 합니다. props 객체를 다른 곳에서 변경하면 예기치 않은 결과가 발생할 .. 공감수 0 댓글수 0 2020. 12. 3.
[CSS] 길이 단위 총정리 (em, rem, %, vh, px 등등) 상대 길이 단위(글꼴 기준) em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰인다. em: 부모요소의 폰트 사이즈에 대한 상대값. 부모요소의 폰트 크기가 정해져 있지 않다면 1em = 16px rem(root em): 최상위 root(요소)의 글꼴 크기에 대한 상대값. em과 달리 문서 전체에서 일관적인 크기를 가진다. 폰트 사이즈 이외에도 크기를 나타낼 때 쓰인다. %: 부모 요소를 기준으로 한 비율 표현. ex. 부모 요소의 폰트 사이즈가 10px이라면 font-size: 200%;(==20px)이다 ch: "0"의 너비를 기준으로 하는 상대값. ex: 소문자 "x"를 기준으로 한 상대값. 많은 글꼴에서 1ex는 0.5em의 값과.. 공감수 0 댓글수 0 2020. 12. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.