# data[].attributes.headline
포트폴리오 작성할 때 참고할 곳

# data[].attributes.subject
포트폴리오 작성할 때 참고할 곳

# data[].attributes.attachment_link.provider_name
이력서 검토하다 잘 좀 써달라고 투덜대기 (feat. iOS 개발자)

# data[].attributes.attachment_link.title
이력서 검토하다 잘 좀 써달라고 투덜대기 (feat. iOS 개발자)

# data[].attributes.attachment_link.description
2년여만에 또 이력서를 검토하게 됐습니다.

# data[].attributes.headline
개발블로그 잘 작성하는 법. ( 꼭 읽어보기 )

# data[].attributes.subject
개발블로그 잘 작성하는 법. ( 꼭 읽어보기 )

# data[].attributes.body
https://f-lab.kr/blog/developer-blog-tips

# data[].attributes.attachment_link.readable_text
📌 글 작성 성장에 관심이 많은 F-Lab 백앤드 멘토 Elkein 아주 작은 스타트업 여럿과 NHN, 넷마블, 크래프톤 등을 거쳤으며 게임 산업, 클라우드 플랫폼 개발, 웹 개발 등을 두루 경험한 19년 차 엔지니어

수많은 개발자의 사례로 인해 개발자 블로그는 취업 스펙이 되어버린 듯하다. 사실 과거에 블로그는 개인 기록의 목적이 강했고 열심히 노력하는 근성, 의욕, 의지에 대한 어필의 장이 되기도 했다.

개발 문화는 과거 sourceforge, code project, google code가 있어왔고 최근에는 github, gitlab, bitbucket을 비롯한 오픈 소스 코드 저장소가 매우 일반화되었다. 이 중 개발자 이력서에 github와 함께 blog가 필수로 첨부해야 될 존재로서 스펙으로써 작용하게 된 것은 개발자 전체에 좋은 문화가 일반화되었다고 볼 수도 있겠지만 그만큼 부담스러운 요소로써 느껴지는 분들도 많은 것 같다.

그래서 그런 분들을 위해 부담스럽지 않게 자신에게도 도움이 되면서 이력서 첨부해도 도움이 되는 블로그를 쓰는 방법을 전달하고자 한다.

구 다음 현 카카오에서 운영 중인 블로그 플랫폼이다.

티스토리는 블로그 운영에 필요한 기능을 제공하면서도 사용이 간편하다는 장점이 있다.

블로그의 디자인 수정도 쉽게 할 수 있지만 스킨이 아주 많지는 않다. 그럼에도 스킨 편집을 통해서 커스터 마이즈 가능한 부분이 꽤 있다고 볼 수 있음

GitHub Pages는 GitHub에서 제공하는 정적 웹 호스팅 서비스

무료로 이용할 수 있으며 개발자들 사이에서 매우 인기가 있음

GitHub Pages는 Jekyll과 같은 정적 사이트 생성기를 이용하여 블로그를 만들기 때문에 빠르고 안정적인 호스팅 서비스를 제공한다. 웹에서 직접 글쓰기는 어렵다고 봐야 하고, 대부분 별도의 markdown editor (나는 VS Code를 markdown editor 용으로도 쓴다)를 쓰는 것이 좋다.

GitHub Pages는 코드와 텍스트 위주의 콘텐츠를 다루는 것이 적합하며, 블로그의 디자인을 수정하는 것이 상대적으로 어렵다. 어느 정도의 frontend 지식 (HTML, css)이 있지 않으면 스킨의 세세한 부분의 편집이 어렵다.

여타 플랫폼의 마크다운 글쓰기와 다른 점은 결국에 HTML 태그를 중간중간 써서 글을 써야 될 때가 있다. 이미 붙여넣기도 손이 꽤 가는 편

velog는 개발 블로그 운영에 최적화된 블로그 플랫폼이다.

블로그의 디자인 수정도 쉽게 할 수 있어 개발 블로그 운영에도 많은 사람들이 이용하고 있음.

시리즈 기능이 있어서 동일 주제에 대한 글을 엮어서 보여주기 좋고, 글쓰기 툴도 준수하고 괜찮다.

하지만 velog는 다른 블로그 플랫폼에 비해 사용자가 적은 편이며, 블로그를 자유롭게 운영하기에는 제한이 있다.

Github Pages나 velog를 추천한다.
tistory는 마크다운 글쓰기 모드가 있긴 하지만 완성도가 아쉽다. 별도의 markdown editor를 이용할 바에는 Github Pages가 나은 측면이 있다고 본다.

네이버 블로그도 가볍게 글을 쓰거나 할 때 좋은데 개발 키워드에 대한 SEO가 아쉬운 점도 있고, 편집기가 이제 꽤 좋아졌다는 장점이 있지만 개발자 블로그로 쓰기엔 애매한 면이 있다.

