1. 들어가며
2. 9월20일
3. 9월21일
4. 9월22일

들어가며

아,,, 너무 바빠 진짜요 졸업논문 미쳐버렸읍니다 정말,, 그냥 한달 불태워서 끝내고 시간여유를 좀 가져가야겠습니다.

9월20일

*** section,article 안에는 꼭 h태그 넣어주기 // 깜빡 안쓰는 클래스도 남겨두지말고 삭제하기

아이디 앞, 뒤 이미지적 요소 = before&after로 background-image 로 적용

** 포트폴리오 프로젝트들은 W3C validator (검사기)에 꼭 돌려보기 !! ** 틀린거있으면 그냥 탈락이다

배치시에는 패딩을 적절히 이용하기

박스안의 내용물이 길어졌을 때, 충분한 좌우여백을 확보하기 위해서 패딩을 넣어줌

• font-family: 'Spoqa Han Sans Neo','sans-serif’;
• 위 처럼 적게된다면, 스포카 한 산스 네오 폰트가 없을 경우 산스 세리프 폰트를 사용한다.

box-sizing:border-box : 상속이 되지 않는 속성

hidden vs none 스크린리더가 읽어야 할 , 화면에 표시되지 않아야 할 태그의 경우 hidden과 display:none 을 쓰면 안된다. naver의 blind 클래스처럼 css를 통해서 숨겨야 한다.

{ clip width :1 height: 1 magin -1px }

요소와 요소사이의 간격 : margin 자기가 자식들로 가지고 있는 요소와 자신과의 간격 : padding

* 컨테이너의 높이는 자식들의 높이에 따라서 바뀌도록 유연하게 작성하는 것이 좋다.

플렉스와 그리드의 단점 float : 자기와 그 외의 다른 요소간의 위치를 결정하는 속성 flex & grid : 컨테이너안에서 제약되어서 위치를 결정하기 때문에 컨테이너 요소가 꼭 필요함 -> html 태그 하나씩 더 써줘야한다.

원근법 : perspective

top & left로 요소들을 화면 중앙점으로 시작점을 맞출 수 있다. 완전히 정중앙으로 옮기기 위해서는 추가작업 필요 margin을 이용하거나 transform을 이용 margin의 경우는 width, height를 알아야함 transform은 그냥 -50% 때려주면 된다.

object-fit : contain 이미지를 원본이미지의 비율로 맞춘다.

perspective 는 자신의 자식에게만 적용가능

뒤면을 보여주는 애들을 안보이게 함 backface-visibility: hidden;

9월21일

플렉스-아이템의 마진속성에 관하여 ,,,

플렉스는 하위 아이템들이 많아져서 공간이 부족하면 다른 아이템들의 width값을 보장해주지 않고 줄여서 우겨넣는다. —> flex shrink :1 사이즈를 보장해준다 -> flex-shrink:0 줄일만큼 줄이다가 img 고유의 사이즈 이상으로 줄어들게되면 부모 컨테이너 밖으로 삐져나가게 된다

left:0 right:0 을 동시에 줘서, 현재 요소의 사용가능한 너비가 부모의 컨테이너 너비만큼 넓어지도록 해준다. 이때

width:100px margin:0 auto 를 줘서 수평정렬 가능하다.

위와 비슷하게 left,right,top,bottom 전부 0 때려줘서 (inset:0으로 해주면 똑같은 기능을 한다.) 정중앙 정렬도 해줄 수 있다.

9월22일

outline : border와 비슷하지만, 레이아웃에 영향을 미치지 않음. 즉, 밀려남이 없음 // just focus 를 나타낼 때는 이를 사용 border

셀렉트를 구현하는 방법 select를 쓰기보단, 버튼과 ul, 그리고 hover 가상클래스, js 를 이용하는것이 실무레벨

clip 속성은 점점 지원을 줄여가고 있다.. 사용하기 불안해 대신 clip-path를 써라 !

레티나 디스플레이 2배 크기의 이미지를 절반크기로 압축시키기! background-size: 84px 50px; (원본 크기의 절반)

1. 9월13일
2. 9월14일
3. 9월15일

9월13일

body {} 에 background-image 를 넣어주면 이미지가 예상된 body영역을 벗어나서 전체를 차지하게 된다.

background-position이 center로 되어있으면 image의 중앙이 body의 본래 영역의 중간으로 맞추어지게 된다. <- 이미지가 잘려서 시작하게 되는 원인

background-size auto : 이미지의 기본 사이즈 cover : 가로비를 맞춰서 보여줌, 찌그러지지 않는 한도 내에서 제일 크게 설정 ->container와 다르게 잘릴 수도 있음 ~px : 입력된 픽셀단위로 맞춰서 보여줌 container : 이미지가 잘려지거나 찌그러지지 않는 한도 내에서 제일 크게 설정

자주 사용하는 3종 세트 : no-repeat cover center

opacity : 투명도 조절

자식 요소의 마진 top or bottom이 부모의 높이에 영향을 끼치지 않음

민지님 html 개행 span과 br 중에 무엇을 쓰나 ?

1. 개행의 목적이 우선 디자인인 경우 span 의미론적인 br 사용

span으로 개행을 한다는건 box모델을 display block으로 줘서 개행을 하는 방법임

반응형페이지 제작순서 : 모바일 테블릿 피시순서

개발자도구창의 네트워크 ?? 고정단위 가변단위 값 em 배수 단위 , rem 루트의 배수

9월14일

인라인 요소의 경우 세로정렬하려면 padding과 margin을 주로 이용한다. 그리고 width랑 height 적용이 불가능하다.

세로정렬 방법2. line-height 와 height 를 동일하게 해주면 수직정렬이 된다. ( 단 내용물이 두줄 이상이 되면 통하지 않는다. 한줄텍스트 수직정렬하고 싶을때 사용 ) 수평정렬의 margin: 0 auto;와 비슷한 방법이다!

