개발새발

10926번 답

let fs = require("fs");
let input = fs.readFileSync('/dev/stdin').toString().trim();
console.log(`${input}??!`);

문제를 처음 봤을 때 뭐 아이디가 존재하는 것을 보고 놀라서 어쩌구 하길래 설마 if 문을 써야하는 건가? 라고 생각했다

근데 아직 조건문을 쓰는 문제도 아닌데 if 문까지 써야하나 싶어서 vscode 로 toString 까지만 해줘도 잘 나오길래 백준으로 실행해봤더니 틀렸댄다 

그래서 구글링을 해봤더니 trim 이라는 메서드를 써줘야 한다는 것이다

trim??? 문자 양끝 공백을 제거해주는 메서드라는데 내가 안보이는 공백이 있나보다

10869번 답

let fs = require("fs");
let input = fs.readFileSync('/dev/stdin').toString().split(" ");
let a = parseInt(input[0]);
let b = parseInt(input[1]);
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(Math.floor(a / b));
console.log(a % b);

출력에 소수점이 없길래 소수점을 버려주고 정수만을 반환하는 메소드를 사용했다

1. 레파지토리 복사하기

git clone --bare [원래주소]
cd [원래 레파지토리 명.git]
git push --mirror [복사주소]
cd ..
rm -rf [생긴폴더]      → 여기서 에러나면 git bash 로 해보기

2. 100mb 이상 커밋 옮기기 

git clone --bare [원래주소]
cd [원래 레파지토리 명.git]
git lfs fetch --all
git push --mirror [복사주소]
git lfs push --all [복사주소]
cd ..
rm -rf [원래 레파지토리 명.git]

3. 옮기고 난 후 로컬과 연결하기

git clone [복사주소]

!!! 여기서 react 프로젝트의 경우 !!!
npm install      → modules 파일 설치, 이래야 리액트 설치됨
npm i      → 프로젝트 내에서 사용한 라이브러리들 설치

9/19 

백준 문제를 푼 후 스터디 과제인 온라인 강의를 수강했다

아는 내용은 빠르게 건너뛰고 까먹거나 이해가 잘 안된 부분은 다시 필기를 하며 이해했다

사실 내가 완벽히 안다고 자부할 순 없지만 그 시간에 내가 부족한 부분을 빨리 보고 싶어서 넘어간 것도 있었다

html, css 는 강의를 듣는 것보다 많이 써보면서 연습해야지 능숙하게 할 수 있다고 생각하기 때문이다

9/20

새벽까지 이력서를 수정하다가 늦게 잤더니 1시 직전에 일어났다

좀 무리한 감이 없잖아 있지만 삘받을 때 후다닥 끝내야지 질질 끌고 싶지 않았다

정신 차리고 나머지 온라인 강의를 듣은 후 백준을 풀었다

9/21

학원에 갔다가 공부가 잘 안되는 것 같아서 집에 와서 공부했다 

새벽까지 스터디 과제인 백준 3단계까지 풀기를 끝마쳐 보고 싶었지만 시간이 부족해서 3단계 중간까지 밖에 풀지 못했다

끝으로 갈수록 점점 어려워지고 복잡해져서 풀기보다 답을 보고 이해하며 외우는 문제가 더 많았다.

9/22

새벽까지 풀다가 자고 일어나서 점심도 안먹고 스터디 모임까지 백준을 풀었다

다 풀지 못해서 너무 아쉬웠다 많이 나약해진 걸까? 좀 우울했다

모임이 끝난 후 밥을 먹고 집을 청소한 뒤 새싹에서 했던 프로젝트를 공부해야 겠다 싶어서 git clone mirror 로 내 레파지토리를 하나 만든 후 복제를 하려고 시도했다

괜히 무서워서 구글링을 많이 하고 시도했는데도 이래저래 막혀서 대충 정리한 뒤 그냥 잤다

9/23

아침에 건강검진을 받고 밥을 먹은 후 git clone mirror 도 마무리하고, 로컬 폴더에도 연결하고, 브라우저로 여는 것도 성공적으로 해냈다

중간중간 에러가 있어서 시간을 보내다보니 공부는 얼마 하지도 못했다