Github Pages를 추천하는 이유는 나는 backend 개발자도 frontend 이해도가 어느 정도 되어야 하기에 겸사 겸사 이해도를 높일 겸이나 frontend 개발자라면 이미 알고 있는 css, HTML 을 활용해서 블로그를 커스터 마이즈해서 블로그 자체도 포트폴리오로 활용 가능하게 승화 시킬 수 있는 장점이 있다고 생각한다.

velog는 우선 학습하면서 블로그를 만들기엔 시간이나 여유가 조금 부족하거나 웹에서 글쓰기가 필요한 경우, 이미지 첨부가 많은 경우 Github Pages에 글을 쓸 때 아무리 확장을 쓰고 뭐하고 해도 좀 더 편하다.

블로그에 글을 쓴다는 경험 자체가 개발자로서 유의미하다는 것을 잊지 말아야 한다.

자 과연 그렇다면 어떠한 관점의 글을 써야 경쟁력이 있는 블로그 작성 경험이 되는 것일까?

우테코 수료 기간에 작성하신 글들이 인상 깊었다. 특히 DB 이해도를 높일만한 주제를 아주 잘 정리했으며, 참고한 자료를 언급해 직접 작성한 글들임에 놀랐고 그 글의 주기에 놀랐다. 최근엔 취업하셔서 바쁘셔서 조금 뜸해지시긴 했으나 최근에 조금 여유를 찾으신 듯 새 글이 발행되어서 반가웠다.

다양한 주제에 대해서 좋은 글을 잘 써주신다. 특히 실제 측정해 보거나 관점을 드러내는 글이 많아서 더욱 좋았다. 모든 글이 참고는 하되, 직접 작성하신 글이다. 참고하지 않고 전체적으로 모두 경험에 의한 글도 많았기도 하고.

사실 뭐 하나 측정하고 검증하고 자료로 만들기란 공수가 아주 많이 든다. 그래서 이러한 노력을 기울였다는 것을 높게 치고 인정한다. 그리고 이러한 습관이 어플리케이션의 성능을 계측 기반으로 유지하고, 튜닝할 수 있는 능력을 갖춘 엔지니어임을 증명하는 부분이다.

러프하게 무엇을 만들었다는 내용보다는 디테일하게 어떠한 과정을 거쳤는지 기록되어 있는 개발 블로그는 괜찮다. 기술적인 부분이 중심인 개발 블로그지만 그 과정에 대한 이야기나 좌충우돌한 사건, 협업에서 생긴 이슈, 별거 아닌 거지만 고생한 이야기 등을 잘 푸는 것도 괜찮다. 별거 아닌 이슈로 고생한 내용에 대한 제목을 거창하게 해서 낚는 것도 가끔 한 번 정도는 괜찮을 수도 있는데 다만 너무 자주 낚으면 블로그 자체에 대한 신뢰도에 악영향을 주므로 주의하자.

기본적으로 참고 자료가 존재하는 것은 당연하다. 공식 사이트, 공식 github, 공식 document 당연히 참고하게 된다. 이외에도 개인 블로그나 stackoverflow 등을 참고할 수 있다. 참고한 자료를 어떻게 이해했고, 그 자료들이 내가 필요한 부분이 뭐였고 어떠한 이해를 하게 됐는지, 그래서 결론이 무엇인지까지 이어지는 것이 좋다. 만약 학습을 위한 내용 정리라면 여러 참고 자료를 바탕으로 다른 사람이 이해하기 쉽게 작성하자.

장애를 겪었던 이야기는 아주 좋은 블로그 소재가 된다. 다만 회사가 허용하는 범주의 내용이나 어느 정도 추상적인 내용으로 작성하는 것이 좋다. 기술 이슈를 해결하는 과정에서 했던 추정, 소거, 확신, 검증 등의 과정을 잘 나열할수록 좋은 개발자의 자질을 증명하는 수단이 될 수 있다.

또한 이러한 이슈를 논리적으로 해결하면 할 수록 그게 글로 잘 드러나면 드러날수록 자신의 논리력에 대한 증명도 될 수 있으므로 아주 좋은 주제다.

대부분의 사람은 한번에 이슈 없이 구현해낼 수 없다. 이미 한번 경험을 통해 숙련이 되어야 보통 가능하다. 구현 과정에서도 어떠한 생각으로 어떠한 자료를 찾아봤고 그 자료에 어떤 부분을 참고해서 구현했으며 어떠한 부분은 의구심이 들었다 등의 전반적 개발 과정에 대한 글은 좋은 글이 되곤 한다.

또는 어떠한 부분에 우려 사항이 생겼다던지 잠재적 우려 사항이 떠올라 커버리지를 어떻게 끌어올렸다던지 같은 이슈는 아주 좋다. 복잡한 비즈니스 이슈에 대한 해결 과정은 항상 궁금하다.

트러블 슈트랑 버그 해결 과정은 다소 다르다. 보통 트러블 슈트는 기술 부채를 가진 상태에서 트래픽이 폭발 했거나 DB 처리 속도가 지연되어서 서비스 장애가 나는 상황등을 말한다. 버그는 말그대로 비즈니스 로직을 처리하는 과정에서의 이슈 해결이나 잘못된 요구 사항의 이해, 혹은 복잡한 조건이 얽히고 섥혔을 때의 이슈를 주로 말한다. 재발 방지에 대한 고민, 커버리지 확보에 대한 고민도 같이 언급하면 좋다.