또한 버튼요소는 수직정렬을 해줄 필요가 없다. 알아서 된다.

세로정렬 방법3. position: relative top:50% transform:translation(-50%) or margin-top:50% 을 이용

버튼의 크기 설정하는 방법

1. width, height 이용
2. padding 이용

여기서 나오는 차이 ? 1번을 이용하면, 콘텐츠에 따라 늘어나는것이 안된다. 2번을 이용하면, 콘텐츠의 크기에 따라 자연스럽게 늘어난다.

vertical align : 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성 middle값 : 부모의 baseline+ x-height의 절반의 위치 -> 수직정렬이 안된다,,,

• px 단위설정도 가능하다!

text-indent : 텍스트 시작전 빈 공간 (들여쓰기)

text-decoration : 윗줄, 밑줄 꾸미기, 스타일링의 용도로는 잘 사용하지 않음 주로 a태그의 밑줄 지울때 이용

text-overflow : 부모 컨테이너 넘어간 컨텐츠가 어떻게 보여질지 결정 clip : 자름 ellipsis : 말줄임표시로 나타냄 *ellipsis사용하려면, overflow:hidden이랑 white-space:nowrap이 같이 적용되어야 사용할 수 있다.

position : 태그의 위치를 지정 static: 기본값(원래자리) relative : 원래 내가 있어야 하는 위치에 상대적위치를 가진다. left & top 값을 수정하여 원래 위치에서 이동시킬 수 있다. top, right, left, bottom 값은 static이 아닐 때만 이용가능

absolute : 부모의 영역(position을 가진)을 기준으로 위치를 가짐
    이 요소를 가진애는 다른애들의 위치에 영향을 미치지 않음
fixed : 스크롤 업&다운시 해당 박스가 고정되어 움직이지 않음
sticky : 가장가까운 부모영역에 달라붙음 // 스크롤 업&다운시 유지
    부모영역이 끝나면 사라짐

z-index : z축의 위치를 설정 position 속성값이 적용된 곳에서만 쓸 수 있음 *이 값이 설정되어 있지않다면, 최근에 만든것이 더 위로 올라가게 된다.

*부모의 z-index값이 자식의 z-index값의 최대치를 막는다.
즉, 부모가 부모의 다른 형제한테 한번 지면 그 자식은 아무리 z-index가 높아도    부모의 형제를 이길 수 없다.
보통10단위로 많이줌

Float : 요소를 둥둥 띄워서 좌우 정렬함 *float 속성 적용하면 display가 block으로 바뀜 float 사용된 바로 다음형제 요소에 clear 사용가능,

9월15일

9월 15일

특정 속성을 가진 태그에 대한 스타일 방법 -> 태그이름[속성이름] { 스타일 내용 } ->ex) a[href] { font-size:10px; }

구분해야할 것 클래스 이름이 weniv인 div태그에 대한 스타일 div[class=“weniv”] {} data 이름이 weniv인 div태그에 대한 스타일 div[data=“weniv”] {} 클래스 이름이 weniv인 div태그에 대한 스타일 div.weniv { }

href의 값이 http로 시작(^)하는 a태그에 대한 스타일 a[href^=“http”] {} href의 값이 pdf로 끝($)나는 a태그에 대한 스타일 a[href$=“.pdf”] {}

가상 클래스 선택자 (: 콜론 하나) : 클래스가 없는데, 있는것처럼 ex) .foo:nth-child(n) {} // 우리가 자주 봤던 nth child가 예시임 *.foo:first-child 의 경우,, foo클래스의 부모의 자식들중 첫번째 태그가 foo일 경우만 css가 적용된다.

가상 요소 선택자 (:: 콜론 두개) : 요소가 없는데, 있는것처럼

방문한 적이 있는 링크를 선택 a:visited { }

:focus : 요소에 포커스가 있을 때 적용

클래스1 + 클래스2 : 형제선택자 (형제 = 같은 부모 아래 동급의 태그)

p의 앞뒤로 스타일 주기 p::before {content:’’} = content는 문자열 삽입 p::after

::selection {} = 텍스트가 선택되었을 때 스타일 주기

h1 + ul : 인접형제 ,,, 즉 H1 바로 근처의 ul만 선택 h1 ~ ul : 일반형제 ,, h1 이후에 나오는 모든 형제인 ul을 선택

Flex display 속성중 하나로써, 요소가 배치되는 방식을 결정 외부 디스플레이 타입(inline, block, inline-block) : 부모와 형제간의 박스 배치 내부 디스플레이 타입(flex, grid) : 내부 자식 박스 배치 *1차원 배열 구현시 고려

Grid 넹,, *2차원 구현시 고려

암기해야 할 코드 ( 수평 중앙 정렬 ) display: flex; justify-content:center align-items : center align-items의 경우 부모의 값을 따라감’

flex basis : 가변적 <-> width와 height : 고정적 grow : 컨텐츠를 제외한 여백의 비율

git clone http...git

근데 이미 만들어진 폴더 아래에 하위 폴더를 따로 만들지 않고 저장소 내 파일들만 불러오고 싶다면 ,, ? 아래와 같이 하면 된다.

git clone http...git .

그냥 마지막에 '.' 점하나 붙여주는걸로 가능 ,,, 쉽죠 🅴🅰🆂🆈

1. 들어가며,,
2. 9월2일
3. 9월5일
4. 9월6일
5. 9월7일
6. 9월8일

들어가며,,,

확실히,, 뒤늦게 회고록을 작성하려하니 그 날에 뭐 배웠는지 잘 생각도 안나고 시간도 많이 걸리고 대충작성하게 된다.

페이지 만들어놓고 최대한 수업끝나면 바로 쓰도록 해야겠다

