공부하는 개발자

📆 2022-09-07 (수) ☑️ Fact (사실) 📑 프로그래머스 레벨 1 문제 하나와 이코테 그리디 문제를 2개 풀었다. 치명적인 조건을 꼼꼼하게 보지않아 문제 하나를 푸는 데 너무 오랜 시간을 허비했다. 이게 맞나..? 너무 오래걸려서 다시 읽어보면 조건을 빼먹고 있거나 접근을 이상하게 하고 있다. 쏙쏙 함수형 코딩 스터디를 했다. 다음 스터디부터 읽을 책을 정했다. 처음엔 열심히 읽었는데 뒤에 어려워질 수록 책을 많이 못읽고 참여해서 아쉽다. 💡 Feeling (느낌) 한 문제당 평균 두 시간이 걸려 너무 막막하지만 고민 끝에 문제를 풀면 굉장히 뿌듯하다 어제까지 너무 막막했던 재귀함수를 직접 ... Read More

📆 2022-09-05 (목) ☑️ Fact (사실) 📑 처음 공부방에 들어와 이번달 말까지의 공부목표도 잡고, 이것이 코딩테스트다 책을 읽었다. 그리고 한 문제 푸는데 한나절이 걸렸다… 윤석님이 코드를 봐주셨는데 갈 길이 너무너무 먼 걸 느꼈다. 누구나 자료구조와 알고리즘 책의 재귀함수 부분을 읽어본 뒤 푼 알고리즘 문제에 적용해서 개선해보라고 하셨다. 여태 알고리즘 문제를 풀면 한 5분 고민하다가 구글링하고 끝이었는데 이렇게 반성의 시간을 의식적으로 갖고 개선하는 게 정말 좋은 거 같다. 💡 Feeling (느낌) 🎯 Finding (교훈) 기존 코드 윤석님이 고쳐준... Read More

재귀함수 재귀는 컴퓨터 과학의 핵심 개념이다. 재귀는 함수가 자기 자신을 호출할 때 쓰는 용어다. 무한 재귀는 쓸모없다. 올바르게 사용하면 강력한 도구가 될 수 있다. 루프 대신 재귀 10을 받ㄷ아 10부터 0까지 숫자를 표시하는 함수 function countdown(number){ for(let i = number; i>= 0; i--){ console.log(i); } } countdown(10) 재귀를 쓴다면 function countdown(number){ console.log(number); countdown(number - 1) }; countdown(10);... Read More

어떻게 문제를 풀 것인가? 문제에 대한 이해 우리가 풀어야 할 문제는 무엇인가? 배열의 크기 N, 숫자가 더해지는 횟수 M, 그리고 K가 주어질 때 동빈이의 큰 수의 법칙에 따른 결과를 출력하라. 주어진 자료는 무엇인가? 배열의 특정한 인덱스에 해당하는 수가 연속해서 K번 초과해서 더해질 수 없다. 배열이 주어진다. 서로 다른 인덱스에 해당하는 수가 같은 경우에도 다른 것으로 간주한다. -> 왜 필요하지? 배열이다. 정렬가능하다. 읽기 탐색 삽입 수정 삭제 조건은 무엇인가? 입력으로 주어지는 K는 항상 M보다 작거나 같다. 우리... Read More

챕터 9 : 계층형 설계2 챕터 9 문제 :좋은 인터페이스란? 액션을 계산으로 만들 수 없다면 암묵적 입력과 출력을 줄여 설계를 개선한다. 설계는 엉켜있는 코드를 푸는 것. 잘 분리한다. 중복이나 불필요한 코드도 없앤다. p.202, 221 Q. 계층형 설계 패턴 4가지를 설명해보세요 A. 직접 구현 계층형 설계 구조를 만드는데 도움됨. 추상화 벽 세부구현을 감춘 함수로 이루어진 계층. 추강화 벽에 있는 함수를 사용할 때 구현을 몰라도 함수를 쓸수 있음. 추상화 벽으로 추상화 벽 아래에 있는 코드와 위에 있는 코드의 의존성을 없앨 수 있음. 작은 인터... Read More

📆 2022-08-13 (목) ☑️ Fact (사실) 📑 프리온보딩 프론트엔드 코스 두 번째 강의를 학습했다. 타입스크립트에 대한 얘기를 들었다. 💡 Feeling (느낌) 내가 정말 개발자로 살아남을 수 있을지 점점 불안하다 못해 두렵기까지 하다. 🎯 Finding (교훈) 잠을 줄여버릇해야한다. 얼른 공부를 시작해야겠다. 🏁 이번주 목표 🏁 원티드 과제 🎯 내일 할 일 🎯 🌅 오늘의 소득 🌅 Read More

📆 2022-08-11 (목) ☑️ Fact (사실) 📑 원티드 과제를 진행했다. 아직 로그인, 회원가입 쪽 진행 중이다. ㅜㅜ 💡 Feeling (느낌) 내가 정말 연차만 차고있고 경험이 부족했구나를 여실히 깨닫는 중이다. 6개월간 열심히 하면 괜찮을까? ㅜㅜ 🎯 Finding (교훈) 잠을 줄여버릇해야한다. 얼른 공부를 시작해야겠다. 🏁 이번주 목표 🏁 원티드 과제 🎯 내일 할 일 🎯 🌅 오늘의 소득 🌅 Read More

📆 2022-08-10 (화) ☑️ Fact (사실) 📑 원티드 프론트엔드 온보딩 챌린지 강의1일차를 들음 11시 40분까지 듣고 씻고 준비하고 나니까 열 두시반… 내일 함수형 코딩은 어떡하지!! 💡 Feeling (느낌) 나는 정말 연차만 차고 있었구나. 잠을 잘 때가 아닌데?! 근데 또 잠을 안 자면 일할 때 지장이 가서 안 잘 순 없다 ㅜㅜ 🎯 Finding (교훈) 잠을 줄여버릇해야한다. 얼른 공부를 시작해야겠다. 🏁 이번주 목표 🏁 원티드 과제 🎯 내일 할 일 🎯 함수형 코딩 6,7,8 챕터 읽기 🌅 오늘의 소득 🌅 누적 레이아웃... Read More

함께 자라기 표지 (출처 : YES24) 함께 자라기 - 애자일로 가는 길 (김창준 지음) 읽은 IT 관련 도서중 가장 흥미롭게 본 책이다. 함께 자라기가 책 제목인만큼 애자일 관련된 협업 내용이 주일 거라고 예상했으나 1부에선 혼자 자라는 내용도 들어가있어서 더욱 재밌고 도움이 많이 되었다. 특히 당신이 제자리걸음인 이유, 의도적 수련의 일상적 예시, 프로그래밍 언어 배우기의 달인 챕터가 실무에도 적용하기 좋아서 끝까지 흥미롭게 읽었던 거 같다. 그리고 2부에서는 주제가 함께인 것만큼 협력의 중요성, 커뮤니케이션의 중요성을 함께 적어주어 팀원과의 신뢰에 대해 다시 한 번 생각해볼 기회를 가질 수 있었... Read More

📆 2022-08-04 (목) ☑️ Fact (사실) 📑 인프런 CS지식의 정석 2. 싱글톤 패턴을 봤다. 잘 이해가 안 가서 다른 싱글톤 패턴 영상을 추가로 봤다. 💡 Feeling (느낌) 언제쯤 머리가 차는 기분을 느낄 수 있을까 ? -ㅠㅠㅠㅠ 🎯 Finding (교훈) 많은 공부를 해야겠다. 🏁 이번주 목표 🏁 원티드 과제 다 하기 🎯 내일 할 일 🎯 즐거운 연차~ 도서관에 가서 빌린 책을 반납하고 예약한 책을 빌려온다. 토요일까지인 원티드 과제 50%이상하기! 함수형 코딩 책 읽기 🌅 오늘의 소득 🌅 Read More

정주행으로 보고있는 인프런 cs강의는 백엔드 언어로 설명이 되어있고 보통 데이터베이스 연결모듈에 많이 사용한다고 나는 접해보지 못할 디자인 패턴인가? 싶어 검색해보니 자바스크립트로도 충분히 구현할 수 있었다. 하나의 클래스에 하나의 인스턴스만 가지는 패턴! 본질은 같구만. 추가로 본 영상 싱글톤 패턴 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며 보통 데이터베이스 연결모듈에 많이 사용함. 장점: 하나의 인스턴스를 기반으... Read More