좋은 개발자 블로그는 숙제로 완성될 수 없다. 자주 글을 써야 한다는 강박보다는 메시지가 있는 글을 써야 한다.

주제보다 중요한 것은 어떠한 정보를 얼마나 퀄리티있게 잘 전달하느냐가 더 중요한 부분을 차지한다.(물론 위에 언급했듯 그래도 면접관이나 다른 개발자에게 도움이 되고 관심 있어 할 주제를 가져가는 것 자체는 중요하다.) 이미 알고 있는 정보라도 글로 쓰는 것은 쉽지 않다. 그리고 잘 전달되게 글 쓰는 것은 더욱 쉽지 않다.

그럼에도 좋은 개발자의 조건 중에서 글을 잘 쓰는 개발자가 있는 이유는 바로 팀 내 사내 공유할 문서를 쓸 일이 자주 있기 때문이고, 일감이나 문서를 통해서 소통해야 될 일이 많기 때문이다. 모든 사람에게 회의 시간을 내달라고 해서 소소한 내용까지 전달할 수는 없다.

또한 글을 통해 논리력을 보여줄 수 있는 개발자의 오프라인에서의 논리력은 더 뛰어나다. 즉 글을 통해서 최소치를 확인하는 수단이 되기도 한다.

결국 양질의 정보를 어떻게 남기냐인데 이 양질의 정보의 기준이 뚜렷하지 않은 분들에게 도움이 되었으면 좋겠다.

# data[].attributes.attachment_link.title
면접관 관점에서 본 좋은 개발자 블로그

# data[].attributes.attachment_link.description
개발자 블로그는 취업스펙이 되어버린 듯하다. 도움이 되면서 이력서 첨부해도 도움이 되는 블로그를 쓰는 방법을 전달하고자 한다.

# data[].attributes.body
노션에 정리하는 것도 좋지만,

여기에 적는 것이 내가 다시 읽기에도 괜찮은 것 같아서 다시 차곡차곡 쌓아가보자.

# data[].attributes.attachment_link.keywords[]
it 취업 포트폴리오 예시

# data[].attributes.attachment_link.keywords[]
백엔드 포트폴리오 예시

# data[].attributes.attachment_link.keywords[]
프론트엔드 포트폴리오 예시

# data[].attributes.attachment_link.keywords[]
신입 백엔드 포트폴리오

# data[].attributes.attachment_link.keywords[]
신입 프론트엔드 포트폴리오

# data[].attributes.attachment_link.keywords[]
카카오 신입 포트폴리오

# data[].attributes.attachment_link.keywords[]
it 경력 포트폴리오 샘플

# data[].attributes.attachment_link.description
다른 개발자들은 어떤 포트폴리오를 만들었을까? 개발자들의 포트폴리오 혹은 토이 프로젝트를 한눈에 모아보세요.

# data[].attributes.attachment_link.readable_text
개발자 면접을 준비하고 계신가요? 어디서부터 어떻게 시작해야 할지 몰라 막막하신 분들을 위해 개발자 면접 대비 키트를 준비했습니다! 제가 지금까지 썼던 개발자 면접 준비 관련 글과 추천 자료를 한 곳에 모았습니다. 적극 활용하셔서 면접에 잘 대비하시길 바랍니다! 0️⃣ 면접 유형 파악하기 - 개발자 면접 유형 총정리: https://careerly.co.kr/comments/66132 1️⃣ 코딩 면접 [추천 글] - 코딩 테스트를 위해 꼭 공부해야 할 이론: https://careerly.co.kr/comments/66531 - 코딩 테스트에 완벽하게 대비하기 위해 해야 할 6가지: https://careerly.co.kr/comments/66559 - 라이브 코딩 테스트 실전 5단계 가이드: https://careerly.co.kr/comments/66693 [기출 문제 플랫폼] 국내 - 프로그래머스: https://school.programmers.co.kr/learn/challenges?tab=all_challenges - 백준: https://www.acmicpc.net - 삼성 SW Expert Academy: https://swexpertacademy.com/main/main.do 해외: - LeetCode: https://leetcode.com/problemset/all - HackerRank: https://www.hackerrank.com - Codility: https://www.codility.com 2️⃣ 시스템 설계 면접 [추천 글] - 소프트웨어 시스템 설계 시 고려할 세 가지: https://careerly.co.kr/comments/67065 - 시스템 설계 면접 준비 방법: https://careerly.co.kr/comments/67313 [추천 자료] 도서 - 데이터 중심 애플리케이션 설계 (원제: Designing Data-Intensive Applications): https://search.shopping.naver.com/book/catalog/32466573690 - 가상 면접 사례로 배우는 대규모 시스템 설계 기초 (원제: System Design Interview: An Insider's Guide): https://search.shopping.naver.com/book/catalog/32485737619 온라인 자료 (영문) - Grokking the System Design Interview: https://designgurus.org/course/grokking-the-system-design-interview - Deep Dive into System Design Interview: https://www.educative.io/path/deep-dive-into-system-design-interview - The System Design Primer: https://github.com/donnemartin/system-design-primer 3️⃣ 인성 면접 / 행동 면접 [추천 글] - 면접에서 효과적으로 경험 어필하는 법: https://careerly.co.kr/comments/67573 [추천 툴] - 각 기업 문화 페이지 - STAR 기법

