블로그

볼드 UX

[인프런 워밍업 스터디 1기 디자인] 오리엔테이션 준비하기

 안녕하세요! 지식공유자 볼드입니다. 최근에 인프런 워밍업 스터디 클럽 1기에서 프로덕트 디자인 코치로 참여하게 되었어요.준비 과정이 꽤 새로웠고, 많은 것을 배우는 시간이었습니다. 오늘은 제가 어떻게 러너분들과 첫 만남을 위해 준비를 하였는지 알려드리고자 해요.   첫 만남을 미리 계획하다저는 4주 전부터는 0기 코치님들이 남겨둔 자료들을 보며 어떻게 하면 더 좋은 오리엔테이션을 만들 수 있을지 고민했어요. 구조부터 차근차근 짜고, 내용을 채워 넣어서 빠르게 프레젠테이션을 완성했습니다. 첫만남인 만큼 어떻게 하면 더 재미있고, 참여자들과 적극적으로 소통할 수 있을까 고민을 많이 했어요. 그래서 피그잼을 사용한 워크샵 형태로 진행하기로 결정하고, 세 가지 큰 원칙을 세웠습니다:많은 정보를 빠르게 명확하게 전달하기최대한 재미있고 인터랙티브하게 이야기가 살아있는 컨셉 유지하기 다행히 ‘러너’라는 주제가 이미 있어서 그걸로 컨셉을 잡았고, 다음과 같은 여정으로 구성해 보았어요.🚀 출발: 워밍업 클럽을 시작하게 된 이유🗺 코스: 워밍업 클럽의 미션들🎯 도착: 워밍업 클럽을 마치고 받게 되는 혜택들    OT 시작 전에는 새 직장에서 바쁠 것 같아서 미리 인프런 담당자 셰리님과 자료를 공유하고 점검하는 시간을 가졌어요.그리고 막상 OT 주간이 되니, 예상대로 정신 없었습니다. OT 당일에는 반차를 내고, 오전에 교회에서 성경공부를 마치고 집에 돌아와 커피 한 잔 마시며 마지막 준비를 했죠.    러너 분들과 드디어 만나다영국시간으로 12시에 시작했어요.(한국 시간으로는 오후 8시), 제가 먼저 짧게 발표를 먼저 진행하고 러너 분들은 질문에 따라 각자 글을 작성하셨어요.  작성 후에는 서로의 글을 보며 하트를 남기는 시간을 가졌는데, 이게 생각보다 더 재미있었던 것 같아요.  미리 준비한 탭으로 미션 정보를 빠르게 효과적으로 보여드리고, 원래 OT 전까지 블로그 글을 쓰지 못했는데 셰리님의 빠른 대처로 발자국 미션 시연을 성공적으로 마칠 수 있었어요.  OT 끝나고 난후워크샵이 끝난 후, 참가자분들의 피드백을 부탁드렸어요. 피드백을 보고 나니 제가 준비한 만큼 결과도 좋았다는 생각이 들더군요.(아래는 제가 몇개 선정한 감사한 피드백!)  2기에도 제가 참여할지는 아직 모르겠지만 2기에도 오리엔테이션 준비 경험을 살리거나 또 다른 코치님들이 사용할 수 있도록 이 피그잼 보드를 템플릿화하면 좋을 것 같아요. 또한, 이 방식을 다른 온라인 강의에서도 활용할 수 있을 것 같아요. (필요하신 분들은 알려주세요. 무료 나눔해드릴게요!) 마지막으로 인프런 워밍업 클럽 이전에 제가 진행한 인증샷 스터디에서 수강생과 교류가 있으면 좋을 것 같다는 의견이 있었어요. 처음엔 이걸 어떻게 개선해야할지 막막했는데, 인프런 워밍업 클럽을 참여하면서 이 문제를 해결할 수 있었어요. 그리고 셰리님을 포함한 인프런 팀이 없었다면 이 모든 게 불가능했을 거예요. 정말 감사드립니다! 인프런팀 만세! 앞으로 남은 세 번의 특강, 워크샵을 어떻게 준비할지 계획 중인데, 라이브 튜토리얼과 프레젠테이션을 어떻게 잘 조합할지, 함께 만들어가는 워크샵 과정이 어떨지 기대되네요. 인프런 워밍업 클럽 1기에 참여하신 모든 러너분들 다같이 파이팅해요 🔥     

UX/UI워밍업클럽디자인시스템피그마

볼드 UX

[인프런 워밍업 스터디 1기 디자인] 1주차 슬기롭게 보내기

발자국 1주차드디어 첫 주가 시작되었어요. 새로운 회사 일도 시작한 지 2주 차라 정신이 없었어요.조용하던 디자인 디스코드 채널이 드디어 활발해지기 시작했어요. 이번 주에는 코치로서 다음과 같은 일을 해야 했어요.폭발적인 강의 질문 대응하기미션 꼼꼼히 체크하기특별 강의 준비하기  첫째, 강의 질문 방에서는 수강생들이 강의를 듣기 시작하면서 질문이 쏟아졌어요. 조용하던 채널이 질문으로 가득 차는 것은 매우 바람직한 현상이에요. 둘째, 미션 제출이 시작되었어요. 평소에는 회사 일에 집중하고, 저녁 늦게나 새벽에 수강생들이 제출한 과제를 살펴봤어요. 처음에는 단순히 미션 여부만 확인하려고 했지만, 과제를 살펴보다가 몇 가지 흥미로운 점을 발견했어요.흥미로운 점 세 가지는 다음과 같아요:1. 같은 강의를 듣고도 실수를 반복하는 수강생이 있다는 것이에요. 이는 온라인 강의의 한계일 수 있어요.2. 이러한 실수가 일부 수강생에게만 나타나는 것이 아니라 반복적으로 나타난다는 점이고, 이것을 데이터로 정리해서 다른 수강생들에게도 요약 노트 등으로 알리면 좋을 것 같아요.3. 인프런 워밍업을 통해 수강생들의 작업 파일을 보고 코멘트를 남기며 피드백을 통해 서로 수정하고 올바르게 배울 수 있었어요. 셋째, 특별 강의를 준비했어요. 세 가지 주제로 구성하고, 강의 준비 과정은 쉽지 않았어요. 밤에 미션을 체크하고 남는 시간에 강의를 만들었어요. 특별 강의는 주로 새벽 5시에 일어나서 준비했고, 다음과 같은 주제로 구성되었어요.- 가장 많이 나오는 질문: 아이콘- 컴포넌트 네이밍 컨벤션- 멀티에딧 베리언츠인터랙티브한 강의를 만들기 위해 네이밍 컨벤션을 공유할 때는 혼동되는 용어에 대한 각 개인의 생각을 물어봤어요. 특별 강의는 기본 1시간을 넘어 20분 더 진행되었고, 많은 수강생이 마지막까지 남아 있었어요. 피드백을 부탁드렸는데, 마치고 나서 살펴보니 열심히 준비한 보람을 느꼈어요. (선정한 5개 수강평)  다음 주 월요일이 영국도 공휴일인이라 쉴 수 있어서 다행이에요. 그렇게 휴식을 취해야 회사 일과 인프런 코칭을 병행할 수 있을 것 같아요. 모두들 2주차도 파이팅입니다!

UX/UI인프런워밍업베리어블스터디디자인시스템

대롱대롱

[인프런 워밍업클럽 CS 2기] 3주차 발자국

드디어 스터디의 마지막 발자국을 작성하는 날이 왔습니다. - 이번주에 공부한 내용의 키워드 - 운영체제컴파일과 프로세스메모리-레지스터, 캐시, 메인메모리, 보조저장장치절대주소/상대주소가변분할/고정분할가상메모리동적주소변환세크멘테이션 분할방식/페이징 분할 방식스레싱/워킹셋여러가지 주변장치(입출력 디바이스와 저장장치)하드디스크파일과 파일시스템디렉토리디스크 자료구조와 알고리즘버블/선택/삽입/병합/퀵 정렬동적 프로그래밍(메모이제이션/타뷸레이션) - 이번주에 공부한 내용 요약 - 운영체제메모리는 가장 빠른 레지스터, 데이터 임시 저장하는 캐시, RAM이라 불리는 메인메모리, 그리고 보조기억장치가 있습니다. 물리주소는 말 그대로 물리적인 메모리 주소이고 논리주소는 사용자 관점에서 본 상대적 주소입니다. 메모리 할당방식으로는 가변분할방식과 고정분할방식이 있습니다. 현대에서는 두 가지 방식을 모두 사용하여 단점을 최소화하는 버디시스템을 사용합니다.가상메모리는 컴퓨터의 물리적 메모리의 크기를 확장하기 위해 사용되는 기술입니다. 동적주소변환은 메모리관리자가 가상메모리의 논리주소를 물리주소로 변환하는 것을 의미합니다.논리주소를 물리주소로 변환할 때 세그멘테이션 분할 방식은 메모리 관리자가 논리주소를 세그멘테이션 테이블을 이용해 물리주소를 찾고, 페이징 분할 방식은 논리주소를 페이지 테이블을 이용해 물리주소를 찾습니다.프로세스가 가상메모리에 접근요청 했을 때 물리메모리에 데이터가 없다면 페이지 폴터라는 인터럽트가 발생합니다. 이 때 HDD의 스왑영역에 있는 데이터를 메모리에 올리는 작업이 수행됩니다.스레싱은 페이지폴트가 발생해서 CPU사용률이 0에 가깝게 떨어지게 되는 현상을 의미합니다. 워킹셋은 메모리에 올라온 페이지를 하나의 세트로 묶어 메모리에 올리는 것을 의미합니다.주변장치들은 메인보드에 있는 버스로 연결되어 있으며 두 개의 채널과 두개의 버스로 구분합니다.파일관리자는 운영체제가 파일을 관리하기 위해 필요한 존재입니다. HDD나 flash memory는 블록 디바이스로 전송단위가 블록이지만 사용자는 바이트 단위로 파일에 접근해야 해서 파일관리자가 중간에서 관리해야합니다.파일은 순차파일구조, 직접파일구조, 인덱스파일구조가 있습니다.관련있는 파일을 모아두기 위해 필요한 것이 디렉토리입니다. 자료구조와 알고리즘정렬에는 크게 5가지 방식이 있습니다간단해서 구현은 쉽지만 성능은 좋지 못한 버블, 선택, 삽입 정렬과 이들보다 상대적으로 성능이 좋은 병합정렬과 퀵정렬이 있습니다.동적프로그래밍 방식으로 메모이제시녀과 타뷸레이션이 있습니다.메모이제이션은 계산결과를 기억하며 재귀를 사용합니다. 하향식 계산방식입니다.타뷸레이션은 계산에 필요한 모든 값을 계산하여 테이블에 저장하고 상향식 계산방식입니다.- 이번 주 회고 겸 스터디 회고 - 눈 깜짝할 사이에 스터디 마지막이 되었습니다. 완주를 위해 달려왔는데 목적했던 바를 이루어서 뿌듯합니다. 개인적으로 따로 다른 분들과 스터디를 했는데 운이 좋게도 열정적이고 좋은 분들을 만나 복습과 완강을 함께 할 수 있었습니다. 일주일에 세번씩 꾸준하게 디스코드 상에서 스터디를 했는데 아주 만족스러웠습니다. 덕분에 허물뿐인 완강이 아니라 제대로 공부하면서 완강을 하게 되었어요.이번주에는 중간점검도 있었는데 그 때 감자님께서 회고를 읽어보신다는 것을 알았습니다. 그동안 너무 주저리주저리 길게 쓰는 것은 지양해야겠다고 생각했는데 그냥 길~게 쓸걸 하는 아쉬움이 있습니다. 짧아서 심심하셨겠다는 생각이 드네요. 이번주 회고는 마지막인만큼 좀 분량 있게 써보겠습니다. 일단 이 CS스터디를 신청한 이유는 '그래도 개발의 길을 걷는 사람이 CS지식도 모르다니! 이럴 수는 없다!'는 마음이 있었기 때문입니다. 기본 지식은 쌓아야 한다는 생각이 강했어요(제가 운영체제 과목을 들은 적이 없습니다..^^;;). 그래서 제가 자주 하는 '일단 신청하자'를 시전했습니다. 왜 하필 이 강의를 선택했냐고 물으신다면 답은 하나입니다. 재미있어 보여서요. 저는 도파민중독자입니다. 일단 재미가 있어야 뭔가를 시작합니다. 감자님 강의를 보는데 애니메이션으로 설명하는 것이 너무 재미있어 보였어요. 이전에 '아 지금 공부하는 게 눈으로 보이면 좋겠다...'라는 생각을 했는데 이 강의가 딱 이 생각에 맞아버린 것이죠. 애니메이션으로 공부하니 재미있고 재미있으니 더 공부하고 싶고... 이런 선순환이 반복되어 어느덧 완강이라는 종착지에 다다르게 된 것입니다. 스터디원들과 스터디를 하다보니 발표자료도 만들게 되었는데 발표자료 만드는 것도 많은 정성을 기울였습니다. 남에게 보여야 하는 것인데 허접하게 만들 수는 없잖아요. 처음에는 노트앱에 기본으로 있는 템플릿을 썼는데 그 템플릿이 너무 마음에 들지 않았어요. 맘에 안들면 제가 만들면 됩니다(자급자족 라이프!). 그래서 만들어진 것이 '감자전용 템플릿'입니다. 귀엽게 디자인이 뽑혔고 이렇게 만든 템플릿 덕분에 스터디를 재미있게 할 수 있었던 것 같습니다. 강의 들으면서 1차적으로 적은 야생의 거친 필기를 이 템플릿으로 더 잘 정리하려는 마음에 한 파트 정리하는데 시간이 좀 많이 걸린다는 소소한 단점이 있기는 합니다... 그렇지만 이렇게 정리한 것이 나중에 복습할 때 도움이 크게 될 것이라 믿어 의심치 않습니다.적다보니 길어졌네요. 스터디가 끝나니 아쉬움이 남기는 합니다. 다음에도 이런 스터디가 또 열렸으면 좋겠어요. 저번에 들어보니 컴퓨터구조 강의도 준비하신다던데.... 그때 한번 또 스터디가 열렸으면 하는 소소한 바램이 있습니다. 이번에 들은 내용들 복습하면서 더 심화적인 내용도 개인적으로 공부해야겠습니다. 좋은 강의 감사하고 다음에 또 뵐 기회가 있으면 좋겠습니다.

운영체제자료구조CS워밍업클럽스터디

Yeji Seo

[인프런 워밍업 스터디 1기 디자인] 1주차 발자국

1주차 강의 학습 내용 요약강의를 듣기 전에는 Local styles만 사용하고 Local variables는 어렵게 느껴졌는데, 강의를 듣고 실습을 해보며 이해도를 높일 수 있는 시간이었다.학습 내용 중 특히 도움이 되었던 부분은 아래와 같다.베리어블의 계층 구조 디자인 토큰 이름 짓기색상, 간격, 그림자효과 베리어블 등록하기 초반 이론 단계에서는 이해를 하며 강의를 따라가면서도 내가 정말로 이해를 하고 있는게 맞는걸까?라는 의문이 들었지만, 이후 색상 베리어블 구조와 이름을 짜보는 과정을 통해 실습 과정이 참 중요하구나를 깨달았다. 디자인 토큰이 궁금해서 medium이나 구글링을 통해 내용을 찾아볼 때는 이해가 잘 안 됐었는데 Local Variables에 Primitive, Theme, Semantic 컬렉션을 등록하면서 흐름을 이해할 수 있었던! 회고일주일 동안 스스로 칭찬하고 싶은 점실습을 하며 이해가 안 가는 부분, 궁금한 점을 강의 노트에 적고 우선 스스로 답을 찾아보려고 한 점 아쉬웠던 점1주차 강의를 모두 듣지 못한 점아직 미션을 올리지 못했다보완하고 싶은 점커리큘럼대로 수업을 수강하고 미션은 수행하는대로 바로 스레드에 링크 공유하기!수업을 들으며 궁금한 점이 생겼을 때 우선 스스로 생각해보고 해결되지 않을 때 디스코드 채널에 질문해보기!(노션으로 강의 내용을 메모하다 인프런 강의 노트로 옮겼는데 장단점이 있는 듯 하다. 인프런 강의 노트를 사용하면 메모했던 순간으로 영상이 재생되는 게 편한데 이외에 동영상 재생에 오류가 있다던가... 텍스트를 드래그하고 싶어도 클릭으로 인식해 동영상이 다른 타임라인으로 넘어간다거나 하는 부분이 있어서 어떻게 해야 강의 내용을 편하게 기록할 수 있을지 고민 중...)  1주차 미션 미션 해결 과정색상, 간격, 타이포그래피, 그림자 효과를 베리어블 등록하는 과정은 강의 내용을 따라갔다.하지만 아이콘 등록의 경우 Union Selection을 일일이 선택해야 하는 게 사소하지만 생산성이 떨어지는 부분이라고 생각해 Union Selection의 단축키를 생성해봤다. 확실히 작업 속도가 단축되어서 만족!혹시 제 게시물을 보신 분 중 Union Selection 단축키를 등록하고 싶은 분이 계시다면... Mac의 경우 [시스템 설정] - [키보드] - [키보드 단축키]에 들어가면 단축키를 생성할 수 있습니다.응용 프로그램에서 Figma 선택메뉴 제목에 Union Selection 입력 (대소문자 구분 중요. 위의 사진대로 Union selection이라고 입력X)키보드 단축키 입력 (저는 Union의 앞글자를 따서 cmd+shift+U로 등록했어요. 다른 단축키와 충돌이 나면 안 되니, Figma에서 사용되지 않는 단축키를 입력해야 합니다.) 회고1주차 온라인 세션에서 아이콘이 깨지지 않도록 불린하는 방법을 배울 수 있었다. 이전에 아이콘이 깨질 때 어떻게 해야할 지 감이 안 왔었는데 정말 유익한 내용이었다.확실히 지원하는 플러그인이 많은 프로그램이 작업할 때 많은 도움이 되는 것 같다. 피그마에서 지원하지 않는 기능도 있을법한데...?싶어서 플러그인에 검색해보면 있는... 전세계 피그마인들... 감사합니다.. 그리고 강의를 통해서도 좋은 플러그인 정보를 많이 얻을 수 있었다! 강사님께도 감사합니다.. 🍀 

UX/UIFigma인프런워밍업클럽

신영우

[인프런 워밍업 스터디 클럽 1기 디자인] 1주차 발자국 (신영우)

학습 내용복습을 위해 이번 주에 필기한 강의 내용을 갈무리했습니다아틀라시안 디자인 시스템 디자인 원칙/철학 : 우리는 왜 디자인 시스템이 필요한가?: 높은 품질의 UI를 구축하는 핵심 역할로써 디자인, 개발, 배포를 쉽게 할 수 있도록 돕는 것 우리 회사에 디자인 시스템이 필요한가?: 질문에 대한 핵심 답변은 디자인 부채가 발생한다는 점이다. 이는 결국 디자이너의 업무 비효율로 이어지고 이러한 업무 비효율은 개발단의 리소스 낭비로 이어진다. 전체적으로 봤을 때 팀의 손해이고 회사의 손해로 이어진다. 디자인 시스템이 있으면 좋은 점디자인 일관성 유지브랜드 강화효율적인 개발시간 단축팀 간 협업 강화빠른 온보딩유지 보수 용이높은 품질의 경험→ 디자인 시스템은 지속해 발전한다.→ 작은 성공을 이루어가며 구성원들간의 공감대를 형성해가는 것이 중요하다. 베리어블과 스타일의 차이베리어블 : 하나의 변수만 저장, 참조가 가능 / 재사용 가능한 기본 디자인 요소 스타일 : 하나 또는 다수의 변수를 저장, 참조가 불가능 / 그라디언트 ,블랜드 모드 등 다수의 디자인 요소를 적용 베리어블의 구조토큰 개념 : 이름(Name) / 값(Value) / 설명(Description) / 유형(Type) 베리어블의 이름 짓기베리어블 이름의 구조각 계층에서의 다양한 이름토큰 이름 붙이는 공식토큰 이름 예시Namespace : SystemObject : ComponentBase : Category / PropertyModifier : Variant / State / Scale 토큰 개발 실무 팁단어 통일하기80%는 미리 계획하기2~3가지 레퍼런스에서 시작하기 “좋은 음식은 좋은 재료에서 시작한다”단축키 - 베리어블 복사 : ctrl + shift + enter 우리 수업에서 가져갈 라벨링 방식: ‘Theme’ 브랜드(Brand) 부분이 추가됌→ 보통 브랜드는 1개이기 때문에 여러개일 필요 없음(나중에 실무에서 제거해도 이상 무)→ 이해를 돕기 위해 새로운 계층 생성 정리: 추가적으로 참고할 사항→ 각 요소마다 color scoping을 할 수 있음→ 특정 베리어블을 퍼블리싱하고 싶지 않을 경우 ‘_’를 붙여주면 됌 or 각 요소에서 hide 퍼블리싱을 선택해주면 됌→ 웹, AOS, iOS 플랫폼별로 대응하는 코드 이름을 만들어줄 수 있음 간격 스케일 구성: 플랫폼별 렌더링 때문에 4px, 8px unit을 사용함 홀수일 경우 렌더링 시 소수점 발생, 픽셀 퍼팩트하지 않은 상황이 벌어짐4px이 베이스 유닛이냐, 8px이 베이스 유닛이냐는 회사마다 다름 → 조금 더 섬세한 구성으로 하고 싶다 4px스페이싱에 대한 라벨링 또한 4px이 기준(ex. shopify-1)이냐 8px이 기준(atlassian-100)이냐 달라짐마찬가지로 티셔츠 사이즈 척도를 사용하는지 숫자 척도를 사용하는지 입맛에 맛게 선택하면 됌회사 사용 예시아틀라시안 - 100쇼피파이 - 1모질라 - s, m, l카본 - 01간격의 사용0~8px : 작은 UI 구성 요소 12~24px : 카드 UI 패딩, 간격 32~128px : 큰 규모의 UI, 레이아웃간격 유닛의 사용처 : 패딩 / 갭 / 보더 레디우스 / 윗스*하이트 / 보더 윗스에 사용 가능 정리Elevation 높낮이 단계단계마다 사용되는 컴포넌트 분리 → 디스크립션에 넣어서 사용 용도 노티다양한 표현법으로 Elevation 표현다양한 엘리베이션 라벨링 방법반응형 그리드 기본 용어 : 칼럼 / 거터 / 마진그리드는 ‘Fixed’와 ‘Fluid’, ‘Hybrid’가 있음단축키 - 베리어블 바로 적용 : 영역 위에 커서 올려놓고 Shift + 왼쪽 마우스 버튼  미션 내용회고를 위해 이번 주에 진행한 미션 내용을 톺아봤습니다미션 #1 - 컬러 베리어블을 로컬베리어블에 등록하고 다른 디자이너, 개발자 누구나 볼 수 있도록 문서화한다미션 #2 - 타이포 그래피 스타일, 간격 베리어블을 등록하고 Feather icon을 등록한 후 면으로 모두 바꾼다미션 #3 - 그림자 효과, 반응형 기준점, 기타 베리어블 등록하기미션 #4 - 스타일 파운데이션 최종적으로 다듬어서 일관되게 문서화해보기이번 주 미션은 총 4개로 미션 #4의 스타일 가이드 문서를 제작하기 위해 #1~#3과정을 진행하는 미션이었다.스타일 가이드는 만들어본 경험이 있기에 비교적 쉽게 만들 수 있었지만, 베리어블을 사용해서 디자인 시스템을 만들어본 적은 없었기에 미션 #1~#3과정이 꽤나 새로웠다.베리어블로 디자인 시스템을 만들면서 primitive 값을 '참조'한다는 개념이 생소해 과정이 쉽지 않았는데 볼드님의 세세하고 친절한 강의를 들으면서 따라갔기에 어느 정도 개념이 자리 잡은 것 같다(혼자 만들었으면 엄청나게 헤맸을 것 같다)미션 #4를 끝난 현재 아직도 참조 개념이 어렵지만, 다음 주 컴포넌트를 만들면서 조금 더 익숙해지면 좋겠다.베리어블을 자유롭게 사용할 수 있게 되는 그날까지 계속 달려나가 보자! 스스로 칭찬하고 싶은 점 : 생각했던(예상했던) 퀄리티로 스타일 가이드를 만든 점아쉬웠던 점 : 아이콘 백터 깨지는 친구들을 다듬는데 꽤나 많은 시간을 사용한 점보완하고 싶은 점 : 스트로크 아이콘 뿐만 아니라 필 아이콘들도 갖춰놓고 싶다다음주 목표 : 지금처럼 매일매일 빠지지 않고 미션 팔로업 잘 해서 우수 수강생이 되자!

UX/UI디자인시스템베리어블피그마

7마리상어

[인프런 워밍업 클럽 BE 0기] 후기