원래 redux 로 정신없이 연결되어 있는 state 를 관리해주는 것까지 하려고 했으나 redux 를 까먹어서 공부하느라 건들여보지도 못했다 차근차근 해봐야겠다

9/25

본가에서 쉬고 일을 도와드리다가 공부를 거의 하지 못했다

면접 준비도 해야하고, redux 상태관리도 해줘야 하고, 스터디 과제도 있는데 공부를 할 것이라 생각했던 건 오산이었다

블로그 글도 마무리를 못해서 지금 헐레벌떡 하는 중이다

해도해도 부족한 것이 공부인데 너무 많이 쉬어버린 것 같다

그래도 많이 쉬었으니 또 열심히 달려야지

백준 1000번 답

var fs = require('fs');
var input = fs.readFileSync('/dev/stdin').toString().split('');
var a = parseInt(input[0]);
var b = parseInt(input[1]);
console.log(a + b);

백준 1000번 답을 이해하고 싶어 vscode 에 입력하고 nodemon 으로 출력을 확인했더니
Error: ENOENT: no such file or directory, open '/stdin'

이런 오류가 떴다 

구글링을 해보니 okky 에서 이곳을 추천해줬고 

https://wooooooak.github.io/node.js/2018/09/26/Node.js-%EC%9E%85%EB%A0%A5-%EB%B0%9B%EA%B8%B0/

나는 fs 모듈을 이해해보고 싶어서 그 다음글인 이곳에 들어가봤다 
https://broadway.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B1%EC%A4%80-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94%EB%B2%95

여기서는 또 이곳을 추천해줘서 

https://likethefirst.tistory.com/entry/JavaScript-Error-ENOENT-no-such-file-or-directory 

'/dev/stdin' 이 부분을 __dirname + "/textfile.txt" 이렇게 바꾸고 동일한 폴더 내에 textfile.txt 를 추가해줬더니 오류는 안나지만 NaN 이 떴다

우짤라미..
textfile.txt 에 뭘 입력해줘야 하는 것 같긴 한데 뭘 입력해줘야 할지 모르겠다
json 파일처럼 쓰는건가? 그런 건 안알려주던데..
찾아 보니 백준의 /dev/stdin 이 파일에 구조를 모르니까 어쩔 수 없다는 말도 있던데 대체 해설은 어딨나요~!

다시 알아보니 문제 내용 중에 "첫째 줄에 A와 B가 주어진다." 는 말이 /dev/stdin 이 파일 첫째 줄에 a 와 b 에 대한 값이 있다는 소리 같았다 
그래서 구글링으로 정보를 수집한 내 해석으로는 fs 로 파일을 동기적으로 가져오고, split 으로 각 숫자를 문자형태의 배열로 나눠준 후, parseInt 로 숫자로 변환한 뒤 각 a, b 로 지정하고 값을 출력해준 것 같았다

완벽하게 이해한 것도 아니고 이게 맞는지도 모르겠지만 일단 다른 분들에게 도움이 될지도 모르고 틀린 걸 지적해주실 수 있으니 기록해놓아야 겠다는 생각에 글을 쓴다

9/13     "[메가바이트 스쿨] 핀테크 서비스 프론트엔드 취업 완성 과정 OT"

규칙과 어떻게 진행될지 등 교육 전반에 대한 안내를 듣고 교육생들과 아이스 브레이킹 시간을 가졌다

아직 기수가 얼마되지 않아서 그런지 나름 체계적이지만 얼레벌레 진행되긴 했다

그래도 열의도 넘치고 좋은 분들 같았다 교육생분들도 생각보다 실력있는 분들이 많은 것 같아서 뭔가 경각심이 들었다

3개월 열심히 들었더니 쉬느라 시들시들해졌는데 앞으로 다시 열심히 해봐야지

9/14

조를 배정받고 바로 스터디모임을 진행했다

어찌저찌 조장이 되었는데 발표를 하고 나니 살짝 후회스러웠다 발표 싫어하는데 왜했지..?

나름 경험이 있다고 생각했는데 다들 너무 열심히 공부를 해오셔서 별 도움은 안된 것 같았지만 나도 열심히 참여했다 