# data[].attributes.attachment_link.title
엄지현 / 개발자 면접 대비 키트 | 커리어리

# data[].attributes.attachment_link.description
엄지현 Amazon Software Engineer | 개발자 면접을 준비하고 계신가요? 어디서부터 어떻게 시작해야 할지 몰라 막막하신 분들을 위해 개발자 면접 대... | 커리어리

# data[].attributes.attachment_link.title
Neumorphism/Soft UI CSS shadow generator

# data[].attributes.attachment_link.description
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

# data[].attributes.body
컴포넌트 라이브러리 https://tilnote.io/pages/637f934dbd82f57d88aaf711

어린이 UI/UX 참고사항
https://brunch.co.kr/@wepostit/6
https://three-stars.tistory.com/10

회원가입 UX/UI
https://yozm.wishket.com/magazine/detail/1508/

npm install primereact

npx create-react-app my-app --template pwa-typescript

# data[].attributes.attachment_link.title
react 최고의 ui 프레임워크 / 컴포넌트 라이브러리

# data[].attributes.attachment_link.description
tailwind 같은 css+ 가 있는가 하면 ui component 들을 가져다 쓸 수 있는 것들을 ui 프레임워크, 컴포넌트 라이브러리라고 한다. 물론 컴포넌트들을 직접 만들어서 쓰면 가장 좋겠지만 그렇게 하기에는 힘들 때가 많다. 그러면 리액트에서 쓰기에 좋은 컴포넌트 라이브러리는

# data[].attributes.body
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC,MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리.

렌더링 : 사용자 화면에 뷰를 보여 주는 것.

리액트의 주요 특징
- Virtual DOM 사용
: DOM 부터 알아야 하는데 DOM이란 Document Object Model의 약어. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행.

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용함.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟음.
1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용.

리액트는 정말 뷰만 신경 쓰는 `라이브러리` 이므로 기타 기능은 직접 구현하여 사용해야 함.
-> 대신 다른 라이브러리로 라우팅, 상태 관리, Ajax 처리 등의 빈 자리를 채울 수 있음.

Node.js
: 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있음.

babel-loader
: 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줌.

Q.왜 ES5 문법으로 변환함?
A. ES5는 이전 버전의 자바스크립트. 이렇게 변환하는 이유는 구버전 웹 브라우저와 호환하기 위해서. 구버전 웹 브라우저에서는 최신 자바스크립트가 실행되지 않기 때문에 사전에 변환해주는 작업이 필요.

JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

# data[].attributes.headline
지금 떠오르는 내가 해야할 일들

# data[].attributes.subject
지금 떠오르는 내가 해야할 일들

# data[].attributes.body
- 자바스크립트 공부
- 영어 공부
- 리액트 복습
- 타입스크립트 공부
- 알고리즘 다시 잡기
- 인프런에서 김영한 http 강의 끊고 듣기
- sql 프로그래머스 고득점 kit 다 풀기

# data[].attributes.headline
CI/CD 갱신시 프론트에서 해야할 것.

# data[].attributes.subject
CI/CD 갱신시 프론트에서 해야할 것.

# data[].attributes.body
CI/CD 에서 도커 빌드가 갱신될 때마다 해줘야 할 것들

-> docker-compose.yml 파일이 있는 디렉토리에서 터미널(A라고 지칭하겠음) 열고  // docker 관련 행위
1. docker-compose stop    // 실행되고 있는 doc-compose 중지
2. docker-compose rm -f       //  중지한 doc-compose 제거하기
3. docker-compose pull       // 갱신된 doc-compose 받아오기
4. docker-compose up -d     // 갱신된 doc-compose 실행하기

->  위와 같은 (d-com.yml 있는) 디렉토리에서 새로운 터미널(B라고 지칭) 열고  // mysql 관련 행위
1. docker exec -it busking_mysql /bin/bash   // docker에 있는 busking mysql bash 터미널 열기
bash가 열리면
2. mysqlsh           // mysql shell실행
3. busking            //  패스워드 입력
4. N                      // 패스워드 저장할래 ? No
그럼 MySQL Shell 이열림
5. \sql
6. use busking;       // busking 스키마가 열림

++++ 추가 명령어
show tables;     // 해당 스키마에 존재하는 모든 테이블 보기
select * from user;    // user 테이블에 존재하는 모든 목록 보기
insert into user values ("id",1,"email","password","phoneNumber","realName","role","username")   // 유저 테이블에 데이터 담기