🔥 내일부터 간단한 목표 🔥 수업들으면서 타이핑한 자료 복붙 및 정리 + 소감포함하여 10분 이내 작성할것

9월2일

사실 오늘이 특강이 있던 날이었는데, 예비군훈련이 겹쳤다🥲 그래도 작년이랑 재작년에 원격수업을 들어서 이번훈련은 기본8시간에서 4시간을 삭감해, 4시간 수료받게되었다. 마치고 집으로 달려서 도착하니 2시 ,,, 밥을 좀 먹고 수업에 들어가니 3시가 막 넘어가는 상황이었더랬지 ,,,

뒤늦게 듣기 시작했음에도 수업내용이 강제주입되어버리는 강의실력 ,, 대부분 css에 관한 내용이었는데, css는 각잡고 공부해본적이 없다보니 거의 모든 내용이 새로웠다. 하지만,,, 뒤늦게 들은 여파로인해 따라가기 쉽지 않았고 집중도가 떨어져서 조는 바람에 수업내용 ㅃㅇ 😱

조원분들의 은혜로 과제와 오늘 배운 내용을 정리한 노션페이지를 하사받고 뒤늦게 공부해가며 수업내용을 습득하기는 했다

9월5일

태그의 내용또한 semantic 하게 작성해야 한다.

하나의 section에는 하나의 h 태그가 꼭 들어가야 한다!

nav 태그는 페이지 전환이 일어나는 링크들의 모음일 때, 사용한다.

h태그 안에 p태그를 한번 더 써서는 안된다.

a와 button 태그 차이점 a 태그 = 사이트 이동 //// button 태그 = 사이트 내에서 동작

통일성, 규칙, 모듈화가 가능한 웹페이지가 좋은 웹페이지라고 할 수 있다.

9월6일

오늘은 html 태그를 위주로 배웠다. 아래는 수업들으면서 키보드가 가는대로 정리한 내용👍 물론 내가 알아볼 정도로만 대충 써놨다 ,, 나중에 복습할때 깔끔하게 타이핑하면서 공부하면 되지 뭐🤗

wbr 태그 : 줄바꿈 위치를 지정해준다 a 태그 : 페이지 이동뿐 아니라 해쉬링크를 통해서 페이지 내 이동도 가능 파일 다운로드 또한 가능 b태그: 오래된 태그다 요새는 잘 사용안해 strong : 굵은 글꼴 및 강조 ,, 중첩사용가능 i태그 : 얘도 오래된 애긴하지만 html5를 넘어가면서 전문용어, 주언어와 다른 언어 등을 의미함 em : 기울임 글꼴 및 강조 dfn : 문서에서 최초로 나타나는 dt>dd 태그 내의 특정 용어를 설명할 때 사용 abbr : 약자를 의미 // title 속성을 통해 마우스 오버시 나타낼 텍스트 설정가능 sup, sub : 윗첨자 아랫첨자 span : 의미없이 영역묶기용 // 최대한 사용을 줄일 것

인라인레벨요소 xx -> 텍스트레벨요소 블럭레벨요소 xx -> 블럭요소

페이지 내에서 많이 사용되지 않는 폰트의 글자의 경우,,, 폰트를 다운로드 받지 않고,,, 이미지로 렌더링해버림,,

Img 태그 안의 alt 속성

<!-- alt안에 공백으로 남아있는 경우 : 스크린리더가 읽지 않음 -->
<img src="jeju.jpg" alt=""> 
<!-- alt 자체가 없는 경우 : 스크린리더가 'a'를 읽습니다.-->
<img src="jeju.jpg" >
<!-- 스크린 리더가 '이미지'를 읽습니다. -->
<img src="jeju.jpg" alt="이미지">

Picture 태그 : source 요소의 media 속성값에 따라 화면에 다른 이미지 표현가능 Source 요소의 type 속성을 통해 포맷을 브라우저에게 전달가능 ->>스크린리더 ??

점진적 향상기법 위 picture 태그와 같이, 브라우저가 지원하는 포맷에 따라 다음요소로 넘겨서 데이터를 제공하는 (크로스브라우징)기법 -> 이는 웹서비스 구축시 충분히 고려해야 할만한 사항

iframe : 아 ,,, 이거 좀 잘안써도 될듯한 그런 ,,, 응 트래픽처리부분에서도 별로고,, 특히 보안관점에서는 사용자가 iframe을 해킹하는데 충분히 활용가능하므로 웹서비스 자체에서 사용하지 못하도록 구현하는것이 좋아

9월7일

video 태그 쓰지 말고, iframe 써라

1. 순간 트래픽 부하분산,,
2. 월간 트래픽,, (비용적 문제)

codec&format

1. 코덱 : 촬영한 영상
2. 포맷 : 영상을 담는 컨테이너 브라우저에 따라 사용가능한 코덱과 포맷이 다르다.

Form

form : 정보를 입력하는 영역 action과 method 속성 존재 action 속성 : input 데이터가 전달되는 목적지 method 속성 : 서버로 데이터를 보내는 방식 -> method에 따라 DB내 CRUD 작업이 연결됨

POST : Create // post 사용하면 쿼리스트링 제공하지 않아서 스니핑 예방가능 —> 패킷 안에 데이터를 캡슐화해서 전달할 때 사용 GET : Read // 큰 파일 또는 id,pw와 같은 민감데이터 전송 시 사용하지말것 PUT : Update Delete : Delete *단 Form에서는 post, get 만 사용 가능

** 배속 설정 :) ** document.getElementsByTagName("video")[0].playbackRate = 2.5;
 이거 좀 개꿀따리임,,, 동영상 재생시 최대배속을 넘어가도록 설정 가능

Input type = radio 에서 name 을 통일해야 radio가 묶여서 작동함 Ex) name=‘성별’ value=‘man’ name=‘성별’ value=‘woman’ 이런식으로 두개 써줘야 택1 기능을 구현 가능