📆 2022-08-03 (수) ☑️ Fact (사실) 📑 쏙쏙 함수형 코딩 1~5챕터 스터디를 진행했다 (2회차) 액션에서 계산, 데이터를 분리하는 법을 배웠다. 💡 Feeling (느낌) 너무 책만 읽고 생각을 확장시키지 못한 기분이 들었다. 부끄러웠다. 질문/ 대답을 작성하는 거에만 급급했던 거 같다. 너무 긴장이 돼서 머리가 새하얘진다… 🎯 Finding (교훈) 내가 겪었던 상황을 떠올리며 실무에서 적용할 방법과 연관 지어가면서 책을 읽어야겠다. 종혁님이나 민석님과 질문 대답을 주고 받아도 머리가 새하얘지는 걸 봐선 그냥 습득 부족인 거 같다 ㅜㅜ 🏁 ... Read More

챕터 5 : 더 좋은 액션 만들기 챕터 5 문제 : 더 좋은 액션을 만드는 방법은? 액션을 계산으로 만들 수 없다면 암묵적 입력과 출력을 줄여 설계를 개선한다. 설계는 엉켜있는 코드를 푸는 것. 잘 분리한다. 중복이나 불필요한 코드도 없앤다. 챕터 5 요점정리 일반적으로 암묵적 입력과 출력은 인자와 리턴값으로 바꿔 없애는 게 좋음. 설계는 엉켜있는 것을 푸는 것임. 풀려있는 것은 언제든 다시 합칠 수 있음 엉켜있는 것을 풀어 각 함수가 하나의 일만 하도록 하면 개념을 중심으로 쉽게 구성할수 있음. Q. 코드의 냄새란? A. 더 큰 문제를 미리 알려줌 Q. 함수를 부를 때마다 배열... Read More

챕터 4 : 액션에서 계산 빼내기(단계별) 챕터 4 문제 : 액션에서 계산을 빼내는 단계결 방법은? 액션에서 계산을 빼내는 작업은 반복적인 과정입니다. 계산 코드를 찾아 빼냅니다 빼낼 코드를 찾아 코드를 추출해 새로운 함수를 만들어 리팩터링함. 새 함수에 인자가 필요하다면 추가함. 원래 코드에서 빼낸 부분에 새 함수를 부르도록 바꿈 새 함수에 암묵적 입력과 출력을 찾음 새 함수에 암묵적 입력과 출력을 찾음. 암묵적 입력은 함수를 부르는동안 결과에 영향을 줄 수 있는 것. 함수 인자를 포함해 함수 밖에 있는 변수를 읽거나 데이터베이스에서 값을 가져오는 것은 입력. 리턴 값을 포함해 전역 ... Read More

챕터 3 : 액션과 계산, 데이터의 차이를 알기 챕터 3 문제 : 액션, 데이터, 계산이란 무엇인가? 액션- 실행 시점과 횟수에 의존. 다른 말로 부수 효과. 부수효과가 있는 함수. 순수하지 않은 함수 ex) 이메일 보내기, 데이터 베이스 읽기 계산 - 입력으로 출력 계산. 다른 말로 순수 함수, 수학 함수 ex) 최댓값 찾기, 이메일 주소가 올바른지 확인하기 데이터 - 이벤트에 대한 사실 ex) 사용자가 입력한 이메일 주소, 은행 API로 읽은 달러 수량 챕터 3 요점정리 함수형 프로그래머는 액션과 계산, 데이터를 구분함. 계산은 계획이나 결정을 할 때... Read More

📆 2022-08-01 (월) ☑️ Fact (사실) 📑 원티드 프론트엔드 온보딩 과제를 하려했으나 react-create-app 오류부터 시작해서… npm version오류 까지나서 시간 단축을 위해 내일 회사에서 하기로 결정 쏙쏙함수형 코딩 3장을 읽는중. 퇴사를 질렀다. CS강의 1강을 들었다. 디자인 패턴. 💡 Feeling (느낌) 퇴사를 말하기 전까진 너무 불안하고 괴로웠는데 말하고 나니 너무 후련하고 기분이 좋다. 내 인생의 마지막 공부 기회라 생각하고 열심히 공부해야겠다. 🎯 Finding (교훈) 조금씩이라도 매일 꾸준히 하자. 🏁 이번주 목표 🏁 ... Read More

디자인 패턴 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용해 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것. 디자인 패턴을 기반으로 만들어진 라이브러리, 프레임워크 라이브러리: 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한것. 폴더명, 파일명 등에 대한 규칙이 없고 프레임 워크에 비해 자유롭다. ex) 가위 프레임워크: 공통으로 사용될 수 있는 특정한 기능들을 모듈화함. 폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격함. ex) 비행기 라이브러리인 axios는 프레임워크인 리액트나 뷰에 쓸 수 있지만 리액트를 뷰에 못쓰고 뷰를 리액트에 못씀 Read More

챕터 2 : 현실에서의 함수형 사고 챕터 2 문제 : 현실에서 함수형 사고를 적용하는 사례는? 피자집 사장 토니가 로봇 세 개에게 피자를 만드는 걸 시킬 때 함수형 사고를 적용하여 주방을 자동화하고 시간에 따라 발생하는 버그를 고쳐 주방 효율을 높임. ‘타임라인 다이어그램’을 이용해 타임라인을 시각화하여 각 액션이 다른 액션과 어떻게 연결되는지를 확인해 시간에 따라 진행하는 작업을 쉽게 이해함 그리고 타임라인 커팅이란 기술을 적용해 액션이 올바른 순서로 실행되도록함. 챕터 2 문제: 함수형사고는 현실에서 어떻게 도움이 되는가? 유지보수 비용을 줄일 수 있게해줌 효율을 높이고 시간에 따라 발생하는 어려운 버... Read More

챕터 1 문제 : 함수형 사고란 무엇인가? 함수형 프로그래머가 소프트웨어 문제를 해결하기 위해 사용하는 기술과 생각 챕터 1 요점정리 함수형 사고는 함수형 프로그래밍의 기술과 개념이다. 액션은 시간에 의존하여 가장 어렵습니다. 시간에 의존하는 부분을 분리하면 더 다루기 쉽습니다. 계산은 시간에 의존적이지 않습니다. 다루기 쉽기때문에 가능한 코드를 계산으로 바꾸는 것이 좋습니다. 데이터는 정적이고 해석이 필요합니다. 데이터는 저장하거나 이해하기 쉽고 전송하기 편리합니다. Q. 부수효과란? A. 함수가 리턴 값 이외에 하는 모든 일. ex) 같은 인자를 넣으면 항상 같은 결과를 돌려줌 ... Read More

📆 2022-07-27 (수) ☑️ Fact (사실) 📑 코드숨에서 쏙쏙 들어오는 함수형 코딩 스터디를 시작했다. 6주차는 몽골에 있을 때인데 과연 어떨지! 노트북을 들고 가니까 공부를 할 수 있으려나 💡 Feeling (느낌) 회사에서 몰입이 안 되고 스트레스를 받으면 집에서 공부가 안 된다. 함수형 프로그램 스터디할 때 의견나누기 할 때 너무 긴장 돼서 머리가 백지가 된다. 🎯 Finding (교훈) 1-5장을 열심히 공부하자. 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성하기 리뷰받은 것 중 처음 듣거나 헷갈리는 게 있으면 ... Read More

📆 2022-07-26 (화) ☑️ Fact (사실) 📑 Next.js에서 ~did not match 오류가 나는 경우 Next.js에서 styled-components 넥스트에서 스타일드 컴포넌트 작성법과, 이미지 태그 사용법을 알았다. 과제에서 redux-toolkit을 적용해봤다. 💡 Feeling (느낌) 요즘 함께 자라기를 읽고 있는데, 나의 실력과 업무 난이도가 중앙일 때 몰입도가 가장 높아진다고 한다. 지금 하고 있는 홈페이지 작업이 딱 몰입하기 좋은…. 회사에서 몰입도 있게 일해서 컨디션이 좋은 덕에, 집가서 과제도 열심히 했다. redux-toolkit을 따로... Read More