# data[].attributes.body
position 쓸 때는 top/left/bottom/right와 함께 씀.

static (default값) : 원래 있어야 하는 자리. ->작성된 순서 그대로 나타냄
- 이때는 top/bottom 이런거 다 무시

relative : 원래 있어야 할 위치 기준으로 t~r 설정 가능. 이 경우 겹치기도 가능함.

absolute : 어떤 요소의 display 속성.. 부모 요소의 속성은 relative로 지정해주는 것이 관례.

fixed : 항상 고정된 위치 / 뷰포트 기준 (top~ bottom~~~)으로 작성

----

테일윈드에서는 invisible / visible로 숨김 가능

<div className = {`text-xl ${조건? "참일때" : "거짓일 때"}`}:>

- 조건부 렌더링 하는 방법

grid 쓸 때는 <div className=grid grid-cols-3 gap-4>

<div className="visible hover:invisible>

9개의 div를 grid cols-4 하면
1 2 3 4
5 6 7 8
9
이런식으로 분리됨.

그리드 중간에 col-span-2 를 넣으면 2개 어치의 분량을 잡아먹음. ( 2인분? 합친다?)

# data[].attributes.body
23-07-31 TIL

(조건부 렌더링1) 논리 && 연산자가 있는 인라인 조건

- 중괄호로 감싸면 jsx에 어떤 표현식이던 넣을 수 있음.

```javascript

{unreadMessages.length > 0 &&

<h2>

You have {unreadMessages.length} unread messages.

</h2>

}

</div>

);

}

```

- 위의 코드에서 unreadMessages.length > 0이 true이면 && 뒤의 표현식을 렌더링하고, 아니면 렌더링하지 않음.

- 자바스크립트에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가됨.

(조건부 렌더링2) 조건부 연산자를 사용한 인라인 If-Else

- `condition ? true : false` 를 사용하는 것.

render() {

const isLoggedIn = this.state.isLoggedIn;

return (

<div>

The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.

</div>

);

}

이벤트 제어하기

- React에서 기본 동작을 막기 위해 false 리턴을 사용할 수 없음.

- 반드시 명시적으로 `preventDefault`를 호출해야 합니다.

function ActionLink() {  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }

ES6 자바스크립트 문법

Arrow function

- 원래 함수 만드는 방법 : function 함수(){}

- arrow function : `var 함수 = () => { //어쩌구 }`

- `var 두배만들기 = (x) => { return x * 2}`

파라미터가 1개면 소괄호를 생략가능

- `var 두배만들기 = x => { return x * 2 }`

중괄호 안에 return 한줄 뿐이라면 중괄호와 리턴도 생략 가능.

- `var 두배만들기 = x => x * 2 ;`

# data[].attributes.body
# 23.07.27 TIL

## CSS 레이아웃 정리

- 공부하는 이유 :본격적인 개발에 들어가기 앞서 Component를 구성할 때 레이아웃을 효율적으로 짤 필요가 있어서 이번 기회에 정리해보려고 함.

- CSS : Cascading Style Sheet

- Class : .class

- Id : #id

- Attribute : []

- 모든 태그

\*{

}

a[href] {

color: purple;

}

display : inline;

- div의 크기같은 건 무시하고, 안에 들어있는 물건의 크기만큼만 적용됨.

inline은 물건, inline-block은 한 줄에 여러개가 들어갈 수 있는 특별한 상자, block은 상자인데 한 줄에 하나씩 들어갈 수 있는 상자.

position은 기본값으로 static

`relative`는 원래 있던 자리를 기준으로 움직이는 것.

`absoule`는 내 아이템과 가장 가까이 있는 박스 안에서 위치 변경이 일어나는 것.

`fixed`는 상자에서 벗어나서 웹페이지 안에서 움직이는 것.

`sticky`

---

## CSS Flexbox 정리

### float

- 이미지와 텍스트를 배치하는 용도

![float](float.png)

### Flexbox

- jsbin.com 에서 실습

- viewport의 100% 다 쓰겠다 -> 100vh

## 알아보아야할 것

- container로 감쌀 때 주의해야할 점 알아보기.

- `div.container>div.item${$}*10` 이렇게 축약해서 한 번에 container 밑에 10개의 item 생성 가능

- %는 부모태그 대비 비율임.

- flex-direction : row 가 기본값. (왼쪽에서 오른쪽)

row-reverse

column은 위에서 아래로. 메인축은 수직축이 되는 것.

flex-wrap : nowrap이 기본값. 이걸 wrap으로 바꾸면 범위에서 벗어나면 자동으로 줄바꿈.

border 하면 글씨크기,선의 종류, 색깔을 한 번에 지정할 수 있듯이 flex-flow 하면 열,행과 wrap,nowrap을 한 번에 설정할 수 있음.

`column-reverse`를 쓰면 순서도 뒤집히지만, `justify-content: flex-end`를 쓰면 순서는 안 뒤집히고 방향만 위->아래 에서 아래->위 이런 식으로 바뀜.

