전체 글

라이브러리 현재 트랜드 확인하는 사이트

-------------------------------------------------------------------------------------------------------------- 아래의 사이트에서 현재 많이 쓰이는 라이브러리들을 비슷한 기능을 가진 라이브러리들과 자동으로 비교를 할 수 있다. 뭐가 많이쓰이나? 이리저리 묻지 않고 이 사이트의 통계를 통해서 판단하면 될 것 같다. npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner..

4탄 [프로그래머스 입문 문제] 코테에 필요한 파이썬 기초 문법 정리

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 80개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다. 4탄!! 이쯤 푸니깐 이젠 혼자 풀 수 있는게 거의 없다.. 그리고 수학공식들을 알고 있었다면 쉽게 풀었을 문제들도 좀 보인다.. 그치만 나는 문과니깐 암기로 승부한다!! ------------------------------------------------------------------------ 1. value 값으로 key값 찾기 - dictionary에 사용 reverse = {v:k for k,v in morse.items()} 2. 문자열 나누기 (split( )) # 문자열 기준 str = "hello world" new = str.split("e") print(new) // ..

MUI Tooltip custom 적용 안 될 때 | componentsProps

진짜 별 난리를 다했는데 … mui v5 에는 이 props를 사용하면 된단다… 찾은방법 : “How to custimize mui tooltip” 구글링 -> stack overflow에서 최신글 선택-> 댓글 열심히보기 (개발자는 영어를 가깝게 지내자… ) 이 답변을 가지고 바로 적용해봤다… 아무리 해도 안되던 font size 가 바꼈다… 한시간 반동안 찾았는데… styled, createStyle 겁나 분석했는데 아무리해도 기본 css가 박힌것 처럼 font css가 먹히지 않았었다. (아래 두개 사진 참고) 전체코드는 아래와 같다. import tw from "twin.macro"; import Tooltip from "@mui/material/Tooltip"; import Questionmar..