인프런 워밍업 클럽 후기 이제 막 스프링 부트에 대한 지식을 쌓기 시작한 단계라서 이것저것 어려운 점들이 많았는데 이번에 인프런 워밍업 클럽 스터디를 진행한다는 소식을 듣고 지원하게 되었습니다. 솔직히 처음에는 제가 이 스터디를 잘 따라갈 수 있을지도 의문이었고, 중간에 뒤쳐지진 않을까 걱정도 되었습니다. 그런데 의외로 생각했던 것 만큼 어렵지 않았고, 강사님께서도 정말 쉽게 설명해주셔서 이해하는 데 큰 무리가 없었습니다. 또한 7일차에 거친 과제들과 8일차부터 진행한 미니 프로젝트를 통해 배우는 것에서 그치지 않고 직접 실습 하여 조금 더 제 것으로 만들 수 있었고, 이러한 과제들이 제가 강의를 듣는 데에 소홀해지지 않도록 도움을 준 것 같습니다. 또한 중간중간에 진행했던 Q&A를 통해서 공부를 하다가 막힌 부분이나 더 궁금했던 부분에 대하여 강사님께 직접 물어보고 바로 답을 얻음으로써 몰랐던 지식들을 채워나갈 수 있었고, 특히 다른 러너분들께서 질문 하시는 것들이 궁금했던 것 이외에도 도움이 될 만한 질문들이 많았어서 덕분에 여러 지식을 얻는데 큰 도움을 얻었습니다. 이번 3주간의 인프런 스터디의 경험은 스터디를 시작하기 전과 후의 저가 많이 바뀌게 해주었고, 그만큼 저에게 매우 유익한 시간이었습니다. 다른 러너분들과 함께 지식도 공유하고, 계속해서 스터디를 진행한 결과 이전에는 이해하지 못했던 이론이나 깨닫지 못하는 것들을 시간이 지나고서 이해하게 되었고, 스프링 부트의 전반적인 구조에 대해 익힐 수 있었습니다. 덕분에 이제까지는 들어도 무슨 소리지 했던 내용들이 지금에서는 완벽하게는 아니지만 어떤 내용인지에 대해서는 이해할 수 있게 되었을 정도로 성장했음을 느낍니다! 솔직히 가끔 나태해 질 때가 몇 번 있었는데 다른 러너분들께서 적극적으로 질문도 하시고, 과제나 발자국 제출 등 열심히 하는 모습들을 보니 저도 열정을 넘겨받아 더욱 열심히 참여하게 되었습니다. 평소에 혼자 공부하는 편이었어서 하기 싫을 때 그냥 던져 둘 때가 많았었는데 함께하는 러너분들이 있어서 저도 의지가 계속해서 생겨나서 끝까지 도달할 수 있었습니다. 짧지만 정말 좋은 경험이었고, 다음에도 인프런 스터디를 진행하게 된다면 꼭 참여하고 싶습니다!!

백엔드인프런인프런워밍업클럽스터디0기

xicodey

인프런 워밍업 클럽 후기

독학도 하면서 부트캠프 하는 와중에, 뭔가 새로운거에 도전하고 싶었습니다. 그와중에 인프런에서 워밍업 클럽이라는것을 한다고 하기에 참여하기로 결정을 했습니다.결론적으로 말하자면 뜻밖에 좋은 스터디 공부였다고 생각합니다.스터디 하기 전에 강의는 옛날에 다한 강의 였지만, 진도표를 보고 다시 복습하고 그 내용에 맞는 과제를 하면서 내가 무엇이 부족하고 그 동안 공부한것을 정리하는 시간을 가지게 되어 좋은 개발자로 한발자국을 내딛을 거라 생각합니다. 또한, 무엇보다 중간 Q&A 한 다는 것을 까먹어서 처음거는 놓치고 두번째 부터 참여했습니다.온라인 라이브 세션에서 코드 리뷰나 질문에 대해 자세히 설명해주셔서 배울게 너무 많구나 생각하면서 유익한 시간을 보낸거 같습니다.물론 강의랑 과제는 다했으나 완주 러너에 대상이 안되었지만, 이런 스터디는 처음 참가하는거라 신선했으며 좋은 경험을 얻었다고 생각합니다. 여러 사람들의 코드를 보면서 내 코드와 비교하는것도 좋은 경험인거 같습니다.수료식은 온라인으로 했습니다. 인프런 참여 행사는 거진 판교인거 같아서 시간도 너무 저녁이고 멀기에 가지 못 한게 아쉽네요. 시간적으로 낮이나 장소를 홍대나 서울 안쪽에서 했으면 갈 수 있을거 같은데 항샹 판교에 하신거 같아 참여하기 힘든거 같습니다. 결과적으로, 인프런 워밍업 클럽에 참여한 것은 좋으 결정이었습니다. 그 동안 독학과 학교 공부와 부트 캠프로 해왔지만,거기서 얻지 못 한 경험이 있기 때문에 유익했습니다. 다른 분들이 적극적으로 하시는 분들도 계시고 물론 저는 소극적인 성격때문에 잘 못한게 문제였지만, 유익한 지식을 주신 코치님들과 운영을 영실히 하려는 인프런분들과 여러 수강생분들이 있어 뜻깊은 시간을 보낸거 같습니다. 다음에도 기회가 있으면 참여하고 싶습니다.

인프런인프런워밍업클럽스터디0기

채 수

인프런 워밍업 클럽 후기

[인프런 워밍업 클럽 참여 후기]부트캠프를 마치고 독학 중인데, 제대로 공부하고 있는지 의문이 많았습니다. 그래서 인프런 워밍업 클럽에 참여해보기로 결정했습니다. 이 스터디에 참여한 경험은 정말 값진 것이었습니다.먼저, 진도표를 따라 매일 강의를 수강하고 발자국을 작성하는 것이 매우 도움이 되었습니다. 주말에는 과제를 마무리하고 발자국을 작성하는 시간을 가지면서, 내가 어떤 것을 배웠는지 정리할 수 있었습니다. 이를 통해 제 학습 내용을 정리하고 실제로 습득한 지식을 확인할 수 있었습니다.또한, 온라인 라이브 세션에서는 코치의 특강이나 Q&A 세션을 통해 중간 점검을 받을 수 있었습니다. 코치와 함께 진도를 되돌아보고 질문에 대한 답변을 듣는 것은 매우 유익했습니다. 그리고 스터디의 끝을 알리는 수료식에서는 이 스터디를 통해 얼마나 발전했는지를 되돌아보는 소중한 시간을 가졌습니다. (온라인으로 수료식을 참가해서 아쉬웠습니다 ㅠ)가장 인상 깊었던 점은 코치님들이 직접 제작한 미션을 수행하는 경험했었습니다. 이를 통해 배운 내용을 다시 한 번 복습하고 응용하는 기회를 가질 수 있었습니다. 또한, 다른 참가자들의 발자국을 보면서 서로의 학습 경험을 공유할 수 있어서 좋았습니다.총론적으로, 인프런 워밍업 클럽에 참여한 것은 매우 값진 경험이었습니다. 부트캠프를 마치고도 지식을 유지하고 발전시키기 위한 좋은 방법이라고 생각합니다. 다른 분들에게도 적극 추천하고 싶습니다.유익한 지식을 주신 코치님들, 스터디 클럽을 위해 힘써주신 인프런 분들, 같이 달린 학생들, 또한 이 글을 읽어주신 분들 모두 감사합니다.

인프런인프런워밍업클럽스터디0기

양성빈

[인프런 워밍업 스터디 클럽] 0기 세번째 발자국 (feat. 마지막 발자국 ㅠㅠ)

발자국어느덧 인프런 워밍업 스터디 클럽 마지막 주차가 다가왔다. 매우 즐겁기도 했지만 한편으로는 매우 아쉬운 마음이 너무 걸렸다. 이런 기회가 자주 있었으면 하는 마음으로 마지막 발자국(회고)를 시작해보겠다.강의 요약Day10. 객체지향과 JPA 연관관계조금 더 객체지향적으로 개발할 수 없을까?우리는 지난 시간까지 책 생성 API를 개발하고 대출과 반납기능까지를 개발완료하였다. 하지만 여기서 이런 의문사항이 들 수 있다. SQL 대신에 ORM을 사용하게 된 계기는 "DB 테이블과 객체는 패러다임이 다름" 때문이다. 우리가 사용하는 Java는 객체지향 언어이고 요즘 서비스 진행중인 웹 어플리케이션도 절차지향적이기 보단 객체지향적으로 구성되어 있는 코드들이 많을 것이다. (개인적인 뇌피셜) 그래서 우리가 20강에서 배운 스프링 컨테이너도 객체지향 설계라는 지점에서 출발하게 되었다. 즉, User 객체와 UserLoanHistory를 협업시킬 수 없을까? 즉, 대출기능을 개발할때 BookService가 UserLoanHistory 객체를 만들어 저장하고, 그것을 User객체가 가져오는 방식이였다. 뭔가 BookService를 거쳐가야한다는게 걸린다. 즉, BookService로직은 User객체가 가져와 사용하고 User객체가 직접 UserLoanHistory와 상호작용을 하면 좋을 것 같다. 반납기능도 대출기능과 동일하게 바꾸면 좋을 것 같다. 이렇게 바꾸려면 조건이 존재한다. User객체와 UserLoanHistory가 서로 존재한다는 것을 인지해야 한다. 이것을 위해 연관관계 개념이 등장하였다. 대표적으로 N:1 관계가 존재한다.🙋🏻 N:1 관계란?예시로 들어보자. 어느 한 교실에 여러명의 학생이 존재할 수 있다. 이 때 학생은 N이고 교실은 1이다 이것을 N:1관계라고 부를 수 있다.그럼 관계를 설정하고 나서 다음으로 할 일은 연관관계 주인이 누구인지 알아야한다. 현재 우리의 실습 소스에서 user와 user_loan_history의 테이블을 보면 아래와 같다.create table user ( id bigint auto_increment, name varchar(25), age int, primary key (id) );create table user_loan_history ( id bigint auto_increment, user_id bigint, book_name varchar(255), is_return tinyint(1), primary key (id) );여기서 연관관계 주인을 누구로 할까? 쉽게 생각해서 N:1관계에서 N쪽이 보통은 연관관계 주인이라고 생각하면 쉽다.그리고 연관관계 주인이 아닌쪽에는 mappedBy 속성을 추가해줘야 한다. mappedBy의 속성의 값으로는 관계에 설정된 클래스에 선언된 자신의 객체의 변수명을 적어주면 된다. 실제 코드를 살펴보면 아래와 같이 변경이 가능하다.User.java@Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id = null; @Column(nullable = false, length = 20) private String name; private Integer age; @OneToMany(mappedBy = "user") private List<UserLoanHistory> userLoanHistories = new ArrayList<>(); protected User() { } public User(String name, Integer age) { if (name == null || name.isBlank()) { throw new IllegalArgumentException(String.format("잘못된 name(%s)이 들어왔습니다.", name)); } this.name = name; this.age = age; } public Long getId() { return id; } public String getName() { return name; } public Integer getAge() { return age; } public void updateName(String name) { this.name = name; } }UserLoanHistory.java@Entity public class UserLoanHistory { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id = null; @ManyToOne private User user; private String bookName; private boolean isReturn; protected UserLoanHistory() { } public UserLoanHistory(User user, String bookName) { this.user = user; this.bookName = bookName; this.isReturn = false; } public void doReturn() { this.isReturn = true; } }위의 코드처럼 N쪽에 @ManyToOne 어노테이션을 붙여주고 관계를 맺는 객체를 선언해준다. 그리거 1쪽도 마찬가지로 관계를 맺는 객체를 선언해주고 위에 @OneToMany 어노테이션을 선언해준다. 이런 방식을 양방향 연관관계라고 부르며, 한쪽만 연관관계를 맺을 시 단방향 연관관계라고 부른다. 이렇게 연관관계의 주인의 값이 설정되어야만 진정한 데이터가 저장된다.그럼 BookService는 어떻게 변경을 하는지 살펴보자.BookService.java// 5. 유저와 책 정보를 기반으로 UserLoanHistory를 저장. this.userLoanHistoryRepository.save(new UserLoanHistory(user, book.getName()));이제 위와 같이 user의 id값을 저장하는게 아닌 user 객체를 직접 저장할 수 있다.JPA 연관관계에 대한 추가적인 기능들1:1 관계예를 들어 한 사람과 실거주지의 관계가 딱 1:1 관계이다. 그러면 연관관계 주인은 어느 객체일까? 설정하기 나름이지만 주어진 상황은 사람이 연관관계 주인이라 생각하는게 좋을 것이다. 그러면 코드로 표현하면 아래와 같을 것이다.Person.java@Entity public class Person { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id = null; private String name; @OneToOne private Address address; public Long getId() { return id; } public String getName() { return name; } public Address getAddress() { return address; } public void setAddress(Address address) { this.address = address; this.address.setPerson(this); } }Address.java @Entity public class Address { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String city; private String street; @OneToOne(mappedBy = "address") private Person person; public Long getId() { return id; } public String getCity() { return city; } public String getStreet() { return street; } public Person getPerson() { return person; } public void setPerson(Person person) { this.person = person; } }🔥 연관관계 주인 효과연관관계 주인을 설정하는 것은 객체가 연결되는 기준이 된다.1. 상대 테이블을 참조하고 있으면 연관관계의 주인2. 연관관계의 주인이 아니면 mappedBy를 사용3. 연관관계의 주인의 setter가 사용되어야만 테이블 연결즉, 아래처럼 setter를 이용하여 연결이 가능하다.@Transactional public void savePerson() { Person person = this.personRepository.save(new Person()); Address address = this.addressRepository.save(new Address()); person.setAddress(address); }⚠ 주의만약 트랜잭션이 끝나지 않았을 때 한쪽만 연결해두면 반대쪽은 알 수 없다. 그래서 위의 코드에서 address.getPerson()을 출력을 하면 null이 뜰 것이다. 왜냐하면 지금은 현재 person만 address를 연결해줬기 때문이다. address는 person을 연결해주지 않았기 때문이다.그럼 해결책은 없을까? 객체안에 연관관계 편의 메서드를 만들어 두 객체의 setter를 호출하면 해결이 된다.N : 1 관계 - @ManyToOne과 @OneToMany위에서 언급을 했지만 @ManyToOne과 @OneToMany는 둘다 양방향으로 연결을 할 수 있지만 단방향 연결도 가능하다. 또한 이 어노테이션들을 이용하면서 새롭게 배우는 어노테이션이 있는데 바로 @JoinColumn이다.@JoinColumn- 연관관계의 주인이 활용할 수 있는 어노테이션.- 필드의 이름이나 null 여부, 유일성 여부, 업데이트 여부 등을 지정- 일종의 @Column 어노테이션과 유사하다고 생각하면 좋다.N : M 관계 - @ManyToMany구조가 복잡하고, 테이블이 직관적으로 매핑되지 않아 사용하지 않는 것을 추천한다고 하셨다. 실제로 실무에 근무하는 분들한테 이야기를 들으면 N:M은 많이 사용하지 않고 꼭 이런식으로 처리해야할 경우면 N:1과 1:N으로 풀어쓴다고 하셨다.cascade 옵션 & orphanRemoval 옵션한 객체가 저장되거나 삭제될 때, 그 변경이 폭포처럼 흘러 연결되어 있는 객체도 함께 저장되거나 삭제되는 기능.JPA에는 Entity들 사이의 연관관계를 정의할 때 사용할 수 있는 영속성 전이라고 하는 Cascade 옵션이 있다. 이 옵션을 이용해서 부모에 가해지는 변화를 자식에게 전파할지에 대해 설정할 수 있다.@OneToMany로 자식들을 갖고 있는 부모 객체만 저장/삭제 해도 자식 객체도 함께 저장/삭제 된다던지, 하는 효과를 누릴 수 있다.JPA에는 Entity들 사이의 연관관계를 정의할 때 사용할 수 있는 옵션 중에 orphanRemoval 라는 것이 있다. 이 옵션을 이용하면 부모가 자식에 대한 참조를 끊을 때, 참조가 끊어진 자식 Entity(고아 객체)를 DB에서 삭제하도록 설정할 수 있다.만약 어떤 회원이 책 2권을 대출했다고 하자. 그리고 그 회원이. 갑자기 회원탈퇴를 해서 DB에서 사라졌다. 그럴 경우 많이 이상하게 책 2권이 연결되어 있던게 끊어진 상태가 된다. 이상한 구조일 것이다. 즉, 회원이 삭제될 때 유저 대출기록도 같이 삭제해두는게 좋을 것이다. 그리고 이와 같이 쓰는 옵션이 바로 orphanRemoval 옵션이다.@OneToMany(mappedBy = "user", cascade = CascadeType.ALL, orphanRemoval = true) private List<UserLoanHistory> userLoanHistories = new ArrayList<>();위의 코드처럼 사용하면 부모객체의 저장/삭제해도 자식 객체도 함께 전파되면 삭제시, 자식 객체도 같이 삭제된다.책 대출/반납 기능 리팩토링과 지연로딩이제 우리가 만든 대출과 반납기능을 리팩토링 해보자. 리팩토링 할 부분은 무엇일까? 현재 코드를 보면 도메인 계층에 비즈니스 로직이 들어가져 있다. 또한 여기서 영속성 컨텍스트 4번째 옵션이 나오는데 바로 지연로딩이다.데이터를 처음에 한번에 로딩을 안하고 꼭 필요한 순간에 데이터를 로딩시킨다. 바로 @OneToMany의 fetch옵션의 default 값이다. 지연 로딩을 사용하게 되면, 연결되어 있는 객체를 꼭 필요한 순간에만 가져온다.그러면 우린 이제까지 연관관계를 맺고 주인을 정하고 지연로딩, cascade, orphanRemoval옵션을 이용해서 리팩토링과정을 거쳐보았다. 이렇게 연관관계를 이용하면 뭐가 좋을까?📖 연관관계 장점1. 각자의 역할에 집중할 수 있다. = 응집성2. 새로운 개발자가 코드를 봤을 때 이해가 쉬워진다.3. 테스트 코드 작성에 용이하다.그러면 무조건 연관관계 맺는것이 좋을까? 그렇지는 않다! 연관관계를 남발해서 사용하면 지나치게 사용하면, 성능상의 문제가 생길 수도 있고 도메인 간의 복잡한 연결로 인해 시스템을 파악하기 어려워질 수 있다. 또한 관계가 복잡하면 하나의 테이블 수정 시, 다른 테이블까지 영향을 끼칠 수 있다. 강의중에서도 코치님께서 아래와 같이 말씀주셨다.비즈니스 요구사항, 기술적인 요구사항, 도메인 아키텍처 등 여러 부분을 고민해서 연관관계 사용을 선택해야 한다.Day11. 기본적인 배포를 위한 준비배포란 무엇인가?배포란 무엇일까? 배포는 제 3자의 사용자가 우리가 만든 서비스를 전달하는 과정이라고 볼 수 있다. 우리는 지금 현재 우리의 개인 PC에다가 개발을 하고 웹을 띄워보며 테스트를 해보았다. 하지만 영희가 우리의 서비스를 이용할려하면 어떻게 할까? 현재 상황에서는 나한테 연락을 하고 우리집에 방문해서 사용하고 가야할 것이다. 물론 영희 1명이고 내가 집에 있다고 한다면 가능하다. 하지만 영희 혼자가 아니라 100만명이 우리의 서비스를 이용한다면 정말 고민이 많을 것이다. 또한, 내가 잘때 갑자기 철수가 오겠다고 하면 나는 잠을 자지도 못하고 철수가 우리집에 올 때까지 기다려야 할 것이다.그래서 나는 좋은 생각을 한다. 제3의 컴퓨터를 빌려서 우리의 웹 어플리케이션을 띄우는 것이다. 그리고 나의 친구들에게 그 컴퓨터 IP주소를 알려주면 된다. 이 과정을 배포과정이라고 한다. 그러면 이 컴퓨터는 누구한테 빌릴까? 네이버, 구글등 다양한 컴퓨팅 서비스를 해주는 곳은 많지만 대부분 아마존을 이용한다. 또한 배포를 위해 컴퓨터를 빌릴때 운영체제를 선택도 해야한다.profile과 H2 DB여기서 우리는 문제를 직면한다. 우리의 코드를 제3의 컴퓨터에서 실행시킬 때 DB같은 자원정보를 변경해줘야 한다. 이런 불편함에 이런 생각을 하게 된다. 코드변경 없이 우리의 컴퓨터에서 실행할때 우리의 DB가 연결이 되고 제3의 컴퓨터에서 실행할때는 제3의 컴퓨터에 설치된 DB가 연결되어야 한다. 즉, 똑같은 코드로 실행환경에 따라 설정을 다르게 하고 싶다. 이때 바로 profile을 이용하는 것이다. 현재 우리는 지금 profile이라는 것을 사용하고 있다. 바로 "default" profile을 사용한다. 아무것도 설정을 안하면 해당 프로필이 자동으로 올라온다. 그럼 실제 우리의 코드에 profile을 적용해보자. 똑같은 서버 코드를 실행시키지만, local 이라는 profile을 입력하면, H2 DB를 사용하고 dev 라는 profile을 입력하면 MySQL DB를 사용하게 바꾸자.🤔 H2 DB란?경량 Database로, 개발 단계에서 많이 사용하며 디스크가 아닌 메모리에 데이터를 저장할 수 있다. 또한, 개발 단계에서는 테이블이 계속 변경되는데 어차피 데이터가 휘발되기 때문에 ddl-auto 옵션을 create로 주면 테이블을 신경쓰지 않고 코드에만 집중할 수 있다! 그래서 개발단계나 테스트에서 H2 DB를 많이 사용한다.그러면 적용한 yml은 아래와 같이 될 수 있다.pring: config: activate: on-profile: local datasource: url: "jdbc:h2:mem:library;MODE=MYSQL;NON_KEYWORDS=USER" username: sa password: driver-class-name: org.h2.Driver jpa: hibernate: ddl-auto: create properties: hibernate: show_sql: true format_sql: true h2: console: enabled: true path: /h2-console --- spring: config: activate: on-profile: dev datasource: url: "jdbc:mysql://localhost/library" username: "root" password: "" driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: none properties: hibernate: show_sql: true format_sql: true여기서 --- 은 프로필을 구분하는 표시선이라 생각하면 좋다. 그리고 DB 접속 url에 MODE=MYSQL;NON_KEYWORDS=USER 해당 옵션을 붙인 이유는 DB의 키워드중에 USER라는 것이 있기에 키워드로 설정 안하고 모드를 MySQL과 유사하게 만들기 위한 옵션이다. 또한 h2.console.enabled와 h2.console.path 옵션은 해당 경로로 접속했을 때 h2 console을 사용할 수 있기 위해서이다.git과 github이란 무엇인가?!개발 관련 서적이나 자료를 찾다보면 한번쯤 보이는 주소가 있다. 바로 git이다. git이란 코드를 쉽게 관리할 수 있도록 해주는 버전 관리 프로그램이다. 이런 상황이 있다하자. A개발자와 B개발자가 협업을 하고 있다 하자. 그리고 각자 개발 후 소스코드를 합칠때 문제가 생긴다. 다른 코드들은 상관없지만 같은 파일의 코드들을 다르게 수정할 우려가 있기 때문이다. 그래서 이것을 일일이 수작업으로 확인하기엔 너무 힘들다. 이래서 git이 등장한 것이다. 또한 버전을 관리하기에 아래와 같은 사태 또한 일어나지 않을 것이다.그러면 github는 무엇일까? git으로 관리되는 프로젝트들을 관리해주는 저장소이다. 우리는 git으로 관리하는 프로젝트를 github에 저장할 수 있다. 그럼 왜 github에 저장할까? 자랑용, 공유로 저장할 수 있지만 배포가 가장 큰 이유로 볼 수 있다. 제3자의 컴퓨터에 우리의 서비스를 배포해야하는데 우리의 소스코드를 usb나 외장하드에 담아 제3자의 컴퓨터까지 가서 복사해서 할 수는 없을 것이다. 만약 집 근처면 참고 갈테지만 만약 미국의 제3자의 컴퓨터가 있다면 비행기값이 더 나올 것이다. 깃 명령어그럼 간단하게 깃 명령어를 알아보자.📚 용어git init : git 프로젝트 시작하기git remote add origin [각자 저장소 주소]: git 프로젝트의 github 저장소 설정하기git add . : 코드들을 담는다. 일종의 택배상자에 담는다고 보면 된다.git status: 현재 택배상자에 코드들이 잘 담겨져 있는지 확인하는 명령어git commit -m "메세지" : 택배상자에 송장 붙이는 명령어git push : 택배상자를 github에 보내기 택배상자를 github에 보낼 때 git push –set-upstream origin master 명령어를 최초 1번 해줘야 한다. AWS의 EC2 사용하기AWS의 회원가입 로그인 과정을 거쳐서 제3자의 컴퓨터를 빌려보는 실습을 해보았다.Day12. AWS와 EC2 배포EC2에 접속을 하려면 아래와 같은 준비물이 필요하다.1) 우리가 접속하려는 EC2의 IP 주소2) 이전 시간에 다운로드 받았던 키 페어3) 접속하기 위한 프로그램 (git CLI 혹은 Mac terminal)다운로드 받은 키 페어를 이용하는 방법ssh –i 경로/키페어이름.pem ec2-user@IP다음으로 키페어 권한을 변경해주자.chmod 400 경로/키페어이름.pem아니면 위와같은 과정이 불편하다면 AWS의 콘솔을 이용하는 방법도 있다.리눅스 명령어mkdir : 폴더를 만드는 명령어ls : 현재 위치에서 폴더나 파일을 확인하는 명령어ls –l : 조금 더 자세한 정보를 확인할 수 있다!cd : 폴더 안으로 들어가는 명령어pwd : 현재 위치를 확인하는 명령어cd .. : 상위 폴더로 올라가는 명령어rmdir : 비어 있는 폴더(디렉토리)를 제거하는 명령어프로그램 설치이제 EC2에 접속했으니 git, java, mysql을 설치해보자. 먼저 아래와 같이 리눅스 터미널에 명령어를 입력하자.sudo yum update위의 명령어의 sudo는 관리자 권한으로 실행한다는 의미이고 yum은 리눅스 패키지 관리 프로그램 (gradle과 비슷한 역할)이다. update는 현재 설치된 여러 프로그램들을 최신화한다는 의미이다.깃 설치sudo yum install gitJDK11 설치sudo yum install java-11-amazon-corretto -ymysqlsudo yum install mysql-community-server // 설치 sudo systemctl status mysqld // 현재 보이지 않는 프로그램을 관리하는 명령어 + mysql 상태 확인 sudo systemctl restart mysql // mysql 재시작 sudo cat /var/log/mysqld.log | grep “A temporary password” // mysql 임시 비밀번호 확인 mysql –u root –p // mysql 접속빌드와 실행git clone 명령어로 우리가 깃헙에 올린 프로젝트를 가져오자.git clone [github 저장소 주소]이제 빌드준비를 위해 gradlew의 권한을 변경하자chmod +x ./gradlew이제 빌드를 하자 (단, 테스트는 제외)./gradlew build –x test그럼 jar파일이 생겼을텐데, 아래와 같은 명령어로 실행시킨다.java –jar build/libs/library-app-0.0.1-SNAPSHOT.jar --spring.profiles.active=dev그럼 서버가 정상적으로 실행된다. 다음으로 서버를 중단해보자. ctrl + c를 누르면 중단된다.하지만 우리는 터미널을 닫아도 서버는 계속 실행되고 싶다. 즉, 백그라운드 재생을 하고 싶어한다. 아래와 같이 입력한다.nohup [명령어] &그러면 백그라운드로 재생된 우리의 프로그램을 어떻게 종료할까?ps aux | grep java위와 같이 현재 실행중인 프로그램 중 java가 들어가는 프로그램을 확인해서 pid값을 알아내 아래와 같이 입력한다.kill -9 프로그램번호또한 파일의 내용을 확인해 볼 수 있는 명령어도 알아보자.vi : 리눅스 편집기인 vim을 사용하여 파일을 연다.또한 vi말고도 cat 명령어도 있다.cat : 파일에 있는 내용물을 모두 출력하는 명령어또한 끝부분만 확인하고 싶을때 아래와 같이 입력한다.tail : 현재 파일의 끝 부분을 출력하는 명령어여기서 실시간으로 확인하고 싶을 경우 f옵션만 주면 된다.가비아를 이용한 도메인 구입가비아를 통해 도메인을 구입해보았다. 실제 과정은 매우 단순함으로 생략한다.Day13. SpringBoot 설정 및 버전업여기서는 내용을 조금 축약해서 작성해보겠다. 이전에 배웠던 개념이기도 하고 중요하지만 실습적인 부분은 아니기에 간략히 작성한다. 우리는 여기서 gradle의 구성에 대해 알아보았다. 이 gradle 파일안에는 플러그인 설정, 의존성 설정, 저장소 설정등을 확인할 수 있었다. 또한 스프링이 어떻게 생겨났는지 스프링부트는 또 어떻게 생겨났는지 이 둘의 차이는 무엇인지 알 수 있었다. 그리고 yaml 문법과 properties 문법에 대해 알아보았다. 다음 우리의 프로젝트에서 롬복을 적용해서 리팩토링과정도 알아보았다. 마지막으로 스프링부트 버전을 3.x로 바꾸어보았다. gradle에서 스프링부트 버전을 변경하고 빌드할때 달라진 부분들을 고쳐주는 작업을 해보았다.Day14. 마무리 및 꿀팁우리는 여기서 앞으로의 공부 방향성, AWS 비용계산방법, myBatis 적용, 정적파일 처리방법을 배웠다. 나는 여기서 느꼈던 점은 공부 방향성에 있어서 코치님 말씀대로 코틀린 및 스프링의 다양한 모듈에 대해 접근해볼 예정이다.또한 이 수업에서 myBatis를 적용해보았는데 개인적으로 내 스프링부트 버전이 myBatis starter 몇 버전을 쓰는지 복잡함을 느꼈다. 또한 여전히 문자열로 쿼리를 작성한다는게 나한테에 있어서 많은 불편함을 느꼈다. 하지만 여기서 코치님은 대용량 데이터를 insert할때 jdbcTemplate을 이용한 batch 쿼리 실습을 해주셨는데 시간차이를 보니 완전 신세계였다. 이 부분에 대해 좀 더 자세히 알아봐야겠다.미니 프로젝트나는 미니프로젝트를 개발해가면서 많은 어려움과 좌절을 맛 보았다. 1단계는 나름 간단해서 별거 없네라는 식으로 넘어갔다. 하지만 다른 러너분들과 리뷰과정에서 많이 고쳐야 할 점을 보았다. 또한 단계가 갈수록 코드가 점점 개판이 되어간다는 나 자신이 너무 싫었고 특히 마지막 단계는 밤을 꼬박 새워서 해결할 수 있었다. 공공데이터포털로 법정공휴일 api를 가져오려 했지만 이 api가 몇번 타임아웃이 발생한다. 이 문제때문에 시간을 쏟은것은 안 비밀!리뷰중에는 왜 이렇게 작성했냐부터 이렇게 바꾸는 것이 어떤가의 대해 의문점을 던져주셨고 이것을 깊이 통찰하는 시간이 나를 성장하는 계기를 만든 것 같다. 자세한 개발과정은 1단계와 똑같은 절차로 해결했으니 1단계 개발일지를 참조해보시면 좋을 것 같습니다. 개발일지https://inf.run/rF31s PR1단계: https://github.com/crispindeity/warming-up-study-mini/pull/82단계: https://github.com/crispindeity/warming-up-study-mini/pull/93단계: https://github.com/crispindeity/warming-up-study-mini/pull/134단계: https://github.com/crispindeity/warming-up-study-mini/pull/15 최종 머지한 내 프로젝트https://github.com/SungbinYang/warming-up-study-mini/tree/main/sungbin/mini회고드디어 스터디클럽의 여정이 끝났다. 정말 힘들고 출사표때 전달했던 많이 부딧혔고 깨졌다. 그러면서 나는 점점 성장을 해 나간것 같다. 비록 1달이라는 짧다면 짧은 여정이였지만 내 학습의 여정은 아직 끝이 안 났기에 계속 달려볼려고 한다. 이 클럽을 수료하더라도 혹은 1기로 다시 재 신청을 하더라도 내 본연의 학습여정은 계속 될 것이며 그 여정동안 많이 깨지고 부딪히면서 점점 성장하는 개발자 양성빈이 되어야겠다. 화이팅 🔥🔥🔥🔥 📚 참조http://www.jjal.today/bbs/board.php?bo_table=gallery&wr_id=94&sfl=wr_subject%7C%7Cwr_content%7C%7Cwr_4&stx=웃짤&sop=and&page=7