`space-between` : 왼쪽과 오른쪽은 화면에 딱 붙게 하고, 나머지는 동등한 간격.

`space-evenly` : 모두 동일한 간격.

`space-around` : 요소들 사이에 동일한 간격을 둠. 요소들 (주위에) 간격을 동일하게 준다고 생각하면 좋을듯?-> 맨 왼쪽이나 오른쪽의 경우 간격이 좁음. 왜냐면 왼쪽만 간격이 존재하기 때문! 나머지 것들은 왼쪽,오른쪽에 간격이 있기 때문에 상대적으로 넓음.

`justify-content`는 중심축에서 아이템이 어떻게 배치되는지를 결정하는 것. (main axis)

`align-content`는 반대축에서.

`flex-grow` 비율인듯? 각 아이템에 숫자를 입력하면, 비율로 설정됨. 2:1:1 이런식으로 넣으면 원하는 비율대로 맞출 수 있음.

`flex-shrink` : `flex-grow` 와 반대. 더 줄어들고 늘어나는지를 정의하는 것.

`flex-basis` : 기본값은 auto. 비율을 적으면, 다른 애들과 상관없이 비율을 유지하게 됨. ex) 60%

### 오늘 배운 것들을 연습할 수 있는 사이트인 FLEXBOX FROGGY를 사용하며 배운 것들

- 주소 : flexboxfroggy.com

- flex-direction : column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜.

- 그래서 내가 생각하기엔 `justify-content:flex-start`를 써야할 거 같았는데, 위에서 row-reverse를 사용했기 때문에 `flex-end`를 사용해야한다. 진짜 헷갈리니 주의하기.

# data[].attributes.body
-git pull 을 먼저 진행하는 습관을 기르도록 하자.
-커밋 컨벤션을 배웠으니, 개인적으로 커밋할 때도 이를 활용해보면 좋을듯 ?

# data[].attributes.body
- 리액트도 잘 모르는데, 몇백 줄짜리 샘플코드를 분석하는 것은 엄청 어려운 일이었음.

- 그래도 한 줄 한 줄 뜯어보니깐 이해가 돼서 다행이었음.

myUserName : 화상통화와 참가자의 닉네임
publisher : 자체 로컬 웹캠 스트림
subscribers 배열 : 화상 통화에서 다른 사용자의 활성 스트림 저장

사용자가 App.js 템플릿에 정의된 제출 입력을 클릭할 때마다 joinSession() 메서드가 호출됨.

`Import 구문과 상수 설정`: 필요한 모듈과 라이브러리를 가져오고, 서버 URL과 관련된 상수를 설정

`App 컴포넌트 선`언: React 클래스 컴포넌트인 App 클래스를 선언. 이 컴포넌트는 영상 통화 기능을 관리.

`constructor 함수`: App 컴포넌트의 생성자. 상태 변수와 이벤트 핸들러를 초기화하고, OpenVidu 객체를 생성함.

`componentDidMount와 componentWillUnmount 함수`: 컴포넌트가 마운트(렌더링)되거나 언마운트(사라짐)될 때 발생하는 이벤트를 처리하는 함수들

`handleChangeSessionId와 handleChangeUserName 함수`: 세션 ID와 사용자 이름 입력 필드의 변화를 처리하는 함수들

`handleMainVideoStream와 deleteSubscriber 함수`: 메인 비디오 스트림과 구독자 스트림들을 관리하는 함수들

`joinSession 함수`: 영상 통화에 참가하기 위해 세션에 연결하고, 비디오 스트림을 생성 및 게시하는 함수

`leaveSession 함수`: 세션에서 나가는 함수로, 모든 속성을 초기화 -> 우리는 여기서 지도 화면으로 돌아가게 설정해주면 될듯

`switchCamera 함수`: 카메라를 전환하는 함수로, 현재 사용 중인 카메라를 변경. -> 핸드폰으로 테스트해 볼 필요가 있을 듯

`render 함수`: 컴포넌트의 렌더링 결과를 반환하는 함수. 조건부 렌더링을 사용하여 세션에 참가할 때와 참가하지 않을 때의 화면을 제어.

`getToken, createSession, createToken 함수`: OpenVidu 서버로부터 토큰을 가져오고 세션 및 연결을 생성하는 비동기 함수.

# data[].attributes.body
프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units

# data[].attributes.headline
웹,앱 디자인 무료 툴 5가지

# data[].attributes.subject
웹,앱 디자인 무료 툴 5가지

# data[].attributes.body
https://dribbble.com
- 다양한 웹,앱사이트 디자인을 확인가능함.
- 아이디어,감각 얻기 좋은 사이트
- Website->Popular에 들어가면 현재 뜨고있는 디자인 확인 가능

https://mycolor.space/
- 색상팔레트 (메인 컬러 넣으면 그에 맞는 다양한 팔레트들 제공해줌 )

https://cssgradient.io/
- 그레디언트 컬러 만들기