스터디 과제를 정하고 회의를 마무리했다

밥을 먹은 후 7시부터 박영웅 강사님의 특강을 듣게 되었다

현직에 있는 분이라 여러모로 도움되는 말씀을 많이 해주셨다 끝의 Q&A 시간 때도 질문이 많이 들어와서 뭔가 질문을 남기고 싶었지만 잘 생각도 나지 않고 궁금한 점을 많이 남겨주셔서 유용한 시간이었다

9/15

오프라인 강의를 듣자마자 온라인 강의를 듣게 되었다

안 나가도 돼서 내심 좋았다 사실 오프라인 강의라 이 과정을 신청하긴 했는데 밖에 나가는 게 귀찮은 건 어쩔 수 없다

확실히 집에 있으니 열의가 식는지 스터디 과제였던 온라인 강의를 듣다가 쉬다 반복했다

9/16     

벌써 코딩이 질린걸까? 아무것도 하기 싫었다 점심 후 밍기적거리다가 저녁 후에는 밖에 나가서 온라인 강의를 들었다

역시 집이 문제였다 카페에서 공부하니 훨씬 잘됐다

앞에는 html, css 라 아는 건 빠르게 건너뛰어서 css 까지 다 들었다

확실히 현업에 있는 분이라 내가 모르는 것도 많이 있어서 확실히 들을 맛이 났다

특히 선택자랑 transform 부분이 약해서 집중해서 들었는데 perspective 부분을 잘 알려주셔서 이해가 아주 잘됐다

9/17

집안일을 하고 미뤄뒀던 일을 처리하다 보니 오후 시간을 훌쩍 날려버렸다

저녁을 먹은 후 백준 문제를 풀어봤는데 역시 알고리즘 나에겐 너무 높은 산이었던 것임

특히 백준은 js 언어 지원을 하지 않아 node.js 로 풀었어야 했다

console.log 만 주구장창 치다가 풀리지 않아서 결국 검색했더니 입출력을 해야한단다

생전 처음보는 fs 를 사용해서 입출력을 하라는데 이해가 전혀되지 않았다 require 는 왜하고 readFileSyne 은 뭐며 split 을 여기서 왜 해주는지, /dev/stdin 에 뭐가 있길래 parseInt 로 변환하여 빼주면 그 값이 뭔 줄 알고 맞는 답을 출력해주는지... 어려운 것 투성이었다 이래가지곤 프엔을 할 수 있을랑가

일단 답을 외워서 풀었긴 했는데 외우는 것만으로 괜찮은지 의문이다

이미 깔려있는 nodemon 으로 출력을 하려 했으나 Error: ENOENT: no such file or directory, open '/dev/stdin' 이딴 에러가 떠서 또 검색검색검색~ 구글링 마스터~

9/18

오랜만에 이전 교육을 같이 들었던 수료생과 만나서 얘기를 나눴다(놀았다)

요즘 좀 회의감이 들어서 조언을 얻으려고 했으나 그쪽도 그렇게 좋지 않은 듯 했다

인생 고민을 잘 들어주셔서 너무 뜻깊은 시간이었다

다른 사람들 보면 나는 나이를 똥꾸멍으로 먹었는지 아직 응애다 응애

1. 개요

1) html, css, js

html : 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

css : 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. 스타일

js : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

2) 웹앱의 동작원리

주소창에 페이지 주소 입력 → 최초 요청(request) → 서버 → html 최초 응답(response) → 사용자 컴퓨터(브라우저)에 구조 확인 → css, js, jpg 등 추가 파일 요청 → 서버 → 추가 응답 → 사용자 컴퓨터(브라우저) 에서 확인

따라서 페이지를 만든 것을 서버에 업로드, 서버의 주소 설정해서 주소로 접근하는 모든 사람에게 위의 과정에 따라 만든 페이지를 보여줄 수 있음.

3) 웹 표준과 브라우저

웹 표준 : 웹에서 사용되는 표준 기술이나 규칙, w3c의 표준화 제정 단계의 권고안(rec)에 해당하는 기술.

브라우저 공급업체(browser vendors) : 웹 표준을 해석하고 해석된 결과로 브라우저를 만듦.