button vs input

button이 스타일 적용하기가 훨씬 수월 Input 은 닫는 태그 없어 ,, 대부분 별 일 없으면 button사용해

1. form에 제출되는 데이터를 javascript로 수정하는 일은 가능하면 하지않는 것이 좋다. (input으로 해결할 수 있거든요)
2. form에 없는 데이터를 추가하고 싶다면 hidden type의 input을 하나 더 만들어서 value를 javascript로 추가하는 방식을 사용하자

*table을 thead와 tbody로 나누는 이유 ,, tbody에 동적으로 데이터를 쏴주게 된다. 이 때, thead가 꼭 있어야 정상적으로 데이터 전송이 가능 단, tfoot 은 선택사항

CSS

*마지막에 쓰여진것이 적용된다.

selector : 선택자, property : 속성 value : 값

Css 적용하는 세가지 방법

• 내부 css :
• 외부 css :
• Inline css : 권장하지 않음

내부 vs 외부 css 장점 내부 : 파일 하나만 수정하면 된다 외부 : 마크업과 css의 분리가 가능

다중 스타일 sheet *태그에서 더 가까운 css가 적용된다.

특강

블록레벨 요소들 사이에서는 인접해있는 상하단 margin이 겹친다 *(좌우 margin은 안겹침)

이는 동일한 레벨의 블럭요소뿐 아니라, 부모, 자식 사이의 블럭요소들끼리도 적용된다. 🔥 이 경우의 해결방법 🔥 방법 1. 부모에게 패딩값 또는 보더값을 1px준다. 방법 2. 부모에게 display: flow-root 를 준다.

9월8일

Img ( 백엔드의 입장에서 컨트롤 되는 변경가능성이 있는 이미지 ) background-img(변경되지 않을 이미지, )

id는 문서내에서 유일해야 함 하나의 태그안에 여러개 사용 불가

emmet .tit-txt#main-title 탭 사용시 <div class=“tit-txt” id=“main-title”></div> 가능

/* 자손 */
div p {}
/* 형제 */
div +p {}
/* 직계 */
div > p {}

구체성의 원칙 ( 좀 더 구체적으로 명시된 것이 적용 )

• { color: red; } h1 { color: blue; }

style 가중치 id> class >type 순으로 가중치를 가짐

!important 를 주면 우선권을 얻을 수있다, !important 가 둘 다 적용되어있을 경우는 순서에 영향을 받는다.

box-sizing:border-box : width와 height대로 맞춰줌 border로 인해 해당 사이즈를 넘어가지 않도록

🔥 중요 🔥

Display 종류

block : width& height로 컨트롤 가능, 패딩 마진 보더 속성을 사용가능하고 해당 속성이 다른 요소를 밀어낸다. (한 줄에 하나 ) inline : width&heigh 속성 사용 불가, 패딩과 보더 속성 사용가능, 마진은 좌우만 조절가능, 각 속성들의 상하값이 다른 요소를 밀어내지 않음(한 줄에 여러개) inline-block : width&height, margin padding border 전부 적용 가능(한 줄에 여러개)

다중 스타일시트

정의 : css 안에 또 다른 css 를 적용시키는 방법이다. 용법 : @import "cssname.css" 를 최상단에 입력하여 적용할 수 있다. 추가 : @import ~~ 처럼 @가 붙는 문법을 at-rules라 부르는데, 다양한 기능들을 제공한다.

이상 ,, 9월 9일 오후 2:36 작성 journey ji

1.문제 2.내 코드

문제

자연수 n이 주어지면, 1과 n사이의 소수의 개수를 반환하시오. 예시) 입력:13 출력:6

1~13 사이의 소수는 2,3,5,7,11,13 총 6개이다.

내 코드

<script>
    function solution(n) {
        let prime = Array.from({length:n+1},()=>false);
        for(let i=2; i<=n;i++){
            if(!prime[i]){
                for(let j=i*2; j<=n;j +=i){
                    prime[j]= true;
                }
            }
        }
        for(let i=2;i<=n;i++){
            prime[i]= !prime[i];
        }
        return prime.filter(ele=> ele).length;
    }
    console.log(solution(13));
</script>

위 문제에서 중요한건, 효율성테스트를 통과하는 것이다. 반복문을 통해 1부터 n까지의 수를 순회하며, 모든 숫자에 대해 소수판별을하면 시간초과를 하게 된다. 따라서 위 코드는 에라토스테네스의 체 방법을 이용한다.

설명

(1). 자연수 n의 소수판별을 할 때, 2부터 루트(n)까지의 수까지로만 나누어지는지 판별하면 자연수n이 소수인지아닌지를 알 수 있다. **루트(n)은 k라 한다.

(2). 1부터 자연수 n까지의 모든 소수를 구할 때, 2~k까지의 모든 배수를 제거하고 남은 모든 수는 소수이다.

위 두가지를 동시에 적용하면 1~n까지의 모든 소수를 구할 수 있다.

아래 링크 참조 https://ko.wikipedia.org/wiki/에라토스테네스의_체

1. 지원하기까지의 과정
2. 첫 수업
3. 회고팀
4. 공부한것

지원하기까지의 과정

나는 본전공은 유전공학을 전공하고, 복수전공으로 컴퓨터공학을 전공했다. 유전자 공부하고 분자생물학(절망) 공부하는것보단 코딩 뚱땅뚱땅 치는게 더 재밌기도하고 작은것이라도 완성될때마다 소소하게 올라오는 성취감이 괜찮았다 :)
사실 복수전공이라 뭔가 많이배우진 못했지만, 따로 시간내서 게임도 만들어보고 Android 어플리케이션도 건드려보고, 데이터분석부터 가벼운 팀 프로젝트까지,, 넓게 해본것 같다.(찍먹 그 자체 ㅎㅎ;;;)
이후 졸업반이 되어서 취직하려보니, 뭐하나 깊게 잘하는건 없었고 눈 앞이 좀 캄캄하긴 했다. 그래서 되돌아보니,, 플젝하면서 웹 FE쪽을 하는게 적성에도 잘 맞았던것 같고 미래전망도 나쁘지 않은것 같아서 부트캠프 하나잡고 몰두하기로 결심.. 결심이 선 이후에는 바로 지원후 합격까지 오게되었던것 같다.