https://shapedividers.com/
-꼬불꼬불 선나누기

https://haikei/app
- 다양한 SVG 만들기
- svg는 이미지보다 훨씬 가벼움. (로딩속도 빨라짐)

https://color.adobe.com/ko/create/color-wheel
- 컬러 팔레트

# data[].attributes.attachment_link.description
Generate vertical, responsive & animated shape dividers easily with this SVG Shape Dividers Generator. Integrates well with all WordPress page builders, Webflow, etc.

# data[].attributes.body
Visual Studio Code 꿀템

Command Pallette
- 윈도우 : Ctrl+Shift+P, F1
- 다양한 기능들을 확인해보고, 단축키도 알아볼 수 있음

Quick Open
- 윈도우 : 컨트롤+P
- 해당하는 파일 빠르게 검색

Toggle Sidebar
- Ctrl + B

Terminal
- Ctrl + `

Keyboard Shortcuts
- Ctrl + K + S
- 키보드 단축키 확인 가능

Kite를 쓰면 좀 더 개발 빠르게 할 수 있음 (탭나인 느낌인듯 ?)

컨트롤 + Home/ End : 제일 위 / 아래로 이동가능
컨트롤 없이 Home / End : 제일 왼쪽 / 오른쪽으로 이동가능

컨트롤 + <- / -> : 단어별로 이동가능!
컨트롤 + 쉬프트 + <- / -> : 한 단어가 선택됨

코드 한 줄 위아래로 올리기 ( Move Line down / up )
- Alt + 위/아래 방향키

쉬프트+알트+위/아래방향키 => 원하는 방향대로 복사됨.

컨트롤+엔터 :  굳이 맨끝으로 커서 안 옮기고 엔터 눌러도 됨.

Multi Selection
- 컨트롤 + D : 같은 단어 선택 ( 동시에 수정 가능 )

이전 커서로 이동
- 컨트롤 + U

Insert Cursor
- 알트 + 클릭 -> 이러면 여러개를 동시에 변경 가능함.

# data[].attributes.headline
리액트 공부하면서 잡다하게 알게 된 것들

# data[].attributes.subject
리액트 공부하면서 잡다하게 알게 된 것들

# data[].attributes.body
array [] / object {}

# data[].attributes.body
vscode에서 리액트 자동 정렬을 쓰려면 프리티어를 깔고 설정해줘야 함. 그러면 코드를 저장할 때 자동으로 줄정렬이 됨.

# data[].attributes.body
- UseEffect에 대해서 배웠음

공부하면서 깨달은 점.

useState는 함수 컴포넌트 상단에 선언하는 것. -> axios를 통해 데이터를 받아올거면, 함수 컴포넌트 상단에 useState를 만들어 놓고 state 변경함수를 통해 채워나가는 방식을 사용하면 됨.

# data[].attributes.body
# Auto Rename Tag
: 여는 태그나 닫는 태그를 수정하면 반대편의 태그도 동시에 수정해줌.

# data[].attributes.body
'코딩애플' 강의 듣고 정리한 내용 ( 리액트 1~5강 )

# React TIL

## 리액트를 쓰는 이유

- SPA ( Single Page Application ) : html 파일 1개만 쓰고 다른 페이지를 보여줄 때는 html부분만 바꿔서 보여줌. -> 부드럽게 동작

- html을 함수,array,object 이런 곳에 보관하고 재사용 가능.

- 리액트 네이티브 사용 가능

## React 설치 / 세팅

- Node.js 설치

- VS code 설치

- `npx create-react-app 프로젝트이름` : 프로젝트 생성

- App.js가 메인페이지니깐 거기다가 코드짜면 됨.

- `npm start` : 서버 실행

## 리액트의 간단한 JSX 문법

1. class가 아니라 className

2. 변수를 html에 넣을 때는 {} 중괄호 사용

3. `<div style={ {color:'blue',fontSize : '30px'} }> 스타일적용 </div>` : 붙여쓸 때는 대문자로 치환

## State

`import { useState } from 'react';` 로 임포트 해와야 함.

let [값,값변경] = useState(저장할 값)

값변경(변경할 값)

Q. 왜 state씀?

A. state는 변동사항이 생기면 state를 사용하는 html을 자동으로 재렌더링

state에 값을 넣고 {} 로 변수처럼 사용하면 됨.

로고명 같은 경우는 바뀌지 않으니깐 굳이 state를 사용할 필요 X ( 결론적으론, 자주 바뀌는 값들만 state로 사용하면 좋음 )

state는 state변경함수를 써서 변경해야 함.

`/* eslint-disable */` 하면 브라우저/터미널 창에 warning 무시 가능

## onClick 사용법

html에서는 <div onclick="실행할 자바스크립트">

JSX에서는 <div onClick={실행할 함수}>  -> 대문자 신경쓰자

실행할 함수에 들어갈 함수는 밑에처럼 그냥 만들어도 됨.

<div onClick={ function(){ 실행할코드 } }>

<div onClick={ () => { 실행할코드 } }>

혹은 바깥에서 함수를 따로 만들어도 됨.

요약)

1. 클릭시 뭔가를 실행하고 싶으면 onClick={함수}라는 이벤트 핸들러를 달아서 사용

2. state를 변경하려면 state 변경함수를 꼭 이용

array,object state 변경하는 법 이전까지 정리했음.

# data[].attributes.body
# 유튜브 '생활코딩'의 리액트 강의 정리

리액트는 사용자 정의 태그(=컴포넌트)를 만드는 기술

### 컴포넌트 사용법

1. function App() 밖에 새로운 함수를 만든다.

- 이때 이 함수의 이름은 대문자로 시작하고 return 뒤에 원하는 것을 작성해줌.

function Article() {

return <article>

<h2>Welcome!</h2>

Hello, WEB

</article>

}

2. 이후 <Article></Article> 이런식으로 사용하면 됨.

### props

```html