백엔드인프런워밍업스터디클럽발자국마지막

장서윤

[인프런 워밍업 클럽 0기] 2주차 발자국 👣

이번 발자국은 과제 진행 과정을 작성해 볼 예정이다. 목차는 다음과 같다.1. 기능 목록 작성2. 공통 컴포넌트 구현3. 결과물4. 고민했던 부분 ✅️ 1. 기능 목록 작성1. 항목 추가/수정할 수 있다.지출 항목 + 비용을 입력받는다 (조건을 만족할 때까지)지출 항목은 문자열이여야 한다.비용은 숫자여야 한다.지출 항목 + 비용 모두 입력되어야 한다. (공백 제외)  조건을 만족할 경우, 버튼이 enable 된다. 추가/수정을 완료했을 경우, toast 메시지를 띄워준다. 2. 항목 리스트를 보여준다. (테이블 형식)각 항목(row) 마다 수정/삭제 버튼이 존재한다.수정 버튼을 누른 경우[ 기능목록 1. 항목 추가/수정할 수 있다 ] 로 이동한다.삭제 버튼을 누른 경우항목이 삭제되며, toast 메시지를 띄워준다. 총 지출 금액을 보여준다.항목 리스트가 없을 경우, '존재하지 않습니다' 를 보여준다.   3. 모든 항목을 삭제할 수 있다.목록 지우기 버튼을 누른 경우모든 항목이 삭제되며, toast 메시지를 띄워준다. ✅ 2. 공통 컴포넌트 구현MUI와 같은 UI 라이브러리를 쓰지 않고, tailwind css로만 구현할 것이기에, 필요한 컴포넌트는 직접 만들어야한다. 먼저 공통된 디자인을 위해 rounded만을 사용하고자 했다. ( 컴포넌트마다 rounded를 다 다르게 사용하지 않는다)색상은 emerald + slate 만을 최대한 사용했다. 그렇게 해서 필요한 컴포넌트는 다음과 같다. Outlined Input시간을 투자한 부분이다. 기본 html의 input은 굉장히 단순하기에 커스텀이 필요했다.focus 했을 때, label 을 input 박스 위로 가게 하고, 부드러운 애니메이션을 넣고자 했다.Contained Button + Text Button배경을 채운 Contained Button오직 text 만 존재하는 Text ButtonTable기본 table에 css만 추가했다.Toast 메시지 success : 초록색 체크 아이콘추가, 수정, 삭제가 성공적으로 완료되었음을 표시한다. warn : 노란색 경고 아이콘입력값의 유효성검사가 일치하지 않을때 표시한다.  ✅ 3. 결과물 ✅ 4. 고민했던 부분 지출 항목이 문자여야하는데, 이를 어떻게 판별하는가? 이다.애매한 부분이 지출 항목이 "맥북 pro 16" 처럼 오직 문자 type으로 이뤄지지 않고, 여러 type이 같이 존재할 수 있다. 그래서 이걸 어떻게 예외처리 해줄지 고민했었는데, 일단은 지출 항목을 절대 숫자로만 이뤄지지는 않을 것 같아서, isNaN()만을 판별했다. 이 부분은 고민이 더 필요할 것 같다.. toast 메시지의 색상을 어떻게 할 것인가? 이다.상품을 "삭제" 했을 경우, toast 메시지의 아이콘 색상을 고민했었다.빨간색 -> 부정적 의미 -> 삭제와 연관된다! -> 그러나 error 와도 연관됨 -> 사용자 입장에서 "에러가 났다..!" 로 혼동할 수 있음.초록색 -> 삭제가 완료되었다! 에 의미를 둠-> 그러나, 추가, 수정, 삭제도 어쨌든 완료이기에, 다른 기능임에도 아이콘 색상이 같아서 구별이 어렵다는 문제가 존재함.고민 끝에 error와 연관되는 빨간색보다는 초록색으로 가되, "추가", "수정", "삭제" text 를 크고 두껍게 처리해주는 것으로 합의를 보았다!후기UI 라이브러리만 사용하다가, tailwind css로 직접 컴포넌트를 만드니까, 생각보다 시간이 오래 걸렸다. 중간에 계속 애니메이션도 적용된 라이브러리를 사용하고 싶었지만, 이를 css로(비록 tailwind css지만) 직접 완성시켰을때 상당히 뿌듯했다!또한, 기능목록을 제대로 작성한건지 모르겠다. 조금 더 깔끔하게 작성하고 싶은데, 어디까지 자세하게 적어야하는지, ui 부분도 자세하게 적어야하는지(버튼 색깔이 바뀐다거나)를 잘 모르겠다. 더 공부해봐야겠다!  

웹 개발프론트FE워밍업클럽

Dream

[ 인프런 워밍업 클럽 Study FE 0기 ] Week 2 발자국

발자국워밍업 스터디 클럽이 2주 차에 접어들었습니다. 해당 발자국은 따라 하며 배우는 리액트 A-Z (섹션 0-5) 중심으로 작성되었습니다.요약React를 사용하려면 Node.js가 필요하다. Node.js를 설치하면 NPM도 같이 설치되니 꼭 Node.js를 설치하자. Node.js 공식 홈페이지에 접속하면 2개의 Node 버전이 있는데, 그중에서 안정적인 버전인 LTS를 설치하면 된다. Section 01. React[ React란? ]리액트는 사용자 인터페이스(user interface, UI)를 만들기 위해서 사용되는 자바스크립트의 라이브러리다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. 이렇게 사용자 인터페이스를 만들기 위해 도움을 주는 TOOL로는 리액트 말고도 Vue.js와 Angular.js가 있다.React: 라이브러리Angular, Vue: 프레임워크[ Framework vs Library ]프레임워크와 라이브러리를 대략 설명하자면 다음과 같다.Framework : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다.Library : 어떠한 특정 기능을 모듈화 해 놓은 것이다.프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있으며, 라이브러리들은 특정 기능을 위해 모듈화 되어있다.리액트는 라이브러리이다. 왜냐? 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문이다. 리액트는 여러 모듈을 사용하며 앱을 관리한다.라우팅: react-router-dom …상태관리: redux, mobx …빌드: webpack, npm …테스팅: Eslint, Mocha …[ React Component ]리액트를 공부하다보면 무조건 마주치는 단어가 있다. 바로 컴포넌트이다. 리액트는 컴포넌트 기반이라고 하는데, 이 컴포넌트는 무엇을 말하는 것일까?컴포넌트(Component): React로 만들어진 웹/앱을 이루는 최소한의 단위리액트는 이 컴포넌트를 통해서 웹/앱을 개발하게 된다.리액트는 여러 컴포넌트 조각으로 되어있다. 이것은 블록같다고 생각하면 된다. 여러 블록 조각을 맞추고 쌓아 올려 하나의 블록 작품을 완성하는 것. 리액트도 마찬가지로 컴포넌트를 이리저리 조합하고 쌓아올려 하나의 웹 페이지를 구성하게 된다.리액트 컴포넌트에는 2가지가 있다.클래스형 컴포넌트함수형 컴포넌트React는 여러 컴포넌트 조각으로 구성된다.개인적인 설명을 덧 붙이자면 리액트는 레고 블럭과 같다고 생각한다. 레고 블럭들을 하나 둘 씩 쌓아 올려 하나의 완성된 레고 작품을 만드는 것이다.[ Component 종류 ]React는 2개의 컴포넌트 종류가 있다.클래스형 컴포넌트(Class Components)class App extends Component { render() { return <h1>Hello, ReactJS!</h1>; } }함수형 컴포넌트(Functioanl Components)function App() { return <h1>Hello, ReactJS!</h1>; }💡 현재 함수형 컴포넌트를 HOOK이랑 해서 많이 사용한다.💡 참고로 컴포넌트를 작성할 때 반드시 대문자 시작을 해야 한다. 소문자 시작 시 body, h1, p 같은 DOM 태그로 인식해 버린다.[ 브라우저가 그려지는 원리와 가상 돔 ]React의 가장 큰 특징은 가상 돔(Virtual DOM)이다. 이것을 사용하는 이유는 인터렉션 때문이다. 이 인터렉션에 의해 DOM에 변화가 발생하면 다시 DOM을 재구성하기 시작한다.JS 발자국에도 남겼었지만 웹 브라우저의 경우 다음과 같은 과정을 겪고 이 과정은 비용이 꽤 든다.Critical Render Path (웹 페이지 렌더링 과정): 데이터 파싱(HTML) ➔ DOM Tree 생성 ➔ CSSOM Tree 생성 ➔ JS 실행 ➔ Render Tree 생성 ➔ Layout 생성 ➔ PaintDOM을 재구성 한다는 것은 위 렌더링 과정을 다시 반복한다는 것이다. 즉, 인터렉션이 일어날때마다 위 과정을 다시 한다. 이것을 보완하기 위해서 나온 것이 가상 돔이다.가상돔 과정을 살펴보자..!데이터가 바뀌면 가상 돔에 렌더링 되고, 이전에 생긴 가상 돔과 비교를 해서 바뀐 부분만 실제 돔에 적용 시킨다.바뀐 부분을 찾는 과정을 Diffing이라고 부른다.바뀐 부분만 실제 돔에 적용 시키는 것을 Reconciliation(재 조정)이라고 부른다.[ Create React App 을 이용해서 리액트 설치하기 ]create-react-app 을 통해서 원하는 위치에 리액트를 설치할 수 있다. 이 때, Webpack과 Babel이 함께 설치가 된다. 따라서 React 앱 생성 전에 Webpack과 Babel에 대해서 간단히 알고 가자.Webpack정의: Webpack: 웹팩은 오픈 소스 자바스크립트 모듈 번들러써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축고 최적화하는 라이브러리이다.장점여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩 줄일 수 있. (네트워크 비용 줄음)모듈 단위로 개발이 가능하여 가독성과 유지 보수가 쉽다.Babel정의: 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 변환 시켜주는 라이브러리이다.⇒ 이러한 Webpack과 Babel은 개발자가 React 개발 시 알아서 설정 해야 하지만 Create-React-App을 사용해서 React 앱을 생성하면 Babel이나 Webpack 설정이 이미 되어있기 때문에 준비 시간이 단축된다.[ Create-React-App ]프로젝트를 진행할 폴더 생성VSC에서 해당 프로젝트 폴더 열기Termial에 npx create-react-app 생성할파일명 입력강의에서는 npx create-react-app ./을 입력하였다../는 현재 위치를 뜻한다.[ npx create-react-app 에 대하여 ]npx: 노드 패키지 실행을 도와주는 도구이다.npx create-react-app이란 npm 레지스트리에 잇는 패키지를 ./에 실행시켜서 React를 설치해 주는 것이다.실행하는 방법실행하고자 하는 리액트 파일 위치에서 npm run start 입력(강의에서는 npm run start방법만 소개시켜 주셧는데 npm start도 가능하다.)🤔 개인적으로 요즘 vite에 관한 이야기가 보이는데 이도 조사해 보아야겠다… Section 2. 간단한 To-Do 앱 만들며 리액트 익히기[ create react app ]create-react-app으로 리액트를 설치하면 여러 파일이 등장하는데, 이 중에서 절대로 이름을 수정해서는 안되는 파일이 존재한다.public/index.html: 페이지 템플릿src/index.js: 자바스크립트 시작 점조심하자!💡그리고 우리가 새로 js, jsx, css 등 직접 생성할 파일들은 src 폴더에서 하면 된다. Webpack이 src/ 부분에만 작동하기 때문이라고 한다.[ package.json ]해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리들의 버전이 명시되어 잇다.[ 싱글 페이지 애플리케이션(single-page application, SPA) ]싱글 페이지 애플리케이션(single-page application, SPA)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.위키백과React.js는 SPA이다. 즉, 어떠한 데이터에 관한 교체 이벤트가 발생했을 때, 서버로부터 페이지를 새롭게(html 파) 받아와 구성하는 것이 아니라 content를 바꿔치기 한다. 이는 HTML 5의 History API를사용해서 가능하게 만든다.[ History API ]전통적인 웹 사이트는 a page에서 b page로 이동할 때 a.html을 보여주다가 b.html을 보여주면 되었지만 SPA의 경우 오직 1개의 HTML(index.html)이 존재한다. 따라서 페이징 전환을 하기 위해서 HTML 5 History API를 이용한다.History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드History.go(): 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드History.pushState(): 주어진 데이터를 세션 기록 스택에 넣어준다.History.replaceState(): 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.생성했던 React 프로젝트에서 public/index.js를 살펴보면 <div id="rood"></div>가 있다.그리고 src/index.js 코드에는 document.getElementById('root')라는 코드가 있다.자바스크립트 파일의 시작 점인 src/index.js에서 id값이 rood인 요소를 찾아 그곳에 해당 요소들을 렌더링하는 것이다. 즉, div라는 최상위 루트 노드 아래에 직접 정의한 요소를 더해 화면을 꾸며나가는 것이다!![ JSX ]JSX는 Javascript Syntax Extension의 약자로 자바스크립트의 확장 문법이다.리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다.JSX 사용이 필수는 아니나 사용하면 가독성이 너무 좋아서 필수 아닌 필수이다. (애초에 리액트 개발자들 대부분이 JSX를 사용한다고 한다.)JSX는 createElement를 쉽게 사용하기 위해서 사용한다.모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들 수 없다.Ract는 React.crateElemnt API를 사용해서 엘리먼트를 생성한 후에 이 엘리먼트를 In-Memory에 저장한다. 그리고 RaectDOM.render 함수를 통해 웹 브라우저에 그린다.JSX를 사용하면 Babel이 사용한 문법을 crateElemnt로 자동 변환해준다. 따라서 그냥 개발자는 자유롭게 JSX 사용하면 된다.단, JSX는 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.// 안된다. // 자식 요소가 여러 개 라면 부모 요소로 감싸줘라. function hello() { return ( <div>Hello, Raect!</div> <div>Hello, Wrold!</div> ); } // 이렇게 말이다. function hello() { return <div> <div>Hello, Raect!</div> <div>Hello, Wrold!</div> </div>; }💡 만약 JSX에서 JS 코드를 사용하고 싶다면 { } 내부에 작성해주면 된다.[ React와 Key ]map()을 사용한다면 언제나 명심해야 하는 것. KEY. 이것을 넣지 않는다면 에러가 발생한다.React에서 요소의 리스트를 나열할 때는 Key를 넣어줘야 한다. Key는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다.추가적으로, 이 Key에 지정하는 값은 순회하고자 하는 목록의 아이템에 대한 ID 값이면 된다. 즉, 고유한 값이여야 한다. 정 없으면 index 넣어도 되지만 index 값은 권장하지 않는다.리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용한다. 그렇다면 리스트를 나열할 때 바뀐 부분만 어떻게 찾을까? 바로 이 key를 이용해서 어떠한 부분이 바뀌었는 인식하는 것이다.[ state ]정말 정말 중요한 개념!!!리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서 React State를 사용한다. State란 무엇일까?간단히 말해서 변수이다.단, 이 변수의 값이 변경되면 컴포넌트들이 재렌더링 된다.state에는 리액트의 흐름에 관한 데이터와 관련이 있다. Section 3. To-Do 앱 최적화 하기[ React HOOK ]엄청나게 중요하다. 이 HOOK은 클래스형 컴포넌트처럼 함수형 컴포넌트에서도 state와 생명주기 메서드를 사용할 수 있도록 해주는 메서드이다.클래스 형 컴포넌트에서는 Mounting, Updating, Unmounting 3단계 따라서 생명주기 메서드를 제공한다.Mounting: componentDidMount()Updating: componentDidUpdateUnmounting: componentWillUnmount()함수형 컴포넌트에서는 이를 위해 HOOK을 사용한다.[ HOC(Higher Order Component) ]화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법이다.HOC는 HOOK이 나오기 전에 사용했던 부분이다.Wrapper가 많아지면 흐름 파악이 어려워서 이제 잘 안 쓴다.HOC를 만들고 싶으면 Custom HOOK을 사용하자.[ HOOK ]기본적으로 알고 있어야 할 HOOK은 다음과 같다.useState()리액트의 유동적인 데이터들은 state에 담아 사용하기 위해 이용하는 HOOK클래스형 컴포넌트의 setState와 같이 state 객체에 대한 업데이트 실행단!!! state 변경 시 재 렌더링이 일어남useEffect()사이드 이팩트 처리 HOOK클래스형 컴포넌트의 생명 주기 함수 역할 수행useMemo()최적화 용 HOOK, 의존성 배열에 따라 작동의존성 배열에 있는 값이 변하면 지정한 함수를 실행하여 해당 반환 값을 반환useCallback()최적화 용 HOOK, 의존성 배열에 따라 작동의존성 배열에 있는 값이 변하면 함수를 반환useRef()요소의 참조를 위해 사용하는 HOOK[ Props ]Props는 Properties의 줄임말상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송하고 싶을 경우 사용읽기 전용으로 자녀 컴포넌트에서 강제로 이 값을 변경할 수 없다.전달 받은 props가 state고 이 값을 바꾸고 싶다면 props로 set함수를 넘기고 이것을 이[ TailWindCSS ]HTML 안에서 CSS 스타일을 할 수 있게 해주는 CSS 프레임워크빠른 스타일 작업 가능id 혹은 class 명을 작성하기 위해 머리를 혹사 시키지 않아도 된다.class에 특정 키워드를 넣어서 CSS 조작정해진 속성 키워드가 워낙 많으니 공식 홈페이지 검색 필수다[ 리액트 불변성 ]불변성을 지키며 개발을 하자!참조 타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되면 예상치 못한 오류가 발생할 수 있다.불변성을 지킬 수 있는 참조 관련 메서드:spread operator, map, filter, slice, reduce불변성을 해치는 참조 관련 메서드:splice, push[ React.memo ]React.memo는 Higher-Order Components(HOC)이다. 불필요한 컴포넌트 렌더링을 방지할 수 있게해준다. (일종의 최적화 용 HOC) Section 4-5. Netflix 앱 만들기주로 실습 내용 이었다. 정리할 이론만 추려내 보겠다.[ Styled Component ]자바스크립트 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리[ React Router Dom ]React Router DOM을 이용하면 웹/앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.React Router DOM을 사용하기 위해서는 몇 가지 설정을 해야한다.index.js에서 BrowerRouter로 루트 컴폰너트를 감싸준다.BrowserRouter은 HTML 5 History API를 사용하여 UI를 URL과 동기화 된 상태로 유지해준다.import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <BrowserRouter > <App /> </BrowserRouter> </React.StrictMode> ); 여러 컴포넌트 생성 및 라우트를 정의한다.Routes와 Route를 사용한다.Routes: 앱에서 생성될 모든 개별 경로에 대한 컨테이너 상위 역할을 한다.Route: 단일 경로를 만드는 데 사용된다.path 속성: 원하는 컴포넌트의 URL 경로를 지정한다.element 속성: 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.import { Routes, Route } from "react-router-dom"; function App() { return ( <div className="app"> <Routes> <Route path="/" element={<Home />}> <Route path="about" element={<About />} /> <Route path="contact" element={<Contact />} /> </Route> </Routes> </div> ); } +) <Link />를 통해 경로 이동하기Link 구성 요소는 HTML의 a 태그와 유사하다.to 속성은 링크가 유저를 데려가는 경로를 지정한다.앱 구성 요소에 나열된 경로 이름을 생성했기 때문에 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성 요소를 렌더링한다.import { Link } from "react-router-dom"; function Home() { return ( <div> <h1>홈페이지</h1> <Link to="about">About 페이지를 보여주기</Link> <Link to="contact">Contact 페이지를 보여주기</Link> </div> ); } [ 중첩 라우팅 ]라우팅은 중첩 처리가 가능하다.[ Outlet ]자식 경로 요소를 렌더링하려면 부모 경로 요소에서 Outlet를 사용해야한다.하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다.부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 덴더링하거나 인덱스 라우트가 없으면 아무것도 렌더링하지 않는다.[ useNavigate ]경로를 바꿔준다.naviate(”/home”) ⇒ localhost:3000[ useParams ]:style 문법을 path 경로에 사용했다면 useParams()로 읽을 수 있다.function test() { return ( <Routes> <Route path="invoices/:invoiceId" element={<Invoice />} /> </Routes> ); } function Invoice() { let params = useParams(); return <h1>Invoice {params.invoiceId}</h1>; } [ useLocation ]현재 위치의 객체를 반환현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우 유용하다.[ useRoutes ]<Routes>와 기능적으로 동일하나 <Route> 요소 대신 자바스크립트 객체를 사용하여 경로를 정의한다.일반 <Route> 요소와 동일한 속성을 갖지만 JSX가 필요하지 않는다.[ Custom HOOK ]개발자가 정의하는 HOOK이다.HOOK의 이름은 use로 시작해야 한다.참고로 HOOK은 함수형 컴포넌트 또는 커스텀 HOOK에서만 호출이 가능하다.따라서 커스텀 HOOK도, 함수용 컴포넌트 또는 HOOK 내부에서 호출되어야 한다.강의에서는 useDebounce과 useOnClickOutside HOOK을 만들었다.useDebounce: input 요소에서 데이터 입력이 발생하면 설정한 set함수 때문에 매번 state 값이 바뀌고 재 렌더링이 일어난다. 따라서 keyup 이벤트의 처리를 지연시키는 커스텀 HOOK이다. (코드는 강의를 참고하자!)useOnClickOutside HOOK: 모달 창 밖의 부분을 클릭하면 해당 모달 창이 꺼지는 기능을 수행하는 HOOK이다. (코드는 강의를 참고하자!)이런 식으로 HOOK을 만들고 활용하는구나 싶었다…미션과제 총 합본 https://www.inflearn.com/blogs/7021 JS 미션 03. 퀴즈 앱[ 구현 해야하는 기능 ]1. 퀴즈 문제, 문제에 해당 하는 선택지 (선택지의 갯수가 매번 다름)2. 답 선택 시, 정답 여부에 따라 배경의 색상이 변경되어야 함문제는 data.json을 직접 작성하여 동적 생성했습니다. JS 복습 겸으로 해당 주제로 퀴즈 앱을 간단하게 만들어 봤습니다. 미션을 진행하며 문제는 없었습니다. JS 미션 04. 책 나열 앱[ 구현 해야하는 기능 ]1. 책 이름 입력 란2. 책 저자 입력 란3. 제출 버튼을 누르면 입력한 정보를 저장 함3-1. 제출 시 제출 했다는 안내 문구 떠야 함4. 제출된 데이터는 책 리스트에 출력 됨아이템은 다음과 같은 기능을 가져야 함5-1. 표기 할 데이터: 책 이름, 저자5-2. 각 아이템에는 삭제 기능이 있어야 함 구현하는데 문제가 없었습니다. REACT 01. 예산 계산기[ 구현 해야하는 기능 ]1. 지출 항목 입력 란2. 지출 비용 입력 란3. 제출 버튼을 누르면 입력한 정보를 저장 함3-1. 제출 시 제출 했다는 안내 문구 떠야 함아이템은 다음과 같은 기능을 가져야 함5-1. 표기 할 데이터: 지출 항목, 지출 비용5-2. 각 아이템에는 수정 및 삭제 기능이 있어야 함수정 버튼 클릭 시 수정 모드로 변경전체 삭제 기능이 있어야 함정말 막힘 없이 진행되다 딱 한 군데에서 문제를 맞았습니다. 상황에 맞게 알림을 띄우는 기능이었는데, JS에서는 아무런 문제 없이 해결했던 이 기능을 React에서 구현 하려고 하니 이상한 문제가 발생하더군요. 여러 동작을 해서 메시지가 많이 발생할 경우, 메시지가 예시처럼 모두 생성되는 것이 아니라 같은 자리에서 텍스트만 바뀌어서 출력이 되었습니다. 물론 잘 해결해서 과제를 마쳤습니다.회고워밍업 스터디의 2주 차에 진입하며 자바스크립트 공부를 마치고 새롭게 React 공부를 진행하며 React의 다양한 기술을 접하게 되었습니다. 특히 state, props, hook, 그리고 라우팅 부분은 처음에는 이해하기가 어려웠습니다. 그러나 부족한 이해를 보완하기 위해서 강의 내용을 정리하고, 추가적인 학습 자료를 찾아가며 개념을 확실히 파악하려고 노력했습니다.React 학습을 마치고 시작한 미션도 초반에는 막막함을 느꼈지만 코드를 작성해 나가며 수업 때 배운 내용을 적용해 가며 문제를 해결해 나갔습니다.워밍업 스터디도 이제 끝을 향해 가네요. 마무리되는 날까지 열심히 학습에 참여하고 미션 해결을 위해 도전해 보겠습니다. 