첫 수업

아니 사실 3일 뒤에 쓰는거라 기억이 잘안나 ;; 그냥 이두희님이 찍어두신 강의 조금 보면서 html css 공부했다 :) 솔직히 플젝할때마다 html css는 인터넷보면서 bootstrap으로 대충 만들었더니 강의 들으면서 좀 새롭긴했다.

회고팀

8월 30일날 드디어 첫 회고조를 결성했다. 우리조는 7명으로 구성되었는데, 열의가 가득하신분들이 많은 것 같아서 너무 좋았다. 진짜 다들 너무 친해지고 싶다.. 페럿을 키우시는분이 계셨는데 진짜 길고 귀엽게 생겼다. 작은 동물들은 왜 이렇게 귀여운건지 ,,, 너희들은 좋겠다 존재만으로 귀엽다니 ;;

Day3

첫째날, 둘째날은 수업보단 오티형식으로 정보제공이 많아서 따로 쓸만한게 없다.. 음.. 오늘 수업에선 그래도 좀 배운게 있어서 써본다 :)

웹 사이트의 전체적인 화면구성에 대해 배웠다. 각자의 tag가 의미를 가지고 쓰이고, 적절한 배치가 이루어져야 여러모로 좋은 웹서비스 구축이 될 수 있단다. (이를 semantic tag 라 한다.) 웹사이트는 크게 Header, main, footer로 구성된다. header 는 컨텐츠의 시작을 알리는 구역이며, 주로 제목이 존재한다.

main 태그는 해당 웹사이트가 제공하는 주요 콘텐츠를 담아두는 곳이다. (인터넷 익스플로러에서는 잘 지원하지 않으니 주의,, !! )

tooter 태그는 주소라던가, 연락처등의 부수적인 정보를 제공하는 구역이다.

더 배운건 많지만 다 쓰려면,,, 힘들다

1.문제 2.내 코드 3.발전시킨 코드

문제

두 개의 집합이 주어지면, 각 공통원소를 뽑아서 오름차순으로 나열하라. 예시) 입력 : 1 3 9 5 2 3 2 5 7 8 출력 : 2 3 5

내 코드

<script>
    function solution(arr1,arr2){
        let answer = [];
        for(let i=0;i<arr1.length;i++){
            for(let j=0;j<arr2.length;j++){
                if(arr1[i]===arr2[j]) {
                    answer.push(arr1[i]);
                    break;
                }
            }
        }
        answer.sort();
        return answer;
    }
</script>    

2중 for문을 이용한다. arr1 배열의 원소하나당, arr2 배열의 원소 전부와 비교하여 같은 같이 존재하는지 확인한다. (같은 값이면 answer에 push)

마지막 answer 를 정렬하여 반환한다.

발전시킨 코드

<script>
    function solution2(arr1,arr2){
        let answer = [];
        arr1.sort((a,b)=>a-b);
        arr2.sort((a,b)=>a-b);
        let p1=p2=0;
        while( p1<arr1.length && p2<arr2.length){
            if(arr1[p1]===arr2[p2]){
                answer.push(arr1[p1]);
                p1 ++;
                p2 ++;
            }
            else if(arr1[p1]<arr2[p2]) p1++;
            else p2 ++;
        }
        return answer;
    }
</script>

여기는 입력받은 두개의 배열을 우선 정렬한다. 이후에 각 배열마다 위치를 가리키는 포인트를 설정하여 이를 하나씩 더해가며 값을 비교한다. 경우 1, 두 포인터가 가리키는 값이 같다 -> answer에 push, 두 포인터값증가 경우 2, arr1의 포인터가 가리키는 값이 더 작다. -> arr1 포인터 값 증가 경우 3, arr2의 포인터가 가리키는 값이 더 작다. -> arr2 포인터 값 증가

1.문제 2.내 코드 3.twoPointer를 이용한 코드

문제

오름차순 정렬이 되어있는 두 배열이 입력되면, 두 배열을 오름차순으로 합쳐 하나의 배열로 만들어 출력하시오. 예시) 입력 : 1 3 5 2 3 6 7 9 출력 : 1 2 3 3 5 6 7 9

내 코드

<script>
    function solution(arr1,arr2){
        let answer = [];
        while(arr1.length && arr2.length){
            if(arr1[0]<arr2[0]){
                answer.push(arr1[0]);
                arr1.shift();
            }else if(arr1[0]>arr2[0]){
                answer.push(arr2[0]);
                arr2.shift();
            }else{
                answer.push(arr1[0],arr2[0]);
                arr1.shift();
                arr2.shift();
            }
        }
        answer.push(...arr2,...arr1);
        return answer;
    }
</script>

두 배열의 앞 쪽 원소를 각각 비교하여 더 작은 값을 하나씩 새로운 배열에 push하는 방식을 이용합니다. 하나의 배열이 종료되면, 다른 배열의 나머지 원소를 전부 입력합니다.

twoPointer를 이용한 코드

<script>
    function solution2(arr1,arr2){
        let answer = [];
        let p1=p2 =0;
        while(p1<arr1.length && p2<arr2.length){
            if(arr1[p1]<=arr2[p2]) answer.push(arr1[p1++]);
            else answer.push(arr2[p2++]);
        }
        while(p1<arr1.length) answer.push(arr1[p1++]);
        while(p2<arr2.length) answer.push(arr2[p2++]);
        return answer;
    }