function Nav(props) {

const lis = [

<li><a href="/read/1">html</a></li>,

<li><a href="/read/2">css</a></li>,

<li><a href="/read/3">js</a></li>

]

for(let i=0; i<props.topics.length; i++) {

let t = props.topics[i];

lis.push(<li><a>{t.title}</a></li>)

}

return <nav>

{lis}

</nav>

}

function App() {

const topics = [

{id:1, title:'html', body: 'html is...'},

{id:2, title:'css', body: 'css is...'},

{id:3, title:'javascript', body: 'javascript is...'}

]

```

### event

#### 이벤트의 타겟은 이벤트를 유발시킨 태그를 뜻함.

만약 a 태그가 event를 유발시켰다면

event.target.id : 이벤트를 유발시킨 a태그의 id값을 뜻함.

### state

`import {useState} from 'react';`

const [mode, setMode] = useState('WELCOME');

값을 바꿀때는 setMode('바꿀값');

a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나, 창이 새로고침하여 실행됨.

이떄, `preventDefault()` 를 사용하면 막을 수 있음.

참고로 `stopPropagation` 은 부모 태그로 이벤트를 전파하는 것을 막아줌.

-----------------------------

Jira에서 Epik->story->task

# data[].attributes.headline
패들렛을 이용해 TIL을 쓰는 이유

# data[].attributes.subject
패들렛을 이용해 TIL을 쓰는 이유

# data[].attributes.body
1. md 파일에 비해 좀 더 시각적으로 깔끔해서 내가 보기가 편함.

: TIL을 작성하는 이유는 무엇을 공부했는지 알리는 것도 있지만, 궁극적으로는 내가 공부한 내용들을 정리하고 복습하는 공간이라 생각하기 때문에 조금이나마 내가 보기 편한 방법으로 정리하기로 결심함.

2. 게시글이 직관적으로 쌓여서 뿌듯함을 느낄 수 있음. 시간이 지나고 돌이켜보면서 앞으로 나아갈 수 있는 원동력을 얻을 수 있을 것 같음.

3. 작성하기 쉬움

# data[].attributes.body
https://github.com/JaeYeopHan/Interview_Question_for_Beginner
- Tech Interview for beginner

https://github.com/jojoldu/junior-recruit-scheduler
- 주니어 개발자를 위한 취업정

https://github.com/brave-people/Dev-Event
- 개발자 세미나 행사 모음

https://velog.io/@woo0_hooo/%EC%BB%B4%EA%B3%B5-%EC%B7%A8%EC%A4%80%EC%83%9D%EC%97%90%EA%B2%8C-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A7%81%ED%81%AC%EB%93%A4-%EC%A0%95%EB%A6%AC

https://github.com/h5bp/Front-end-Developer-Interview-Questions
- 프론트엔드 기술 질문 ( 영어 )

https://yozm.wishket.com/magazine/list/popular/
- 최신 IT 트렌드 얻기 좋은 사이트

# data[].attributes.attachment_link.title
GitHub - JaeYeopHan/Interview_Question_for_Beginner: :boy: Technical-Interview guidelines written for those who started studying programming. I wish you all the best. :space_invader:

# data[].attributes.attachment_link.description
boy: :girl: Technical-Interview guidelines written for those who started studying programming. I wish you all the best. :space_invader: - GitHub - JaeYeopHan/Interview_Question_for_Beginner: :boy: Technical-Interview guidelines written for those who started studying programming. I wish you all the best. :space_invader:

# data[].attributes.body
1.
import math
math.gcd #최대공약수 구하기
math.lcm #최소공배수 구하기

2.
코딩애플에 있는 React 강의 파트1을 다 듣고, 내 힘으로 todolist CRUD를 구현해보려고 했으나 업데이트에서 애를 먹음. 아직 흐름을 제대로 이해하지 못한 것 같다는 생각이 들어 [유튜브 - 생활코딩] 에 있는 React 강의를 최대한 빨리 듣고 다시 시도해볼 생각.

3.
git merge 합칠브랜치명
git branch 브랜치명 : 브랜치 생성
git switch 브랜치명 : 브랜치로 이동.