홍장군의 기록

0. 오늘의 배울 것. javascript 는 웹과 사용자가 상호작용(interactive)하게 해준다! javascript는 웹페이지에서 사용자가 페이지와 상호작용하게끔(이벤트를 받아 동작하게끔) 해준다! js로 html 태그를 직접 다룰 수도 있고, css 스타일을 다룰 수도 있고, 버튼이나 체크박스 같은 input으로부터 동작을 만들어낼 수 있다. 그래서 javascript는 interactive한 웹을 만들게 해준다!! 우리의 목표는 js를 더욱 공부하여 interactive 한 웹을 만드는 것이다. 예를 들어 todo list를 적는 웹 사이트가 있다고 할 때, input에 글자를 적고 엔터치면 input 값이 웹사이트 화면에 나타날 것이다. 이는 js가 input 값을 받아들여 그 값을 가지고..

0. 오늘의 배울 것 JS의 모든 것은 객체로 이루어져있다!! js의 모든 것은 객체로 이루어져있다. js를 이해하는 데에 가장 중요한 키워드인 객체(배열이 아닌 것)와 배열에 대해 알아보자. 배열도 객체긴하지만 배열과 일반 객체는 약간의 차이가 있다. 이 차이점에 대해서도 잘 알아야 한다. 1. 객체와 프로퍼티 변수가 하나의 값을 담는 상자라면, 객체란 하나의 큰 상자다!! 객체라는 하나의 상자 안에 여러 값을 넣을 수 있다. // 중괄호 하나가 객체 하나. { "my name": 'hongjw', bornYear: 2000, isVeryNice: true, pet:{ name: 'hellen', } }여기서 brandName 같은 걸 key, 코드잇 같은 걸 value 라..

0. 오늘의 배울 것. 프로그래밍의 기초는 자료형!! 어느 언어를 배우든간에 자료형을 공부하는 것은 기초 중의 기초이다. 개인적으론 js의 자료형은 특이한 점이 많았는데, 이번 기회에 제대로 알아보자. 1. 숫자형 숫자형을 계산해보자. 파이썬이랑 비슷한 느낌이다. 신기한 건 정수, 실수형으로 나뉘지 않고 2나 2.0이나 둘 다 number 형이라고 나오는 것이다!! 그래서 나눗셈을 하면 무조건 실수가 출력된다. 만약 몫 나눗셈을 하고 싶다면, Math.floor 메소드를 활용하자. //몫 나눗셈. console.log(Math.floor(7/3)); // 거듭제곱. console.log(2 ** 3); // 나머지 연산. console.log(7 % 3); // 나눗셈. 소수형으로 출력된다. consol..

프로그래머스 1레벨 > 코딩테스트 연습 > 월간 코드 챌린지 시즌 2 > 음양 더하기 내 풀이) for문 내부에 if 문을 적어서 풀어도 되지만, 삼항 연산자를 쓰는 것이 더욱 코드가 간결해져 써보았다. 입력값으로 들어오는 absolutes에 들어있는 각 원소의 크기는 최대 1000이므로 number 형 범위에 충분히 포함된다. 또한 absolutes의 크기는 1000이하이므로 for문을 통해 계산하여도 시간이 충분하다. 내 코드) function solution(absolutes, signs) { let answer = 0; for (let i in signs) { answer += signs[i] ? absolutes[i] : absolutes[i] * -1; } return answer; }

백준 문제는 보통 입력 값이 여러 개 주어진다. 한 줄에 한 입력값만 있기도 하고, 여러 입력값들이 띄어쓰기를 기준으로 나뉘어 한 줄에 주어지기도 하고, 배열로 주어지기도 하고... 매우 다양하다. 때문에 내가 쓰는 프로그래밍 언어로 어떻게 입력받을지 알아두는 것이 중요하다. (다양한 입력 예시들... 한 줄에 숫자 여러 개가 주어지기도 하고, 숫자와 문자가 섞이기도 하고, 하나만 주어지기도 한다.) input을 활용하자. 1. 값 한개만 받을 경우 # 문자열 한 개 입력받기. my_str = input() # 정수 한 개 입력받기 my_num = int(input()) 2. 한 줄에 값 여러 개 입력 받기 # input: abc def ghi # output: ["abc", "def", "ghi"] n..