3탄 [프로그래머스 입문 문제] 코테에 필요한 파이썬 기초 문법 정리

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 60개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다. 3탄!! 이제 정답률이 내려가면서 슬슬 어려워진다.. 그치만 점점 코테에 맛들이는중이다.. 재밌당 참고로 나는 이코테 책을 아래처럼 공부하면서 동시에 프로그래머스 입문 문제로 기초를 다지고 있다. 왕초보의 코딩테스트 공부법 나는 소마라는 프로그램을 지원하고 싶어서, 그리고 왠만한 기업들은 코테를 보는 것 같아 이번달부터 코딩테스트를 준비하기 시작했다. 나는 기간을 좀 길게 잡고 있어서 시간을 가지고 공부 mariais.tistory.com (기초부터 다지고 넘어가자니 시간이 오래 걸릴 것 같아 코테 유형을 동시에 익히는 중...) 암튼, 문법정리는 1탄부터 2탄부터 보던지 상관없다. (아래는..

2탄 [프로그래머스 입문 문제] 필요한 파이썬 기초 문법 정리

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 40개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다. 2탄!! 확실히 기초 문법을 좀 정리해가면서 보았더니 응용해서 풀 수 있는 문제들이 있었다. 특히 리스트 컴프리핸션 문법이 참 유용하게 쓰인다. 참고로 나는 이코테 책을 아래처럼 공부하면서 동시에 프로그래머스 입문 문제로 기초를 다지고 있다. 왕초보의 코딩테스트 공부법 나는 소마라는 프로그램을 지원하고 싶어서, 그리고 왠만한 기업들은 코테를 보는 것 같아 이번달부터 코딩테스트를 준비하기 시작했다. 나는 기간을 좀 길게 잡고 있어서 시간을 가지고 공부 mariais.tistory.com (기초부터 다지고 넘어가자니 시간이 오래 걸릴 것 같아 코테 유형을 동시에 익히는 중...) 암튼, 문법정리..

[프로그래머스 입문 문제] 필요한 파이썬 기초 문법 정리 1

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 21개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다. 100개의 문제에는 초반 10개 정도는 단순 연산 수준이고 아래 문법만 알면 거의 다 풀 수 있는 문제들이였다. (비슷한 문법을 계속 사용하면서 기초를 다지는 느낌?) ------------------------------- 1. 간단한 if문 return 1 if num1==num2 else -1 2. range(start, stop, step) 2부터 15까지의 숫자 생성, 간격은 3 for i in range(2, 15, 3): print(i) // 2, 5, 8, 11, 14 3. index num1 부터 index num2 까지 자르기 def solution(numbers, num1..

2024 SW마에스트로 지원정보 | 15기 연수생 모집

드디어 기다리던 2024 소프트웨어 마에스트로 지원 정보가 떴다!! 사실 이번해는 코테준비를 한지 얼마 안되었기때문에 미리 자소서를 써보고 코테가 어떤식으로 나오는지 궁금해서 지원하려고 한다. (아래 자소서 문항을 보니 자소서는 거의 통과한다는 글을 본 적이 있는데 사실인 것 같기도 하다.) ------------------------------------------------ 중요한 지원정보를 정리하면 아래와 같다. - 선발인원: 약 200명 - 모집기간: 2024.01.08 ~ 02.07(수) 17:00 - 지원서 검토: 24.2.8.(목) - 2.16.(금) ++ 1차 코딩테스트 대상자 발표: 2.19, 14:00 예정 - 1차 코딩테스트: '24.2.24.(토), 14:00 ~ 16:00 - 2차..

멋진 프론트엔드 개발자가 되고 싶다...

이왕 개발자가 되기로 한거 내 분야, 내가 주로 사용하는 언어, 라이브러리, 프레임워크에 대한 질문에 잘 대답해줄 수 있는 그런 멋진 프론트엔드 개발자가 되고 싶다... 그래서 최근에 나오는 모던 리액트 Deep Dive 책을 구매해 보았다. 사실 자바스크립트 딥 다이브는 굉장히 어려웠던 기억이 있어서 이 책을 살까말까 고민을 했었다. 하지만 목차를 스윽 흝어보니 거의 익숙한 용어들이 대부분이여서 용기를 얻고 질러버렸다. 딥다이브 특징 답게 엄청 두꺼워 yes24에서 +3000해서 분철한 책을 받았다. 리액트를 공부한지는 거의 1년이 되어가지만 아직도 랜더링 개념, 훅의 사용법 등이 익숙지 않고 낯선 것들도 더러 있다. 또, 최근에는 Next로만 작업을 했어서(react기반이지만 또 뭔가 느낌이 다르다)..

흥미로운 리액트의 역사를 읽고 알게 된 사실

예전에는 양방향 바인딩 구조여서 모델과 뷰가 서로가 서로를 변경할 수 있는 구조였다. 페이스북 프론트엔드 개발자들이 고민 끝에 모델이 뷰를 변경하는 단방향 방식인 react가 시작되었다. 양방향 구조에서 버그 잡기란 지금보다 훨씬 더 어려웠다. 페이스북팀은 리액트 전에 BoltJs 라는 프레임워크를 먼저 시도했었다. 그러나 조용히 사라졌다. 하나의 어플리케이션에서 API의 변화에 따라 무언가 변경되면 단순히 UI를 초기화하고 재랜더링하는 것이 당연한 게 아니였다. 2013.05 최초 공개된 버전은 0.3.0이고 2023 기준 최신 버전은 18.2.0이다. 재미있는 사실은 0.14.7 이후 바로 15.0.0 버전으로 넘어왔다. 그 당시의 대다수의 개발자들은 JSX 구문, 즉 자바스크립트 내에 HTML을 추..

Next 14 | 주소창에 뜨지 않는 폴더구조 3가지

제로초의 이번 next 신강의를 들으면서 몇달전에 나온 따끈따끈한 next 14에 대해 알아가고 있다. 프로젝트 겸, 강의 참고 겸으로 next공식문서를 자주 드나들고 있는데, 이때까지 본 공식문서 중 가장 가독성이 좋고 깔끔한 것 같다. 행복하다.. 1. (afterLogin) : 그룹 폴더 - 레이아웃용 [공식문서] Routing: Route Groups | Next.js Route Groups can be used to partition your Next.js application into different sections. nextjs.org 2. @modal : 패럴럴 라우트 - 한 화면에 동시에 두 개의 페이지를 보여주는 용도 ex)모달 [공식문서] Routing: Parallel Routes..

프론트 개발자의 현명한 시간관리법 2탄 - 뽀모도로 후기