프론트엔드워밍업클럽FE

학생

[2주차 발자국] 인프런 워밍업 클럽 스터디 0기 FE

회고벌써 과정의 2/3가 끝났다는 것이 믿기지 않는다.일주일 간의 회고를 해보자면, 아쉬움이 크다. 이번주는 시간 투자를 많이 하지 못했기 때문이다.저번주에 의욕 넘치게 미션을 진행하느라 밀려났던 다른 일을 처리하는데에 또 시간을 썼다.앞으로 일이든 취준이든 제대로 하려면 시간 분배하는 법을 익혀야 한다는 생각이 들었다.직장 등의 일과 병행하는 다른 분들이 존경스러울 뿐이다.하지만 모두 끝냈기 때문에 이제는 공부에 전념할 일밖에 남지 않았다.모든 미션을 반드시 갈아치워버리겠다. 강의를 들으며 그동안 키워드만 알고 이해하지는 못하고 있었던 개념들을 접하면서 굉장히 반가웠다.특히 프로젝트를 구하는 글에서 종종 SPA 할 줄 아시는 분이라는 글을 봤었는데, 정확히 무슨 뜻인지이해를 하지는 못했었다. 하지만 이번에 공부하면서 정확히 알게 되어 상당한 쾌감을 느꼈다. 그밖에도 평소 무료 사이트의클론 코딩을 무작정 따라하면서 접했던 개념들을 짚고 넘어가게 되어 재미있었다.모닥불에 종종 들어오시는 강사님으로부터 유익한 정보를 얻으려면 질문할 거리가 있어야 한다. 질문할 거리가 있으려면 스스로의 힘으로는 알아내지 못하는 부분이 뭔지 구별할 수 있을 정도로 공부가 되어있어야 한다. 따라서 마지막 주 만큼은 진도를 잘 따라가 질문을 생성할 수 있게끔 되었으면 좋겠다. 리액트 및 프로젝트 부분은 특히나 한 번 보고는 잊어버릴 것 같으므로 여러번 공부를 해야할 것 같다. 시간은 한정되어있으므로 다음주는 선택과 집중이 필요해질지도 모르겠다. 이번주 반성공부 및 미션에 시간투자를 얼마 못함다음주 목표미션 모두 보강 및 완료하기(시간 부족하면 CSS 제외하고서라도)필수지식: API 통신, RESTful API, CRUD, CI/CD CSS flexbox, CSS Grid 공부하기Github README에 GIF(혹은 이미지)도 올리기 강의 요약이번주는 JS프로젝트로 자바스크립트를 마무리하고, 리액트를 시작했다.(자바스크립트 섹션 9 & 리액트 섹션 1 ~ 5)강의 요약은 기억에 남는 부분 위주로, 최대한 개념 부분만 진행했다.ReactReact에 관해리액트 컴포넌트가상 돔create react appSPAJSXReact StateReact HooksTailwindCSSStyled ComponentREACTReact에 관해React는 프레임워크가 아닌 라이브러리다.프레임워크: 어떠한 앱을 만들기 필요한 대부분의 것을 가지고있는것. 라이브러리를 포함.라이브러리: 특정 기능을 모듈화해놓은 것.보통 리액트와 잘 맞는 라이브러리와 함께 리액트를 사용한다.React Component리액트로 만들어진 앱을 이루는 최소한의 단위하나의 페이지를 구성하는 각각의 기능을 위한 컴포넌트가 있다.검색 컴포넌트, 프로필 컴포넌트, ...하나의 컴포넌트를 여러 곳에서 사용할 수 있다.리액트 컴포넌트의 두 가지클래스형 컴포넌트함수형 컴포넌트Virtual DOM(가상 돔)실제 DOM을 메모리에 복사해준 것.리액트의 큰 특징 중 하나는 가상 돔을 사용한다는 것.복습: 웹 페이지 빌드 과정(Critical Rendering Path CRP)DOM tree 생성(html문서를 읽고 렌더링할것 결정)Render tree 생성: DOM과 CSSOM 결합. 화면에 표시되는 모든 콘텐츠 및 스타일 정보를 포함Layout: 브라우저가 페이지에 표시되는 각 요소의 크기와 위치 계산Paint: 실제 화면에 그리기어떤 인터랙션에 의해 DOM에 변화가 발생하면 그 때마다 Render Tree가 재생성됨. 즉 모든 스타일을 다시 계산. Layout과 Repaint과정까지 계속 거치게 됨. 인터랙션이 많을 경우 불필요하게 DOM을 조작하는 비용이 너무 커짐.위의 문제로 나오게 된 것이 가상 돔.가상 돔의 작동방식 가상 돔 생성데이터 바뀌면 새로운 가상 돔 생성이전에 생긴 가상 돔과 새로운 가상 돔 비교(diffing: 바뀐 부분을 찾는 과정)바뀐 부분만 실제 돔에 적용(재조정. reconciliation)시킴가상 돔 장점: 요소가 많이 바뀌어도 한 번에 묶어서 실제 돔에 처리하여 돔을 조작하는 비용 줄임 Create React App리액트 설치를 위해 필요한 것들 Node.jsVisual Studio Code 리액트 앱 설치 방법npx create-react-app <폴더이름>폴더 안에 react app이 설치됨webpack과 babel을 모두 설정해줌.Webpack: 여러 파일을 하나로 모아주는 번들러. 로딩에대한 네트워크 비용 줄임.Babel: 최신 자바스크립트 문법을 구형 브라우저에서도 쓸수있게 변환시켜주는 라이브러리.SPA(Single Page Application)하나의 페이지에 담아 동적으로 화면 바꿔가며 표현.단일 html 내의 div id=root를 자바스크립트로 잡음.페이지 전환(브라우징)은 html5의 history API를 이용.전통적: Multi Page ApplicationReact는 SPA를 사용한다.JSX(Javascript syntax extension)자바스크립트의 확장 문법.UI를 나타낼 때 자바스크립트(logic)와 HTML(markup)구조를 같이 사용.JSX를 이용하면이벤트 처리 등을 더 편하게 구현할 수 있음.의무는 아니지만 훨씬 편리하여 거의 모든 사람이 리액트에서 UI를 위해 사용.JSX로 작성 -> babel이 createElement로 바꿔줌JSX는 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.JSX Key 속성리액트에서 요소의 리스트를 나열할 때 넣어주는 값.React가 변경, 추가, 제거된 항목을 식별하는 데 도움이 됨.요소의 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 함.key에는유니크한값을 넣어야한다. index는 비추천.key를 이용하면 새로 그리는게 아니라 기존의 리스트를 이용해준다.React State컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체.컴포넌트 안에서 관리한다.setState 이용React Hooksclass 없이 state를 사용할 수 있는 기능.함수형 컴포넌트를 사용한다.클래스형 컴포넌트: 많은 기능, 길고 복잡한 코드, 느림, *리액트의 생명주기 사용 가능함수형 컴포넌트: 적은 기능, 짧고 심플한 코드, 빠름, *리액트의 생명주기 사용 불가*리액트의 생명주기: 컴포넌트의 시작, 업뎃, 언마운트까지의 주기위처럼 함수형 컴포넌트에서는 리액트의 생명주기를 사용하지 못했었다.그러나 React Hooks로 인해 함수형 컴포넌트에서도 생명주기 사용 가능해짐.리액트 훅스에서는 리액트 생명주기를 useEffect 안에서 다 처리를 해줄 수 있다.클래스형 컴포넌트에서는 마운트, 업데이트, 언마운트 함수 따로 생성.리액트 훅스는 HOC 대신 Custom React Hooks를 사용해 Wrapper 과다를 방지.TailWindCSSHTML 안에서 CSS 스타일을 만들 수 있게 하는 CSS 프레임워크.부트스트랩처럼 미리 세팅된 Utility Class를 활용하는 방식으로, html에서 스타일링을 할 수 있다.클래스 이름 짓기 등으로 골머리를 썩지 않아도 됨.Styled ComponentJavascript 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리.``를 사용하여 그 안에 스타일 속성들을 넣고, 변수에 할당한다.미션미션7(Day7). 타이핑 테스트 앱자바스크립트 섹션 9에서 다루었던 stopwatch앱을 복습하면서 구현을 시작했다.아직 미완성이고, 구현한 부분은 아래 부분이다.시작 화면index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Typing Test App!</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <h1>타이핑 스피드 측정</h1> <div class="data-container"> <div id="errors"> ERRORS <h2>0</h2> </div> <div id="time"> TIME <h2>20S</h2> </div> <div id="accuracy"> % ACCURACY <h2>100</h2> </div> </div> <div id="sentence">아래를 클릭해서 게임을 시작하세요.</div> <input id="input" type="text" /> </div> <script src="script.js"></script> </body> </html>이 시작화면에서는 텍스트 입력 부분을 클릭하면 게임이 시작되도록 해야 하기에, event listener를 이용했다.// 1. 입력 부분에 클릭했을 때 게임 시작 input.addEventListener("click", startGame);게임 화면(이상하게도 글씨가 왼쪽으로 밀린다.)이 게임화면에서는, 기존에 저장되어있는 등의 문장을 표시해야 하며 카운트다운 타이머를 실행시켜야 한다.(input과 sentence는 코드 맨 위에 document querySelector로 가져와 지정했으나 여기선 생략함. let i, err...도.)const startGame = () => { i = 0; err = 0; sec = 20; acc = 0; interval; input.removeEventListener("click", startGame); // 1-1. 문장 보여주기 sentence.textContent = sentences[i]; // 1-2. 시간초 카운트다운 시작 interval = setInterval(timer, 1000); ...const timer = () => { sec -= 1; timeH2.innerText = `${sec}S`; if (sec === 0) { gameEnd(); } };여기서 stopwatch 프로젝트에서 배웠던 setInterval를 사용하였다.끝 화면(배치가 좀 그렇다)시간 초과가 나거나 주어진 문장을 모두 입력할 경우 이 화면으로 온다. 여기서 clearInterval를 사용하였다.const gameEnd = () => { clearInterval(interval); // 3. 타임 오버 혹은 문장 전부 클리어 // 다시 시작 버튼 활성화이 아주 사소한 부분 해결 과정에서 하고자 하는 것은 setInterval과 clearInterval의 복습이다.결론setInterval()은 주어진 함수를 주어진 간격마다 실행하는 함수이다.clearInterval()은 주어진 interval의 반복을 중단하는 함수이다.예시: hello를 1초마다 콘솔에 반복 출력하는 함수const sayHello = () => { console.log("hello"); } let interval; setInterval(sayHello, 1000); clearInterval(interval); // 반복 중단

프론트엔드

Dream

[ 인프런 워밍업 클럽 Study FE 0기 ] Week 1 발자국