</script>

p1, p2 두개의 포인터를 이용한 방법입니다. 포인터를 각각 0부터 시작하여 각 배열의 원소값을 비교합니다. 비교하여 더 작은 값을 새 배열에 Push하고 해당 배열의 포인터를 증가시킵니다.

지금 막 만든, 텅 빈 저장소에 react-create-app 을 통해 생성된 파일들을 합치려니, 깃 자체에서 전혀 연관성이 없다고 보고 에러메시지를 출력한듯 보인다.

아래와 같이 강제로 master(새로 생성된 브랜치)를 main에 합쳐주고 다시 푸쉬하는 방법을 사용하여 해결했다.

git checkout master

git branch main master -f

git checkout main

git push origin main -f

1.문제 2.내 코드 3.발전시킨 코드

문제

1~ 100 사이의 숫자 N 개가 입력됩니다. 이 중 세 개의 숫자를 골라서 합하여 나오는 모든 경우를 기록합니다. 기록한 값 중 K번째로 큰 수를 출력합니다. (중복값은 무시합니다.) 예시) 입력: n, k 숫자 N개 10 3 13 15 34 23 45 65 33 11 26 42

출력: 143

내 코드

<script>
    function solution(n,k,card){
        let sumNumbers = [];
        for(let i=0;i <n; i++){
            for(let j=i+1; j<n;j++){
                for(let k=j+1;k<n;k++){
                    sumNumbers.push(card[i]+card[j]+card[k]);
                }
            }
        }
        sumNumbers.sort((a,b)=>b-a);
        sumNumbers = new Set(sumNumbers);
        sumNumbers = Array.from(sumNumbers);
        return sumNumbers[k-1];
    }

    let arr=[13, 15, 34, 23, 45, 65, 33, 11, 26, 42];
    console.log(solution2(10, 3, arr));
</script>

1. 3중 for loop 을 통해 3가지 수가 뽑히는 모든 경우의 수를 배열에 저장합니다.
2. 배열을 내림차순으로 정렬합니다.
3. 배열을 Set() 자료구조로 바꿉니다. (set 자료형은 중복이 자동제거됩니다.)
4. 이를 다시 배열로 바꾸고 k번째 수를 출력합니다.

   ---

발전시킨 코드

<script>
    function solution2(n,k,card){
        let answer;
        let temp = new Set();
        for(let i=0;i <n; i++){
            for(let j=i+1; j<n;j++){
                for(let k=j+1;k<n;k++){
                    temp.add(card[i]+card[j]+card[k]);
                }
            }
        }
        temp = Array.from(temp).sort((a,b)=>b-a);
        return temp[k-1];
    }
    let arr=[13, 15, 34, 23, 45, 65, 33, 11, 26, 42];
    console.log(solution2(10, 3, arr));
</script>

위 코드와 크게 다른 것은 없지만, 처음부터 set 자료형에 세 수의 합을 저장하여 나중에는 배열화 한번으로 중복을 제거한 배열을 만들 수 있습니다. 코드 간소화 ..

1.문제 2.코드 및 설명 3.발전시킨 코드

문제

선생님이 가진 사비를 털어 졸업생들에게 선물을 나눠주려합니다. 학생들은 각자 원하는 상품의 가격과 배송비를 제출하였습니다. 선생님이 가진 사비로 가장 많은 수의 학생에게 선물을 하려합니다. (다만, 선생님은 한가지 상품의 가격만 50% 할인이 되는 쿠폰을 가집니다.) 최대 몇명의 학생에게 선물을 할 수 있는지 출력하시오.

첫 줄에는 선생님의 최대 사비가 입력되고 두번째 줄 부터 각 상품의 가격&배송비가 입력됩니다.

예시) 입력: 28 6 6 2 2 4 3 4 5 10 3 출력: 4

코드 및 설명

<script>
    function solution(m,product){
        let answer = 0;
        let n = product.length;
        product.sort((a,b)=>(a[0]+a[1])-(b[0]+b[1]));
        for(let i=0; i<n; i++){
            let money = m - (product[i][0]/2+product[i][1]);
            let cnt = 1;
            for(let j=0; j<n;j++){
                if(j!==i && (product[j][0]+product[j][1]>money)) break;
                if(j!==i && (product[j][0]+product[j][1]<=money)){
                    money -= product[j][0]+product[j][1];
                    cnt ++;
                }
            }
            answer = Math.max(answer,cnt);
        }
        return answer;
    }
    let arr=[[6, 6], [2, 2], [4, 3], [4, 5], [10, 3]];
    console.log(solution(28, arr));
</script>

1. 우선 sort를 통해 제품가격+배송비의 오름차순 기준으로 정렬시킨다.
2. 제품이 할인되었을 모든 경우를 탐색한다.
3. 반복문과 조건문을 통해, 각 제품의 가격이 현재 소유한 금액보다 큰지를 판별한다.
4. 크다면 반복문 종료, 작다면 해당 제품 금액만큼을 소유 금액에서 차감하고, cnt 증가 후 계속 수행
5. 각 반복문이 끝날 때 마다, cnt를 정답변수와 비교하여 더 큰 것을 저장한다.

1.문제 2.내 코드

문제

수학 테스트 점수를 기준으로 멘토와 멘티를 짝지으려 합니다. 멘토는 모든 수학테스트에서 멘티보다 성적이 높아야합니다.

각 배열을 통해 각 수학 시험의 결과가 성적순으로 학생번호가 입력됩니다. 멘토와 멘티가 이루어질 수 있는 모든 경우의 수를 출력하세요.

예시) 입력 3412 4321 3142 출력 3 ({3,1}, {3,2}, {4,2} 세가지 경우가 가능)