📆 2022-07-25 (일) ☑️ Fact (사실) 📑 redux toolkit 강의를 봤다. 코드숨 강의는 접어놓고… ^^ 위 강의가 쉽게 이해가 잘 돼서 이 강의를 보고 적용하려니 마음대로 되지 않는다 ㅜ ㅜ 💡 Feeling (느낌) 그래도 오랜만에 내가 생각해서 하는 코드를 작성하니 재밌었다. 근데 내일 새로 다시하는 게 좋을 거같다. 홈페이지 초기 세팅 쉽지않네 🎯 Finding (교훈) 리덕스 툴킷을 잘 익혀보자!!!! 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성하기 리뷰받은 것 중 처음 듣거나 헷갈리는 게 있으면 ... Read More

[💡 학습 내용] 레스토랑 상세페이지 구현 TDD로 기능 구현 HTTPie Authorization 헤더 LocalStorage [🤩 좋았던 점] 8월 공부 계획을 미리 작성해서 자극도 되고, 8월 시작하자마자 뭘해야할지 알 수 있을 거 같았음 [😥 아쉬웠던 점] 이번주도 과제를 완성하지 못한 점… 회사 업무 때문에 출근 전, 퇴근 후 시간이 뺏기니 코드숨에 집중할 수 없어서 답답함 [⛳ 이번주를 마치며] 벌써 코드숨이 마지막 주…. 회사 업무와 코드숨을 잘 끝마칠 수 있을지 걱정이 된다. Read More

📆 2022-07-24 (일) ☑️ Fact (사실) 📑 [tailwind css]https://youtu.be/r61y9R2ZQmk 강의를 봤다. 코드숨 1강을 봤다.ㅎ 입력만 하고 출력을 못하는 중… 쓰레기! 8월 공부 계획을 작성했다. 매 50분마다 내가 뭘하는지 기록하면 집중에 좋다고 해서 트위터에 작성 중이다. 괜찮은 거 같다. 💡 Feeling (느낌) tailwind css 정말 간편한데 당장 홈페이지를 5일안에 끝내야하니까… 못하겠는 걸? ㅎ 꼭 올해는 2년차의 자질을… 채우고싶다. 🎯 Finding (교훈) 정말 내가 집중력이 짧다는 걸 느꼈다. ... Read More

📆 2022-07-22 (금) ☑️ Fact (사실) 📑 Next.js 공부 💡 Feeling (느낌) Next.js 를 쓸 예정이다. tailwind css를 써보려다, 우선 pc만 작업하려고 미뤄뒀다. 🎯 Finding (교훈) 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성하기 리뷰받은 것 중 처음 듣거나 헷갈리는 게 있으면 무조건 공부하기 🌅 오늘의 소득 🌅 참고하기 좋은 개발블로그 참고하기 좋은 개발블로그2 Read More

SSR 서버 사이드 렌더링 준비된 html을 서버에서 브라우저에게 response로 보내줌 클라이어늩 대신 서버에서 페이지를 준비 리액트는 csr이라 서버에 영향 x 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있음 -> 화면 로딩이 지연되어 ux측면에서 좋지않음 -> 검색 엔진시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색에진 최적화에 문제가 됨 -> Next.j는 ssr이라 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있어 검색엔진 최적화에 좋은 영향을 줌 모든 페이지를 pre-render 함. 모든 페이지를 위한 HTML을 클라이언트 사... Read More

📆 2022-07-19 (화) ☑️ Fact (사실) 📑 코드숨 6주차 강의를 봤음 커밋 메시지 적기는 늘 고민이된다. — 출처 💡 Feeling (느낌) 강의 하나 보는 데 너무 오래 걸려서 이번주도 까딱 잘못하면 완료 못하겠구나 하는 생각이 들었다. 그래도 해야 돼…. 회사 홈페이지 작업 들어가기로 되었는데 Next.js + Sass + Redux toolkit + ts 조합을 써볼 생각이다. 물론 퍼블리싱 위주여서 redux toolkit과 ts는 뺄 지도…^^ 🎯 Finding (교훈) 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TI... Read More

📆 2022-07-18 (월) ☑️ Fact (사실) 📑 코드숨 6주차 강의를 봤음 HTTPie — MDN - Window.localStorage — — Authorization — 💡 Feeling (느낌) 강의 시간이 2시간 30분을 넘어가는 걸 확인하니까 와… 이거 월요일 안에는 안 되겠는데? 라는 생각이 먼저 들었다. 🎯 Finding (교훈) 로그인을 구현해본 적이 없었는데 좋은 기회다! 🎯 내일 할 일 🎯 과제 많이 하기 react-redux강의 빨리 다 보기 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성... Read More

[💡 학습 내용] 레스토랑 상세페이지 구현 TDD로 기능 구현 React Router Routing [🤩 좋았던 점] 표현적 글쓰기 참여 코드리뷰로 내가 정확히 알지못했던 개념을 물어봐주셔서 대답하기 위해 알고 있는 걸 짜내고 맞게 대답하기 위해 구글링도 하고, 문서도 보면서 복습효과를 얻었음 [😥 아쉬웠던 점] 코드숨 시작하고 주말엔 약속을 잡지 않고 어딜 가더라도 노트북을 꼭 들고가서 조금이라도 과제를 진행했었는데 이번 주말에는 예전부터 잡혀있던 약속을 가느라, 그리고 그 곳에 컴퓨터가 있을줄 알고 노트북을 챙겨가지 않았다가 일이 틀어져서 과제를 진행하지 못했다… ... Read More

📆 2022-07-14 (수) ☑️ Fact (사실) 📑 코드숨 6주차 과제를 진행했음 💡 Feeling (느낌) 9시까지는 과제를 하면서 시간을 보내느데 9시 이후로는 영 집중이 되지 않음. 🎯 Finding (교훈) 🎯 내일 할 일 🎯 과제 많이 하기 react-redux강의 빨리 다 보기 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성하기 리뷰받은 것 중 처음 듣거나 헷갈리는 게 있으면 무조건 공부하기 🌅 오늘의 소득 🌅 쏘카 일정 산출 Toast UI Read More

📆 2022-07-12 (월) ☑️ Fact (사실) 📑 코드숨 6주차 과제를 조금! 더 진행했음. 틀린 path명을 적었을때 NotFoundPage가 떠야하는데 뜨질않는다. 드림코딩 엘리님의 가면 증후군 영상을 봤음. 💡 Feeling (느낌) 9시까지는 과제를 하면서 시간을 보내느데 9시 이후로는 영 집중이 되지 않음. 🎯 Finding (교훈) 열심히 이직 준비를 하겠다고 다짐했으나 아직 실천한 게 하나도 없다! 우선 하나라도 더 과제하고 리뷰받는 게 우선이니 9시까지 과제하고, 9시에 우선 씻고, til부터 작성하고 보자. 매일 듣는 강의를 생각해보자. 자... Read More

📆 2022-07-11 (월) ☑️ Fact (사실) 📑 코드숨 6주차 비동기 처리 강의를 한 번 정주행했음. 코드숨 6주차 과제 1을 진행했음. 생각없이 react-router-dom에서 import해서 쓰던 라우팅의 원리를 배웠음 window.location을 통해서 Location 객체를 얻어올 수 있음 처음으로 git commit amend를 써봄 (실패… 왜 merge가 된 거지?) 종혁님이 알려준 react-router-dom v6 업그레이드 되면서 달라진 것들 리액트 단톡방에 git 관련해서 기본적인 걸 질문했다가 유용한 git 연습사이트 를 얻었다. 오히려 좋아. ... Read More

[💡 학습 내용] 레스토랑 조회 구현하기 TDD로 기능 구현 Redux에서 비동기 액션 실행 Redux Thunk middleware [🤩 좋았던 점] 4주차 과제때 너무너무 어렵고 헤매느라 과제 완성을 못했는데, 따로 react-redux를 공부하고 다른 분들 코드도 참고하고 강의도 여러번 보니 조금 이해가 가서 구현시키는 데 성공했다. 저번주에는 풀이 영상에서 10초라도 눈을 떼면 진행을 못했는데… 그래도 이번엔 먼저 코드를 작성하고 막히는 부분이 있으면 참고한 정도는 되었다. 미뤄뒀던 상반기 주간회고를 작성했다. (개인적인 게 많아 노션에 기록했다.) 하반기에는 많이 성장... Read More