프로그래머스 1레벨 > 코딩테스트 연습 > 연습문제 > 두 정수 사이의 합. 내 풀이) 간단한 문제이다. 우선 js에서 Number 타입은 -9,007,199,254,740,991부터 9,007,199,254,740,991 범위 내라고 한다... 정말 어마무시한 값이다. java나 c에선 고작 int 형으로 4바이트밖에 쓰지 못하는데, js에선 거의 1경에 달하는 숫자까지 쓸 수 있으니 말이다. 이보다 더 큰 수는 Number 타입의 값인 Infinity, -Infinity로 표현되기도 하고, ES2020년부터 지원되는 bigInt 타입을 써서 더 큰 수를 나타낼 수 있다. 이 문제에선 최악의 경우 고작(?) -10,000,000 ~ 10,000,000 사이 합을 구하면 되므로 그냥 for 문을 사용하자..

0. 오늘의 배울 것 grid 는 2차원적 배치 방식이다!! 앞서 flex box는 1차원적 배치 방식이라고 말했다. container 박스 안에, 가로든 세로든 한 방향으로 일렬 정렬하기 때문이다. 이 대신 바둑판처럼, 즉 2차원배열처럼 요소를 배치하려면 부모 박스에 grid 속성을 주어야 한다. 이번 포스팅에서는 그리드를 어떻게 활용할지 알아보자. 1. 그리드, Grid? flex는 1차원적으로 한 방향으로 요소를 배치한다면, grid는 2차원적으로 바둑판처럼 요소를 배치한다. 이 때 각 칸을 나누는 줄을 그리드 라인이라 한다. 그리고 각 칸을 그리드 셀이라고 한다. 2. 그리드 나누기 먼저 요소를 담을 컨테이너를 grid 형식으로 만들어보자. 아래 코드를 예시로 들면, 2행 3열로 나누고 세로를 5..

0. 오늘의 배울 것 flex box는 display 속성의 값 중 하나이다!! 앞에서 배운 display 속성 값에는 block, inline, inline-block이 있다. 이 속성들은 각 요소가 부모 요소 내에서 어떻게 배치될지 나타내주었다. 그런데 flex box는, 태그 내 요소들이 어떤 방향으로 배치될지 흐름을 정해준다. 즉, 내가 a, b, c 요소를 위에서 아래로 배치하고 싶다면 a, b, c를 감싸는 부모 요소 parent를 만들고, parent의 display 속성에 flex 값을 주는 것이다. flex box는 gap, align-center 등 여러 속성이 있어 다양하게 활용할 수 있다. 이번에는 이 flex box를 활용하는 법에 대해 알아보자. 1. flex box flex-b..

HTML html 태그의 기본 문법을 알아보자!! html 파일 자체의 정보를 나타내자. html 파일에 정보값을 주기 위해 메타 태그나 시맨틱 태그를 활용할 수 있다. 1. html이란 css는 웹의 디자인을 꾸미는 부가적인 요소로, 웹을 이루는 기본 뼈대는 결국 html이다!! html: Hypertext Markup Language 의 줄임말 하이퍼텍스트: 서로 링크로 연결된 문서를 뜻함. 무슨 단어를 클릭하면 다른 링크로 넘어가는 등, 웹들은 서로 다른 여러 링크들로 연결되어있다. 마크업: 마크업은 실질적인 내용이 아니라 내용에 제목, 이미지, 링크 등의 표시를 해주는 것이다!! 즉, 이것은 그냥 제목 내용이고 이렇게 태그로 제목이라는 마크업을해준다. 마크업 랭귀지: 마크업할 때 쓰는 언어. 즉,..

0. 오늘의 배울 것. positon은 display에서 벗어난 새로운 위치!! 기본적으로 모든 태그는 display 속성을 가지고 있다. 이 display 속성을 통해, 요소들이 한 파일 내에서 어떻게 배치될지 정해지는 것이다. 그런데 내가 기본적인 display 흐름 말고, 다른 식으로 배치하고 싶다면 어떻게 할까? 예쁜 사이트에서 보이는 navigation bar 처럼 브라우저 위에 딱 붙어있거나, 어떤 요소 위에 둥둥 떠있게 하거나 등, 다양한 배치를 하고 싶다면 어떻게 해야 할까. 이렇게 기본적인 display 흐름에서 벗어난 곳에 배치하기 위해, position이라는 속성을 사용한다. 이번 시간에는 position 속성의 속성 값에는 무엇이 있는지, 그리고 어떤 효과가 있는지를 알아보자. 1...