내 코드

<script>
    function solution(test){
        let answer = [];
        let stand = test[0];
        let found = false;
        for(let i=0; i<stand.length-1;i++){
            for(let j=i+1; j<stand.length; j++){
                for(let k=1; k<test.length;k++){
                    if(test[k].indexOf(stand[i])>test[k].indexOf(stand[j])){
                        found = true;
                    }
                }
                if(found === false){
                    answer.push([stand[i],stand[j]]);
                }
                found = false;
            }
        }
        return answer;
    }
    let arr=[[3, 4, 1, 2], [4, 3, 2, 1], [3, 1, 4, 2]];
    console.log(solution(arr));
</script>

1. 입력받은 2차원 배열에서 첫번째 배열을 기준으로 삼습니다.
2. found 변수를 통해 반례값이 나왔는지 여부를 확인합니다.
3. i와 j를 통해 모든 첫번째 배열의 모든 경우의 수를 확인합니다. ({3,4}, {3,1}, {3,2}, {4,1}, {4,2}, {1,2})
4. k를 통해 각 수학테스트를 순회합니다.
5. 각각의 수학 테스트에서 모든 경우의 수에 대한 반례가 나왔다면 found = true로 설정합니다.
6. found === false 일 경우의 수만 정답배열에 추가합니다.

1.문제 2.내 코드

문제

N개의 자연수를 입력받습니다. 각 자연수를 뒤집은 값이 소수이면 그 소수를 출력합니다. (910 을 뒤집을 경우는 0을 제외하고 19로 숫자화하여 출력합니다.) 예시) 입력 32 55 62 20 250 370 200 30 100 출력 23 2 73 2 3

내 코드

<script>
    function isPrime(num){
        if(num===1) return false;
        for(let i=2; i<num/2; i++){
            if(num%i ===0)  return false;
        }
        return true;
    }
    function solution(arr){
        let answer = [];
        arr.forEach(element => {
            let temp = element;
            temp = parseInt(String(temp).split('').reverse().join(''));
            if(isPrime(temp)) answer.push(temp);
        })
        return answer;
    }
    let arr=[32, 55, 62, 20, 250, 370, 200, 30, 100];
    console.log(solution(arr));
</script>

1. isPrime 이라는 소수 판별 함수를 선언합니다.
2. forEach 문을 통해 입력받은 배열을 순회합니다.
3. 각 요소의 값을 뒤집어 temp에 저장합니다.
4. isPrime 을 통해 소수인지 확인하고 맞다면 정답 배열에 추가합니다.

1.문제 2.내 코드

문제

N개의 자연수가 입력되었을 때, 각 자연수의 자릿수 합을 구합니다. 이 때 자릿수 합이 가장 큰 것을 출력합니다. (자릿수 합이 같을 경우, 원래 수가 큰 것을 출력합니다.) 예시) 입력 128 460 603 40 521 137 123 출력 137

내 코드

<script>
    function solution(n,arr){
        let maxNum = Number.MIN_SAFE_INTEGER;
        let tempNum = 0;
        arr.forEach(element => {
            let sumNum = 0;
            let temp = element;
            while(parseInt(temp/10) !==0){
                sumNum += temp%10;
                temp = parseInt(temp/10);
            }
            sumNum += temp%10;
            if(sumNum>maxNum){
                maxNum = sumNum;
                tempNum = element;
            }else if(sumNum === maxNum){
                tempNum = tempNum>element? tempNum:element;
            }
        });
        return tempNum;
    }
    let arr=[128, 460, 603, 40, 521, 137, 123];
    console.log(solution(7, arr));
</script>

1. forEach문 통해 입력받은 배열 순회
2. while문 통해 각 요소의 자릿수 합을 sumNum에 저장
3. sumNum과 maxNum 비교하여 maxNum 갱신
4. sumNum === maxNum 일 경우, 더 큰 수를 저장

   ---

1. useReducer?
2. 간단한 코드 및 설명
3. 실행화면

useReducer?

useState와 비슷하게, state를 생성하고 관리해주는 도구 ❓그럼 useState와 비교해서 언제 쓰는데 ?

• 더 복잡한 state를 생성할 때,

⭐️ 구성요소

• Reducer : state를 직접적으로 관리하는 본체
• dispatch : reducer에 요구를 하는 행위
• action : 요구 내용 위 세가지로 구성

간단한 코드 및 설명

통장에 입금을 하는 간단한 서비스를 useReducer를 이용하여 구현하려 한다.

const [money,dispatch] = useReducer(reducer,0);

dispatch는 reducer를 수행시키는 함수이며, useReducer()의 인자로는 첫번째로 reducer 함수형변수를, 두번째로 money state의 초깃값을 받는다.

const reducer =(state,action)=>{
    return state + action.payload;
};

dispatch()가 호출되면 해당 reducer 함수가 실행된다. 여기서 state는 money state를 가리키며, action은 dispatch() 의 인자로 받아온 객체이다.

<button onClikc={()=>{
    dispatch({type:'deposit', payload:number});
}}>입금</button>

버튼을 누르면 dispatch()호출을 하게 된다. 인자로는 type과 payload(number 변수값)를 넣어준다.

실행화면

해당 포스트는 별코딩님의 유튜브 강의를 기반으로 작성하였습니다. https://youtu.be/tdORpiegLg0

1.문제 2.내 코드 3.발전시킨 코드

문제

문자열을 입력받고, 같은 문자가 반복되는 경우 숫자를 표현하여 나타내어라. (단, 반복횟수가 1인 경우 숫자 생략) 예시) 입력 : KKHSSSSSSSE 출력 : K2HS7E

내 코드