📆 2022-07-04 (월) ☑️ Fact (사실) 📑 5주차 비동기 처리 강의를 한 번 정주행했음. 코드숨 5주차 과제 1을 진행했음. 처음으로 테스트 코드 작성을 red -green -refactor대로 진행했음. 테스트 코드를 먼저 작성하고 그에 따라 컴포넌트를 구현함. 사실 저번주까지는 green-red-refactor로 잘못 알고 있었음. 출퇴근길에 생활코딩님의 react-redux와 js 비동기, react ajax를 보았음. 완전 기본적인 자바스크립트 배열 문법을 단톡방에 신입인척 물어봤다. 💡 Feeling (느낌) 저번주에 과제를 못했던 게 너무 후회스... Read More

저번주 회고에 막막하더라도 매일 push를 해 코드리뷰받기 & 매일 TIL을 올리겠다고 다짐했으나 지키지 못했다. Flux Architecture & Redux를 완전히 익숙해지지 않은 상태에서 TDD를 위해 테스트 코드 작성까지 하다보니 헷갈리는 게 배가 되었다. (특히 useDispatch와 useSelector) jest 라이브러리를 사용할 때도 계속 오류가 나고, 테스트코드도 이 테스트를 여기다 적는 게 맞는지 확신이 서지 않았고 어떤 순서대로 작업을 해야할지 몰라서 중구난방으로 커밋을 했다… 또 미리 생각해둔 시나리오대로 테스트 코드를 작성하다보면 꼭 에러가 떠서 일단 다른 사람들의 코드... Read More

📆 2022-06-27 (월) ☑️ Fact (사실) 📑 코드숨 4주차 강의 1을 계속해서 돌려보았다. Flux Architecture 💡 Feeling (느낌) 리덕스를 처음부터 만들어본 적이 없어서 (대충 눈치껏 추가해서 쓰기만 했었다.) 많이 두려웠는데 여러번 봐보니 이해가 갔다. 이해는 가는데 4주차 두 번째 과제때 잘 쓸 수 있을지! 좀 걱정된다. 리덕스는 알겠는데, __mocks__ 에 담긴 이 부분. 이 부분은 어려워서 몇 번 돌려봤더니 그냥… 이해보다는 익숙해져야할 문제같다. 🎯 Finding (교훈) Redux는 Flux Architectu... Read More

[💡 학습 내용] 테스트 코드 작성 (jest) BDD 스타일(describe - context - it) [🤩 좋았던 점] 코드숨을 신청한 목적 중 하나였던 테스트 코드 작성법을 배우고, 작성해보았다. 남의 일이라고만 여겼던 테스트 코드를 이런 식으로 작성하면 되는구나. 왜 명세서 역할을 한다는 건지 조금은 알 거 같다. 저번주는 혼자서 포모도로를 해봤다면, 이번엔 코드숨 채널에서 해본 점! 확실히 혼자하는 것보다 집중이 잘 되었다. 첫 커피챗을 해본 점. 운이 좋게 윤석님과 커피챗 기회를 가졌는데 좋은 자극도 받고, 스터디하는 방법에 대해서도 배우고 유익한 시간이었다. 막막... Read More

출처 : 코드숨 리액트 9기 코드리뷰 (다희님과 인서님) BDD 스타일(describe -context-it) 무엇을 테스트 할 것인가 1번을 위해 어떻게 테스트코드를 작성할 것인가 ‘컴포넌트한테 무엇을 기대하는지’에 대해 고민하며 테스트 케이스를 작성하는 편 Describe - Context - It는 테스트를 구조화 하기위한 패턴 Given - When - Then은 테스트 시나리오를 BDD 형식으로 작성할 때 도움이 되는 패턴 Given - When - Then 을 이용해서 시나리오를 구성 Describe - Context - It를 이용해서 테스트 코드를 구조화 Describe는 테스트의 대... Read More

📆 2022-06-25 (금) ☑️ Fact (사실) 📑 김영보 선생님의 자바스크립트 강의 과제 해설 강의 💡 Feeling (느낌) 한 번 수업의 흐름이 끊기니 따라잡기가 힘들었다. 🎯 Finding (교훈) 뭐든 흐름이 끊기면 안 돼! 🎯 내일 할 일 🎯 코드숨 과제 진행하기 해설 강의 보기 🏁 이번주 목표 🏁 코드숨 과제 매일 PR 날리기 TIL 매일 작성하기 리뷰받은 것 중 처음 듣거나 헷갈리는 게 있으면 무조건 공부하기 Read More

📆 2022-06-24 (금) ☑️ Fact (사실) 📑 오늘 윤석님과 점심에 커피챗을 가졌습니다! 제가 또 실수를 한 덕분입니다. 역시 사람은 실수를 해야 배우는 게 많습니다! 마침 저희의 회사가 윤석님과 5분 정도 되는 거리에 있던 탓에 바로 점심에 만나뵐 수 있었고 궁금한 것을 질문하고 답변과 팁을 들으며 아주 유익한 시간을 가졌습니다. 커피챗도 처음이었고, 실력자이신 개발자분과의 미팅도 처음이었는데 정말 좋은 경험이 되어서 앞으로도 커피챗의 기회가 온다면 놓치지 않으리라 다짐했습니다. 코드숨 3주차 과제를 다른 분의 코드리뷰를 처음부터 보고 진행했습니다. 덕분에 테스트 코드에 대해... Read More

📆 2022-06-23 (목) ☑️ Fact (사실) 📑 코드숨 3주차 과제에서 트레이너분들이 남겨주신 링크의 문서들을 보며 test 코드 관련 공부를 했습니다. https://marocchino.net/2016/12/04/about-rspec/ https://ko.javascript.info/testing-mocha#ref-888 https://github.com/ahastudio/til/blob/main/ruby/20161206-rspec-let.md Ginkgo - Go 언어 개발자를 위한 BDD 테스팅 프레임워크 💡 Feeling (느낌) 회사 일도 막막한 작업을 들어가게 되었고 코드숨... Read More

[💡 학습 내용] 간단한 카운터 앱을 리액트로 만들고 이를 여러 개의 파일로 분리해 봅니다. 간단한 Todo 앱을 리액트로 만들어 봅니다. Components & Props, 리액트 훅, 관심사의 분리 [🤩 좋았던 점] TIL 이번주 월~토 동안 TIL 작성에 성공했다. 작심삼일인 내가 3일 이상 일기나, TIL을 작성하는 것은 처음있는 일이었다. 다른 사람이 볼 수도 있다는 생각에 좀 더 발전한 TIL을 작성하고 싶다는 의무감이 생기는 게 좋은 점 같다! 그리고 다른 분들의 TIL을 보면서 자극도 받고, 배울점도 많다! Pomodoro 이번주는 코드숨에... Read More

📆 2022-06-18 (금) ☑️ Fact (사실) 📑 김영보 선생님의 자바스크립트 오프라인 강의를 들었다. (10시 - 17시) 4장 5장 어제 완료한 코드숨 2주차 과제 1, 2를 작업마다 커밋을 나눠 Push했다. Pr을 잘못 날려 윤석님에게 도움을 요청했으나 push만 해줘도 되는 걸 알게 되었다! 오히려 좋아! 다른 분들의 코드와 코드리뷰를 줍줍했다. 💡 Feeling (느낌) 온라인 강의의 장점은 필요한 부분만 스킵해서 들을 수 있다는 점이고, 단점 역시 스킵해서 들을 수 있는 거 같다. 기본 개념이 나오면 한 두번 듣고나서는 뒤로 넘기거나 딴 짓을 하게 됐는... Read More

📆 2022-06-17 (금) ☑️ Fact (사실) 📑 코드숨 2주차 과제 1, 2 리팩토링 및 과제 2를 완료했다. (하지만 늦은 밤까지 밖에 있었어서 PR은 날리지 못했다.) 다시 한 번 아샬님 강의를 돌려봤다. 분명 과제 전에 봤는데, 윤석님이 코드리뷰에서 한 번 꼬집어주셔서 다시 보니 머리에 남는 게 달랐다. 또 흘려들었나보다…ㅠㅠㅠ…. 이 상태관리 하나정도는 InputTodo만의 상태니까 이 컴포넌트 안에 써도 되지 않을까… 했는데 모든 상태 관리는 App.jsx에서, InputTodo 포함 다른 컴포넌트들은 상태에 따른 화면에만 관심사를 둘 수 있도록 했어야했다. 실무에서 작업... Read More