프론트 개발자의 현명한 시간관리 (후기는 다음주에) 개발자의 시간은 다르게 흐른다. 모니터가 내 시간을 반틈은 같이 쓰는 것 같다. 기능 하나 막혔을 때, 정신차리면 1시간,3시간, 5시간은 금방이다. 하루안에 깔끔히 해결되기만 해도 다행이다. mariais.tistory.com 위글을 작성하고 거의 2주동안 뽀모도로 방법으로 작업을 해봤다. 후기를 한줄로 표현하자면, 진짜 쉬운일이 아니였다. 작업시간을 짧게 하고 쉬는 시간이 계속 생기는 것이니 꿀? 일줄알았는데 사람이 작업하다가 중간에 끊는게 그렇게 어려운일인지 몰랐다.ㅠㅠ 와... 진짜 끈기보다 끊기가 중요하다는 책이름이 떠오르는 순간이 많았다. 확실히 25분 집중 후, 쉬는 5분동안 물을 가지러가거나 화장실을 간다는 등 몸을 조금씩 움직여주니깐 몇..

왕초보의 코딩테스트 공부법

나는 소마라는 프로그램을 지원하고 싶어서, 그리고 왠만한 기업들은 코테를 보는 것 같아 이번달부터 코딩테스트를 준비하기 시작했다. 나는 기간을 좀 길게 잡고 있어서 시간을 가지고 공부하고 있는데, 나랑 비슷한 상황이신 분들에게 코테 공부법을 공유할까 싶다. 도움이되면 좋겠다. 첫번째는 스터디이다. 이코테, 이 책을 가지고 7명이서 코딩 스터디를 하고있다. 멤버는 멘토(?)1명, 코테에 익숙하신 2명, 나와 비슷한 수준의 3명이다. 같은 책을 사용하지만 언어는 본인이 편한 것으로 하고 있다. 매주 1개의 알고리즘 유형을 공부하고 실전문제는 풀 수 있는 수준의 문제들만 풀어오는 식으로 하고 있다. 지속적으로 코테 공부를 하게 된다는 것이 장점이다. 단점은 딱히 없다. 좋은 스터디원들을 만나서 그런지 스케쥴 ..

next.js | react.js 매거진 리스트 데이터 패칭 문제 해결

고민? 많은 쿼리를 같이 사용하는 한 api url 매거진 리스트를 받아오는 한 api에 총 4 query를 사용하려고 했다. 아래는 변경 전 코드이다. const getData = async () => { const magazineList = await SantiagoGet( `magazines?${continent ? `continent=${continent}&` : ""}${ currentRegionId ? `region_id=${currentRegionId}&` : regionIdFromMain ? `region_id=${regionIdFromMain}&` : "" }query_type=${query_type || "hot"}&base=0&limit=50${ searchTerm ? `&search..

Git 커밋 메세지를 효율적으로 해야하는 이유 | 깃 커밋 효율적으로 하는 방법

a 코드 한 줄을 이전 commit에서 삭제한 채로 pr을 보냈었다. 지금 프로젝트의 전반적인 페이지를 살펴보며 오류를 잡아가는 중인데, 갑자기 그 코드가 필요해졌다. 그 코드는 구글링을 한참해서 찾았던 코드라 다시 구글링하는 것보다 나의 예전 commit 기록을 보면 쉽게 해결되겠다 싶었다. 그래서 내 깃 그래프를 살펴보았다. main 페이지에서 작업했던 내용이고 특징이 있는 코드라 분명히 기록에서 쉽게 찾을 수 있을 것 같았다. 그런데 왠일이냐… 내가 내 예전 커밋 메세지를 자세히 보는건 오랜만이였는데 a 코드를 적용한 커밋을 쉽게 찾을 수가 없었다. 문제는 너무 큰 기능 변경 단위로 커밋을 한 탓이였다. 나는 커밋 수가 많으면 지저분해보일 것이라고 생각했기때문에 - 1.해당 페이지 마크업 2.해당 ..

Next, React api url 삼항연산자로 편리하게 사용하기

한 Api에 prameter가 필수가 아니면서 여러개 들어가는 경우가 있다. 예를 들면 search bar라던지… 이럴땐 데이터 패칭을 여러번 하지않고 해당 parmeter를 변수로 선언하고 그 변수에 값이 담겼을 경우, 클릭 또는 submit을 했을 때, 삼항연산자를 사용해서 원하는 데이터만 백엔드에서 가져올 수 있다. 이번 프로젝트에서는 백엔드 분의 취향이신지, 아님 블로그 형식의 사이트를 만드는 거라 그런지 이런식으로 여러 parameter를 활용하는 api 가 좀 있어서 아래 형태를 유용하게 쓰고 있다. easy peasy… /magazineList.js const [magazines, setMagazines] = useState([]); const getData = async () => { co..