들어가기 앞서...2024년의 첫 해가 밝으며, 지금까지는 단순히 관심만 갖고 있었던 웹 개발에 대한 공부를 시작해보기로 결심했습니다. 먼저 HTML과 CSS의 공부를 마치니 운이 좋게 인프런에서 JS와 ReactJS 스터디를 진행한다는 소식을 듣게 되었습니다. 이런 좋은 기회를 놓치지 않겠다고 생각하고, 워밍업 클럽에 참여하게 되었습니다.발자국OT를 참가한지 엊그제 같은데 시간은 정말 순식간에 지나가는 것 같습니다. 벌써 스터디가 시작된 지 1주차가 되었습니다. 이제 그 동안의 강의 내용을 간단하게 요약하고, 회고를 남겨 보려고 합니다. 이번 주 강의는 따라하며 배우는 자바스크립트 A-Z (섹션 0~8) 부분을 진행하였습니다.요약Section 01. 자바스크립트 기초[ Console 객체 ]자바스크립트의 console 객체는 코드를 작성하고 테스트를 할 때, 사용하기 좋은 함수를 제공해준다. 다음은 강의에서 소개한 주요 Console 객체의 함수들이다.console.log(): console에 메시지를 출력한다. console.table(): console에 배열이나 객체의 데이터를 테이블 형태로 출력한다. console.error(): console에 에러 메시지를 출력한다. console.warn(); console에 경고 메시지를 출력한다. console.time(), console.timeEnd(): 세트로 사용되며, 두 함수 사이의 코드 실행 시간을 측정한다. [ var, let, const과 스코프 ]변수/상수를 선언할 때 let, const 그리고 var 키워들 사용한다. let과 const는 ES6에 새롭게 추가된 키워드이다. var 키워드는 오래된 선언 키워드로 let과 const 사용을 권장하고 있다.let: 변수 키워드, 재선언 X, 재할당O const: 상수 키워드, 재선언 X, 재할당Xvar: 재선언 O, 재할당 O 그리고 사용한 let/const와 var 키워드에 따라 스코프가 다르게 처리된다. 스코프(scope, 유효/참조 범위)란 어떠한 변수를 참조하려고 할 때, 그 변수에 접근 가능한 유효 범위이다.let/const: 모든 코드 블록 { } 내부에서 선언된 변수는 코드 블록 내에서만 유효. var: 함수 내에서 선언된 var 변수는 함수 내에서만 유효하며, 함수 내에서 블록 내·외부에 관계없이 접근 가능. [ 호이스팅 ]코드가 실행되기 전에 변수 및 함수 선언을 로컬 범위(유효 범위)의 맨 위로 끌어 올려지는 경우를 말한다.[ 자바스크립트 타입과 타입 변환 ]자바스크립트의 데이터 타입(자료형)은 다음과 같다.원시 타입: Boolean, String, Number, null, undefined, Symbol고정된 크기로 Call Stack 메모리에 저장실제 데이터가 변수에 할당참조 타입: Object, Array데이터 크기가 정해지지 않고 Call Stack 메모리에 저장데이터의 값이 Heap에 저장되며 메모리의 주소 값이 할당 자바스크립트 변수에 저장된 값은 다른 데이터 유형으로 변환될 수 있다.명시적 데이터 변환(개발자가 직접 함수를 사용해서 변환)자동 데이터 변환(자바스크립트 자체에 의해 자동으로 변환) [ 연산 및 Math ]자바스크립트에서는 기본적인 산술 연산자, 논리 연산자, 비교 연산자를 제공한다.Math를 통해 더 많은 연산을 이용할 수 있다. [ Template Literals]Backtick(`)을 사용하여 문자열을 표현한 것을 템플릿 리터럴이라고 한다. 템플릿 리터럴을 이용하면 다음과 같은 이점이 있다.줄 바꿈이 쉽다.${}을 사용하여 내부에 표현식을 포함할 수 있게 한다. [ Loops ]for: 초기식, 조건식, 증감식을 포함하는 반복문으로 주어진 조건이 참일 경우 블록 안의 코드를 반복 실행for/in: 객체의 열거 간으한 속성들을 반복하는데 사용.while: 주어진 조건이 true일 동안 코드 블록을 계속해서 실행.do/while: 먼저 코드 블록을 실행한 후, 조건을 확인한다. 그러고 나서 조건이 true일 동안 반복 실행한다. Section 02. Window 객체 및 DOM[ Window 객체 ]브라우저에 의해 자동으로 생성된다. (자바스크립트 객체 X, 브라우저에서 제공 O)이 window 객체는 다음과 같은 역할을 수행한다.브라우저에 접근 및 조작 가능자바스크립트 코드의 전역 객체 역할 [ DOM ]문서 객체 모델(Document Object Model, DOM)요소로 이루어진 HTML 파일을 Tree 구조로 표현한 객체 모델최상단에는 document 노드가 위치해 있으며, 이를 통해 DOM 접근 및 조작 가능Critical Render Path (웹 페이지 렌더링 콰정)데이터 파싱(HTML) ➔ DOM Tree 생성 ➔ CSSOM Tree 생성 ➔ JS 실행 ➔ Render Tree 생성 ➔ Layout 생성 ➔ Paint +) 강의에서 수 많은 Property 및 Method를 소개해 주셨지만 너무 많은 관계로 생략... Section 03. Event[ Event ]만약 인프런에서 로그인 버튼을 누르면 무엇이 일어날까? 당연히 로그인 페이지로 이동할 것이다. 이렇게 웹 페이지에서 발생하는 사용자의 행동에 대응하여 브라우저에서 일어나는 특정 사건을 "이벤트"라고 한다. 자바스크립트에서는 다음과 같은 이벤트가 존재한다.UI 이벤트load, change, resize, scroll, error 키보드 이벤트keydown, keyup, keypress마우스 이벤트click, dblclick, mousedown, mouseout, mouseover, mousemove, mouseup포커스 이벤트focus, blur폼 이벤트input, change, select, reset, submit, cut/copy/paste 이벤트를 등록하기 위해서는 addEventListener()를 사용하면 된다. 또한 이벤트 흐름에는 이벤트 bubbling과 Capturing라는 2가지의 기본 모델이 존재한다.[ Event Bubbling과 Event Capturing ]이벤트 bubbling은 가장 깊게 중첩된 요소에 이벤트가 발생했을 때, 이벤트가 위로 전달 되는 것을 의미한다. 이벤트 bubbling은 target 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 만약 bubbling 중단을 원한다면 event.stopPropagation()을 호출하면 된다.event.stopPropagation()DOM Tree를 통한 이벤트 흐름 중지 가능브라우저 기본 동작은 취소 X 이벤트 Capturing은 bubbling과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말한다.[ Event Delegation ]이벤트 bubbling과 이벤트 Capturing을 통해서 이벤트 위임을 이해할 수 있다. 이 이벤트 위임은 '하위 요소의 이벤트를 상위 요소에 위임하는 것'이다. Section 04. 자바스크립트 중급[ this]Method의 this: 해당 객체를 가리킨다.함수에서 this: window 객체를 가리킨다.constructor의 this: 빈 객체를 가리킨다. [ bind, call, apply]call():함수를 호출하는 함수.첫 번째 인자 값으로 어떠한 것을 전달해 주면 호출되는 함수의 this가 인자 값으로 지정apply(): call()과 유사하나 인수 부분에 배열을 넣어줘야함.bind(): 해당 함수가 지정한 인자 값을 가리키도록 하지만 call(), apply()와 다르게 직접 함수 실행 X [ 삼항 연산자 ]다음과 같은 구문을 갖는다.조건 ? true이면 반환 : false이면 반환 [ Event Loop]자바스크립트는 동기 언어이다. 하지만 가끔 비동기로 작동하는 setTimeout()를 사용하는 예시를 볼 수 있다. 자바스크립트는 비동기 코드를 작성하기 위해서 자바스크립트 이외의 도움을 받는다.[ Closure ]다른 함수 내부에 정의된 함수가 있는 경우, 외부 함수가 실행을 완료하고 해당 변수가 해당 함수의 외부에서 더 이상 엑세스할 수 없는 경우에도, 해당 내부 함수는 외부 함수의 변수 및 액세스가 가능하다. 이 기능을 Closure라고 부른다.[ 구조 분해 할당 ]배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 해주는 표현 식이다.[ Map, Filter, Reduce ]Map, Filter, Reduce은 배열 메서드의 대표적인 예시이다.map(): 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출하고 나온 결과를 모아 새로운 배열로 만들어 반환한다.filter(): 주어진 함수의 필터를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.reduce(): 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환한다.[ 얕은 비교 VS 깊은 비교 ]숫자, 문자열 등 원시 자료형은 값을 비교하게 된다. 하지만 배열, 객체 등의 참조 자료형은 참조되는 위치를 비교하게 된다. 얕은 비교를 하게 되면 원시 값의 경우 문제가 없지만 참조 값의 경우 실제 값이 아닌 저장된 위치(참조 값)이 비교되기 때문에 문제가 된다.깊은 비교를 사용하게 되면 참조 자료형도 실제 값으로 비교할 수 있게 된댜ㅏ.객체 depth가 깊지 않은 경우: JSON.stringify() 사용객체 depth가 깊은 경우: lodash 라이브러리의 isEqual() 사용[ 얕은 복사 VS 깊은 복사 ]위에서 정리한 내용처럼 복사에도 문제가 발생하게 된다. 따라서 참조 자료형의 값의 경우 깊은 복사를 사용하면 된다.JSON.stringify()lodash 라이브러리의 deepCopy[ 함수 표현식, 함수 선언문 ]함수 선언문: 함수 선언은 함수를 만들고 이름을 지정하는 것이다.일반적인 함수 선언 방식으로 function 키워드와 식별자를 표기하여 사용한다.함수 표현식은 함수를 만들고; 변수에 할당하는 것이다.익명 함수(function 키워드는 사용했으나 식별자 X), 화살표 함수 사용 Section 05. OOP[ OOP ]OOP(Object-Oriented Programming, 객체 지향 프로그래밍)란 Java 및 C를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패러다임이다. 완전 간단하게 말하자면 객체 지향 프로그래밍은 객체들의 모임이라고 할 수 있다.OOP 특징으로는 다음과 같다.추상화:불필요한 정보는 숨기고 중요한 정보 만을 표현함으로써 프로그램을 간단히 만드는 것.상속:새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있도록 해주는 것.기존 클래스: 부모 클래스, 상위 클래스새로운 클래스: 자식 클래스, 하위 클래스다형성: 하나의 틀을 가지고 여러 개의 다양한 형태를 만드는 것이다.overriding을 통하여 다형성 구현 일반적인 코드를 재사용하고 작성할 수 있다.캡슐화:클래스 안에 있는 Method, 변수 등을 하나로 묶어준다. [ class와 constructor ]class에서는 constructor라는 특별한 메서드를 제공한다. 이 constructor는 생성자로, 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 할 수 있게 해준다.클래스를 new 키워드를 붙여 인스턴스 객체로 생성하면 넘겨 받은 인자 값과 함께 constructor가 가장 먼저 실행이 된다. 따라서 이 곳에 초기화를 해야 하는 작업을 수행한다.[ Super]자바스크립트에서 super는 다음과 같은 역할을 수행한다.자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용한다.자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용한다. Section 06. 비동기[ 동기와 비동기 ]동기(Synchronous)코드를 순차적으로 실행하는 것. 즉, 한 작업이 끝나기를 기다렸다가 끝나면 다음 작업을 수행한다.각 작업이 완료될 때까지 다음 작업이 실행되지 않는다.비동기(Asynchronous)작업이 종료되지 않아도 다음 작업을 진행할 수 있는 방식비동기적인 코드는 특정 작업을 기다리지 않고 다음 작업을 계속 수행한다. [ Callbacks, ES6 Promise, ES7 Async / Await ]callbacks콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미한다.콜백 함수는 함수를 전달 받은 함수 내부에서 호출된다.단, 콜백 지옥을 맛볼 수 있다.Promise자바스크립트 비동기 처리에 사용되는 객체이다.new 키워드와 생성자를 사용해서 만들며, 생성자의 매개변수로 실행 함수를 전달한다.new Promise(실행함수) 실행 함수의 1번째 매개변수 resolve는 비동기 작업 성공 값이다.실행 함수의 2번째 매개변수 reject는 작업 실패 값이다.Promise는 다음 중 하나의 대기 상태를 갖는다.대기, 이행, 거부단, 체인 지옥이 시작된다...Async / Await비동기 코드를 마치 동기 코드처럼 작성할 수 있도록 해준다.Promise에서 than 체인 형식으로 호출하는 것보다 가독성이 좋다.await는 async 함수에서만 사용 가능하다.동기식 코드에서 사용하는 try...catch 문을 사용할 수 있다. Section 07. Symbol, Iterator, Generator[ Symbol ]ES6에 새롭게 추가된 원시 타입으로, 유니크한 식별자를 만들기 위해서 사용.단, for...in과 getOwnPropertyNames에서 제외 된다.Symbol 사용 시 기본적으로 Property가 숨겨진다. (찾을 수 있는 방법 有)따라서 for...in과 getOwnPropertyNames에서 symbol로 만든 Property가 안보인다.[ Iterator, Generator ]Iterator대표적인 예시로 배열이 있다.반복 가능한 것을 Iterable하다고 한다. for…of를 이용할 수 있다.[Symbol.iterator()] 값을 가지고 있다.Generator사용자의 요구에 따라 일시적으로 정지할 수 있고, 다시 시작할 수 있는 특별한 기능을 가지고 있다.function다음에 Asterisk (애스터리스크)를 붙인 형태로 사용한다.function*yield 키워드를 이용한다: 제너레이터 함수의 실행을 일시적으로 정지시킴. Section 08. Design Pattern[ 디자인 패턴 ]디자인 패턴은 개발자가 응용 프로그래밍나 시스템을 디자인할 때 일반적인 문제를 히결하는 데 사용할 수 있는 공식화된 모범 사례이다.- 위키 피디아다음과 같은 장점이 있다.최고의 솔루션재사용성풍부한 표현력향상된 의사 소통필요없는 코드 리팩토링코드베이스 크기 감소[ 디자인 패턴 종류 ]Singleton Pattern: 클래스의 인스턴스화를 객체 1개로 제한하는 디자인 패턴Factory Pattern: 비슷한 객체를 반복적으로 쉽게 생성하게 해주는 디자인 패턴Mediator Pattern(중재자 패턴): 객체 그룹에 대한 중앙 권한을 제공해주는 디자인 패턴Observer Pattern: event-driven 시스템을 이용하는 디자인 패턴Module Pattern: 코드를 더 작고 재사용 가능한 조각으로 분할하게 해주는 디자인 패턴 미션완벽히 해결한 미션은 다음과 같습니다.음식 메뉴 앱음식 메뉴 앱 미션은 주어진 카테고리에 해당되는 메뉴를 출력하는 웹을 구현하는 것이었습니다. 저는 카페 메뉴를 주제로 해당 웹을 구현했습니다. 다만 출력할 아이템에 대한 DB가 없어서 직접 data.json을 작성하여 처리했습니다. 미션을 해결하면서 기능 구현에는 특별한 문제가 없었으나 기능 구현보다 데이터 파일 생성이 더 오래 걸린 미션이었습니다... (출력되는 메뉴 이미지는 스타벅스 이미지를 활용했습니다.) 가위 바위 보 앱플레이어와 컴퓨터가 가위 바위 보를 하는 게임을 구현하는 미션입니다. 총 10번의 기회가 주어지며 게임에 대한 스코어 제공 및 승패 결과를 제공해야 했습니다. UI를 어떻게 구현할까 고민하다가 이미지를 추가적으로 더 넣어 구성했습니다. 컴퓨터의 가위 바위 보 선택지는 Math.random()을 이용해 처리했으며, 기능 구현에는 특별한 문제는 없었습니다.회고자바스크립트 강의를 들으며 기초를 다지고 그 지식을 바탕으로 주어진 미션을 해결하는 한 주를 보냈습니다. 특히 웹 개발이 처음이라서 미션을 해결해 나가는 시간이 정말 흥미로웠습니다. 앞으로 워밍업 클럽 Study를 진행하며 제가 얼만큼 발전할 수 있는지 궁금해지기도 합니다. 남은 기간 최선을 다해서 임해보겠습니다!

프론트엔드워밍업클럽

김예지

[인프런 워밍업 스터디 클럽 2기 FE] 오프라인 수료식 후기

 오프라인 수료식 후기 퇴근하고 판교까지 늦지 않게 갈 수 있을까 걱정했는데 다행히 여유 있게 도착해서 이름표를 받았다.안으로 들어가니 이미 많은 분들이 일찍 도착해 계셨다.  코치님이랑 다른 러너분들이랑 자기소개도 하고 피자 먹으면서 자유 네트워킹 시간을 가졌다. 발자국을 남길 때 봤던 분들을 직접 만나게 되어서 좋았다. 다들 좋으신 분들이라 오프라인 수료식에 갈지 말지 고민했던 게 무색하게 재밌던 시간이 되어서 오길 잘했다는 생각이 들었다. 잠깐의 쉬는 시간이 지나고 시작된 Q&A 시간도 좋았다. 코치님께서 하나하나 해주시는 답변들이 정말 큰 도움이 되었다. 메모를 조금 하고 싶었는데 필기도구도 안 챙겼고.. 핸드폰에 쓰면 딴짓하는 사람처럼 보일까 봐 최대한 기억만 했다.그리고 하고 싶었던 질문이 있어서 할까 말까 고민하고 있었는데 마침 다른 분이 물어봐 주셔서 내 궁금증도 같이 해소가 되었다. 다른 분들은 어떤 고민을 하고 어떤 생각을 하시는지 들을 수 있는 점도 좋았다.궁금했던 부분도 해결하고 모르는 것들도 많이 알게 되어서 유익한 시간이었다. 자유 네트워킹, Q&A 시간이 너무 빠르게 지나간 것 같아서 아쉽다는 생각이 들었다. 다른 분들이랑 얘기를 더 나누고 싶었다.  이번에 워밍업클럽 신청하길 잘한 것 같다. 3주동안 열심히 했던 만큼 성장한 부분이 있다고 생각한다.      귀여운 인프런 굿즈가 생겼다 ✌  

워밍업클럽

f1rstf1y9

[인프런 워밍업클럽 CS 2기] 3주차 발자국👣

3주차 학습내용운영체제가상메모리가상 메모리를 사용하면 프로세스는 운영체제 영역이 어디 있는지, 물리 메모리의 크기가 얼마나 큰지 몰라도 됨프로그래머는 물리 메모리의 크기와 프로세스가 메모리의 어느 위치에 올라가는지 신경 쓰지 않고 0x0번지에서 시작된다고 생각하고 프로그래밍프로세스는 메모리 관리자를 통해 메모리에 접근 -> 물리 메모리에 직접 접근할 일이 없고 메모리 관리자(MMU)에게 요청만 하면 됨메모리 관리자는 물리 메모리와 스왑 영역을 합쳐 프로세스가 사용하는 가상 주소를 물리 주소로 변환 => 동적 주소 변환(Dynamic Address Translation)물리 메모리 내용의 일부를 하드 디스크의 스왑 영역으로 옮긴 뒤 처리가 필요할 때 물리 메모리로 가져와 실행세그멘테이션(배치정책)가변분할 방식으로, 프로세스의 메모리를 다양한 크기의 논리적 단위인 세그먼트로 나누어 관리하는 메모리 관리 전략Base Address와 Bound Address정보가 담긴 세그멘테이션 테이블을 가지고 있어 이를 통해 물리 메모리 주소를 계산Base Address: 세그먼트가 물리 메모리 내에서 시작하는 위치Bound Address: 세그먼트 크기논리 주소를 MMU에 전달 => MMU는 이 논리주소가 몇 번 세그먼트 인지 알아냄 => MMU 내의 Segment Table Base Register를 이용해 물리 메모리 내에 있는 세그먼트 테이블을 찾음 => 세그먼트 테이블 내 세그먼트 번호를 인덱스로 Base Address와 Bound Address를 찾음MMU는 논리주소와 Bound Address의 크기를 비교논리주소 < Bound Address : 물리주소 = 논리주소 + Base Address논리주소 > Bound Address : 메모리 침범으로 간주하고 에러 발생장점메모리를 가변적으로 분할 가능코드, 데이터, 스택, 힙 영역을 모듈로 처리할 수 있어 메모리 보호 및 공유 기능 향상단점외부 단편화 발생페이징(배치정책)고정 분할 방식으로, 물리 메모리를 고정 크기의 블록(페이지 프레임)으로 나누고, 프로세스의 가상 메모리 역시 같은 크기의 페이지로 분할하여, 각 가상 페이지를 필요에 따라 물리 메모리의 페이지 프레임에 동적으로 매핑하는 방식페이지 : 논리 주소 공간에서 같은 크기로 나눈 블록프레임 : 물리 주소 공간에서 같은 크기로 나눈 블록CPU가 논리 주소를 전달 => MMU는 그 주소에 해당하는 페이지와 오프셋을 알아냄 => MMU 내의 PTBR(Page Table Base Register)를 이용해 물리 메모리에 있는 페이지 테이블을 찾음 => 페이지 번호를 인덱스로 해 프레임 번호를 알아낸 뒤 오프셋을 이용해 물리주소로 변환페이지 넘버 = 논리주소 / 페이지 크기오프셋 = 논리주소 % 페이지 크기물리주소 = 프레임값 + 오프셋장점외부 단편화 문제 해결논리 메모리는 물리 메모리에 저장될 때 연속되어 저장될 필요 없음단점내부 단편화 발생페이지 테이블의 크기를 적절히 유지해야 함페이지드 세그멘테이션(배치정책)메모리 관리의 두 가지 기본 접근 방식인 세그멘테이션과 페이징의 장점을 결합한 메모리 관리 전략프로그램의 메모리 공간을 논리적인 단위인 세그먼트로 나눈 다음, 각 세그먼트를 다시 고정 크기의 페이지로 분할하여 관리하는 방식메모리 접근 권한code 영역: 읽기, 실행data 영역: 읽기, (쓰기)heap 영역: 읽기, 쓰기stack: 읽기, 쓰기가상 주소에서 물리 주소로 변환될 때마다 메모리 접근 권한에 대한 검사 => 권한 위반 시 에러 발생시킴가상 주소가 들어오면 몇 번 세그먼트인지 알아냄 => 물리 메모리에 있는 페이지 테이블 찾음 => 그먼트 번호에 따라 인덱스를 참조하여 먼저 해당 세그먼트가 메모리 접근 권한을 위반하는지 검사 => 접근 권한 위반시 프로세스를 종료, 접근 권한에 부합할시 페이지 넘버와 페이지 개수를 가져옴 => 페이지 테이블에서 페이지 넘버에 따라 인덱스를 참조하여 프레임 알아냄장점각각의 세그먼트는 논리적 영역별로 나누어 독립적으로 관리 가능메모리를 효율적으로 관리단점물리 메모리에 접근하기 위해 메모리에 두 번 접근해야 디맨드 페이징(가져오기 정책)프로그램 실행 시 모든 코드와 데이터를 메모리에 적재하는 것이 아닌, 필요로 하는 데이터만을 메모리로 가져오고 쓰이지 않을 것 같은 데이터는 스왑 영역으로 이동 시키는 방식지역성 이론goto문을 사용하지 않는 이유가 되는 이론공간의 지역성 : 현재 위치와 가까운 데이터에 접근할 확률이 높다.시간의 지역성 : 최근 접근했던 데이터가 오래 전에 접근했던 데이터보다 접근할 확률이 높다.지역성 이론에 따라 조만간 쓰일 데이터만 메모리에 올리고 당분간 필요하지 않을 것 같은 데이터는 스왑 영역으로 보내 성능 향상메모리 계층 구조레지스터: CPU 1 사이클캐시(L1, L2): CPU n~nn사이클메인 메모리: CPU nnn사이클보조 저장 장치: CPU nnnnnnn사이클메모리에 접근하는 시간은 보조 저장 장치로 갈수록 느려짐디맨드 페이징은 스왑 영역을 보조 저장 장치에 저장하는데, 성능 향상을 위해서는 스왑 영역으로 데이터 이동시키는 것을 최소화해야 함가상 메모리 크기 = 메인메모리 + 스왑 영역스왑 인 : 스왑 영역에서 물리 메모리로 데이터 가져오는 것스왑 아웃 : 물리 메모리에서 스왑영역으로 데이터 내보내는 것PTE : 페이지 테이블 엔트리, 페이지 테이블을 이루는 한 행페이지 교체정책 page fault가 생겼고, 현재 메모리가 가득 차있을 때 메모리에서 스왑 영역으로 페이지를 넣고 가져와야 하는데, 이 과정에서 어떤 페이지를 스왑영역으로 옮길지를 결정하는 것random무작위로 페이지를 선택해 교체하는 방식지역성을 고려하지 않아 성능이 좋지 않음FIFO(First In First Out)메모리에 가장 먼저 적재된 페이지를 선택해 교체하는 방식하드웨어적으로 접근비트를 지원하지 않는 시스템에서 사용장점구현이 간단함단점자주 사용되는 페이지도 교체되므로 낮은 성능Optimum앞으로 가장 오랫동안 쓰이지 않을 페이지를 선택해 교체하는 방식가장 오랫동안 쓰이지 않을 페이지를 알 수 없으므로 이론적으로만 존재하는 방식이며 다른 정책과 성능을 비교하기 위한 참조용으로만 쓰임LRU(Least Recently Used)최근 가장 사용이 적은 페이지를 선택해 교체하는 방식지역성 이론의 시간 지역성에 따른 방식장점FIFO에 비해 효율적단점프로그램이 지역성을 띄지 않을 때 성능 저하시간을 기록하기 위한 많은 bit 필요하며 시간이 오래되면 오버플로우 발생접근 시간을 기록하기 위한 추가적 메커니즘 필요Clock AlgorithmLRU와 비슷모든 페이지에 접근 비트를 하나만 사용하여 일정 시간 간격마다 모든 페이지의 접근 비트를 0으로 초기화하며 페이지가 참조될 때 접근 비트를 1로 설정, 클락 핸드가 시계방향으로 페이지들을 순환하며 사용 비트가 0인 페이지를 선택해 교체하는 방식Enhanced Clock Algorithm접근 비트와 변경 비트를 동시에 두고 교체할 페이지를 선택하는 방식교체 1순위: 접근 비트 0 / 변경 비트 0교체 2순위: 접근 비트 0 / 변경 비트 1교체 3순위: 접근 비트 1 / 변경 비트 0교체 4순위: 접근 비트 1 / 변경 비트 12차 기회 페이지 교체 알고리즘하드웨어적으로 접근비트를 지원하지 않는 시스템에서 사용되어야 하는 FIFO의 단점이었던 자주 사용되는 페이지의 교체 문제를 개선한 방식먼저 들어왔지만 Page Fault 없이 페이지 접근에 성공한 경우 자주 사용되는 페이지이므로 해당 페이지를 큐의 맨 뒤로 이동시켜 수명을 연장시키는 알고리즘성능 : FIFO < 2차 기회 페이지 교체 알고리즘 < LRU스레싱운영체제는 CPU사용량을 늘리려 함 => 사용량을 늘리려고 멀티프로그래밍 정도를 늘리려고 하는데 무작정 늘려버리면 오히려 스왑작업이 많아져서 사용량이 줄어들게 됨 => 해당 상황이 스레싱원인 : 물리메모리의 크기가 작은 것해결 방법메모리 크기 증가프로세스에 적절한 페이지의 수 할당 한 프로세스에 많은 페이지 할당시 다른 프로세스의 페이지가 줄어들어 낮은 효율한 프로세스에 적은 페이지 할당시 빈번한 Page Fault 발생으로 스래싱 발생프로세스에 맞게 유지할 페이지 결정워킹셋 : 현재 사용중인 페이지들은 자주 사용될 확률이 높기 때문에 이를 통째로 메모리에 올리는 것주변장치(I/O 디바이스, 저장장치)그래픽 카드, 하드디스크, SSD, 키보드, 마우스 등주변 장치 분류캐릭터 디바이스데이터 전송단위가 character로, 상대적으로 크기가 작다.마우스, 키보드, 사운드카드, 직렬/병렬 포트 블록 디바이스데이터 전송단위가 block으로, 상대적으로 크기가 작다.하드디스크, SSD, 그래픽카드 등입출력 버스 구조초기 : 버스 하나에 주변 장치를 모두 연결CPU가 작업을 진행하다가 입출력 명령을 만나면 직접 입출력장치에서 데이터를 가져오는 폴링 방식 이용 => CPU 사용률이 낮아짐현재 : 입출력 제어기(I/O Controller)와 여러개의 버스 추가CPU는 I/O 작업 발생 시 입출력 제어기에 이를 맡기고 다른 작업 진행메모리가 입출력 제어기에 직접 연결하기 위해 DMA(Direct Memory Access)를 추가하고 사용하는데 이를 Memory Mapped I/O라고 부름마우스/키보드광학 마우스 작동 원리마우스 밑면에 작은 카메라 탑재, 초당 1500회가 넘는 사진을 찍어 디바이스 컨트롤러 내 DSP로 보냄DSP는 사진을 분석해 마우스의 x축 좌표와 y축 좌표 움직임 분석디바이스 컨트롤러는 CPU에게 인터럽트를 보내고 마우스 드라이버가 동작해 데이터 읽음마우스 드라이버는 운영체제에게 이벤트 신호를 보내고 운영체제는 이 이벤트를 Foreground 애플리케이션으로 전달해당 애플리케이션은 받은 마우스 이벤트 처리, 해당 동작 수행키보드 작동 원리사용자가 키 입력디바이스 컨트롤러가 어떤 키를 입력 받았는지 알아냄CPU에게 인터럽트 보냄키보드 드라이버는 운영체제에 이벤트를 보내고 운영체제는 이 이벤트를 Foreground 애플리케이션으로 전달해당 애플리케이션은 받은 키보드 이벤트 처리, 해당 동작 수행   하드디스크/Flash Memory(SSD)블록 디바이스의 한 종류하드 디스크 구조spindle이라고 하는 막대가 있고 그곳에는 platter라는 원판들이 붙어 있음. disk arm이 platter의 값을 읽음. platter > track > sector구조하드 디스크 작동 원리유저 프로세스가 하드디스크의 특정 섹터에 접근 요청(실린더 C로 가서 트랙 B에 있는 섹터 D를 읽어라)seek: 디스크암은 헤드를 실린더 C로 이동.seek Time: 헤드를 실린더로 이동시키는 시간으로, 하드디스크가 느린 이유트랙 B의 섹터D가 헤드에 닿을때까지 스핀들 회전헤드에 섹터D가 읽히면 작업 종료단점속도 느리고 소음 발생자석을 대면 데이터 손상 충격에 약함Flash Memory장점전기적으로 데이터를 읽어 속도가 빠르고 조용하다 자석을 대도 데이터 보존 충격에 강함단점특정 부분에 데이터를 쓴 경우 덮어쓰기 불가 및 데이터 삭제 횟수가 정해져있어 같은 부분에 데이터 삽입과 삭제를 반복할 경우 망가져 사용 불가 파일과 파일시스템파일들은 하드디스크나 SSD같은 저장 장치에 저장되는데, 사용자가 직접 저장하면 손상시킬 수 있어 운영체제가 안전하게 저장파일 시스템 기능파일과 디렉토리 생성파일과 디렉토리 수정/삭제파일 권한 관리무결성 보장백업과 복구암호화파일 제어 블록 = 파일 디스크립터모든 파일마다 있고 오픈되면 메모리로 이동운영체제가 관리하고 사용자는 접근할 수 없음파일의 분류순차파일구조카세트테이프들어온 순서대로 작동하기에 공간의 낭비가 없고 구조가 단순특정지점으로 바로 이동이 어려움직접파일구조해시 함수를 통해 저장 위치를 정하는 방식(json도 이 방식 사용)데이터 접근이 매우 빠름해시함수를 잘 골라야 하며 저장공간이 낭비될 수 있음인덱스 파일구조앞선 두 가지 방식을 합친 것노래 재생목록디렉토리파일과 다른 디렉토리를 포함할 수 있는 컨테이너파일을 주제나 유형별로 그룹화하여 조직화할 수 있음디렉토리도 하나의 파일로, 파일이 데이터를 저장한다면 디렉토리는 파일 정보를 저장디렉토리 구조계층적 구조 : 최상위에 루트 디렉토리(/) 존재초기 : 루트 디렉토리에만 디렉토리가 존재할 수 있고 다른 디렉토리에서는 하위 디렉토리를 만들 수 없는 구조현재 : 다단계 디렉토리 구조로, 모든 디렉토리가 하위 디렉토리를 만들 수 있는 트리구조파일과 디스크디스크는 블록(1~8kB)으로 나뉘어있음. 파일시스템은 파일정보를 파일 테이블로 관리하고, 파일이 시작하는 블록 위치 정보도 기록되어있음.파일 할당 방식연속 할당블록들을 디스크에 연속적으로 저장하는 방식시작블록만 알면 나머지도 알 수 있으나 내부단편화가 발생 -> 그래서 사용하지 않음불연속 할당디스크의 비어있는 공간에 집어넣고 파일시스템이 두가지 방식으로 관리연결 할당파일에 속한 데이터를 연결리스트로 관리파일 테이블에는 시작 블록에 대한 정보만 저장하고 다른 블록은 연결리스트를 통해 접근인덱스 할당(i-node 방식)파일 테이블의 블록 포인터가 데이터 블록에 직접 연결하는것이 아닌, 데이터들의 인덱스를 가지고 있는 인덱스 블록에 연결데이터가 많아 테이블이 꽉 찬 경우 인덱스 블록을 더 만들어 연결하기 때문에 테이블 확장 가능파일 크기가 작다면 데이터를 바로 참조하는 블록 포인터 이용, 파일 크기가 크다면 간접 포인터를 이용해 많은 데이터에 접근 가능디스크를 구성하는 블록의 크기가 너무 작으면 공간 낭비는 줄지만 관리해야 할 블록의 수가 많아지고, 블록의 크기가 너무 크면 관리해야하는 블록의 수는 적지만 내부단편화로 낭비되는 공간이 많아짐빈공간을 찾을 때 항상 모든 공간을 찾는것보다는 빈공간 리스트를 만들고 삭제한 후에 리스트에 빈 공간의 주소를 추가하는 방식이 좋음알고리즘정렬 - 삽입정렬장점 : 간단한 이해와 구현단점 : 낮은 성능A = [34, 58, 13, 94, 29] # 이미 정렬된 부분이라고 가정하는 0번째 요소를 제외한 나머지 부분 순회 for i in range(1, len(A)): # 이미 정렬된 부분(0번째~i-1번째)에서 자리 찾기 # 뒤에서부터 훑으면서 큰 원소들을 만날 때마다 교환 for j in range(i-1, 0, -1): if A[j+1] > A[j]: break A[j], A[j+1] = A[j+1], A[j]정렬 - 병합정렬정렬해야 할 것을 아주 잘게 나눈 다음 정렬하고 병합하는 것을 반복하는 정렬 방법장점 : O(nlogn)의 좋은 성능단점 : 이해와 구현 어려움, 시스템의 스택 크기가 큰 데이터를 정렬할 때 제한적def merge_sort(unsorted_list): # 리스트를 더 이상 나눌 수 없으면 해당 리스트를 그대로 리턴 if len(unsorted_list) <= 1: return unsorted_list # 리스트를 반으로 나누기 mid = len(unsorted_list)//2 # 왼쪽 부분을 재귀적으로 정렬 left = merge_sort(unsorted_list[:mid]) # 오른쪽 부분을 재귀적으로 정렬 right = merge_sort(unsorted_list[mid:]) # left, right 리스트를 처음부터 순회하기 위한 인덱스 초기화 left_idx = right_idx = 0 # 정렬된 left, right 두 리스트를 병합한 결과를 저장할 리스트 초기화 merged = [] # 왼쪽과 오른쪽 리스트의 앞부분 부터 비교해가며 병합 while (left_idx < len(left) and right_idx < len(right)): # 현재 가리키고 있는 왼쪽 값이 오른쪽 값보다 작으면 왼쪽 값을 병합리스트에 추가하고, 왼쪽 인덱스에 1 더하기 if right[right_idx] > left[left_idx]: merged.append(left[left_idx]) left_idx += 1 # 현재 가리키고 있는 오른쪽 값이 왼쪽 값보다 작으면 왼쪽 값을 병합리스트에 추가하고, 왼쪽 인덱스에 1 더하기 else: merged.append(right[right_idx]) right_idx += 1 # 왼쪽 리스트에 남은 값이 있으면 병합 리스트에 추가 while (left_idx < len(left)): merged.append(left[left_idx]) left_idx += 1 # 오른쪽 리스트에 남은 값이 있으면 병합 리스트에 추가 while (right_idx < len(right)): merged.append(right[right_idx]) right_idx += 1 # 병합된 결과 리턴 return merged A = [34, 58, 13, 94, 29] A = merge_sort(A)정렬 - 퀵정렬배열의 값 중 한가지를 피벗으로 설정 (피벗 설정 방법은 여러가지)맨 왼쪽, 맨 오른쪽, 양쪽 이동 값을 만든다장점 : O(nlogn)의 좋은 성능단점 : 이해와 구현 어려움, 최악의 경우 시간복잡도가 O(n^2)A = [34, 58, 13, 94, 29] def quick_sort(low, high): if low < high: # pivot을 가장 큰 값으로 임의로 선택 pivot = A[high] # 현재 pivot보다 작은 부분의 마지막 요소의 인덱스 # 주어진 리스트 안에서 pivot보다 작은 요소의 개수 - 1 i = low - 1 # 분할 과정 for j in range(low, high): # low부터 high-1까지 순회 # pivot보다 작은지 확인 if A[j] <= pivot: i = i + 1 A[i], A[j] = A[j], A[i] # 작은 부분(왼쪽 부분)으로 옮기기 # 작은 부분의 마지막 요소의 바로 뒤 요소와 pivot을 교환 # pivot을 기준으로 pivot보다 작은 원소는 왼쪽으로, 큰 원소는 오른 쪽으로 배치 A[i+1], A[high] = A[high], A[i+1] # 분할 과정 이후 pivot의 최종 위치 pivot_idx = i + 1 # 재귀적 정렬 - 왼쪽 부분 정렬 quicksort(low, pivot_idx - 1) # 재귀적 정렬 - 오른쪽 부분 정렬 quick_sort(pivot_idx + 1, high) # 초기 호출 quick_sort(0, len(A)-1)동적 프로그래밍 - 메모이제이션계산 결과를 저장해서 여러번 계산하지 않도록 하는 기법계산 결과를 해시 테이블에 저장하고 재사용해 속도가 빠르다 .하향식 계산 방식으로 문제를 해결동적 프로그래밍 - 타뷸레이션계산에 필요한 모든 값을 전부 계산 후 테이블에 저장하는 기법상향식 계산 방식으로 문제를 해결회고3주간의 워밍업클럽 2기가 마무리되었다. 끝나고 회고를 작성하면서 드는 생각은 이것저것 챙기려고 하다보니, 3주간 약간은 쫓기면서 수업을 수강하진 않았는가 하는 아쉬움도 들고, 그럼에도 혼자 수강했다면 절대 완강하지 못했을 거란 생각이 들어서 참여하길 잘했다고 생각한다!알고리즘 공부는 개인적으로도 필요성을 많이 느껴서 블로그에 정리도 해보고, 따로 이런저런 글도 많이 읽어서 익숙했는데 운영체제는 사실 예전에 CS 면접 준비를 위해 잠깐 슥 겉핥기로 훑어본게 전부였고, 그때도 제대로 이해하진 못해서 좀 걱정되는 부분도 있었다. 다행히 친절한 난이도의 강의와 설명 덕분에 큰 무리없이 강의를 수강할 수 있었다. 기회가 된다면 다시 강의를 한바퀴 돌리면서 좀 더 개념을 확실히 익히고 추가적으로 궁금한 점이 생기는 부분을 더 깊게 파고들어보고 싶다. 일단은 기초 개념을 잡았다는 것에 만족:-)이제 워밍업 클럽은 끝났지만, 이걸로 공부를 완전히 끝내서는 당연히 안될 것이다. 인프런에 올린 발자국의 배운 내용 요약은 내가 강의를 들으면서 휘갈겼던(..) 노트를 그대로 옮긴거라, 추후엔 내 블로그에 이해한 내용을 나만의 방식으로 정리한 것과 강의를 들으면서 생겼던 의문, 그리고 그 의문에 대한 답 등등..을 정리하며 추가적으로 공부할 예정이다. (제발 하길...)워밍업 클럽 2기 안녕👋

f1rstf1y9

[인프런 워밍업클럽 CS 2기] 2주차 발자국👣

2주차 학습 내용운영체제CPU 스케줄링 알고리즘 - SJF(Shortest Job First)Burst Time이 짧은 프로세스를 먼저 실행하는 알고리즘이론적으론 FIFO보다 성능이 좋지만, 구현에 문제가 발생할 수 있음어떤 프로세스가 얼마나 실행될지 예측 어려움Burst Time이 긴 프로세스는 아주 오랫동안 실행되지 않을 수도 있음CPU 스케줄링 알고리즘 - Round Robin한 프로세스에게 일정 시간만큼 CPU를 할당하고, 할당 시간이 지나면 강제로 다른 프로세스에게 일정 시만큼 CPU를 할당하는 알고리즘프로세스에게 할당하는 일정 시간 => 타임 슬라이스, 타임 퀀텀타임 슬라이스의 값에 따라 RR 알고리즘의 성능이 크게 바뀜타임 슬라이스가 큰 경우(무한대라고 가정)먼저 들어온 프로세스의 작업이 종료될 때까지 실행 => FIFO 알고리즘이 됨타임 슬라이스가 작은 경우(1ms라고 가정)컨텍스트 스위칭이 너무 자주 일어남프로세스 처리량보다 컨텍스트 스위칭을 처리하는 양이 더 커짐 => 오버헤드가 너무 큼최적의 타임 슬라이스 : 사용자가 느끼기에 여러 프로세스가 버벅거리지 않고, 동시에 실행되는 것처럼 느껴지면서 오버헤드가 너무 크지 않는 값Windows는 20ms, Unix는 100ms 정도 CPU 스케줄링 알고리즘 - MLFQ(Multi Level Feedback Queue)오늘날 운영체제에서 가장 일반적으로 쓰이는 CPU 스케줄링 기법기본적으로 CPU 사용률과 I/O 사용률이 좋게 나오는 작은 크기의 타임 슬라이스를 선택하되, CPU Bound Process들에게는 타임 슬라이스를 크게 줌CPU를 사용하는 프로세스가 스스로 CPU를 반납하면 I/O Bound Process일 확률이 높고, 실행 도중 CPU 스케줄러에 의해 강제로 CPU를 뺏기는 상황이 발생하면 CPU Bound Process일 확률이 높음우선순위 큐를 여러 개 준비하여, 우선순위가 높으면 타임 슬라이스 크기가 작고, 우선순위가 낮으면 타임 슬라이스 크기가 커짐처음엔 타임 슬라이스가 작게 할당되어있다가, CPU가 강제로 뺏기면 좀 더 큰 타임 슬라이스를 할당받게 됨프로세스 간 통신프로세스는 독립적으로 실행되기도 하지만, 다른 프로세스와 데이터를 주고받으며 통신을 하는 경우도 있음한 컴퓨터 내에서 프로세스 간 통신하는 방법파일을 이용하는 방법통신하려는 프로세스들이 하나의 파일을 이용해 읽고 쓰는 방법파이프를 이용하는 방법운영체제가 생성한 파이프를 이용해 데이터를 읽고 쓰는 방법한 프로세스 내에서 쓰레드 간 통신하는 방법데이터 영역의 전역 변수나 힙을 이용해 통신네트워크를 이용한 방법운영체제가 제공하는 소켓통신이나 다른 컴퓨터에 있는 함수를 호출하는 RPC(원격 프로시저 호출)를 이용해 통신공유자원과 임계구역공유자원프로세스가 통신할 때 공동으로 이용하는 변수, 파일 등여러 프로세스가 공유하고 있기 때문에 각 프로세스의 접근 순서에 따라 결과가 달라질 수 있음임계 구역(Critical Section)여러 프로세스가 동시에 사용하면 안되는 영역경쟁 조건(Race Condition) : 공유 자원을 서로 사용하기 위해 경쟁하는 것임계 구역 문제를 해결하기 위한 조건상호 배제(Mutual Exclusion) 메커니즘 필요임계 구역엔 주어진 시간에 항상 하나의 프로세스만 접근할 수 있어야 한다동시에 여러 개의 요청이 있더라도 하나의 프로세스의 접근만 허용한다.임계 구역에 들어간 프로세스는 빠르게 나와야 한다.세마포어프로세스들은 대기 큐에서 공유 자원을 사용하기 위해 대기하고, 운영 체제가 관리하는 열쇠를 가진 프로세스만 공유 자원을 사용할 수 있음 => 이때 이 열쇠를 세마포어(정수형 변수)라고 함공유 자원의 개수에 따라 세마포어의 값 또한 달라짐wait() : 열쇠를 요청해서 열쇠를 받고 문을 잠금. 열쇠가 없으면 기다림signal() : 방에서 나와 문지키는 직원에게 열쇠 반납단점 : wait() 함수, signal() 함수의 순서를 이상하게 호출해서 세마포어를 잘 못 사용할 가능성이 있음 => 모니터로 해결!모니터운영체제가 처리하는 것이 아닌, 프로그래밍 언어 차원에서 지원하는 방법Java에서 synchronized라는 키워드가 붙으면, 이 키워드가 붙은 함수들은 동시에 여러 프로세스에서 실행시킬 수 없음 = 상호배제가 완벽하게 이루어짐만약 프로세스 A에서 increase() 함수를 실행하면, 프로세스 B는 synchronized 키워드가 붙은 decrease() 함수도 실행할 수 없음교착상태(데드락)여러 프로세스가 서로 다른 프로세스의 작업이 끝나길 기다리다가 아무도 작업을 진행하지 못하는 상태교착상태의 필요 조건 (한가지라도 충족하지 않으면 교착상태 발생 X)상호배제 : 어떤 프로세스가 한 리소스를 점유했다면, 그 리소스는 다른 프로세스에게 공유되면 안됨 비선점 : 프로세스 A가 리소스를 점유하고 있는데 프로세스 B가 리소스를 빼앗을 수 없어야 함 점유와 대기 : 어떤 프로세스가 리소스A를 가지고 있는 상태에서 리소스 B를 원하는 상태여야 함 원형 대기 : 점유와 대기를 하는 프로세스들의 관계가 원형을 이루고 있어야 함 교착 상태의 네가지 조건을 이용해서 교착상태를 예방하는 방법을 연구해보고자 했으나, 제약이 많고 비효율적이라 해결하는 방법을 연구함교착상태 회피(Deadlock avoidance)프로세스들에게 자원을 할당할 때 어느정도 자원을 할당해야 교착상태가 발생하는지 파악해서 교착상태가 발생하지 않는 수준의 자원 할당을 함전체 자원의 수와 할당된 자원의 수를 기준으로 안정 상태, 불안정 상태로 나눔운영체제는 최대한 안정 상태를 유지하려고 자원할당 함불안정 상태에 있더라도 무조건 교착 상태에 빠지는 것이 아닌, 교착 상태에 빠질 확률이 높아짐운영체제에서 은행원 알고리즘 구현하기안정상태은행원 알고리즘은 각 프로세스가 현재 요구할 수 있는 요청이 예상되는 자원을 구함  P1에서 4개를 요청하면 현재 사용 가능 자원이 2개뿐이므로 거절P2에서 2개를 요청하면 2개 모두 P2에 할당, P2는 작업을 마치고 6개를 반납사용 가능한 자원이 6개가 되어, P1, P3 모두에 필요한 만큼 할당 가능불안정 상태사용 가능한 자원이 1개현재 사용 가능한 자원 개수로는 P1, P2, P3가 요청할 수 있는 최대 요청인 2개를 충족하지 못함 => 불안정 상태모든 프로세스가 최대 자원을 요청하지 않는다면 교착 상태에 빠지지 않을 수도 있지만, 불안정상태에 빠지지 않도록 유지하는게 좋음교착상태의 검출 방식가벼운 교착 상태 검출프로세스가 일정 시간 동안 작업을 진행하지 않는다면 교착상태가 발생했다고 간주해결 방법 : 일정 시점마다 체크포인트를 만들어 작업을 저장하고 타임아웃으로 교착 상태가 발생했다면 마지막으로 저장했던 체크포인트로 롤백무거운 교착 상태 검출자원 할당 그래프 이용현재 운영체제에서 프로세스가 어떤 자원을 사용하는지 지켜보고 교착 상태가 발생했다면 해결그래프에 순환 구조가 생긴다면 교착 상태가 생긴 그래프교착 상태를 검출하면 교착 상태를 일으킨 프로세스를 강제 종료시키고, 다시 실행시킬 때 체크포인트로 롤백단점 : 운영체제가 지속적으로 자원할당그래프를 유지하고 검사해야하므로 오버헤드가 발생장점 : 가벼운 교착상태에서 발생하는 억울하게 종료되는 프로세스는 발생하지 않음메모리 종류레지스터가장 빠른 기억장소, CPU 내에 존재휘발성 메모리 - 컴퓨터의 전원이 꺼지면 데이터가 사라짐CPU를 구분할 때 말하는 32bit, 64bit는 레지스터의 크기를 말함CPU는 계산을 할 때, 메인메모리에 있는 값을 레지스터로 가져와 계산하고, 결과는 메인메모리에 저장캐시휘발성 메모리레지스터는 굉장히 빠르고, 메인메모리는 너무 느림 => 메인 메모리에 있는 값을 레지스터로 옮기려면 한참 걸리므로 필요할 것 같은 데이터를 미리 가져와서 캐시에 저장성능의 이유로 여러개를 둠메인메모리(RAM)실제 운영체제와 다른 프로세스들이 올라가는 공간전원이 공급되지 않으면 데이터가 지워지므로 휘발성 메모리하드디스크나 SSD보다 속도는 빠르지만, 가격이 비싸므로 데이터를 저장하기 보다는 실행 중인 프로그램만 올림 보조저장장치(HDD, SSD)사무용 프로그램, 게임, 작업한 파일 등을 저장할 필요가 있는데, 비싸고, 휘발성인 메모리에 저장할 순 없음가격이 저렴하고 전원이 공급되지 않아도 데이터가 지워지지 않는 비휘발성 메모리를 만듦 메인메모리오늘날의 컴퓨터 구조인 폰 노이만 구조는 모든 프로그램을 메모리에 올려 실행시킴운영체제는 메모리를 관리하기 위해 1바이트 크기로 구역을 나누고 숫자를 매김 => 이 숫자는 "주소"라고 부름물리 주소와 논리 주소물리 주소 : 메모리를 컴퓨터에 연결하면 0x0번지부터 시작하는 주소 공간논리 주소 : 사용자 관점에서 바라본 주소 공간사용자는 물리 주소를 몰라도 논리 주소로 물리 주소에 접근할 수 있음경계 레지스터메모리에는 수많은 프로세스가 올라오는데, 운영체제를 위한 공간은 따로 마련해둠. 이때,하드웨어적으로 운영체제 공간과 사용자 공간을 나누는 경계 레지스터를 만듦메모리 할당 방식유니 프로그래밍메모리 오버레이유니프로그램 방식에서 메모리보다 더 큰 프로그램을 실행시키는 방법큰 프로그램을 메모리에 올릴 수 있도록 잘라서 당장 실행시켜야 할 부분만 메모리에 올리고 나머지는 용량이 큰 하드디스크의 스왑 영역에 저장하는 기법멀티프로그래밍가변 분할 방식(세그멘테이션)프로세스의 크기에 따라 메모리를 나누는 방식장점 : 내부 단편화 없음단점 : 외부 단편화 발생고정 분할 방식(페이징)프로세스의 크기와 상관 없이 메모리를 정해진 크기로 나누는 방식 장점 : 구현이 간단하며 오버헤드가 적음단점 : 작은 프로세스도 큰 영역에 할당돼서 공간이 낭비되는 내부 단편화 발생버디 시스템오늘날 가변 분할 방식과 고정 분할 방식을 혼합하여 단점을 줄인 방식2의 승수로 메모리를 분할해 메모리를 할당하는 방식가변 분할 방식처럼 프로세스 크기에 따라 할당되는 메모리 크기가 달라지고, 외부 단편화를 방지하기 위해 메모리 공간을 확보하는 것이 간단함고정 분할 방식처럼 내부 단편화가 발생하긴 하지만 많은 낭비가 발생하진 않음알고리즘재귀(recursion)어떠한 것을 정의할 때 자기 자신을 참조하는 것재귀 함수탈출 조건이 없으면 콜스택이라는 메모리 공간이 가득차서 자동으로 종료언제 종료될지 예측할 수 있게 하기 위해 탈출 조건, 즉 기저 조건이 반드시 필콜스택함수가 호출되면서 올라가는 메모리 영역, 스택이라고도 부름FILO(먼저 들어온 데이터가 나중에 나감) 특성을 가짐함수를 호출하면 함수는 콜스택에 올라가고, 종료되면 콜스택에서 제거됨버블 정렬(Bubble Sort)앞에 있는 숫자와 뒤에 있는 숫자를 비교해서 자리를 바꾸는 알고리즘데이터를 옆 데이터와 비교하면서 자리를 바꾸는게 버블이 일어나는 것 같아서 붙여진 이름시간복잡도 : O(n^2)장점 : 이해와 구현이 쉽다단점 : 성능이 좋지 않다.function BubbleSort(arr){ for(let i = 0; i < arr.length - 1; i++){ for(let j = 0; j < (arr.length - i - 1); j++){ if(arr[j] > arr[j + 1]){ let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } }선택 정렬 (Sellection Sort)배열의 정렬되지 않은 영역을 순회하며 가장 작은 값을 탐색 후 교체하는 방법시간복잡도 : O(n^2)장점 : 이해와 구현이 쉽다단점 : 성능이 좋지 않다function SelectionSort(arr){ for(let i = 0; i < arr.length - 1; i++){ let minValueIndex = i; for(let j = i + 1; j < arr.length; j++){ if(arr[j] < arr[minValueIndex]){ minValueIndex = j; } } let temp = arr[i]; arr[i] = arr[minValueIndex]; arr[minValueIndex] = temp; } }회고칭찬하고 싶은 점이번 주부터 알고리즘 스터디를 시작하고, 또 매일 출근도 하면서 오늘 있었던 코딩테스트까지 일주일 간 이것저것 할일이 많았는데 포기하지 않고 이번주차 진도를 따라잡았다. CS 중에서도 운영체제는 개념이 잘 잡혀있지 않았는데, 공부를 하면서 운영체제에서 가장 중요한 개념인 프로세스와 CPU 스케줄링에 대해 어느정도 개념을 이해할 수 있는 일주일이었다.아쉬웠던 점이번주에도 역시나 매일매일 정해진 분량을 학습하기보다는 시간이 남는 타임에 몰아들은 경우가 더 많았던 것 같다.보완해야할 점남은 일주일도 바쁠 예정이기 때문에..현실적으로 매일매일 정해진 분량을 지켜서 노트까지 정리해가며 학습하기엔 벅차더라도, 지난 주처럼 너무 한번에 몰아서 하지 말고 출퇴근 시간을 이용해서 강의를 가볍게 보고 추후에 다시 복습하는 개념으로 노트를 정리하면 좋을 것 같다.

워밍업클럽CS발자국

rhkdtjd_12

인프런 워밍업 클럽 2기 - CS 전공지식 스터디 3주차 마지막 발자국

 3주차 회고1주일에 3회 발표 하는 방식의 복습 스터디가 3주만에 드디어 끝이 났다.팀원 분들이 없었다면 나는 아마 완강도 못했을것같다. 사실 이렇게 1주일에 3번의 스터디를 한다는거와 그중 1번은 무조건 발표 해야 한다는것은 굉장히 부담이다.근데 무려 참석률 100% 를 달성하며 무사히 스터디를 마칠 수 있었던것은 정말 좋은 스터디원들을 만났기 때문이다.스터디는 확실히 나에게 좋은 영향력을 끼친것 같다. 우선적으로 내가 공부하는 방법에 대해서 고민하게 되었다. 원래 내가 강의를 공부하는 방법은 강의를 한번 보면서 중요한것들만 요약하면서 공부를 했었다. 근데A팀원분은 강의를 보면서 1차 정리를 하고 그다음에 한번더 2차정리를 하신다고 한다. 그러한 과정에서 이제 그림 그리면서 내용을 정리 하시는데 확실히 이렇게 2회독 정도 하면서 그림과 설명을 붙여가면서 정리를 하니까 복습도 잘되고 이해도 잘되는것 같았다.B팀원분은 강의를 빠르게 1번 보고 2번째 볼때 꼼꼼하게 정리를 하신다고 하셨다. 근데 꼼꼼하게 정리한다는것이 나 같은 경우에는 강의에 있는 내용들만 보통 보고 넘어간다면 이분은 좀 더 자세하게 다른 서적이나 자료들을 찾아보면서 연관되는 내용들도 함께 공부하신다. 확실히 CS 개념들을 정확하게 짚고 넘어가려면 이렇게 꼼꼼하게 공부하는게 맞는것 같다. 왜냐하면 운영체제에 대한 질문이 들어오고 강의에 대한 내용만 기억하고 있다면 첫번째 질문에는 답변 할 수 있겠지만 그에 맞는 꼬리 질문이 들어온다면 아마 대답하지 못할것이기 때문이다.앞으로 나에게 맞는 공부방법을 변형해가면서 연구 해봐야겠다. 추가적으로 해당 CS정리를 잘 하고 난후에 어떻게 해당 내용들을 개발 관련일을 하면서 휘발 되지 않고 오래 기억에 가져갈 수 있는지에 대한 고민도 해봐야겠다. 끝으로 마지막 발표 자료 캡쳐로 마무리 짓겠다.3주차 학습 요약운영체제가상메모리 개요: 물리 메모리의 한계를 극복하여 프로그램이 실제 메모리 크기와 상관없이 실행될 수 있게 해줌. 스왑 영역과 함께 사용.세그멘테이션과 페이징:세그멘테이션: 프로그램을 함수나 모듈로 나누어 할당. 외부 단편화 o, 내부 단편화 x페이징: 메모리를 동일 크기로 나누어 할당. 외부 단편화x . 내부 단편화 o혼용기법 (페이지드 세그멘테이션): 세그멘테이션과 페이징의 장점을 결합.디맨드 페이징: 자주 쓰이는 데이터만 메모리에 로드. 페이지 교체 알고리즘 사용.스레싱과 워킹셋: 과도한 스왑 작업으로 인해 성능 저하가 발생하는 현상. 워킹셋은 자주 쓰이는 페이지 집합을 유지.주변장치: 캐릭터 디바이스(마우스, 키보드)와 블록 디바이스(하드디스크, SSD)로 구분됨. DMA로 메모리에 접근.파일과 파일시스템: 파일 관리자는 파일 생성, 수정, 삭제, 권한 관리 등을 수행. 디렉토리는 파일을 체계적으로 관리하기 위한 구조.자료구조와 알고리즘정렬 알고리즘:삽입정렬: 이미 정렬된 부분에 새 값을 삽입. 시간복잡도 O(n²).병합정렬: 재귀적으로 나눈 후 병합. 시간복잡도 O(n log n).퀵정렬: 피벗을 기준으로 좌우 분할. 평균 시간복잡도 O(n log n), 최악 O(n²).동적 프로그래밍:메모이제이션: 재귀로 계산 시 결과를 저장해 중복 계산을 피함. 하향식 접근.타뷸레이션: 상향식으로 필요한 값을 모두 미리 계산해 테이블에 저장.

알고리즘 · 자료구조알고리즘자료구조운영체제

하얀종이개발자

인프런 워밍업 클럽 2기 - CS 전공지식 스터디 3주차 마지막 발자국

운영체제 3주차 학습 요약 가상메모리컴퓨터의 물리적 메모리의 크기를 확장하기 위해 사용되는 기술운영체제가 각 프로세스마다 독립적인 메모리공간을 할당할 수 있게 해줌이때문에 프로그래머는 프로그램이 메모리 어디에 위치하는지 신경쓰지 않고, 0부터 시작된다고 생각하고 프로그래밍 함동적주소변환 (DAT)메모리관리자가 가상메모리의 논리주소를 물리주소로 변환하는 것을 말함세그멘테이션 분할 방식에서 논리 주소를 물리주소로 변환메모리관리자는 CPU에서 받은 논리주소를 세그멘테이션 테이블을 이용하여 물리주소를 찾음페이징 분할 방식에서 논리 주소를 물리주소로 변환메모리관리자는 CPU에서 받은 논리주소를 페이지 테이블을 이용하여 물리주소를 찾음페이지드 세그멘테이션 분할 방식에서 논리 주소를 물리주소로 변환세그멘테이션 테이블의 속성값으로 페이지 테이블의 인덱스를 추가할 수 있게하여 세그멘테이션, 페이지 테이블을 모두 이용해서 물리주소를 찾음가상메모리는 세그멘테이션으로 분할되어 있고, 물리메모리는 페이징으로 분할되어 있어 각 분할방식의 장점을 취할 수 있게 함메모리 접근권한세그멘테이션 테이블에 메모리의 특정번지에 권한을 부여하는 속성을 추가하여, 메모리 접근시 권한을 검사할 수 있음디멘드 페이징 정책조만간 필요할 것 같은 데이터를 메모리에 가져오고 쓰이지 않을 것 같은 데이터는 스왑영역으로 보내는 정책필요한 데이터를 언제 메모리로 가져올지를 결정하는 것페이지 테이블 엔트리접근비트, 변경비트, 유효비트, 권한비트 (프레임번호만 있는게 아님)페이지 폴트프로세스가 가상메모리에 접근요청했을때 물리메모리에 데이터가 없을때 발생하는 인터럽트페이지 폴트가 발생하면 보조저장장치의 스왑영역에 접근하여 스왑영역에 있는 데이터를 메모리에 올리는 작업을 함페이지 교체정책스왑영역에서 데이터를 찾아 메모리에 올리려고 했는데, 이미 메모리가 가득찼을때 조회할 데이터를 메모리에 추가하기위해 데이터를 남기거나 스왑영역으로 보내는 정책무작위, FIFO, Optimum, LRU, Clock Algorithm, Enhanced Clock Algorithm스레싱과 워킹셋스레싱제한된 물리 메모리에 프로그램을 많이 올려 스왑 영역에 데이터가 많이 저장되고 Page Fault가 자주 발생하게 되면 CPU 사용률이 떨어짐. 스케줄러에 의해 운영체제는 CPU 사용률을 올리기 위해 더 많은 프로세스를 메모리에 올리게 되고 이를 반복하게 되면 CPU 사용률이 0에 가깝게 떨어지는데 이를 스레싱이라고 함워킹셋현재 메모리에 올라온 페이지는 다시 사용할 확률이 높기에 하나의 세트로 묶어서 메모리에 올리는데 이를 워킹셋이라고 함입출력장치주변장치(I/O 디바이스, 저장장치)들은 메인보드에 있는 버스로 연결되어 있음각 하드웨어에 맞게 외부 인터페이스가 존재캐릭터 디바이스, 블록디바이스 입출력 제어기는 두 개의 채널, 시스템 버스와 입출력 버스로 구분파일과 파일시스템운영체제가 파일을 관리하기 위한 파일 관리자파일을 관리하는 하드디스크나 Flash Memory(SSD)는 블록 디바이스, 파일 시스템은 전송 단위는 블록이지만, 사용자는 바이트 단위로 파일에 접근이 가능해야 함, 파일 관리자가 이를 중간에서 관리파일의 종류순차파일구조, 직접파일구조, 인덱스파일구조디렉토리관련있는 파일을 모아둘 수 있도록 하는 장치알고리즘 & 자료구조 3주차 학습 요약 삽입 정렬 (Insertion Sort)정렬되지 않은 영역에서 데이터를 하나씩 꺼내서 정렬된 영역 내 적절한 위치에 "삽입"해서 정렬하는 알고리즘삽입하려는 데이터를 정렬된 영역의 원소를 역순으로 순회하면서 비교O(n²)장점 : 작은 데이터나 거의 정렬된 데이터에 대해 매우 효율적단점 : 속도가 느려서 대규모 데이터에 비효율적 병합 정렬 (Merge Sort)정렬하려고 하는 배열을 잘게 쪼갠다음, 순서에 맞게 재배열하는 알고리즘 (재귀)O(n log n) 장점 : 속도가 빠르며 대규모 데이터에서도 일정한 성능을 보임 단점 : 추가 메모리 공간이 필요하며, 메모리 효율이 떨어질 수 있음퀵 정렬 (Quick Sort)배열의 숫자중 하나를 피벗으로 설정하고, 피벗의 왼쪽에는 작은값, 피벗의 오른쪽에는 큰값을 정렬하는 알고리즘분할시 왼쪽과 오른쪽의 포인트가 교차하면 피벗과 오른쪽 포인트의 값과 교환하여 피벗값을 정렬해나감평균 O(n log n), 최악 O(n²) 장점 : 평균적으로 매우 빠르고, 메모리 사용이 적음 단점 : 피벗 선택에 따라 성능이 달라지며, 최악의 경우 속도가 느려질 수 있음 (그러나 최악이 되는 경우는 거의 없음)동적프로그래밍메모이제이션계산 결과를 따로 기억해서 여러 번 중복 계산하지 않도록 하는 기법하향식 계산 방식으로 활용타뷸레이션계산에 필요한 모든 값을 전부 계산 후 테이블에 저장하는 기법상향식 계산 방식으로 활용 회고스터디의 마지막 주차가 되었네요. 나름 정리도 하고 CS전공지식 스터디 내부에서 다른분들이랑 모여 발표 스터디도 하면서 열심히 학습하면서 많이 배운시간이 었던거 같아요. 특히나 알고리즘을 직접 구현해보면서 각 알고리즘의 장.단점을 외우지 않아도 조금만 생각해보면 장.단점을 도출할 수 있게 되어서 좋았어요.스터디 발표 & 정리 자료 캡쳐빠르게 끝나 아쉬움반 후련함반이 있지만, 계속 복습하고 부족한 부분 채워나가면서 열심히 해나가겠습니다.많이 배웠습니다. 즐거웠어요.

백엔드CS전공지식그림으로쉽게배우는자료구조와알고리즘그림으로쉽게배우는운영체제인프런워밍업클럽2기감자

정지형

[인프런 워밍업 스터디 클럽 2기 FE] 정지형 1주차 발자국

💡 1주차 회고강의를 듣기만 하고 따로 적어두진 않아서 정리하는데 오래걸렸다...! 다음주부터는 들으면서 해야겠다.미션같은 경우 순수 js로 구현해본적이 없어서 어려울거라 생각했는데 막상 해보니 괜찮았다.단 효율적인 코드로 작성한건지는 모르겠다...! 일단 기능만 구현하고 스타일은 꾸미지 않았는데 시간 나는 대로 틈틈히 스타일도 추가로 작업해야겠다.역시 스타일이 안들어가니 허전해.. 🤔 직장인이라서 진도를 따라갈 수 있을까 했는데 이번주와 다음주에 공휴일이 있어서 다행이다. 럭키비키잖아🍀다음주도 열심히 뚠뚠 🐜 가보자고!📝 강의 내용 요약 섹션 2 자바스크립트 기초console객체브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공log뿐만 아닌 time, table, clear...다양한 메서드가 있음.var, let, const변수 선언 방식var - 중복 선언과 재할당 가능 let(ES6) - 중복 선언 불가, 재할당 가능const(ES6) - 중복 선언과 재할당 불가유효한 참조 범위(scope)함수 레벨 스코프(function-level scope) - var블록 레벨 스코프(block-level-scope) - let, const호이스팅(Hoisting)코드가 실행되기 전 변수 및 함수 선언이 로컬 범위의 맨 위로 끌어올려지는 경우를 말함.변수생성 과정선언단계 =[ TDZ(일시적 사각지대) ] => 초기화단계(undefined값 할당) => 할당 단계 (값 할당)타입별 변수 호이스팅var - 선언, 초기화함수 선언문 : 선언, 초기화, 할당let, const - 선언 (선언 전 접근시 TDZ로 오류발생)자바스크립트 타입 (동적 타입)원시 타입 (number, string, boolean,undefined, null, symbol• bigInt)고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당참조 타입 (object, arrays, functions, classes, ...)데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당 타입변환js 변수는 새 변수 및 다른 데이터 유형으로 변환할 수 있습니다.1. js 함수를 사용하여,2. js 자체에 의해 자동으로 • 문자열과 숫자: + 연산 시 숫자가 문자열로 변환됨.  • 숫자 연산: -, *, /에서 문자열이 숫자로 변환됨.• 비교: == 연산 시 두 값 중 하나가 다른 타입으로 변환됨.  • Boolean 컨텍스트: if나 while 같은 논리적 평가 시 다양한 값이 true나 false로 변환됨.  • 숫자와 불리언: 숫자 연산 시 true는 1, false는 0으로 변환됨.Math객체Template Literals - backtick(`) 줄바꿈을 쉽게할 수 있고 문자열 내부에 표현식 포함할 수 있게됨.Loops루프의 종류for - 코드 블록 여러번 반복for/in - 객체의 속성을 따라 반복while - 지정된 조건이 true인 동안 코드 블록 반복do/while - 조건이 true인지 검사하기 전 코드 블록 한 번 실행 이후 조건이 true인 동안 루프 반복섹션 3 Window 객체 및 DOMwindow Object브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)를 나타냅니다.또한 window는 브라우저의 객체이지 js의 객체가 아닙니다.이 window 객체를 이용해서 1.이 브라우저 창에 대한 정보와 제어를 할 수 있고 2.var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨.dom(문서 객체 모델) - 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌.웹 페이지 빌드 과정(Critical Rendering Path CRP)웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정document object브라우저 내에서 콘텐츠를 보여주는 웹페이지 자체객체 사용시 웹 페이지의 상태와 모든 HTML 태그에 접근 가능요소 탐색요소 생성 createElement요소 삭제 removeChild요소 교체 replaceChild섹션 4 EventEventListener - 이벤트가 발생했을때 어떠한 액션을 위한 함수를 호출. 해당 함수가 이벤트 리스너addEventListerner() - 이벤트 리스너를 객체나 요소에 등록해야 사용가능. 등록해주는 함수Event 종류UI 이벤트키보드 이벤트마우스 이벤트포커스 이벤트폼 이벤트Event Bubbling가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]Event Capturing제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]이벤트의 3단계 흐름1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]Event Delegation - 하위요소의 이벤트를 상위 요소에 위임(제어)하는 것[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #3 Event,인프런 강의]섹션 5 자바스크립트 중급자바스크립트 this함수에서 this 사용 => Window 객체를 가리킴메소드에서 this 사용=>해당 객체를 가리킴constructor 함수에서 this 사용 =>빈 객체를 가리킴forEach(callback, thisArg)화살표 함수에서 this 사용 => 상위 스코프의 this를 가리킴(Lexical this)bind, call, apply 메소드함수의 this 컨텍스트를 제어const person1 = { firstName: “John”, lastName: “Doe” } ------------------------------------- const fullName = function() { console.log(this.firstName + “ “ + this.lastName); } //call() fullName.call(person1); ------------------------------------- const fullName = function (city, country) { console.log(`${this.firstName}, ${this.lastName}, ${city}, ${country}`); } fullName.call(person1, "Oslo", "Norway"); // 인수 넣어 사용 가능 //apply() fullName.apply(person1, ["Oslo", "Norway"]); // call 메서드와 비슷하지만 인수에 배열넣어야 함. ------------------------------------- //bind() function func(language) { if (language === “kor”) { console.log(`language: ${this.korGreeting}`); } else { console.log( (`language: ${this.engGreeting}`); } } Const greeting = { korGreeting: “안녕 “, engGreeting: “Hello “, }; Const boundFunc = func.bind(greeting); boundFunc(‘kor’); //call, apply와 다른 점 직접 함수를 실행하지 않고 반환 ㅁ 조건부 삼항 연산자 (result ? result = "" : result = "")Event Loop자바 스크립트 동기 코드인데 비동기 코드를 작성하기 위해 브라우저에서 사용한다면 브라우저 api (window object)Node에서 사용한다면 Node api(global object) 사용.web API 실행시 내부 진행[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]자바스크립트 엔진메모리 힙 - 메모리 할당이 발생 (변수를 정의하면 저장되는 창고)호출 스택 - 코드가 실행될 때 스택들이 이곳에 쌓임.[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #4 자바스크립트 중급, 인프런 강의]undefined vs null둘다 원시 자료형undefined = 아무 값도 할당받지 않은 상태null = 비어있는, 존재하지 않는 값 Map, Filter, ReduceClosure다른 함수 내부에 정의딘 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있음.Destucturing배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식let { accessory, animal, color } = animalData;전개 연산자특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용.const arr = [...arr1, ...arr2];얕은 비교 vs 깊은 비교얕은 비교숫자, 문자열 등 원시 자료형은 값을 비교배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조디는 위치를 비교깊은 비교객체의 경우에도 값으로 비교Object depth가 깊지 않은 경우 : JSON.stringfy() 사용Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용얕은 복사 vs 깊은 복사얕은 복사중첩된 배열이나 객체가 있다면 따라서 변경됨.spread operator, Object assign, Array.from(), slice, shallow copyObject.freeze() - 얕은 동결 : 객체를 동결합니다. 중첩된 구조에서 올바른 역할을 수행하지 못함.깊은 복사중첨된 곳에 따로 spread operator 사용lodash 라이브러리를 이용한 deepCopystructuredCloneconst 참조 타입 데이터 변경const array = ["A", "B", "C"];array.push("D");call stack에 reference ID는 같고 heap memory값만 바뀌어서 에러가 나지 않음.함수 표현식 vs 함수 선언문예시// 함수 표현식 function funcDeclaration() { return '함수 선언문'; } // 함수 선언문 let funcDeclaration = function () { return '함수 표현식'; }함수 선언식은 호이스팅에 영향을 받지만 표현식은 받지 안음.strict mode엄격모드는 제한된 버전을 선택하여 암묵적인 느슨한 모드를 해제하기 위한 방법적용방법파일에 "use strict" 지시자 입력함수 안에 "use strict" 사용해서 그 함수만을 위해서 strict mode를 적용class를 사용하면 자동으로 strict mode가 적용됨Intersection observer기본적으로 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지 구별Pure Function순수 함수의 규칙1. 같은 입력값이 주어졌을 때, 언제나 같은 결과값을 리턴한다. (same input => same output)2. 사이드 이펙트를 만들지 않는다. (no dise effects)사용하는 이유1. 클린 코드를 위해서2. 테스트를 쉽게하기 위해서3. 디버그를 쉽게 하기 위해서4. 독립적인 코드를 위해서(Decoupled / Independent)Curry functionf(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환하는 것자바스크립트 엔진자바스크립트를 실행하려면 자바스크립트 엔진이 필요.브라우저에는 자바스크립트 엔진이 있어서 실행 가능.IIFE(Immediately Invoked Function Expression)정의되자마자 즉시 실행되는 함수를 말한다.사용하는 주된 이유는 변수를 전역으로 선언하는 것을 피하기 위함.내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있음.첫 번째() 소괄호 => 전역 선언 막고, IIFE 내부 안으로 다른 변수 접근두번 째() 소괄호 => 즉시 실행 함수를 생성하는 괄호( function() { // Do fun stuff } )() 섹션 6 OOP ( 객체 지향 프로그래밍) 하나의 문제 해결을 위한 독립된 단위 "객체"들의 모임알아보기 쉽고 재사용성이 높아짐특징자료 추상화불필요한 정보는 숨기고 중요한 정보만 표현해 프로그램 간단히 만드는 것상속기존 클래스의 자료와 연산을 이용할 수 있게 하는 기능다형성한 요소에 여러개념을 넣어 놓는 것 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있는 것.클래스 & 오버 라이딩 - 자식 클래스의 메서드가 부모 클래스의 메서드와 다르게 동작하거나 변수가 다른 값으로 지정될 수 있음.캡슐화클래스 안에 관련 메서드, 변수를 하나로 묶어줌바깥에서의 접근을 막아 보안이 강화되고 잘 관리되는 코드 제공prototype & prototype chain자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘.sub class(Inheritance) - extends 키워드를 사용해 부모클래스 기능 그대로 자식 클래스를 만들 수 있음super() - 부모 생성자 호출ES6 classesstatic 정적 메서드 사용 - "prototype"이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있습니다.사용 예시class Person { // 생성자(constructor)는 클래스의 인스턴스가 생성될 때 호출됩니다. constructor(name, age, job) { this.name = name; // 클래스의 속성 설정 this.email = email; this.birthday = new Date(birthday); } // 메서드 정의: 클래스 내의 함수 introduce() { return `Hello my name is ${this.name}`; } static multipleNumbers(x, y) { return x * y; } } console.log(Person.multipleNumbers(2, 9); 섹션 7 비동기시간이 오래 걸리는 작업을 먼저 시작하고, 그 작업이 끝나지 않아도 다음 작업을 먼저 처리.(<->) 동기 - 작업이 순차적으로 진행되어, 앞선 작업이 끝날 때까지 다음 작업을 실행하지 않음. callback, promise 그리고 Async/Await비동기 요청이 여러개 있을 때 하나의 요청이 다른 요청의 결과에 의존해야하는 경우 사용[출처 : 저자, 따라하며 배우는 자바스크립트 A-Z 강의 자료 #6 비동기,인프런 강의 ] 👩🏻‍💻 미션1번 (Day2)음식 메뉴 앱2번 (Day3)가위 바위 보 앱3번(Day4)퀴즈 앱4번(Day5)책 리스트 나열 앱 5번(Day5)Github Finder 앱

웹 개발워밍업클럽FE과제

rhkdtjd_12

[인프런 워밍업클럽 CS 2기] 2주차 발자국

[2주차 학습 내용]자료구조와 알고리즘재귀: 자기 자신을 참조하는 방식. 프로그래밍에서는 콜 스택을 사용하며 FILO(First In Last Out)의 특징을 가짐.버블 정렬: 인접한 값들을 비교하여 정렬하는 알고리즘. 단순하지만 비효율적이며 O(n²)의 시간복잡도를 가짐.선택 정렬: 정렬되지 않은 부분에서 가장 작은 값을 찾아 정렬하는 방식. O(n²)의 시간복잡도를 가짐.  운영체제CPU 스케줄링: FIFO, SJF, RR, MLFQ 등 다양한 스케줄링 방식이 있음.프로세스 간 통신 (IPC): RPC, 공유 자원과 임계 구역, 세마포어, 모니터 등을 사용하여 프로세스 간의 통신 및 자원 접근을 관리함.교착 상태 (Deadlock): 상호 배제, 비선점, 점유와 대기, 순환 대기의 조건으로 발생. 식사하는 철학자 문제와 은행원 알고리즘이 교착 상태를 설명함.메모리 관리:메모리 종류: 상대 주소와 절대 주소.메모리 할당 방식: 고정/가변 분할 방식, 버디 시스템 [2주차 회고]순탄치 않았지만 개발 관련 인생 첫 스터디라는것을 모집해서 처음으로 참여를 하고 있습니다.처음에는 복습과 완강하자! 이런 가벼운 마음으로 시작한것인데 함께 참여하는 팀원 분들이 너무 잘하시고 열정적이십니다.즉, 저는 팀원복이 꽤 있는것 같습니다. 아마 혼자 달렸으면 완강은 못했을것 같은데 팀원들과 스터디를 진행 하면서 이분들과의 약속을 지키기 위해서라도 완강 하게 되는것 같습니다.발표 자료 캡쳐화면

알고리즘 · 자료구조운영체제자료구조알고리즘

tenenger

인프런 워밍업 클럽 CS 2기 - 1주차 발자국

자료 구조 및 알고리즘 배열다른 프로그래밍 언어 vs 자바스크립트 특징다른 프로그래밍 언어의 경우는 배열의 크기를 정하고 연속적인 공간을 차지한다. 반면 자바스크립트 언어의 경우에는 배열의 크기를 정하지 않고 비연속적인 공간을 차지한다.다른 프로그래밍 언어의 배열은 배열의 크기를 늘릴경우 연속적인 공간을 새로 찾아서 기존의 내용을 복사붙여넣기 하기 때문에 성능이 좋지 않다. 반면 자바스크립트 언어의 경우에는 배열의 크기를 정하지 않기 때문에 비연속적인 공간에 값을 넣어 성능이 상대적으로 좋다.다른 프로그래밍 언어의 배열은 배열의 크기를 할당해야하기 때문에 불필요한 공간을 차지할 수 있다. 반면 자바스크립트 언어의 배열은 배열의 크기를 정하지 않고 동적으로 크기가 정해지기 때문에 불필요한 공간을 줄일 수 있다. 공통 특징배열의 시작주소 + 인덱스를 이용하여 참조를 하고, 참조의 경우 O(1) 의 성능을 보여준다. 🏷 자바스크립트 언어의 경우 비연속적인 공간을 차지하는데, 연결리스트로 노드가 연결되어 있어 인덱스로 접근할 수 있어 다른 프로그래밍언어에서 사용되는 배열과 유사하게 연속적인 공간을 차지하는 것 처럼 보여진다. 단방향 연결리스트특징연결리스트는 다른 노드를 가르키는 포인터가 있고, 하나의 노드가 다른 하나의 노드를 가르키며 서로 연결되어 있지 않아 단방향 연결리스트라고 불린다. 데이터 추가시, 인덱스의 위치에 따라 성능이 달라지는데 맨 앞에 데이터 추가시 O(1)의 성능을 가지는 반면, 맨 뒤에 데이터를 추가시 마지막 노드를 확인하고 추가해야하므로 O(n)의 성능을 가진다.데이터 삭제와 조회도 마찬가지이다. 연관된 자료구조스택 스택(Stack)특징First In Last Out (FILO) 방식이며, 가장 첫번째로 들어간 노드가 가장 마지막으로 나오는 순서를 따른다. 예시로 설거지를 한 접시를 탑을 쌓는다면 가장 위의 접시부터 빼는 것을 생각하면 이해가 쉽다. 구현단방향 연결리스트를 이용하여 위에서 부터 값을 넣는 push, 가장 위에서 제거하는 pop, 가장 위에 위치한 값을 확인하는 peek, 스택이 비어있는지 확인하는 isEmpty 메서드를 구현했다. 양방향 연결리스트특징양방향 연결리스트의 경우 하나의 노드가 다른 하나의 노드를 가리키고 있는데, 서로간에 참고하는 경우를 양방향에서 알 수 있다고 해서 양방향 연결리스트라고 한다. 연관된 자료구조큐, 덱, 셋 큐(Queue)특징First In First Out (FIFO) 방식이며, 가장 첫번째로 들어간 노드가 가장 첫번째로 나오는 순서를 따른다. 예시로 마트 계산대에서 가장 먼저 줄을 선 사람부터 계산을 진행하는 것을 생각하면 이해가 쉽다. 구현양방향 연결리스트를 이용하여 값을 넣는 enqueue, 값을 제거하는 dequeue, 가장 첫번째로 위치한 값을 확인하는 front, 큐가 비어있는지 확인하는 isEmpty 메서드를 구현했다. 데크(Deque)특징스택과 큐를 특징이 혼합된 자료구조로, 데이터를 첫번째와 마지막에 데이터를 추가, 삭제, 조회를 할 수 있다. 구현양방향 연결리스트를 이용하여 맨 앞의 값을 넣는 addFirst, 맨 앞의 값을 제거하는 removeFirst, 맨 뒤의 값을 넣는 addLast, 맨 뒤의 값을 제거하는 removeLast, 데크가 비어있는지 확인하는 isEmpty 메서드를 구현했다. 해시테이블특징해시 함수 + 테이블을 합친 개념으로 프로그래밍 언어마다 용어의 차이가 있다. 자바스크립트의 경우 해시 테이블이라고 한다.테이블을 배열로 만드는 방식의 경우 테이블의 키(숫자)를 인덱스로 하여 값을 저장했다. 이 방법은 사용되지 않는 인덱스의 경우 낭비되는 공간이기 때문에 메모리 낭비를 초래한다. 그래서 해시 함수를 사용하여 낭비되는 공간을 줄이는 방식이 해시 테이블이라고 한다.해시테이블의 경우 해시 함수에 따라 성능이 좋고 나쁨이 결정되기 때문에 좋은 해시 함수를 만드는 것이 가장 중요하다. 구현배열을 만들고, 양방향 연결리스트를 배열의 원소로 넣어 하나의 배열에 여러개의 양방향 연결리스트를 가진다. 연관된 자료구조셋 셋(Set)특징중복된 자료를 허용하지 않는다. 구현해시테이블을 이용하여 값을 넣는 add, 값을 제거하는 remove, 맨 뒤의 값을 넣는 addLast, 값을 초기화하는 clear, 저장된 값들을 출력하는 printAll, 셋이 비어있는지 확인하는 isEmpty 메서드를 구현했다. 미션1여러분은 교실의 학생 정보를 저장하고 열람할 수 있는 관리 프로그램을 개발하려고 합니다. 이 때 여러분이라면 학생의 정보를 저장하기 위한 자료구조를 어떤 걸 선택하실 건가요? 이유를 함께 적어주세요.배열 또는 해시테이블을 선택할 거 같습니다.만약 학생을 나누는 키 값이 연속적인 경우 배열을 선택해도 메모리 낭비 공간이 없겠지만, 만약 키값이 불연속적인 경우 배열로 저장할 경우 낭비되는 공간이 생길 수 있으므로, 해시 함수를 이용하여 낭비되는 메모리 공간을 줄이는 해시테이블을 사용합니다. 여러분은 고객의 주문을 받는 프로그램을 개발하려고 합니다. 주문은 들어온 순서대로 처리됩니다. 이 때 여러분이라면 어떤 자료구조를 선택하실 건가요? 이유를 함께 적어주세요.큐 자료구조를 선택할 거 같습니다.큐 자료구조의 특징이 첫번째 들어온 데이터가 가장 첫번째로 나가는 FiFO 방식이기 대문에 들어온 순서대로 처리하기에 적합한 자료구조입니다. 자료 구조 및 알고리즘 인터럽트입출력 장치의 데이터를 읽거나 쓰려고 할 때 기존의 폴링 방식의 단점을 해결하려고 나온 방식이다.기존의 폴링방식은 입출력 장치의 데이터를 지속적으로 확인해야하기 때문에 성능이 좋지 않았고, 인터럽트를 통해 입출력 장치가 CPU에게 신호를 주면 CPU는 그때 처리하는 방식이어서 성능상에 이점이 있다. 인터럽트입출력 장치의 데이터를 읽거나 쓰려고 할 때 기존의 폴링 방식의 단점을 해결하려고 나온 방식이다.기존의 폴링방식은 입출력 장치의 데이터를 지속적으로 확인해야하기 때문에 성능이 좋지 않았고, 인터럽트를 통해 입출력 장치가 CPU에게 신호를 주면 CPU는 그때 처리하는 방식이어서 성능상에 이점이 있다. 프로그램과 프로세스프로그램은 저장장치에 저장된 명령문의 집합체이다. 프로세스는 프로그램이 메모리에 적재되어 실행중인 상태, 즉 실행중인 프로그램을 뜻한다. 멀티프로그래밍과 멀티프로세싱유니프로그래밍은 메모리에 하나의 프로그램이 올라갔으며, 즉 하나의 프로세스가 있다.멀티프로그래밍은 메모리에 여러개의 프로그램이 올라갔으며, 즉 여러개의 프로세스가 있다.멀티프로세싱은 CPU가 여러개의 프로세스를 처리하는 것이다. PCB운영체제가 CPU가 프로세스를 효과적으로 관리하기 위해 PCB를 사용한다.PCB에는 프로세스에 대한 정보가 있어 시분할 시스템에서 CPU를 이용하여 여러개의 프로세스를 관리할 때 사용한다. 프로세스 상태시분할 시스템으로 여러 프로세스를 돌아가며 실행하여, 동시에 실행되는 것 처럼 보인다.생성 : PCB생성 후 메모리에 프로그램 적재 요청준비 : CPU에 의해 사용을 기다리고 있음, CPU 스케줄러에 의해 할당실행 : 준비 상태에 있는 프로세스가 CPU를 할당받아 실행되는 상태대기 : 프로세스가 입출력 요청을 하면 입출력이 완료까지 대기완료 : 프로세스 종료 및 PCB제거컨텍스트 스위칭프로세서를 실행 중에 다른 프로세스를 실행하기 위해 현재 프로세서의 상태 값을 저장하고, 다른 프로세스의 상태 값으로 교체하는 것을 뜻합니다.PCB의 프로세스 상태, 프로그램 카운터, 레지스터 정보, 메모리 관련 정보 등이 변경된다.프로세스 생성과 종료초기 컴퓨터 부팅 후 부모 프로세스가 생성된다.이후 모든 다른 프로세스는 부모 프로세스를 복사하여 생성되며, 이는 프로세스를 새로 생성하는 것보다 성능에 이점이 있다.내부의 코드는 자식 프로세스가 exec() 함수가 실행되면 덮어쓰게된다. 쓰레드하나의 프로세스에 하나 이상의 쓰레드가 존재한다.프로세스가 많아질 수록 PCB, 코드, 데이터, 스택, 힙 영역을 만들어 줘야하기 때문에 메모리를 많이 차지하는 이슈가 있었다. 그리고 브라우저의 탭들은 프로세스마다 통신을 하기 위해 IPC를 이용해야하는데 IPC의 비용이 많은 이슈가 있었다.쓰레드는 이러한 문제를 해소하기 위해 Code, data, heap을 공유하며, stack은 쓰레드마다 하나씩 가지고, IPC 비용을 줄일 수 있었다.쓰레드를 이용하면 IPC 비용을 줄일 수 있고 메모리 공간을 절약할 수 있다. 그러나 하나의 프로세스에 문제가 생기면 프로세스에 있는 쓰레드가 모두 문제가 생기는 단점이 있다. CPU 스케줄링프로세스를 실행하기 위해 CPU 스케줄링은 고려해야할 사항이 2가지 있다.어떤 프로세스에게 CPU를 할당할 것인가.어떤 프로세스에게 얼만큼의 CPU 할당 시간을 줄것인가. 다중큐준비 상태에 있는 프로세스는 실행 상태로 변환된다.준비 상태에 있는 프로세스의 PCB는 준비 상태의 다중 큐에 존재하며 CPU 스케줄러에 의해 실행이 결정된다.대기 상태에 있는 I/O 작업의 프로세스의 PCB가 대기 상태의 다중큐에 존재하며, CPU스케줄러에 의해 실행이 결정된다.스케줄링 목표리소스 사용률오버헤드 최소화공평성처리량대기시간응답시간FIFO스케줄링 큐에 들어온 순서대로 할당하며, 먼저 들어온 프로세스가 종료되어야 다음 프로세스가 실행된다.만약 Burst Time이 오래 걸리는 프로세스의 위치에 따라 평균 대기시간이 크게 차이가 난다.현대에서는 사용되지 않으나, 일괄처리시스템에서 주로 사용된다. 미션2 while(true){ wait(1); // 1초 멈춤 bool isActivated = checkSkillActivated(); // 체크 }위 코드는 1초 마다 플레이어가 스킬을 사용했는지 체크하는 코드입니다. 이 방식은 폴링방식입니다. 1초마다 체크하기 때문에 성능에 좋지 않습니다. 이를 해결하기 위한 방식으로 어떤 걸 이용해야 할까요?인터럽트 프로그램과 프로세스가 어떻게 다른가요? 프로그램은 저장장치에 저장된 명령문의 집합체입니다.프로세스는 메모리 상에 적재되어 실행중인 프로그램입니다. 멀티프로그래밍과 멀티프로세싱이 어떻게 다른가요? 멀티프로그래밍은 메모리 관점에서 메모리에 여러개의 프로세스가 존재하는 것을 뜻합니다.멀티프로세싱은 CPU 관점에서 여러개의 프로세스를 처리하는 것을 뜻합니다. 운영체제는 프로세스를 관리하기 위해서 어떤 것을 사용하나요?운영체제는 PCB를 사용하여 프로세서를 관리합니다.예를 들어 시분할 시스템으로 여러개의 프로세스를 번갈아가며 프로세스를 실행해야할 때, CPU에서 특정 프로세스 실행 후 레지스터를 해당 프로세서의 PCB에 저장하고 다른 프로세스의 PCB의 레지스터 정보를 불러와서 실행하는 것을 반복하여 마치 여러개의 프로세스가 동시에 실행되는 것처럼 관리할 수 있습니다. 컨텍스트 스위칭이란 뭔가요?프로세서를 실행 중에 다른 프로세스를 실행하기 위해 현재 프로세서의 상태 값을 저장하고, 다른 프로세스의 상태 값으로 교체하는 것을 뜻합니다. PCB의 프로세스 상태, 프로그램 카운터, 레지스터 정보, 메모리 관련 정보 등이 변경됩니다. 

알고리즘 · 자료구조인프런워밍업클럽CS2기

인프런 워밍업 클럽 스터디 2기 CS 1주차 발자국

운영체제컴퓨터의 역사애니악(진공관) -> 1950년도 초 (집적회로 개발) -> 1950년도 중후반(싱글 스트림 배치 시스템) -> 1960년도 (시분할 시스템) -> 1970년도 (개인 컴퓨터의 시작) 컴퓨터의 CPU 가격이 비쌌기 때문에 CPU 사용률을 끌어 올리는 쪽으로 발전  시분할 시스템메모리에 여러 프로그램을 올려놓고 시간을 나누어서 빠르게 돌아가며니서 실행을 시킨다.이 작업의 장점은 하나의 프로그램이 입력을 대기 중이더라도 다른 프로그램이 작업 중이기 때문에 CPU의 사용률이 결과적으로 올라가는 장점을 가지게 된다. Unix멀티 프로그래밍다중 사용자파일 시스템 문제점메모리에 여러 프로그램을 올려서 사용하기 때문에 메모리 침범 문제가 생겼다. 운영체제의 구조커널이 핵심프로세스와 메모리, 저장장치를 관리 핵심적인 기능을 담당 사용자는 커널에 직접 접근할 수 없고 인터페이스를 통해 접근할 수 있다.인터페이스 -> GUI, CLI 어플리케이션은 시스템 콜을 통해서 커널에 접근할 수 있다.커널은 사용자로부터 자신을 보호하기 위한 시스템 콜이라는 인터페이스를 가지고 있다. 컴퓨터 하드웨어와 구조하드웨어는 프로그램 내장 방식의 폰 노이만 구조를 하고 있다.폰노이만 구조예전에는 하드웨어로 프로그램을 만들었기 때문에 프로그램이 달라질 때마다 매번 스위치와 배선을 다시 조정해야했다.이를 해결하기 위해 CPU와 Memory를 두고 이들 사이를 BUS로 연결 데이터를 전달하는 통로를 말한다.프로그램을 메모리에 내장 : 프로그램 내장 방식이라고 호칭 메인보드다른 하드웨어간의 연결을 담당 CPU중앙 처리 장치라고 부른다.ALU 산술 논리 연산장치 : CPU에서 실제로 데이터 연산을 담당한다.Contorl Unit 제어 장치: 모든 장치들의 동작을 지시하고 제어하는 장치Register 레지스터: CPU내에서 계산을 위해 임시로 보관하는 장치 메모리의 종류RAM, ROMRAM : Ramdom Access Memory 전력이 끊기면 데이터를 잃어버린다. 메인 메모리로 사용된다.ROM : Read Only Memory 전력이 끊겨도 데이터를 계속 보관할 수 있다. 데이터를 한 번 쓰면 수정이 불가능 -> 컴퓨터 부팅과 관련된 바이오스를 저장하는데 사용된다.  컴퓨터의 부팅 과정ROM에 저잦ㅇ된 바이오스가 실행된다주요 하드웨어 이상이 없는지 체크이상이 없다면 마스트 부트 레코드에 저장된 Boot Loader를 메모리로 가져와서 실행합니다. 인터럽트CPU가 입출력 장치에 읽거나 쓰려고 하는 상황CPU는 입출력 작업이 들어오면 입출력 관리자에 명령, CPU는 주기적으로 입출력 관리자를 확인polling 방식주기적으로 CPU가 확인해 줘야하니 성능이 좋지 않다는 단점이 있다.인터럽트는 폴링 방식의 단점을 해결한 방식-> CPU가 입출력 관리자에 명령 -> 입출력 관리자는 입출력이 완료됬을 때 CPU에게 신호를 주고 CPU는 그 신호를 받아서 -> 인터럽트 서비스 루틴을 실행해서 작업 완료 프로세스와 쓰레드프로그램은 컴퓨터 관점에서 하드디스크, 즉 저장장치만 사용하는 수동적 존재프로세스: 실행중인 프로그램 프로세스는 메모리도 사용하고 운영체제의 CPU 스케줄링 알고리즘에 따라 CPU도 사용하고 필요에 따라 입력과 출력을 하기 때문에 능동적인 존재라고 말 할 수 있다. 프로세스의 구조 Code 영역: 자신을 실행하는 코드가 저장Data 영역 : 자신을 실행하는 코드 저장, 전역 변수와 Static(정적) 변수가 저장되어 있습니다.스택 영역 : 지역 변수와 함수 호출을 했을 때 필요한 정보들이 저장된다.Heap 영역: 프로그래머가 런타임시 할당할 수 있는 메모리 공간  유닛 프로그래밍 : 오직 하나의 프로세스가 올라간 것멀티 프로그래밍 : 메모리에 여러 개의 프로세스가 올라온 것멀티 프로세싱 : CPU관점으로 정의, CPU가 여러 개의 프로세스를 처리하는 것PCB(Process Control Block)프로그램이 메모리에 올라가서 실행 중인 상태를 프로세스운영체제는 여러 프로세스를 전부 다 관리하고 공평하게 실행 시켜야 한다.PCB(Process Control Block)을 만들고 저장합니다.PCB들은 연결 리스트라는 자료구조로 저장됩니다. 운영체제는 프로세스가 종료되면 해당 프로세스의 PCB 제거 프로세스 상태생성 : 메모리에 프로그램 적재를 요청준비 : CPU를 사용하기 위해 기다리고 있는 상태실행 : CPU 스케줄러에 의해 실행대기 : 입출력 요청을 하면 입출력이 완료될 때까지 기다리는 상태완료 : 프로세스가 종료된 상태Context Switching프로세스를 실행하는 중에 실행중인 프로세스의 값을 저장하고 다른 프로세스의 상태 값으로 교체하는 과정 프로세스 생성과 종료운영체제가 시작되고 0번 프로세스를 1번 생성하게 되고 나머지 모든 프로세스는 0번 프로세스를 복사해서 쓰게 된다.부모를 복사한 자식 프로세스의 코드와 데이터 영역을 원하는 값으로 덮어서 쓰게 된다. 쓰레드프로세스는 독립적 다른 프로세스가 영향을 받지 않는다.프로세스간의 통신은 IPC 통신 사용쓰레드 간의 통신은 같은 프로세서의 데이터를 공유할 수 있다. CPU 스케줄링컴퓨터 자원 분배에 관한 문제를 해결하기 위한 방법 CPU를 할당받아 실행하는 작업을 CPU Burst, 입출력 작업을 IO Burst 라고 한다. 다중 큐CPU 스케줄러는 준비상태에서 다중 큐에 들어 있는 프로세스들 중에 적당한 프로세스를 선택해서 실행상태로 전환  프로세스 정보를 담고 있는 PCB는 준비 상태의 다중 큐에 들어가서 실행되기를 기다리고 있고 CPU 스캐줄러에 의해 실행상태로 전환됩니다. 스케줄링의 목표리소스 사용오버헤드 최소화공평성 - 모든 프로세스에게 공평하게 CPU가 할당 되어야한다.처리량대기 시간 - 작업을 요청하고 실제 작업이 이루어지는데까지 대기시간이 짧는 것을 목표로응답시간  FIFOFirst in First out스케줄링 큐에 들어온 순서대로 실행하는 방식 SJFShortest Job FirstBurst Time이 짧은 프로세스를 먼저 실행 RRround robin 방식강제로 다른 프로세스에게 일정 시간을 할당정해진 시간만큼 동작 MLFQMulti Level Feedback Queue여러개의 큐가 존재, 큐들은 우선 순위가 존재 

f1rstf1y9

[인프런 워밍업클럽 CS 2기] 1주차 발자국👣

1주차 학습 내용운영체제운영체제의 구조커널프로세스, 메모리, 저장 장치 등을 관리사용자가 직접 접근하지 못하고, 인터페이스로만 접근 가능인터페이스GUI(Graphic User Interface)GLI(Command Line Interface)시스템콜어플리케이션은 시스템콜을 활용해 커널에 접근드라이버하드웨어와 커널의 인터페이스 컴퓨터 하드웨어와 구조메인보드 : 다른 하드웨어를 연결하는 장치로, 장치 간 데이터 전송은 메인보드의 버스가 담당CPU(Central Processing Unit, 중앙 처리 장치)산술논리 연산 장치(ALU) : 실제 데이터 연산 담당제어 장치(Control Unit) : 모든 장치들의 동작을 지시, 제어레지스터: CPU 내에서 계산을 위해 임시로 보관메모리RAM(Random Acess Memory) : 전원을 끄면 데이터가 날아감, 메인 메모리로 사용, 랜덤한 위치의 어떤 데이터를 읽든 속도가 동일ROM(Read Only Memory) : 전원을 꺼도 데이터 보관 가능, 컴퓨터 부팅 관련 바이오스 저장부팅과정컴퓨터 전원 누름 -> ROM에 저장된 BIOS 실행 -> 주요 하드웨어 이상 여부 체크 -> 이상이 없으면 부트 로더 실행 -> 운영체제를 메모리로 불러오기 -> 바탕화면이 보임인터럽트CPU 입출력 명령이 들어왔을 때 언제 완료되는지 계속 확인해야하는 폴링 방식의 단점을 해결한 것CPU가 입출력 관리자에게 명령을 내리고 자기는 다른 작업함 -> 입출력이 완료되면 CPU에게 신호를 주고 CPU는 신호를 받아서 ISR 실행시켜 작업 완료 프로그램과 프로세스프로그램하드디스크와 같은 저장장치에 저장된 명령문의 집합저장 장치만 사용하므로 수동적인 존재프로세스하드디스크에 저장된 프로그램이 메모리에 올라갔을 때, 즉 실행 중인 프로그램메모리, CPU 사용 및 입/출력 등 능동적인 존재code, data, stack, heap 영역으로 구성멀티프로그래밍과 멀티프로세싱멀티프로그래밍 : 메모리에 여러 개의 프로세스가 올라온 것멀티프로세싱 : CPU가 여러 개의 프로세스를 처리하는 것PCB(Process Control Block)프로세스의 정보를 가지고 있는 것으로, 연결리스트 자료구조로 저장됨.포인터, 프로세스 상태, 프로세스 ID, 프로그램 카운터, 레지스터 정보, 메모리 관련 정보, CPU 스케줄링 정보 등을 저장프로세스 상태생성 -> 준비 -> 실행 -> *(대기 -> 준비 -> 실행 ->) 완료대기 상태: 입출력 요청이 들어오면 입출력이 완료될때까지 기다리는 상태컨텍스트 스위칭프로세스를 실행하는 중에 다른 프로세스를 실행하기 위해 실행중인 프로세스의 상태를 저장하고 다른 프로세스의 상태값으로 교체하는 작업컨텍스트 스위칭이 일어날 때 PCB의 내용이 변경됨쓰레드요구하는 작업의 수가 늘어나면 프로세스의 수가 늘어나고, 프로세스의 수만큼 PCB, 코드, 데이터, 스택, 힙 영역을 만들어줘야해서 무거워짐 => 이를 해결하기 위해 쓰레드 고안프로세스 내에 1개 이상 존재하며, PCB, 코드, 데이터, 힙 영역을 공유함CPU 스케줄링운영체제가 모든 프로세스에게 CPU를 할당하거나 해제하는 작업어떤 프로세스에게 CPU 리소스를 줄지, 얼마의 시간동안 CPU를 할당할지를 고려함Burst : 한 작업을 연속적으로 처리하는 것으로, 보통 작업 처리에 필요한 시간을 의미 (CPU Burst, I/O Burst)스케줄링 목표리소스 사용률 높이기, 오버헤드 최소화, 공평성, 처리량, 대기 시간, 응답 시간서로 상반되는 상황이 있기 때문에 사용하는 시스템에 따라서 목표를 다르게 설정CPU 스케줄링 알고리즘 - FIFOFirst In First Out, 먼저 들어온 작업이 먼저 나간다프로세스의 Burst Time에 따라 성능차이가 심하게 나므로 현대 운영체제에서 잘 쓰이지 않고 일괄처리 시스템에서 쓰임알고리즘자료구조와 알고리즘자료구조 : 데이터가 어떤 구조로 저장되고 어떻게 사용되는지를 나타냄알고리즘 : 어떤 문제를 해결하기 위한 확실한 방법자료구조에 따라 알고리즘이 달라지므로, 상황에 맞는 적절한 자료구조를 선택하고 이에 맞는 알고리즘을 적용할 줄 알아야함시간복잡도최선 : 빅-오메가, 평균 : 빅-세타, 최악 : 빅-오주로 빅-오 표기법을 많이 사용함성능 : O(1) < O(logn) < O(n) < O(nlogn) < O(n^2) < O(2^n) < O(n!)표기법계산에 가장 많은 영향을 미치는 항만 표기상수는 큰 의미 없음배열일반적인 배열크기가 정해져있고, 정해진 크기만큼 연속적인 메모리 공간에 값을 할당운영체제는 가장 첫번째 주소만 기억함참조 성능은 O(1), 삭제, 삽입 성능은 좋지 않음자바스크립트의 배열 상황에 따라서 연속적, 불연속적으로 메모리 할당하는데 대부분 불연속적으로 할당(내부적으로 연결)장점읽기, 쓰기와 같은 참조에는 O(1)의 성능을 가짐단점크기 예측이 힘들기 때문에 메모리 낭비가 발생할 수 있음데이터의 삽입, 삭제가 비효율적임연결리스트배열의 단점을 해결하기 위해 저장하려는 데이터를 메모리 공간에 분산해 할당하고, 데이터를 서로 연결해주면 됨 => Node를 만들어 수행Node의 구조 : data를 담는 변수, 다음 노드를 가리키는 변수장점배열에서 초기 크기를 알아야하는 단점이 없음중간에 데이터를 삽입 혹은 삭제하려면, 특정 노드의 다음 가리키는 노드만 바꿔주면 됨단점데이터들이 전부 떨어져있기 때문에 바로 접근하기 힘듦 => O(n)의 성능스택(Stack)First In Last Out(FILO)으로, 먼저 들어간 데이터가 가장 나중에 나오는 규칙이 있음Redo, Undo 기능, 괄호짝 검사 등에 사용큐(Queue)First In First Out(FIFO)로, 먼저 들어간 데이터가 먼저 나오는 규칙이 있음계산대에 줄을 서는 경우, 맛집 대기줄 등 일렬로 기다리는 줄을 생각하면 됨덱(Deque)데이터의 삽입과 제거를 head와 tail 두 군데서 자유롭게 할 수 있는 자료구조해시테이블(Hash Table)해시(Hash), 맵(Map), 해시맵(HashMap), 딕셔너리(Dictionary)라고도 불림해시와 테이블이 합쳐진 자료구조테이블을 그냥 배열에 저장하면, 낭비되는 공간이 발생할 수 있음테이블의 기존 인덱스를 순차적인 인덱스로 만들기 위해 어떤 계산을 하는 함수를 해시라고 함key만 알면 value에 O(1)의 성능으로 읽기가 가능삽입, 삭제, 수정도 O(1)장점빠른 데이터 탐색, 삽입, 삭제를 할 수 있음단점공간의 효율성이 좋지 않음좋은 해시 함수의 구현이 필수적임셋(Set)데이터의 중복을 허용하지 않는 자료구조해시 테이블을 이용하므로 쉽게 구현 가능해시 테이블을 사용한다고 해서 Hash Set이라고도 불림value 값은 사용하지 않고 key만 사용해서 구현함(key가 데이터)회고칭찬하고 싶은 점강의를 허투루 듣지 않기 위해서 강의 노트를 작성하면서, 좀 더 궁금한 점이 생기면 의문점을 작성해두고 추가로 찾아보는 등 디테일한 이해를 위해 노력했다. 아쉬웠던 점휴일이나 주말 등 강의를 들을 시간이 넉넉한 때를 생각하면서 당일에 들어야하는 분량을 미루는 일이 잦았다.보완해야할 점퇴근 후 피곤하더라도 완전히 그날 강의를 안듣기 보다는, 한 강의라도 들으면서 꾸준히 강의를 수강하는 습관을 들이도록 노력하자!

워밍업클럽CS발자국

채널톡 아이콘