크로스 브라우징 : 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법. (크로스 브라우징 이슈)

브라우저 용어 : 창(window), 탭(tab), 주소창(abbress bar), 뷰포트(viewport, 렌더링 되는 영역, 렌더링이란 브라우저의 뷰포트에 웹 사이트를 출력하는 행위)

4) 웹에서 사용하는 이미지

웹 이미지 : 비트맵과 벡터가 있음. 비트맵이란 픽셀이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부름. 벡터란 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로 이루어진 이미지.

비트맵 : .jpeg .gif .png / 정교하고 다양한 색상을 자연스럽게 표현. 단 확대•축소 시 계단 현상, 품질 저하의 단점 있음.

벡터 : .svg / 확대•축소 시 자유로움, 용량 변화가 없음. 단, 정교한 이미지를 표현하기 어렵다는 단점이 있음.

jpg(jpeg) : 손실 압축이라는 방식을 사용하는데 이미지가 손실되면서 압축되기 때문에 용량이 획기적으로 줄어드나 저장을 많이 할수록 색상이 바라는 단점이 있음.

png : 비손실 압축이라는 방식을 사용하는데 손실이 되지 않으면서 압축되기 때문에 이미지 품질은 유지되지만 용량은 클 수 있음. 투명도 지원.

gif : 하나의 이미지 파일 안에다가 여러 장의 이미지를 담을 수 있는 구조를 가지고 있음. 비손실 압축 방식을 사용. 움짤, 애니메이션 효과 구현 가능. 다양한 색상 표현에 적합하지 않음.

webp : jpg, png, gif 모두 대체할 수 있는 구글이 개발한 이미지 포맷. 손실, 비손실 압축 방식 동시 지원. 애니메이션 지원. 투명도 지원. 단 최근에 나왔기 때문에 하위호완성 확인 필요.

svg : 마크업 언어 기반 벡터 그래픽 표현. 해상도 영향에서 자유로움. css 와 js 로 제어 가능. 파일 및 코드 삽입 가능.

5) 특수 기호