<script>
    function solution(s){
        let temp =s[0], count =1;
        let answer='';
        for(let i=1; i<s.length;i++){
            if(s[i]===temp){
                count++;
            }else{
                if(count ===1){
                    answer += temp;
                    temp =s[i];
                }else{
                    answer +=temp+String(count);
                    temp = s[i];
                    count = 1;
                }
            }
        }
        if(count ===1){
            answer += temp;
        }else{
            answer +=temp+String(count);
        }
        return answer;
    }
    console.log(solution('KKHSSSSSSSE'));
</script>

count : 현재 문자를 조우한 횟수를 따로 저장 temp : 현재 문자를 저장. 다음 문자와의 비교를 위함 초깃값 : 첫번째 문자를 temp에, 반복횟수 1을 count에 저장 반복문 1 : 두번째 문자부터 끝까지 탐색 조건문 1 : 이전의 문자(temp)와 현재 문자(s[i])가 같다면 조건문 1-2 : 현재 반복횟수가 1이라면 조건문 2 : 현재 반복횟수가 1이라면(마지막 문자를 넣기 위함)

발전시킨 코드

<script>
    function solution2(s){
        let answer ='';
        let cnt = 1;
        let temp = s +" ";
        for(let i=0; i<temp.length-1;i++){
            if(temp[i]===temp[i+1]) cnt++;
            else{
                answer +=temp[i];
                if(cnt>1)answer+=String(cnt);
                cnt =1;
            }
        }
        return answer;
    }
    console.log(solution2('KKHSSSSSSSE'));
</script>

현재 문자와 다음 문자를 비교해서 같다면 cnt 증가 다르다면 결과값에 문자를 더해주는 방법

1.문제 2.내 코드

문제

하나의 문자열 s와 하나의 문자 t가 주어지면, s문자열 내의 각 문자에서 t문자가 떨어진 최소거리를 출력하시오.

내 코드

<script>
    function solution(s, t){
        let right_dis=s.indexOf(t);
        let left_dis=100;
        let answer=[right_dis];
        for(i=1;i<s.length;i++){
            right_dis --;
            left_dis ++;
            answer.push(Math.min(right_dis,left_dis));
            if(right_dis===0){
                right_dis = s.indexOf(t,i+1)-(i);
                left_dis = 0;
            }
        }
        return answer;
    }
    let str="teachermode";
    console.log(solution(str, 'e'));
</script>

왼쪽 거리와 오른쪽 거리를 동시에 측정하여 짧은 거리를 가진 변수값을 출력하도록 한다. ⭐️초깃값 왼쪽거리 = 100 이상의 값, 오른쪽 거리 = indexOf(t) 초깃값 설정시 첫번째 문자의 거리 확인. 1️⃣ 반복문 : 문자열 내 각 문자 (1번인덱스 문자부터 끝까지) 2️⃣ 반복문 내 조건문 : 문자 t를 만난 경우.

1.문제 2.내 코드

문제

문자열을 입력받으면, 숫자만 뽑아서 자연수로 출력하시오. 예시) 입력 : tge0a1h205er 출력 : 1205

내 코드

<script>
    function solution(str){
        let answer ='';
        for(let i=0; i<str.length;i++){
            if(str[i].charCodeAt()>=48 && str[i].charCodeAt()<=57){
                answer+=str[i];
            }
        }
        return parseInt(answer);
    }
    function solution2(str){
        let answer = str.replace(/[^0-9]/g,'');
        answer = parseInt(teanswermp);
        return answer;
    }

    let str="g0en2T0s8eSoft";
    console.log(solution2(str));
</script>

두가지 방법을 사용해 보았다. 방법1. 아스키코드의 숫자범위(48~57)활용 방법2. 정규표현식 활용

정규표현식이 간단해 보이긴 하다. 그래도 아스키코드 숫자범위는 알아두면 괜찮지 싶다.

1.문제 2.내 코드 3.발전시킨 코드

문제

문자열이 입력되면 알파벳만을 가지고 검사했을 때, 해당 문자열이 팰린드롬인지를 출력하라. (대소문자 구별 x) ❓ palindrome = 회문

내 코드

<script>
    function solution(s){
        let alphabet = /[a-z|A-Z]/,temp='';
        for(let i=0;i<s.length;i++){
            if(alphabet.test(s[i])){
                temp +=s[i];
            }
        }
        temp = temp.toLowerCase();
        return temp===temp.split('').reverse().join('') ? "YES":"NO";
    }

    let str="found7, time: study; Yduts; emit, 7Dnuof";
    console.log(solution(str));
</script>

정규표현식을 통해 문자 하나하나가 알파벳인지를 확인한 후, temp변수에 이어 붙인다.

발전시킨 코드

<script>
    function solution(s){
        let answer = "YES";
        let temp = s.toLowerCase().replace(/[^a-z]/g,'');
        if(temp.split('').reverse().join('') !==s) return "NO";
        return answer;
    }
    let str="found7, time: study; Yduts; emit, 7Dnuof";
    console.log(solution(str));
</script>

반복문을 통해 번거롭게 하나씩 검사하지 않고 replace함수를 통해 알파벳이 아닌 것은 제거하는 방법을 사용.

1.문제 2.내 코드

문제

입력된 문자열이 회문문자열이면 YES, 아니면 NO를 출력하시오. (대소문자 구분x) ❓ 회문문자열 : 앞으로 읽어도 뒤로 읽어도 같은 문자열 ex) 우영우 기러기 스위스 토마토 별똥별 역삼역

내 코드

<script>
    function solution(s){
        let answer ="YES", temp =s.split('').reverse().join('').toUpperCase();
        if(s.toUpperCase()!==temp) answer ="NO";
        return answer;
    }
    let str="goooG";
    console.log(solution(str));
</script>

변수 temp 에 입력문자열을 거꾸로 소문자화 하여 배치한다. 입력 문자열을 소문자한것과 비교하여 다르면 NO 반환. 같으면 answer를 그대로 반환