📆 2022-06-16 (목) ☑️ Fact (사실) 📑 코드숨 2주차 과제 1, 2 리팩토링 후 pr 날림. 개인적인 문제로 인해 저녁 공부 시간이 부족해 리팩토링만 진행하고 진도를 못나감. 회사 업무 중, object들을 배열 안에 넣는 코드를 작성하지 못해 도움을 청했습니다. 도움을 받은 코드를 보고도 이해를 못했다…… 혼자만의 힘으로 다시 짜봐야지. 진짜 별거 아닌 간단한 화면인데… 머리가 안 굴러갔다. 백엔드 개발자분과 싸웠다. 기획자의 의도 파악때문. 근데 내가 맞는 거였다! 계속 띄어쓰기, 변수명 관련 코드리뷰를 받는다. 빠르게 올리는데 급급하다보니 그런 사소... Read More

📆 2022-06-15 (수) ☑️ Fact (사실) 📑 코드숨 2주차 과제 1 리팩토링 후 PR 날리기 (간단한 Counter App) 코드숨 2주차 과제 2 pr 날리기 자바스크립트 DOM 강의 1편 💡 Feeling (느낌) 다른 분의 코드리뷰에서 내 커밋 메시지를 참고하셨다하고 트레이너님이 칭찬을 해주셔서! 기분이 좋았다. 나도 다른 분들걸 많이 참고하는데, 다른 분들걸 참고하면 어느분걸 참고했는지 남겨야겠다! 커밋메시지의 중요성을 다시 한 번 깨달았다. 2주차 두 번째 과제는 한 달 전에 TO DO 리스트를 만들었어서, 생각보다 빠르게 작성했다. 하지만 기억이 잘... Read More

📆 2022-06-14 (화) ☑️ Fact (사실) 📑 코드숨 2주차 과제 1 리팩토링 후 PR 날리기 (간단한 Counter App) 코드숨 2주차 과제 2 초기 셋팅이라도 해놓기 (간단한 Todo App) 👉이벤트 처리하기 문서 정독 💡 Feeling (느낌) 회사를 관두고 진득하게 공부나 하고싶다는 생각이 드는 하루 중 하나였다222 하지만 스타트업혹한기,어떻게하면좋을까를 보고 오늘도 참아보는 저녁… 애매하게 코드를 붙잡고 있느라 1시~ 2시에 자고 6시에 일어려니 너무 피곤해서 업무 집중도도 떨어지고, 출퇴근길에 독서를 하지 못하고 목 꺾고 자기 바쁘다.. 잠이 중요... Read More

const handleClick = (operator) => { ... } <button type="button" onClick={() => { onClickOperator(operator); }}>{operator}</button> 코드숨 1주차 과제2인 간단 계산기 만들기를 진행하면서 연산자를 눌렀을 때 생기는 이벤트를 담은 함수를 onClickOperator라 진행했습니다. 그리고 해당 코드에 대해서 윤석님께서 이런 리뷰를 달아주셨습니다. 핸들러 함수와 일반 함수를 혼동하고 있다. 핸들러 함수는 특정 이벤트를 처리하는 함수이다. 고로 () =&... Read More

📆 2022-06-13 (MON) ☑️ Fact (사실) 📑 코드숨 2주차 강의 (React) 모두 듣기 코드숨 2주차 과제 1 pr 날리기 핸들러 함수 코드리뷰 받은 거 다시 보기 👉핸들러 함수 코드리뷰 아샬님의 어떻게 공부할 것인가 다시 보기 👉어떻게 공부할 것인가 💡 Feeling (느낌) 회사를 관두고 진득하게 공부나 하고싶다는 생각이 드는 하루 중 하나였다. 1주차 마지막 날! 윤석님께서 남겨주신 코드리뷰 내용중에 핸들러 함수와, 핸들러 함수가 실행되고 나서 무슨 일을 할지는 구분하시는게 좋을 것 같다는 피드백을 주셨는데, 처음엔, (사실 좀전까지도) 함수와 함수 호출의 차이를... Read More

같은 회사 동료이신 종혁님, 민석님과 함께 신청한 코드숨. (사비라 손이 떨렸다.) 코드 리뷰를 통해 좋은 개발 문화와, 개발 방식, TDD로 개발하는 훈련까지 받을 수 있어서 너무 좋은 기회라고 생각했다. 걱정과 기대 속에 첫 주가 시작 되었다. [학습 내용] 개발 환경 구축(Node.js / NPM / Webpack Dev Server / ESLint) JSX, Babel, Webpack git pr 날리는 법 [과제] let을 사용하지 않고 구현하기 간단 계산기 만들기 [좋았던 점] 늘 create-react-app 으로만 프로젝트를 진행했지만 처음부터... Read More

코드숨 2일차에 접어들었습니다. 과제 1은 test와 eslint 모두 통과하였습니다! 아직 merge는 안 해주셨지만 과제 2에 들어갔습니다. 과제는 계산기를 만드는 과제였고 처음 봤을때 sum(a, b); 느낌으로 아주 쉽게 보았으나… 막상 코드를 작성하려니 정말 쉽지않았습니다. 우선 미션을 네 단계로 쪼갠 것중… 퍼블리싱이나 다름없는 미션 2차까지 완료하고 힌트를 요청드린 상태입니다. 1주차인데 알고리즘으로 접근해야하는 게 답일지! 고민 되네요… 그리고 오랜 자바스크립트 경력을 지닌 김영보님의 오프라인 수업 공지가 올라왔길래 거리도 가깝고해서 우선 신청해보았는데 신청하고보니 es5중심이라… 조금... Read More

코드숨 1일차 0605에는 코드숨 OT가 있었습니다. 코드숨 강의에 대한 안내를 간략하게 받고 그룹을 짓고 어느정도 1분 자기소개를 예상했는데 예상외로 한 시간 넘게 강의에 대한 마음가짐을 나누는 시간을 가졌습니다. 2년차가 되었는데 이런 질문을 해도 될까? 라는 것들이 꽤 있는데 오티를 통해 긴 시간 헤매지 말고 얼른 무지를 드러내자…! 마음 먹게 되었습니다. 조는 랜덤으로 배정되었는데 저와 같이 코드숨을 지원한 동료분들 종혁님, 민석님과 같은 조가 되어 신기했습니다. 물론 사람 수가 적어 갈라지는 경우가 더 보기 힘들었을 수도 있지만요… 월요일 아침에 강의가 올라오면 해당 강의를 보고 일주일간 과제를 ... Read More