` : 벡틱, 그레이브

~ : 틸드, 물결

! : 엑스클러메이션, 느낌표

@ : 앳 사인, 골뱅이

# : 샵, 넘버 사인, 우물 정

$ : 달러

% : 퍼센드

^ : 캐럿, 이상(↑) 표현

& : 엠퍼센드

* : 에스터리스크, 별

- : 하이픈, 대시, 마이너스

_ : 언더스코어, 로대시, 밑줄

= : 이퀄, 동등

" : 쿼테이션, 큰 따옴표

' : 아포스트로피, 작은 따옴표

: : 콜론

; : 세미콜론

, : 콤마

. : 피리어드, 닷, 점, 마침표

? : 퀘스쳔, 물음표

/ : 슬래시

| : 버티컬 바

＼: 백슬래시 역 슬래쉬

( ) : 퍼렌서시스, 소괄호, 괄호

{ } : 브레이스, 중괄호

[ ] : 브래킷, 대괄호

< > : 앵글 브래킷, 꺽쇠괄호

6) 오픈 소스 라이선스

오픈소스 : 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것. 단 저작권 확인 필수.

apache license : 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스로 개인적/상업적 이용, 배포, 수정, 특허 신청 가능.

mit license : mit 에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 됨.

bsd license : 버클리 캘리포니아 대학에서 개발한 라이선스, mit 와 동일 조건.

beerware : 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스..?

2. VS code

1) 유용한 단축키

알트 업 = 줄 위로 이동

알트 쉬프트 다운 = 아래에 줄 복사

컨트롤 쉬프트 라이트 = 코드 선택

쉬프트 탭 = 내어쓰기

3. 무작정 시작하기

1) Doctype(DTD)

html1~4 는 명시할 필요가 전혀 없어지고 예전 사이트를 유지보수한다면 xhtml 은 실제로 볼 수 있음

그래서 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans … 라고 써있으면 xhtml 버전으로 만들어진 페이지라고 생각하면 됨

4. 선택자

1) 기본

전체 선택자 : 모든 요소를 선택. ex) *

태그 선택자 : 태그 이름으로 요소 선택.  ex) div, li, ul

클래스 선택자 : 클래스 속성 값이 abc 인 요소 선택.  ex) .abc

아이디 선택자 : 아이디 속성 값이 abc 인 요소 선택.  ex) #abc

2) 복합 : 기본 선택자들을 조합해서 사용

일치 선택자 : 선택자 두개를 동시에 만족하는 요소 선택.  ex) span.orange → span 태그의 orange 클래스

자식 선택자 : 선택자의 자식 요소 선택.  ex) ul > .orange → ul 태그 바로 아래 orange 클래스

하위(후손) 선택자 : 선택자의 하위(손자) 요소 선택.  ex) div .orange → div 태그 아래(모두) orange 클래스

인접 형제 선택자 : 선택자의 다음 형제(같은 부모) 요소 하나를 선택.  ex) .orange + li → orange 클래스 바로 다음에 있는 li 태그 하나만

일반 형제 선택자 : 선택자의 다음 형제 요소 모두를 선택.  ex) .orange ~ li → orange 클래스 바로 다음에 있는 li 태그 모두

3) 가상 클래스

:hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택.

:active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택.

:focus : 선택자 요소가 포커스(활성화)되면 선택. 대화형 콘텐츠만 가능. 다른 요소도 tabindex 속성을 통해 가능하게 만들 수 있지만 권장하지 않음.

4) 가상 클래스 선택자

:first-child : 형제 요소 중 첫째라면 선택.

:last-child : 형제 요소 중 막내라면 선택. 

:nth-child(n) : 형제 요소 중 (n)번째라면 선택.  ex) 2n 은 짝수번째 모두, 2n+1 은 홀수번째 모두

:not(abc) : 선택자 abc 가 아닌 요소 선택.  ex) :not(span) → span 이 아닌 것 모두

5) 속성

[abc] : abc 속성을 포함한 요소 선택.

[abc = "xyz"] : 속성 abc 를 포함하고 값이 xyz 인 요소 선택.

6) 스타일 상속 : 부모 요소에 지정된 속성을 동일하게 자식 요소에서 속성값에 inherit 으로 지정하면 상속됨.

5. css 속성

1) box-sizing : 요소의 크기 계산 기준을 지정

속성값 : content-box, border-box

content-box : 요소의 내용으로 크기 계산, 기본값

border-box : 요소의 내용 + padding + border 로 크기 계산  ex) width 100px, padding 20px, border 4px 일 때 width 는 실제로 총 148px 로 늘어나는데 그것을 100px 로 맞춰서 설정해줌

2) 전환

transition : 요소의 전환 효과를 지정하는 단축 속성

transition-property : 속성 이름 지정, all 은 모두

transition-duration : 지속시간을 지정, ~s

transition-timing-function : 타이밍 함수를 지정, ease 느리게 linear 일정하게 ease-in 느리게-빠르게 ease-out 빠르게-느리게 ease-in-out 느리게-빠르게-느리게 / easing functions 사이트 참고

transition-delay : 몇 초 뒤에 시작할지 대기시간을 지정, ~s

3) 변환

(1) 2D 변환 함수

- transform : 요소의 변환 효과

- translate(x,y) / translateX(x) / translateY(y) : 이동

- scale(x,y) : 크기

- rotate(degree) : 회전(각도)

- skewX(x) / skewY(y) : 기울임(x축 또는 y축)

(2) 3D 변환 함수

- rotateX(x) : 회전(x축)

- rotateY(y) : 회전(y축)

- perspective(n) : 원근법(거리px) / 원근법 함수는 제일 앞에 작성할 것!

(3) perspective 속성과 함수 차이점

- 속성 : perspective: 600px; → 관찰 대상의 부모에게 적용, 기준점은 perspective-origin 으로 설정

- 함수 : transform: perspective(600px) → 관찰 대상에게 직접 적용, 기준점은 transform-origin 으로 설정

- 똑같이 적용해도 관점이 다르기 때문에 결과물은 살짝 다름. 둘 다 써도 상관없지만 속성을 더 선호.

(4) backface-visibility

- 3D 변환으로 회전된 요소의 뒷면 숨김 여부. rotate 로 완전히 회전하여 뒷면이 보여질 때 뒷면이 보이는지 안 보이는지 설정하는 속성. 속성값으로 hidden 과 invisible 이 있음.

7/25
강사님께 여쭤본 것 해결. 하지만 검색창 열리는 건 너무 복잡하게 코드가 작성되었으니 정리 필요할 듯. 원래 썼던 block usestate 써도 해결 가능하다 함. 대가리 굴려서 그렇게 해결해볼 것.

header 언어, 검색 파트에 기능, 스타일링, 반응형 완료

수정할 것:
- 언어 chn 페이지 링크 추가
- 언어 페이지 클릭하면 넘어가면서 언어 선택 파트 꺼지기
- 검색창에 버튼들 누르면 해당 페이지 넘어가면서 검색창 꺼지기
- maipo 개요 파란색 글자 타이핑 되도록 지혜님꺼 가져오기
- maipo 프로세스 아코디언 높이 수정

7/26
수정할 것:
- 언어 chn 페이지 링크 추가 O
- 언어 페이지 클릭하면 넘어가면서 언어 선택 파트 꺼지기 O
- 검색창에 버튼들 누르면 해당 페이지 넘어가면서 검색창 꺼지기 O
→ onclick 했을 때 usestate 변수 초기값을 넣어주면 해결

- maipo 개요 파란색 글자 타이핑 되도록 지혜님꺼 가져오기 O
→ 배낀거라 다시 정리 필요

- maipo 프로세스 아코디언 높이 수정 O
→ vw 가 아닌 rem 으로 줘서 해결

7/27
maipo 개요와 성과에 나이트 모드 적용하기 - 지혜님 certify

7/28~8/1

계속 수정수정수정

결과물을 위해 계속 수정!

8/2

끝났다

또 다른 고생 시작!

7/18
강사님께:
- 탭 부분에 button 에 클래스 네임 붙이고 싶은데 에러남 O (지원쓰가 해결해줌)
- header 서브페이지 가면 바뀌게 코드 짰는데 작동이 안됨
- header z-index 적용 안됨

수정할 것:
- nth child 말고 클래스 이름으로 (컨텐츠 추가되면 밀리니까)


7/19 
오늘 할 것: 
- 사이트맵 부분 스크롤 고정 (components - common - consulting - index 참고)
- 검색창 전체적으로 사이즈 조절, 열고 닫을 때 엑스 버튼으로 바꾸고 스크롤바 없애기
- 모바일 페이지 들어가기
- 지혜님 동그라미 돌아가는 거 배껴오기

강사님께 해결함:
- 탭 부분에 button 에 클래스 네임 붙이고 싶은데 에러남 O (지원쓰가 해결해줌) : state 해준 걸 상단으로 올려야 적용이 됨
- header 서브페이지 가면 바뀌게 코드 짰는데 작동이 안됨 : 강사님이 해결, 정리하기!
- header z-index 적용 안됨 : relative 말고 absolute로 바껴야 됨

 * 리팩토링: 팀별로x 각자, 면접볼 때 프로젝 후에 하나씩 리팩토링으로 코드 정리했다 하면 좋아함

혜인님 수정해야 될 부분
 O 1. Mergers And Acquisitions 밑 부분에 M&A는 둘 이상의 회사… 부분 font-size: 2rem;으로 수정할 것
 O 2. IPO 부분도 똑같이 수정할 것, line-height를 조금 줄일 것(M&A, IPO 부분)
3. 아코디언 부분에 눌렀을 때, 화살표 하얀색으로 변하도록 할 것.(^) 아코디언 닫히는 것도 수정(다시 눌렀을 때 닫혀야 됨)
4. 합병계약 체결에 있는 계약서 작성과 자금조달 및 대금결제방법 등 결정 부분 줄바뀌는 부분을 수정할 것. (정 하나만 떨어져서 보임)


7/20 
19일에 수정해야 될 부분 완료. 

오늘 수정해야 될 부분 : 
- 윤하님한테 사진받아서 아이콘 splite 말고 사진 넣어서 수정

내일 세진님한테 물어볼 것 : 
- ma accordion bottom 파일 삭제 가넝한~

오늘은 하루종일 m&a/ipo 반응형만 만들었다


7/21
m&a/ipo 반응형 완료!

윤하님한테 검은색 서치 버튼, 검은색 햄버거 버튼 없다고 하기

사이트맵 빼고 헤더 반응형 완료


7/22
반응형 회의: 
- 모바일 버전 헤더 로고 크기 줄이고 O
- 사이트맵 자료에 기술거래리스트 추가, 컨설팅 실적 앞에 O
- maipo 개요 500px 쯤에서 사진 작음 키우기 O
- m&a 프로세스 400px 쯤에서 line-hight 주기 O
- ipo 프로세스 400px 쯤에서 사업성~ 사이즈 줄이기
- 사이트맵 부모에 hight 100% 주면 됨, 오버플로우 히든 스크롤 O
- 밑으로 잘리니까 다양한 방법 그걸 없애기 O
- 1026px 호버 투뎁 글씨 줄이기 O


7/23
22일 반응형 회의에서의 수정사항 모두 완료.

월요일에 강사님께 물어볼 것: 
- 검색버튼 클릭하면 x 버튼으로 바뀌고 다시 클릭하면 검색버튼이 되도록 바뀌게 하고 싶은데 헤더가 호버된 상태라서 어떻게 해줘야 하는지?
- 랭귀지 부분을 eng, chn 둘다 라우트해서 header 가 기본적으로 있는데 그래서 각 랭귀지를 클릭하면 위에 그 랭귀지가 업데이트 되도록 바뀌어야 함 어떻게 하는지?


7/24
내일 util 부분에 아이콘 넣는 걸로 변경하고 강사님께 물어봐서 23일차 거 해결

7/11
쇼핑몰 2
header 구현 시작, 빈 곳에 호버해도 dep 2 가 나타남 왜?

7/12
어제 궁금한 것을 강사님께 여쭤봤더니 opacity : 0 을 주고 hover 하면 opacity : 1 을 주는 것이 아니라 display : none 을 주고 hover 하면 flex 를 해줘야 했음
dep1 에만 호버해야 dep2 가 나오는 걸 다른 교육생에게 물어봤더니 dep1 의 a 의 크기를 수정하라고 해서 맞췄더니 됐다.
header 마크업과 스타일링을 하느라 수업을 아예 듣지 못했다.
집에 와서 겨우 메인페이지에 들어갈 header 의 마크업과 스타일링을 마쳤다. 사용을 하지 않으니 잊어버려서 헤맸지만 잘 마쳤다.

7/13
메인 기본 배경이 투명인데 서브페이지에서는 기본이 흰색이라 강사님께 여쭤봤다.
header 컴포넌트 나누는 법이 감이 잡히지 않아 강사님께 여쭤봤다. 내가 하는 게 맞고 gnb 는 hover 기능을 썼으니 li 나눌 필요 없다고 하셨다. 그러나 내 것처럼 컴포넌트를 구성하면 각각 props 를 귀찮게 내려줘야 한다고 하셨고 요소들을 쭉 나열하면 정신 없기 때문에 어쩔 수 없다고 한다. 그리고 dep2 가 컨텐츠 크기만큼 높이를 설정하게 하려면 그냥 height 값을 안 주면 된다고 하셨다. 

지금 헤더에 해야하는 기능 : 
- dep1 클릭하면 dep2 나오고 header 배경색 흰색으로 나오게 : 각 서브 페이지에서 state 값으로 클래스 네임으로 흰색지정하기
- eng, chn 누르면 기본 kor 가 각 lang 으로 바뀌게 : select 태그 이용해서 간단하게 처리가능
- search 버튼 누르면 search 창 나오게 :  onclick

강사님 : 
- 햄버거 버튼 클릭하면 사이트맵 나오게(옆에서 서서히 나오는건 어떻게? css 로?)
- border 로 밑줄을 줄 수 없어서 after 로 밑줄을 넣어줬는데 컨텐츠 크기만큼 어떻게 넣는지? / :hover::after 이렇게 넣으면 안되고 a 태그는 dep2 를 위해 width 를 늘려놨기 때문에 after 를 직접 주면 width 가 그만큼 늘어나기 때문에 텍스트 크기만큼 주고 싶다면 텍스트를 span 태그로 감싸서 span 태그에 after 를 주기
- 왜 검색버튼 움찔거려!~!~!~! : 걍 부모 태그에 위드값 좀 더 넓게 주니까 안 그럼..

언니한테: 클래스 네임 header도 똑같이 hd어쩌구로 줘야하는지 -> 맞음~! , dep2 는 각 컨텐츠 크기만큼만 나오게 하는건지? -> min-width 지정하기~!
세진님한테: app.js 에 header 가 없던데 어떻게 하는건지? -> 직접 넣으면 됨~~!

강사님 퇴근 후 :
- height 가 커서가 옮겨갈때마다 해당 dep2 가 컨텐츠 크기만큼 서서히 줄었다가 서서히 늘렸다가 어떻게?

집에 가서 코딩 :
- react 를 허투로 배웠는지 검색창 열리고 닫히는데 시간을 많이 할애했다.
- warning: LF will be replaced by CRLF in src/styles/ir/irPerfo.css.
The file will have its original line endings in your working directory => git add . 했더니 이런 오류가 났다. 구글링 해보니 윈도우의 줄바꿈 문자와 다른 운영체제의 줄바꿈 문자가 다르기 때문에 발생한다고 하는데 어떤 조치를 요구하는 경고 같은 것이 아니라 알림성 메세지라고 생각하면 된다고 한다. 그래서 큰 문제가 되지 않지만 기능 사용을 원치 않는다면 비활성화 코드가 있다고 하는데 아마 내일 가서 세진님한테 여쭤봐야 하지 않을까 싶다.
- react-dom.development.js:86 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. => 버튼 기능을 추가한 후 콘솔을 봤는데 이런 에러가 떠있었다. 검색해보니 button 태그 안에는 또 button 태그를 쓸 수 없다는 뜻이란다. 아마 button 태그 안에 onclick 을 주느라 그 안에 중괄호로 컴포넌트를 불러와서 button 태그 안에 div 가 있는 이상한 구조라 에러가 난 것 같아 button 태그 밖으로 빼줬다. 

내일 할 것:
- 검색 창이 아래로 스크롤하면 화면에 고정되어 있음 수정 필요
- 검색 버튼 두번 눌러야 닫힘 수정 필요
- dep2 transition 적용하려면 visibility 로 적용

7/14
강사님한테 텍스트도 안보였다가 보이게 어떻게 하냐고 물어보기 : overflow hidden 을 주면 텍스트도 안보임

오늘 한 것:
- 검색 창이 아래로 스크롤하면 화면에 고정되어 있음 수정 필요 : relative 를 absolute 로 수정
- 검색 버튼 두번 눌러야 닫힘 수정 필요 : 사진 첨부, 강사님이 간단하게 바꿔주심
- dep2 transition 적용하려면 visibility 로 적용 : 그리고 height 도 줌

m&a / ipo 해야 할 것
- 일단 index 파일 하나 만들어서 동일한 모든 요소 불러들이기
- mnasubtitle, iposubtitle 컴포넌트 생성
- info, pro, perfo 컴포넌트에 들어갈 mnainfo, ipoinfo 이런 식으로 각각 컴포넌트 생성
- 그래서 m&a 버튼 누르면 mnasubtitle 을 부름과 동시에 mnainfo 컨텐츠도 같이 부를 수 있도록 info, pro, perfo 컴포넌트에다가 state 로 설정

내일 강사님께 물어볼 것
- header 서브페이지 가면 바뀌게 

7/15
서브 페이지 mna ipo 를 usestate 로 초기값을 컴포넌트로 배열로 만들어서 mna 버튼 누르면 mna 배너랑 mna 컨텐츠 나오도록

7/16
한 것: maipo process m&a 아코디언, 성과 ipo

강사님께 : 
- 개요 컴포넌트에 버튼 누르면 변화 있도록 스타일 주고 싶은데 에러 나고 안됨

7/17
한 것: maipo 성과 ipo 애니메이션

헤더 z-index 외 않되~!~!~!