본문 바로가기
반응형

전체 글 395

[리액트] RIW 프로젝트 - scroll animated number widget RIW 프로젝트란? React Interactive Widget 이란 오픈소스 프로젝트이며, 그냥 제가 개발하면서 동적인 컴포넌트들 구현해서 오픈스소화 시킬 목적으로 합니다. Scroll animated number widget 란? 금융관련된 프로젝트를 하면서 좋은 래퍼런스를 찾곤 했는데, 그 중에 로빈후드의 홈페이지를 보고 이쁘다고 한 화면이 있습니다. 바로 위아래로 스크롤하든 변하는 숫자들입니다. 동적으로 변하는게 멋져서 저도 이걸 구현해봐야겠다고 생각했습니다. 첫번째 아이디어는 "진짜 스크롤을 이용해보기" 입니다. [리액트] 부드럽게 이동하는 숫자 컴포넌트를 구현하는 방법(feat.타입스크립트) 사이드 프로젝트를 진행하면서 다른 웹페이지를 많이 보고 공부하고 있습니다. 그러던 와중에 로빈후드의 주.. 2021. 12. 16.
[리액트] React-query 도입과 Suspense, Error Boundary를 적용해보자 들어가며 리액트를 하나보면 필연적으로 흰화면에 loading...를 띄우는 경험을 해보셨을 것이라 생각합니다. 그리고 주로 데이터가 없는 경우 if 문으로 분기처리를 하게 됩니다. 위의 방식이 나쁜것은 아닌데 하나의 컴포넌트에 return 문이 여러개가 되는 상황이 발생합니다. 아니면 삼항연산자로 분기처리를 하던가요. 그래서 조금더 리액트스러운 방법을 생각했고 Suspense와 Error Boundary를 통해 개선했습니다. 이번 글에서는 이 경험을 다뤄보도록 할게요. React-query는 왜 도입했는가? 뜬금없이 loading... 처리 얘기를 하다가 갑자기 React-query가 왜 나오냐? 하실수도 있습니다. 하지만 생각하보면 당연히 데이터패칭과 관계될수밖에 없는 것이 주로 loading을 보여줘.. 2021. 12. 15.
[서평단] 2021 길벗 15차 서평단 회고 및 최종 리뷰 개인적으로 책으로 공부하는 것을 좋아하는 저에겐 길벗 서평단은 좋은 선물이었습니다. 매달마다 오는 메일을 기다리면 이번달에 어떤 책을 볼수 있을까라는 기대감을 가지게 해 주기도 했습니다. 제 지인 중 한명은 검증되지 않는 책을 보는 것은 시간낭비와 잘못된 정보를 가질수 있다는 말을 했지만, 어차피 저는 이 한 권만 읽고 말 것이 아니기 때문에 그냥 오는 족족 다 보았습니다. 아래는 올해 서평단을 통해 읽었던 책 8권입니다. 처음 배우는 애저 - 김도균 처음 배우는 셸 스크립트 - 장현정 학교에서 알려주지 않는 17가지 실무 개발 기술 - 이기곤 쓰면서 익히는 알고리즘과 자료구조 -윤대석 파이썬으로 배우는 포트폴리오 - 곽승주 개발자에서 아키텍트로 - 마이클 킬링 러닝 리액트 2판 - 알렉스 뱅크스, 이브.. 2021. 12. 14.
[개발툴] UX/UI 디자이너를 위한 실무 피그마 지은이 : 클레어 정 [ 선택 이유 ] 프론트엔드 개발을 하다가도 가끔씩 아이콘, 디자인을 해야 할 때가 있습니다. 그때마다 UI팀에 요청하는 것도 시간이 걸리고, 사이드 프로젝트일 때 어쩔 수 없이 아이콘이나 사진 등을 인터넷에서 들고 와야 하는 불편한 상황이었습니다. 그래서 디자이너 친구에게 디자인툴을 배우려고 하고 있었는데, 그전에 피그마 책을 읽으면 좋겠다는 생각을 했습니다. 그런 와중에 마침 길벗 책에 있길래 냉큼 신청했습니다. [ 본문 ] 저같은 디자인 초보자도 읽기 쉽게 구성이 되어있습니다. 단락 사이사이에도 Tip도 있어서 실무에서 쓸만한 지식도 나오고또 각각의 버튼에 대한 설명이 상세하게 나와있어 시간 들여 읽으면 딱 좋을 거 같습니다.그래서 어젠 직접 해보지 안 보진 않고 책만 쭉 읽었.. 2021. 12. 14.
[Next] 웹페이지의 성능 개선을 해보자 #1 (feat.LightHouse) 최근 들어 Next.js를 접하고 너무 재밌어서 기존에 미뤘던 프로젝트를 Next.js로 마이그레이션 해봤다. 바로 내 포트폴리오 사이트였는데, 2019년도인가 처음 fork를 뜨고 가져와서 내용만 업데이트를 하고 있었다. 기존에는 바닐라JS + HTML + CSS + GithubPage를 이용했었는데, React도 익숙해졌다 싶어서 Next를 도입했고 Next 배포를 위해 GithubPage를 쓰다가 이미지 경로설정때문에 귀찮기도 하고 또 Vercel를 써보고 싶어 Vercel를 통해 배포했다.(당연히 짱짱이었음) 일단 최대한 디자인적으로 비슷하게 구현하는 것을 목표로 했고 실제 완성된 모습은 https://kang-portfolio.vercel.app/ 가면 확인할수 있다. 쨋든 배포도 하고 SEO도.. 2021. 12. 7.
[프로그래머스] 이진 변환 반복하기 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 이진 변환 반복하기 programmers.co.kr [ 아이디어 ] 1레벨인데 오랜만에 풀겸 그리고 프로그래머스의 불편함으로 잠깐 글을 적는다. 아이디어는 아래의 로직을 반복하면 된다. [ 코드 ] function solution(s) { let zeroCount = 0; let transformCount = 0; while (s > 1) { let temp = s.length; s = s.replace(/0/g, ""); zeroCount += temp - s.length; s = s.length.toString(2); transformCount++; } return [transformCount, zeroCount]; } 원래라면 replaceAll를 써서 할수가 .. 2021. 12. 6.
[역사판타지] 사도세자 대륙을 꿈꾸다 (완) - 다몰랑 ★★★☆☆ [ 작품 소개 ] 사업에 실패하여 죽음을 선택한 사학도 정무신. 그가 눈을 뜬 곳은 뒤주 속이었다. 죽음을 앞둔 사도세자가 되어 가까스로 탈출한 무신. 세자의 신분을 버리고 상인이 되어 새로운 삶을 살게 된 그가 조선에 변화의 바람을 일으킨다! 장르 : 대체역사, 역사판타지 진행 상황 : 총 300화 ( 본편:300, 외전:0) / 완 [ 작가 소개 ] 작가 : 다몰랑 작가의 다른 작품 : 태제 덕령, 블랙버드 [ 특징 ] [회빙환][사도세자][정무신][대체역사][완] 역시 리뷰라는 건 금방금방 써야 하는데 벌써 읽은 지 2달이 넘어서 내용이 가물가물합니다. 귀찮아서 미루고 있었는데 완전히 까먹기 전에 리뷰 시작하겠습니다. 눈을 떴더니 뒤주? 실화임? 일단 저는 대체역사소설을 볼 때 중요한 기준이 참신한.. 2021. 12. 6.
[역사판타지] 부마 신익성 (완) - 구사 ★★★★☆ [ 작품 소개 ] 대체 역사 장편소설 『부마 신익성』 세상에 둘 도 없을 이기적인 부마의 유쾌하고, 통쾌한 활극이 시작된다! 장르 : 대체역사 진행 상황 : 총 385화 ( 본편: 385, 외전:0) / 완 [ 작가 소개 ] 작가 : 구사 작가의 다른 작품 : 대군으로 살어리랏다. 만석꾼 [ 특징 ] [대체역사][빙의물][임진왜란][선조][부마][완] 내가 좋아하는 대체역사물의 대가이신 구사님의 작품 '부마 신익성'입니다. 임진왜란이 배경이 소설은 참 많은데, 그속에서 이름난 위인이 아닌 부마가 주인공인 소설도 또 처음이라 재밌게 읽기 시작했습니다. 참고로 주인공인 부마 신익성은 실제 역사 속의 인물이니 이점 또한 대체역사의 매력이라고 할 수 있겠습니다. 대체역사 뽕의 시작은 현대인의 빙의다 대체역사 뽕.. 2021. 11. 19.
[역사판타지] 동래부사로 환생했다 (완) - 햄버그 ★★★★☆ [ 작품 소개 ] 유일한 목적은 적에게 길을 내주지 않는 것이다 장르 : 대체역사, 역사판타지 진행 상황 : 총 190화 ( 본편:190 ) / 완 [ 작가 소개 ] 작가 : 햄버그 작가의 다른 작품 : 이것이 5툴이다. 포심 패스트볼 [ 특징 ] [임진왜란][회빙환][송상현][아카데미물][장편][히로인4명][완] 대체역사는 처음으로 쓰신 것작은 햄버그 작가님의 신작입니다. 이전까진 야구 스포츠물을 쓰셨는데 이번에 새롭게 도전하셨습니다. 처음임에도 신선한 인물을 주인공으로 내세운 점, 나름의 고증을 위한 내용이 여기저기 있다는 점, 아무튼 대체역사물은 좋다는 점에서 저는 재밌게 완독할 수 있었습니다. 임진왜란 시기의 대체역사물의 새로운 인물, 송상현 동래부사 송상현은 뭔가 임진왜란의 시작을 알리는 느낌으.. 2021. 11. 2.
[역사판타지] 패업삼국지 사휘전 (완) - 신유 ★★★☆☆ [ 작품 소개 ] 유주 출신의 무장 사휘는 죽음 직전에 미래 역사학자 김동준의 기억에 연결되는 기이한 일을 겪으며 구사일생으로 살아난다. 이후 사휘는 미래기억을 바탕으로 전략과 전술을 수립하여 냉철하게 위기를 극복한다. 장르 : 역사 판타지 진행 상황 : 총 275화 ( 본편:268, 외전: 7) / 완 [ 작가 소개 ] 작가 : 신유 작가의 다른 작품 : 작은 아버지는 동탁 [삼국지 동황전], 패왕 삼국지 : 초갑질 역사물, 망나니, 재벌 아들로 환생했다! [ 특징 ] [회빙환][미래지식][새로운 인물][삼국지][완] 요새 대체역사를 하도 읽어서 그런가 웬만한 인물로 시작하는 삼국지 대체역사는 약간 밋밋하다고 생각되는 찰나에 처음 보는 인물 사휘로 빙의한 내용이고 또 미래지식이 있는 내용이라 정주행 해.. 2021. 10. 20.
[역사판타지] 삼국지 올돌골이 업적작함 (완) - Cider.cap ★★★☆☆ [ 작품 소개 ] 함께해서 더러웠고, 다시 만나지 말자. 장르 : 역사 판타지 진행 상황 : 총 200화 ( 본편:200, 외전:0) / 완 [ 작가 소개 ] 작가 : Cider.cap 작가의 다른 작품 : 없음 [ 특징 ] [회빙환][삼국지][업적시스템][올돌골][완] 매력적인 표지와 다소 불편한 작품소개를 가지고 찾아온 Cider.cap 작가님의 첫작 "삼국지 올돌골이 업적작함"입니다.삼국지에서도 거의 비중이 없으며 갈량이형님이 출사표 던지고 찾아가는 길에 등갑군이라는 참신한 갑옷을 가진 병사를 믿고 깝죽거리다가 모조리 화공에 당해 사라진 비운의 엑스트라입니다. ( 실제로도 관중이 형님이 만든 가상의 인물이라는 점에서 더 안타까움)하지만 삼국지연의 기준으로 후반부에 해당하는 북만정벌에서 나오는 기존의.. 2021. 9. 26.
[무협판타지] 무림에 떨어진 현대인 (완) - 청루연★★★☆☆ [ 작품 소개 ] 뺑소니로 요절했던 죽음의 기억이 강렬한데,‘ ……내가 조휘?’다 쓰러져 가는 조가철방의 차남이 되었다. 날아가는 새를 떨어뜨릴 권세도,의지를 관철시킬 무력도 없다. 일가족을 몰살시킬 어마어마한 빚만 있을 뿐. 허나 그 누구도 경험하지 못했을 비장의 한 수가 남아 있으니. “아버지, 조가철방을 물려주십시오.” 문명의 이기를 총동원한 현대인의 중원무림 성공기가 지금 시작된다 장르 : 무협판타지 진행 상황 : 총 297화 ( 본편:297 ) / 완 [ 작가 소개 ] 작가 : 청루연 작가의 다른 작품 : 없음 [회빙환][철방][현대지식][대장장이][신좌] 제목에 이끌려 읽게 된 소설 "무림에 떨어진 현대인"입니다. 현대의 인물이 뺑소니 사고로 무림세계의 조가철방의 둘째로 빙의하게 되면서 소설이.. 2021. 9. 7.
[프로그래머스] 땅따먹기 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 땅따먹기 땅따먹기 게임을 하려고 합니다. 땅따먹기 게임의 땅(land)은 총 N행 4열로 이루어져 있고, 모든 칸에는 점수가 쓰여 있습니다. 1행부터 땅을 밟으며 한 행씩 내려올 때, 각 행의 4칸 중 한 칸만 밟 programmers.co.kr [ 아이디어 ] 완전 탐색 기법으로 푼다 색다른 로직을 활용해 푼다. [ 코드 ] 1. 완전 탐색 기법으로 푼다. 아이디어의 경우 갈 수 있는 모든 경로를 사전에 생성하고 하나씩 비교하면서 가장 큰 값을 찾는 로직입니다. permutation을 이용해 모든 경로를 생성하고 availPath 함수를 통해 갈 수 있는 경로만 최대값을 계산합니다. 테스트는 통과했지만 실행결과 시간초과가 뜨고 말았습니다. function solut.. 2021. 9. 3.
[프로그래머스] 행렬의 곱셈 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 4주차 개발자가 사용하는 언어와 언어 선호도를 입력하면 그에 맞는 직업군을 추천해주는 알고리즘을 개발하려고 합니다. 아래 표는 5개 직업군 별로 많이 사용하는 5개 언어에 직업군 언어 점수를 부 programmers.co.kr [ 아이디어 ] 일단 answer 배열에 크기에 맞게 0으로 초기화 2중 for문으로 돌고 각 행렬의 곱셈은 배열 메소드 체이닝을 통해 처리 [ 코드 ] function solution(arr1, arr2) { var answer = Array.from(Array(arr1.length), () => Array(arr2[0].length).fill(0)); for (let i = 0; i < arr1.length; i++) { for (let j.. 2021. 8. 30.
[프로그래머스] 2018 KAKAO > 뉴스 클러스터링 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - [1차] 뉴스 클러스터링 뉴스 클러스터링 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브 programmers.co.kr [ 아이디어 ] 대소문자를 구별하지 않는 조건을 위해 소문자로 전체 문자열 변경 각각의 문자열에서 2개씩 읽어가면서 조건 "알파벳으로만 이루어짐"에 따라 정규식만들고 아닌것은 쳐냄(각각 A, B 집합) 자카드 유사도를 위해 합집합과 교집합을 구하는데, A 기준으로 B에도 있는건 교집합(Intersection), 그리고 B에서 제거 자카드 유사도 식 ( 교집합 / 합집합)에 넣고 처리. [ 코드 ] function solut.. 2021. 8. 30.
[역사판타지] 킹방원 메이커 (완) - 날아오르기 ★★★★★ [ 작품 소개 ] 갑자기 정도전이 됐다. 그리고 이방원을 왕으로 만들어야 한다. 왕자의 난을 일으키지 않고... 그런데 이 시절 조선은 그냥 지옥이었다. 이것도 바꿔야 했다. 장르 : 역사판타지, 대체역사 진행 상황 : 총 348화 ( 본편:348 ) / 완 [ 작가 소개 ] 작가 : 날아오르기 작가의 다른 작품 : 철혈의 제국, 배우-조선왕이 되다! [ 특징 ] [회빙환][대체역사][정도전][빙의물][대역물][이성계][이방원][이도][개국공신][코믹][완] 대체역사에서 새로운 대작 소설이라고 감히 칭하고 싶은 소설이 나왔습니다. 현대에서 서울대 사학과 출신이었던 주인공이 고려말 시기의 정도전으로 빙의하면서 내용이 시작됩니다. 빙의한 시기는 이방원이 정몽주를 죽인 직후이며 막 조선이 건국되는 시기입니다... 2021. 8. 27.
[프로그래머스] 위클리 챌린지 > 4주차 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 4주차 개발자가 사용하는 언어와 언어 선호도를 입력하면 그에 맞는 직업군을 추천해주는 알고리즘을 개발하려고 합니다. 아래 표는 5개 직업군 별로 많이 사용하는 5개 언어에 직업군 언어 점수를 부 programmers.co.kr [ 아이디어 ] 총합을 key, 해당 직군 배열을 value로 하는 scoreMap을 활용. 언어점수 table를 순회하면서 점수를 구하고 scoreMap에 넣는다. 편이성을 위해 가장 큰 점수 maxScore를 별도로 들고 있다가 마지막에 key로 조회하고 같은 점수일 경우를 위해 sort를 한다. [ 코드 ] function solution(table, languages, preference) { var answer = ""; let pre.. 2021. 8. 23.
[프로그래머스] 위클리 챌린지 > 2주차 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 2주차 [[100,90,98,88,65],[50,45,99,85,77],[47,88,95,80,67],[61,57,100,80,65],[24,90,94,75,65]] "FBABD" [[70,49,90],[68,50,38],[73,31,100]] "CFD" programmers.co.kr [ 아이디어 ] 이번 문제는 로직에 따라 천천히따라가며 구현하는 문제였다. 따라서 각 로직별 함수를 나눠서 구현하는게 좋을 것같다. 2차원 배열에서 특정 학생의 성적만 가져오기 최소, 최대값을 고려하여 평균값 가져오기 평균값으로 점수구하기 성적 합치기 [ 코드 ] function solution(scores) { let answer = ''; scores.forEach((item, i.. 2021. 8. 17.
[프로그래머스] 위클리 챌린지 > 1주차 - 자바스크립트 [ 문제 설명 ] 코딩테스트 연습 - 1주차 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이 programmers.co.kr [ 아이디어 ] 생각의 흐름대로 한번 탈때마다 매번 증가된 가격을 더하여 비교하는 방법 가우스의 일화를 토대로 빠르게 구하는 방법 원래라면 1번으로 구현을 해본 다음에 2번으로 넘어가는 흐름을 코테를 연습해봤겠지만 이번엔 바로 2번 아이디어로 구현을 해보았다. [ 코드 ] function solution(price, money, count) { let answer = -1; let total = count * ( count + 1) .. 2021. 8. 17.
[역사판타지] 킬방원 동생이 되었다 (완) - 누텔라 ★★★★☆ [ 작품 소개 ] 살아남아야 한다. 역사를 통째로 바꿔서라도 장르 : 역사판타지, 대체역사 진행 상황 : 총 264화 ( 본편:255, 후일담:9 ) / 완 [ 작가 소개 ] 작가 : 누텔라 작가의 다른 작품 : 조선, 내가 바꾼다 [ 특징 ] [회빙환][전생체험][이방번][무안군][조선][대체역사][초능력][완] 오래간만에 신선한 인물로 빙의하는 대체역사소설이 나왔습니다. 바로 이성계의 8명 아들 중에 일곱째인 이방번, 무안군에 대한 빙의 소설입니다. 작중 설정상 주인공은 양궁 메달리스트입니다. 그런 주인공이 방송 출연을 하게 되었고 방송에서 전생 체험을 하다가 조선시대 무안군으로 빙의한다는 내용입니다. 이성계, 이방원으로 빙의한 소설은 이미 여러 개가 있고 , 왕자의 난 때 죽임을 당한 비운의 왕세자.. 2021. 8. 14.
[현대판타지] 소설 속 엑스트라 (완) - 지갑송 ★★★★☆ [ 작품 소개 ] 소설은 하나의 세계와 수십억의 등장인물이 존재한다. 하지만 히로인이나 조력자 같은 '비중 있는 조역'이라면 몰라도 그 외의 모두에게 이름이 있을 리는 없다. “춘동아 너는 몇 위야?” 나는 나를 모른다. 이름이 왜 춘동인지도 모르겠다. 이 세상은 내가 쓴 소설. 그러나 나는 내가 단 한 번도 쓰지 않은 인물이 되어 있다. 요원사관학교에 입학했다는 것 말고는 평범하기 그지없는, 소설 속 그 누구와도 접점이 없는, 소설의 지면 그 어디에도 이름이 적히지 않을 그런 인물. 그러니까, 나는 소설 속 엑스트라가 되었다. ……아니. 소설 속 먼지가 되었다. 장르 : 현대판타지 진행 상황 : 총 479화 ( 본편:379, 외전:100) / 완 [ 작가 소개 ] 작가 : 지갑송 작가의 다른 작품 : .. 2021. 8. 9.
[VSCode] 같은 프로젝트에 여러 윈도우 띄우기(화면 분할, 탭찢기, 탭분할) 문제 해결 | 탭분할 생김 (2023년 10월)이제 아래 방법을 사용하지말고 drag and drop으로 하세요.단축키로 설정하시려면 해당 커멘트에 추가하시면 됩니다.업데이트 로그  Visual Studio Code October 2023Learn what is new in the Visual Studio Code October 2023 Release (1.84)code.visualstudio.comms형님들이 다른 ide의 위험에 개발좀 하시려고 하는듯? 문제 인식  | 탭분할이 없음다른 ide를 썼을 때 drag & drop으로 화면을 분할하는 기능은 당연히 제공하는 기능인줄 알았습니다.  제가 말하는 화면 분할 기능은 구글 브라우저의 탭을 나누는 것처럼 분할하는 것을 의미합니다.코드를 작성하다보면 .. 2021. 8. 3.
[무협판타지] 마도전생기 (완) - codezero ★★★★☆ [ 작품 소개 ] 한평생 자유를 꿈꿨지만, 한순간 자유를 놓쳤다. 눈앞에서 놓쳐 버린 자유에 절망을 안고 나락으로 떨어지는데. “뭐지, 이 화려한 방은? 뭐야, 이 젊은 몸뚱이는?” 묘하게 불안하네. 에이, 설마 그쪽 동네는 아니겠지? “신교불패(神敎不敗), 만마앙복(萬魔仰伏). 삼공자님의 쾌유를 경하드리옵니다.” “……신 뭐?” 정파연합의 비밀병기 천하진, 천마신교 삼공자 서량으로 전생하다. “튀어야 돼!” 장르 : 무협 진행 상황 : 총 650화 완결 (21/07/05) [ 작가 소개 ] 작가 : codezero 작가의 다른 작품 : 풍운전신, 질풍패도 [ 특징 ] [천마신교][회빙환][살수][공자][서량][금호][장편][완] 대략적인 줄거리는 "정파의 숨겨진 천하제일살수 천서진이 억압을 탈출하는 과.. 2021. 8. 2.
[리액트] 리액트 컴포넌트의 변천사, 역사에 대하여 이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다. 제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다. 또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다. 쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다. 첫 번째. 리액트 컴포.. 2021. 7. 29.
[개발환경] 프론트엔드 개발환경의 이해와 실습 강좌 후기 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요! [사진] “웹팩은 팀에 www.inflearn.com 인프런에 올라온 프론트엔드 개발환경의 이해와 실습 강조 후기입니다. 대부분의 주니어 개발자는 다음과 같은 이유로 개발환경 세팅은 접해보지 못했으리라 생각합니다. 이미 다른 사람에 의해 되어있다. (프로젝트 중간에 합류) 프론트 엔드도 모르는데 개발환경 세팅까지 할 여유는 없다. 그냥 되어있는대로 써도 동작하기에 상관없다. 위의 3가지는 솔직히 제 얘기입니다. 새로운 프로젝트를 시작했.. 2021. 7. 23.
[자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법 요새 css와 자바스크립트를 이용해서 interactive webpage에 대해 관심을 가지고 공부하고 있다. 특히 유튜버 중에 Interactive Developer 이분을 보면서 수준 차이를 확실히 느끼고 있다. Interactive Developer 코드로 만드는 애니메이션, 영감, 실리콘밸리의 생활과 해외취업에 대해 이야기 합니다. https://blog.cmiscm.com/ www.youtube.com 이런 와중에 이분의 포트폴리오 사이트를 보게되었고, 초라한 내 포폴 사이트에 디자인적 요소를 하나씩 추가해보면 어떨까 싶어서 시간 날 때마다 추가하고 있다. 저번에는 버튼 클릭시 소리가 나는 기능을 추가해봤고, 이번에는 스크롤에 따라 fade in, out이 되는 기능을 추가해보려고 한다. 그럼 .. 2021. 7. 22.
[퓨전판타지] 쏘지마라 아군이다! (완) - 토이카 ★★★★☆ [ 작품 소개 ] 폭주한 마법으로 인해 언데드의 대지로 화한 제국. 제국을 정화하고 새로운 희망을 심기 위해 신은 무수한 세계로부터 용사들을 소환하였다. 평범한 지구인이었던 이신우 역시 그곳에 소환되었다. 언데드로. 장르 : 퓨전 판타지 진행 상황 : 총 301화 / 완 [ 작가 소개 ] 작가 : 토이카 작가의 다른 작품 : 환생은 괜히 해가지고, 나 홀로 로그인, 죽지않은 엑스트라, 로그인하자마자 VIP [ 특징 ] [이세카이][언데드][참신][100개의 수명][게임시스템][용사][조커][완] 항상 참신한 소재로 독자를 즐겁게 하는 토이카님의 2018년작 소설 리뷰하겠습니다. 이세카이(이세계)물로 시작하는 이번 소설은 망가진 제국을 되살리려는 신의 용사소환술로 시작됩니다. 이세계인을 용사로 소환하는 대.. 2021. 7. 20.
[리액트] table에는 thead와 tbody가 필요해요(feat. react 형님들) 여느때와 같이 리액트 컴포넌트를 만들고 나서 동작을 확인하고 있는데 콘솔창에 다음과 같은 에러가 떴다. 하.. warning 로그가 있으면 뭔가 큰일 날거같고 너무 허접해보이니 생기면 없애는 나에겐 스트레스다. 그러니 한번 해결해보자. Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 바로 구글링 해보면 react 상에서 table를 쓸때에는 되도록 thead 와 tbody 태그를 써서 해야한다고 되어있다. thead와 tbody 태그를 넣어주니 바로 콘솔경고는 사라졌다. 하지만 나는 이전까지 thead와 tbod.. 2021. 7. 19.
[리액트] 러닝 리액트 2판 - 알렉스 뱅크스, 이브 포셀로 [ 선택 이유 ] 기존의 초록 멧돼지 책이 새롭게 2판으로 돌아왔다. 공식 도큐먼트가 리액트 라이브러리의 기초와 개념을 잡아준다면 책은 기초와 개념에 살을 덧붙여준다고 생각한다. 그런 생각으로 공식 도큐먼트를 2 회독하고 리액트 책을 찾아보게 되었고 마침 2판이 나왔다고 해서 선택하게 되었다. 마침 회사 프로젝트오 기존 레거시에서 리액트도 계속 변경 중이고 나 또한 리액트 문법에 익숙해져 있다. 근데 사수가 없다 보니 내가 짠 코드, 설계가 옳은 방향으로 진행되는 건지 항상 고민을 가지고 있다. 이 책이 그런 고민에 약간의 도움, 실마리가 되지 않을까 기대를 하고 보았다. [ 본문 ] 전체적인 줄거리는 개념 -> 활용 -> 라이브러리 순으로 진행된다. 이는 대부분의 프로그래밍책과 비슷한 구성이라고 생각한.. 2021. 7. 19.
[경제, 재테크] 전설로 떠나는 월가의 영웅 - 피터 린치 지은이 : 피터 린치, 존 로스차일드, 옮김이 : 이건 1989년에 출간되었던 의 최신 개정판이다. 금융공학, 인터넷의 발전으로 빠르게 변하고 다양한 최신 기술을 쏟아져 나오는 현재의 주식판에서 근본적인 공부를 위해 대가들의 저서를 읽어보려고 하고 있다. 우리에게 널리 알려진 여러명의 대가(워런 버핏, 조지 소르소, 레이 달리오, 피터 린치 등) 중 에 금융업에 종사하는 친구의 추천을 받아 선택했고 첫번째가 바로 피터 린치였다. 책 두께도 있는 만큼 피터 린치가 세운 철학과 판단 기준, 그리고 독자에게 주는 소소한 팁들이 나와있다. 이 많은 정보들 중에서 내가 1회독 하면서 기억에 남는 것은 아래 3가지 이다. 집을 사라. 펀드매니저보다 네가 더 잘할 가능성이 있다. 성급하게 하지 마라 이제 이 3가지를.. 2021. 7. 13.
반응형

티스토리툴바