팝업창 중에 일주일 후 다시보기 라는 버튼을 클릭하면 일주일동안은 뜨지않다가 일주일 후 다시 뜨는 기능이 있는데 로컬 스토리지의 쿠키를 이용하면 된다. const [isPointModal, setIsPointModal] = useState(true); const nextWeekend = moment().add(1, 'months'); const getCookie = () => { setIsGuideModal(false); localStorage.setItem('pointModal', nextWeekend); }; {isPointModal && lo... Read More

const [ScrollY, setScrollY] = useState(0); const [top, setTop] = useState(false); const handleFollow = () => { setScrollY(window.pageYOffset); if (ScrollY > 200) { // 56 이하면 버튼이 보이게 setTop(true); } else { // 56 이상이면 버튼이 안보이게 setTop(false); } }; useEffect(() => { const watch = () =&... Read More

리액트 네이티브 환경설정만 순수 시간으로 따지면 3일 걸린 거 같다. 구글링 미친듯이 하고 재설정하고 재설치하고 버전 업그레이드를 해도 안 되던 게 react-native doctor 이거 하나에 끝났다. 분명 sdk android_home jdk 제대로 다 설치하고 환경변수까지 입력했는데도 다 x 표시되어있었는데 f랑 e 하고 재부팅 하니까 됐다. Android SDK는 계속 fix 하고 error 고치기를 해도 N/A가 뜨길래 구글링하면서 한 번 run android 하니까 성공적으로 켜졌다. Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ 리액트는 라이브러리인가요 프레임워크 인가요?🔥 라이브러리. 1) 프레임워크 : 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것, 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것 2) 라이브러리 : 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것 둘 다 공통의 기능을 사용하여 결과물을 만드는 것으로 비슷해 보이지만, 둘의 차이점은 어플리케이션의 제어 흐름의 권한을 누가 가지고 있... Read More

프로미스는 콜백 지옥을 벗어나기 위한 자바스크립트의 비동기 처리에 사용되는 객체. function taskA(a, b){ return new Promise((resolve, reject) => { const res = a + b; resolve(res); }, 3000); }); } const bPromiseResult = taskA(5, 1).then((a_res) => { console.log("A RESULT : ", ares); return taskB(a_res); }); bPromiseResult .then((b_res) => { console.log(... Read More

async와 await async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다 async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다. async가 제공하는 기능은 이뿐만이 아닙니다. await는 async 함수 안에서만 동작합니다. 일반 함수엔 await을 사용할 수 없습니다. function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function() { await delay(3000); ret... Read More

단락회로 평가 const getName = (person) => { if(!person){ return “객체가 아닙니다” } return person.name } 단락회로 평가 const getName = (person) => { const name = person && person.name; return name || “객체가 아닙니다.” }; 조건문 업그레이드 // 평소에 쓰던 거 function isKoreanFood(food) { if(food === "불고기" || food === "비빔밥" || food === "떡볶이") { return... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ 클로저 클로저에 대해 아시나요? 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 클로저를 사용하면 뭐가 좋죠? 🔥🔥 현재 상태를 기억하고 변경된 최신 상태를 유지 전역 변수의 사용 억제 정보의 은닉 클로저를 어떻게 생성하나요? 🔥 내부(중첩) 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용될 때 내부(중첩... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ * 즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요 함수 표현(Function expression)은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거칩니다. 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다. 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) 라고 한다. 즉시 실행... Read More

추상 클래스 타입스크립트는 다른 언어처럼 abstract 키워드를 사용해 추상 클래스를 만들 수 있다. 추상 클래스는 다음처럼 abstract 키워드를 class 키워드 앞에 붙여서 만든다. 추상 클래스는 자신의 속성이나 메서드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이 속성이나 메서드를 구현하게 한다. abstract class 클래스 이름 { abstract 속성이름: 속성 타입 abstract 메서드이름() {} } // 추상 클래스 예 abstract class AbstractPesron5 { abstract name: string constructor(public a... Read More

타입스크립트 세 종류의 자바스크립트 자바스크립트는 현재 세 가지 종류가 있다. 표준 자바스크립트 ES5 2015년부터 매년 새로운 버전을 발표하는 ESNext, ESNext에 type 기능을 추가한 TypeScript Typescript는 ESNext모든 문법을 포함하고 ESNext는 모든 es5문법을 포함함. 타입스크립트로 개발했더라도 타입 기능을 사용하지않는다면 ESNext 소스나 마찬가지 ESNext의 주요 문법 비구조화 할당 화살표 함수 클래스 모듈 생성기 Promise와 async/await 구문 03-2 객체와 인터페이스 object타입은 인터페이스와 클래스의 상위 타입. object타입으로... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ * 함수 🔥 * 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요? named function declaration (명명 함수 선언) anonymous function expression (익명 함수 표현) named function expression (명명 함수 표현) Immediately-invoked expression (즉시 실행 표현) function constructor ... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ 데이터 타입 🔥 데이터 타입의 종류는 어떤 것들이 있나요? 🔥 심벌 타입은 뭐죠? ECMAScript 2015부터 심볼(Symbol)이라는 새로운 원시 타입이 도입되었습니다. Symbol은 고유하고 변경할 수 없는 식별자를 생성하며, 한 번 생성하면 복사할 수 없습니다. Symbol의 사용 목적은 객체의 고유한 프로퍼티 키를 만들기 위해 사용됩니다. 데이터 타입은 왜 필요할까요? 🔥 값을 저장할 때 필요한 메모리 공간의 크기를 알기 위해 값을 참조할 때 한 번에 읽어 들일 메모... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ 프로그래밍 🔥 프로그래밍이란 뭐라고 생각하나요? 프로그래밍(programming)이란 이와 같이 특정 목적을 달성하기 위해 설계된 알고리즘(algorithm)을 프로그래밍 언어를 사용하여 구체적인 프로그램으로 작성하는 과정을 가리킵니다. 간단히 프로그래밍이란 프로그램을 만드는 모든 작업이라고 볼 수 있는 것입니다. 컴파일러는 뭐고 인터프리터는 뭔가요? Compiler란? 컴파일러란? 컴파일러란 우리가 작성한 코드를 컴퓨터로 실행 가능한 코드로 컴파일 뒤 실행파일을 생성시... Read More

출처: 프로그래머스 문제 주어진 코드 #include <string> #include <vector> using namespace std; vector<int> solution(vector<int> arr, int divisor) { vector<int> answer; return answer; } 내 풀이 function solution (arr, divisor{ const answer = arr.filter((s) => {s % divisor === 0 ); return !answer.length ? [-1... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ display 🔥 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다. 블록(block) 인라인(inline) block display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하... Read More

출처: https://joshua1988.github.io/ts/guide/type-alias.html 타입 별칭이란? 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. string, number와 같은 간단한 타입 뿐만 아니라 interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있습니다. interface Person { name: string; age: number; } type Person2 = { name: string, age: number, } var yerin2: Person2 = { name: '예린', ... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ PX, EM에 대해 설명하시오 🔥🔥 px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위 em과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다. em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다. div { font-size: 10px; } div { font-size : 1em; /1em 대략 10px/ } re... Read More

문제 주어진 코드 function solution(arr) { var answer = []; // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다. console.log('Hello Javascript') return answer; } 풀이 for문 사용 function solution(arr) { var answer = []; // 새로운 배열 for(var i = 0; i < arr.length; i++) { // 처음부터 끝까지 반복 arr[i] == arr[i+1] ? '' : answer.push(arr[i... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ SEO란 무엇인가? Search Engine Optimization : 검색엔진 최적화 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스 https://velog.io/@hyacinta/SEO-Search-Engine-Optimization-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94 Button 태그의 Default type은 무엇인가? button에 type=”button”을 지정하는 이유는 Default가 ... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ 웹 표준 및 웹 접근성 🔥 웹 표준이란? 웹표준이란 말 그대로 ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하며, 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다. HTML5에서 추가된 내용이 있나요? semantic요소, input 타입과 요소, 그래픽 요소 등. 자세한 건 아래 링크에서 확인가능 http://tcpschool.com/html/html5_intro_addition 웹 접근성이... Read More

유닛 테스트 (단위 테스트) Jest라는 라이브러리를 사용하면 Test Runner 테스트 코드를 실행 후 결과 생성 Assertion 테스트 조건, 비교를 통한 테스트 로직 동시에 수행할 수 있음. 자바스크립트 테스트 프레임워크 제스트의 장점 zero config 아무런 설정을 하지않아도 사용가능 snapshots 테스트 지원함 isolated 성능 속도가 뛰어남 great api it to expect 같은 좋은 api가 있다. 제스트의 공식문서 jestjs.io https://jestjs.io/docs/getting-started 테스트 기본 // add.js function add(a,... Read More

문제 주어진 코드 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> // 파라미터로 주어지는 문자열은 const로 주어집니다. 변경하려면 문자열을 복사해서 사용하세요. char* solution(const char* s) { // return 값은 malloc 등 동적 할당을 사용해주세요. 할당 길이는 상황에 맞게 변경해주세요. char* answer = (char*)malloc(1); return answer; } 풀이 문자열의 길이와 인덱스를 알면 풀 수 있다. 문자열의 길이가 짝수인지... Read More

Date 객체 생성를 사용해서 날짜를 생성 후 getDay() 메서드를 이용하여 요일을 뽑아낸다. 0~6 > 일요일 ~ 토요일 getDay() 메서드만 알면 쉽게 풀 수 있는 문제! function solution(a, b) { var arrDayStr = ['SUN','MON','TUE','WED','THU','FRI','SAT']; var day = new Date(`2016-${a}-${b}`).getDay(); var answer = arrDayStr[day]; return answer; } Read More

Testing 이란? Software Test 제품(함수, 특정한 기능, UI, 성능, API 스펙)이 예상하는대로 동작하는지 확인 자동화 속도 쉽게 작성 높은 커버리지 기능이 정상 동작 요구 사항 이해 / 요구사항 만족 이슈에 대해 예측 버그를 빠르게 발견 손쉬운 유지보수 코드간 의존성을 낮춤 좋은 문서화 테스트 코드 피라미드 E2E Test - UI테스트, 사용자 테스트 Integration Test 통합테스트 - 모듈들, 클래스들 Unit Test 단위테스트 - 함수, 모듈, 클래스 TDD란? Test-driven development 테스트 주도 개... Read More

interface User { age: number, name: string, } 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미함. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 // 변수에 인터페이스 활용 var seho: User = { age: 33, name: '세호' } ```typescript // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } const capt = { na... Read More

개발 기본 상식 출처 : https://github.com/junh0328/prepare_frontend_interview/ DOCTYPE 🔥 DOCTYPE이란 Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것 DOCTYPE의 선언에는 두가지 이유가 존재함. 1. 첫번째로 렌더링모드를 선언하는 용도로 사용된다. 렌더링 모드란 웹페이지를 번역, 또는 읽는 방식으로써 다양한 웹브라우저에서 웹표준에 따라 웹페이지를 올바르게 표시하도록 만들어주는 것이다. 렌더링 모드에는 표준모드(standard mode)와 비표준모드(qu... Read More

pages 폴더 안에 component를 넣으면 그 파일의 이름이 url 주소가 된다. 컴포넌트의 이름은 상관이 없다. 그냥 export default만 되어있으면 됨. 근데 pages 폴더 안에 넣을 수 있는 몇가지 예외 상황이 있음 첫 번째 예외. index.js 앱의 홈은 기본적으로 index.js에서 나온다. jsx를 쓰고 있다면 React.js를 import 할 필요가 없다. next.js의 좋은 기능 중 하나, 앱에 있는 페이지들이 미리 렌더링 된다는 것. Read More

03 interface - implements interface Car { color : string; wheels: number; start(): void; } interface Benz extends Car { door: number; stop(): void; color: ‘black’; wheels : 3; start(){ conosle.log(‘gogogo~~’); } class BMW implements Car { color; wheels = 4; constructor(c:string){ this.color = c; } start(){ console.log(‘g... Read More

next.js 는 리액트 기반의 프레임워크 create-next-app 으로 설치하면 컴파일과 번들링이 자동으로 된다. (webpack 과 babel) 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영된다. 서버사이드 렌더링이 지원된다. 스태틱 파일을 지원한다. https://react.semantic-ui.com/ npm install semantic-ui-react semantic-ui-css import ‘semantic-ui-css/semantic.min.css’ 레이아웃을 만들기 위해선 _app.js 을 이용함 모든 페이지는 이곳을 통함. _app.js를 이용하면 페이지 전... Read More

실행 컨텍스트 자바스크립트의 동작 원리를 담고있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 컨텍스트는 한국말로 번역하면 문맥임. 쉽게 코드의 실행 환경이라고 생각하면 된다. 23.1 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명... Read More

this 22.1 this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 일반적이지 않고 바람직하지 않다. 생성자 함수 방식으로 인스턴스를 생... Read More

01. 타입스크립트를 쓰는 이유를 알아보자! Javascipt (동적언어) : 런타임에 타입 결정 / 오류 발견 Java, TypeScript (정적언어) : 컴파일 타임에 타입 결정 / 오류 발견 function add(num1, num2){ console.log(num1 + num2); } add(); //NaN add(1); //NaN add(2,3); // 5 add(3,4,5); // 7 add('hello','world'); // 'hello world' 자바스크립트로 이 코드를 작성할 경우 이런식으로 작성되지만 타입스크립트로 이 코드를 돌리면 2, 3 과 hello world를 제외한 ... Read More

21장 빌트인 객체 21.1 자바스크립트 객체의 분류 자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체 ECMAScript 사양에 정의된 객체. 애플리케이션 전역의 공통기능을 제공. 자바스크립트 실행환경(Node.js 나 브라우저) 상관없이 사용할 수 있음. 전역 객체의 프로퍼티로서 제공됨. 별도의 선언없이 전역 변수처럼 언제나 참조 가능 호스트 객체 ECMAScript 사양에는 정의되어있지 않지만 자바스크립트 실행환경 (브라우저 또는 Node.js) 에서 추가로 제공하는 객체. 브라우저 환경에서는 DOM, BOM, Canvas, fetch, SVG, ... Read More

strict mode strict mode란? function foo () { x = 10; } foo(); console.log(x); foo 함수내에 선언하지않은 x 변수에 값 10을 할당 하면 자바스크립트엔진은 x 변수가 어디서 선언되었는지 스코프 체인을 통해 검색하기 시작한다. 우선 foo 함수 스코프에서 검색할 것이고, 그 다음 상위 스코프 (예제에선 전역 스코프)에서 변수 선언을 검색한다. 없기때문에 ReferenceError를 발생시킬거같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 이... Read More

프로토타입 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 간혹 C++나 ㅏ바 같은 클래스 기반 객체지향 프로그래밍 언어 특징인 클래스, 상속, 캡슐화를 위한 키워드 public, private, protected등이 없어 자바스크립트는 객체지향 언어가 아니라 오해를 받기도하지만 자바스크립트는 클래스 기반 객체 지향 프로그래밍 언어보다 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 언어다. ``` 클래스 : ES6에서 클래스가 도입됨. ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운... Read More

18장 일급객체 18.1 일급객 체란? 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. ex) 자바스크립트 함수 //1. 함수는 무명의 리터럴로 생성할 수 있다. //2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { retrun ++num; }; co... Read More

14장 변수의 생명 주기 전역 변수의 무분별한 사용은 위험하다. 사용해야할 이유가 없다면 지역 변수를 쓰자! 14.1 변수의 생명 주기 변수는 생명 주기가 있다. 없으면 메모리 공간을 영원히 차지하게 된다. 지역 변수는 해당 함수가 호출 되기 전까지는 생성되지 않는다. 호출하지 않으면 변수 선언문이 실행되지 않기 때문이다. 변수 선언은 선언문이 어디에 있든 가장 먼저 실행된다. 런타임 이전 단계인 자바스크립트 엔진에 의해 먼저 실행되기 때문이다. 함수가 호출되어 실행되는 동안에만 유효하므로 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다! 호이스팅은 스코프를 단위로 동작한다. 호이스팅은 변수 선언이 ... Read More

13장 스코프 13.1 스코프란? 스코프 (유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 자바스크립트의 스코프는 다른 언어랑 다른 특징이 있다. var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 스코프는 식별자가 유효한 범위를 말한다. 그리고 식별자를 검색할 때 사용하는 규칙이기도 하다. 13.2 스... Read More

12장 함수 12.1 함수란? 자바스크립트에서 가장 중요한 핵신 개념. 또 다른 핵심 개념들인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수과 관련이 있다. 함수는 재료를 투입 받아 제품을 생산하는 기계와 같다. function add(x , y){ return x + y; } add(2, 5) ; // 7 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수... Read More

:book: 11장 원시 값과 객체의 비교 :pencil: 원시 값과 객체의 비교 자바스크립트가 제공하는 7가지 데이터(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입과 객체 타입으로 원시 구분할 수 있다. 구분하는 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 다시말해, 한 번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. :pencil: 문자열과 불변성 var str = 'string'; str[0] = 'S'; console.log(str); // string 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. 문자열은 변... Read More

:book: 10장 객체 메서드란? 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부른다. 즉 메서드는 객체에 묶여있는 함수를 의미한다. 메서드 내부에서 쓰는 this는 객체 자신을 가리키는 참조변수다. 프로퍼티에 접근하는 방법은 두가지다. 마침표 프로퍼티 접근 연산자를 사용하는 마침표 표기법 대괄호 프로퍼티 접근 연산자를 사용하는 대괄호 표기법 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름이면 둘다 사용할 수 있다. 네이밍 규칙을 준수하지 않는 경우는 대괄호 표기법을 따라야한다. 따옴표로 감싼 문자열이어야한다는 말씀 var person = { name: 'Lee' } // ... Read More

:book: 09장 암묵적 타입변환 문자열 타입으로 변환 0+'' // "0" NaN + '' // "NaN" true + '' // "true" null + '' // "null" 숫자타입으로 변환 비교 연산자의 역할은 불리언 값을 만드는 것임. '1'>0 자바스크립트 엔진은 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중에 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입변환함. +'' // 0 +'0' // - +'1'// 1 +'string" //NaN 불리언 타입으로 변환 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 ... Read More

:book: 6장 데이터 타입 📝 데이터 타입이란? 데이터 타입. 줄여서 타입이라고도 함. 값의 종류를 말함. 자바스크립트의 모든 값은 데이터 타입을 가짐. 자바스크립트 ES6은 7개의 데이터 타입을 제공함. 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있음. 숫자, 문자열, 불리언, undefined, null, 심벌의 원시 타입과 객체, 함수 배열 등의 객체 타입. 숫자 타입의 값 1과 문자열 타입의 값1은 전혀 다른 값임. 숫자 타입의 값 1과 문자열 타입의 값 1은 값을 생성한 목적과 용도가 다름. c나 자바의 경우는 다양한 숫자 타입을 제공하나 자바스크립트는 하나의 숫자 타입만 존... Read More

:book: 5장 표현식과 문 :pencil: 값이란? 값은 식(표현식)이 평가되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것. 10 + 20 위 표현식은 평가되어 30이란 값을 생성한다. 모든 값은 데이터 타입을 가지며 메모리에 2진수. 비트의 나열로 저장된다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 했다. 따라서 변수에 할당되는 것은 값이다. var sum = 10 + 20; 변수 sum에 할당되는 것은 10 + 20 이 아니라 10 + 20 이 평가된 결과인 숫자 값 30이다. 즉, 변수 ... Read More

작년 여름에 보라색으로 체크되어있는 부분은 모두 숙지해야겠다고 목표로 삼았었는데 1년동안 체크되어있는 부분은 70%? 80% 정도 겪어보고 사용해본 거 같다. 프레임워크 테스트코드를 진행 중인 프로젝트에 넣을 수 있으면 좋을 거 같다. 올해는 보라색 되어있는 부분들을 툭 치면 입에서 툭 나올 수 있게 깊게 공부해야겠다. Read More

rem, em 언제써야할까 참고 블로그 http://triki.net/prgm/3250 오늘 기존 프로젝트 말고 새로운 사이트(원 페이지) 를 맡기로 했다! 뭐 별다른 기능이 있는 것도 아니어서 그냥 처음부터 기본셋팅 + 반응형 퍼블리싱 한다고 생각하고 하는데, 내가 퍼블리싱할 때 크기 단위를 px로 하는 버릇이 남아있어서 이번에 그걸 고치고자 웬만한 건 다 가변단위인 rem, em으로 썼다. 그런데 집에 와서 보니! 두둔 박스의 크기는 % 나 v*를 사용해서 조절하고 폰트사이즈 같은 경우에 rem em 둘 중 고민해서 써야한다는 거였다. ㅜㅜ… 그래도 오늘 집와서 알게돼서 다행이다. 다 만들어놨는... Read More

React Redux 컴포넌트 끼리 값을 넘겨주던가, 뭐 넘어가던가 할 때 props를 이용해 값을 전달하곤 한다. 근데 크고 복잡한 프로젝트라 타고타고타고타고 넘어가야하는 문제가 생긴다! props의 깊이가 너무 깊어지는 상황이 발생하는 거다. 이를 해결할 수 있는 게 바로 Redux이다. Redux는 가장 사용률이 높은 상태관리 라이브러리이다. 어젠가 유튜브에서 봤을때 상태관리 라이브러리 사용자 48%가 Redux를 쓴다고 본 거 같다. 어마어마한 비율이다. 근데 Redux를 쓰는 게 무조건 좋은 거는 또 아니라고 한다. 지금은 회사에서 Redux를 이용하고 있고 아직 Redux도 제대로 마스터 못한 초... Read More

https://mjn5027.tistory.com/31 이 글을 통해 나는 리액트 Hooks를 잘 모르는구나 깨닫게 되었다. 내가 실무에서 자주 사용하는 useState, useEffect 는 이제 어느정도 알지만 useContext, useReducer, useCallBack 은 잘 모르기에 이 기회에 좀 알아둘 계획이다 ㅎㅎ;; 우선 위 코딩스토리님 글에 있는 useState와 useEffect에 대해 먼저 정리해보겠다. useState useState는 가장 기본적인 Hook의 기능으로 함수형 컴포넌트 내에서 능동적으로 상태를 관리할 수 있게 해준다. let numberState = useState... Read More

window.open() 후, 창 닫힘 감지 어떤 api로 파라미터를 보낸 다음에 response로 원하는 result값을 받으면 새창이 뜨게 만들라고 하셨다. 새삼 window 관련 이벤트들을 내가 안 써봤구나… 싶었다. 자바스크립트 공부를 열심히 해야겠다. 문법 var ret = window.open(url, name, specs, replace); 사용예시 const w = window.open( data.message, //새 창의 url. 'normalduck.log', //새로 열릴 창의 속성 또는 창의 이름 'width=430,height=500,l... Read More

React-Router ` 초반 개념부터 확실히 다질 필요가 있어서 리액트 기초부터 다시 공부하기로 마음 먹었다. 유튜브의 리액트 기초강의들을 다시 볼까, 했지만 https://mjn5027.tistory.com/ 코딩스토리님의 블로그 글이 잘 정리되어있는 걸 보고 글과 예제를 통해 기초개념을 다시 익히고 있다. 이글 역시 https://mjn5027.tistory.com/30 요 글을 보고 작성하는 글이다. 감사합니다 :) ` React Router 리액트는 spa방식으로 하나의 페이지에서 상황에 따라 필요 데이터만을 load해준다. React-Router는 url의 값에 따른 page를 load해서 보여... Read More

드림코딩 자바스크립트 브라우저 인강을 보고 있는데 clientX라는 이벤트가 있는지 처음 알았다! MouseEvent.clientX MouseEvent 인터페이스의 clientX읽기 전용 속성은 이벤트가 발생한 애플리케이션(viewport) 내에 수평 좌표를 제공한다. 예를 들어 뷰포트의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX값이 0인 마우스 이벤트가 발생한다는 것임. 예시 var x = instanceOfMouseEvent.clientX HTML <p>위치를 보면서 마우스를 이동하십시오</p> <p id="screen-lo... Read More

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated. To add new posts, simply add a file in the _posts dire... Read More

This note demonstrates some of what Markdown is capable of doing. An exhibit of Markdown Note: Feel free to play with this page. Unlike regular notes, this doesn’t automatically save itself. Basic formatting Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no... Read More

A safe integer is an integer that can be exactly represented as an IEEE-754 double precision number, and whose IEEE-75 representation cannot be the result of rounding any other integer to fit the IEEE-754 representation For example, $ 2 ^ {53} - 1 $ is a safe integer, it can be exactly represented Read More

Canon in D (Pachelbel’s Canon) - Cello & Piano [BEST WEDDING VERSION] Some of you know that we occasionally play for weddings. As you can imagine, we get a LOT of requests for Canon in D, and we discovered that there were no good arrangements available anywhere for piano and cello! Hard to believe given its popularity. So we decided to make ... Read More

Table example as below For now, these extended features are provided: Cells spanning multiple columns Cells spanning multiple rows Cells text align separately Table header not required Grouped table header rows or data rows Rowspan and Colspan ^^ in a cell indicates it should be merged with the cell above. This feature is contribu... Read More

1. Pie chart pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 35 2. sequence diagram @startmermaid sequenceDiagram Alice -» Bob: Hello Bob, how are you? Bob–»John: How about you John? Bob–x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a longlong time, so longthat ... Read More

My First PlantUML PlantUML Block-1 @startuml Bob -> Alice : hello @enduml PlantUML Block-2 Bob -> Alice : hello world PlantUML Block-3 @startuml (*) –> “Initialization” if “Some Test” then –>[true] “Some Activity” –> “Another activity” -right-> () else ->[false] “Something else” –>[Ending process] () endif ... Read More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Some great heading (h2) Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, m... Read More