6장 - 데이터 타입데이터 타입은 값의 종류를 말한다.자바스크립트(ES6)는 7개의 데이터 타입을 제공 원시 타입숫자 타입(number) → 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열 타입(string) → 문자열불리언 타입(boolean) → 논리적 참과 거짓undefined 타입 → var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입 → 값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌 타입(symbol) → ES6에서 추가된 7번째 타입 객체 타입객체, 함수, 배열 등숫자 타입자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따름→ 모든 수를 실수로 처리, 정수만 표현하기..
4장- 변수‘10 + 20’ 자바스크립트 코드를 계산(평가 하려면),10, 20, +라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며10 + 20이라는 식(표현식)의 의미도 해석(파싱)할 수 있어야 한다.자바스크립트 엔진이 10 + 20이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 피연산자를 기억한다.→ 이 때 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 메모리 셀 하나의 크기는 1바이트(8비트) 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들임 각 셀은 고유의 메모리 주소를 가짐→ 메모리 공간의 위치를 나타냄(0부터 시작, 메모리의 크기만큼 ..
1장 - 프로그래밍프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.→ 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야하는데, 이때 필요한 것이 컴퓨팅 사고(Computational thinking)이다. 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안은사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성 한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기(컴파일러, 인터프리터)를 이용하는 것이다. 프로그래밍 언어는 구문(syntax)와 의미(semantics)의 조합으로 표현된다. 문법을 잘 안다고 해서 외국어..
이 발표는 WebView와 React Native가 통신을 할 때의 문제점에 대해 설명하고,webview-bridge 라이브러리가 이 문제점들을 어떻게 해결하는지에 대한 내용이 담겨있다. https://github.com/gronxb/webview-bridge 1. 웹뷰 통신이 왜 필요할까?웹뷰 통신이 왜 필요할까? → InAppBrowser , Native Navigation, Shared Data이 요소들이 각각 무엇을 뜻하는지 AI에게 물어봤다. InAppBrowser (인앱 브라우저): 인앱 브라우저는 모바일 앱 내에서 웹 콘텐츠를 표시하는 기능입니다. 웹뷰 통신이 필요한 이유:앱 내에서 외부 웹 콘텐츠를 원활하게 통합할 수 있습니다.사용자가 앱을 벗어나지 않고도 웹 기반 기능을 이용할 수 있습니..
이 발표는 토스페이먼츠가 어떻게 ‘프론트엔드 개발 답답 3형제’를 해결했는지에 대한 내용이었다. 여기서 프론트엔드 개발 답답 3형제는디자인 프로토타입서버 API요구사항 분석이다. 프론트엔드 개발을 할 때, 해당 요소들이 완성될 때까지 기다리는 것이 보통이지만, 계속 기다리기에는 답답하다.토스페이먼츠는 어떻게 이 문제를 해결했을까?1. 디자인 프로토타입디자인 시스템을 통해서 디자인 비효율을 줄일 수 있다.디자인 시스템의 Strength재료로써 다양한 기능과 형태를 제공유연한 구조, 재사용이 쉬움하지만 단점도 있는데, 디자인 시스템의 Weakness반복되는 코드가 자주 생김작성하는 사람 마다 서로 다른 구현체를 사용 → 누구는 prop으로, 누구는 합성으로 옵션을 처리함화면을 구성하는 제품의 코드가 늘어날 ..
0. 풀페이지 스크롤 애니메이션을 구현하고 싶었다.KUIT 온보딩 페이지를 어떻게 만들까 고민을 시작했을 때, 가장 먼저 떠올랐던 것이 풀페이지 스크롤 애니메이션이었다. 스크롤 한 번 내리면 화면이 하나씩 내려가는 애니메이션을 구현하고 싶었다. PC에서 휠로 스크롤을 하거나, 모바일로 위로 스와이프를 하면 화면이 바뀌는 애니메이션을 구현하고 싶었다. fullPage.js와 같은 라이브러리를 쓰는 것을 먼저 고려해봤지만, 라이센스 비용이 있다는 말을 듣고(비영리면 무료라고 하긴 하지만) 포기했다. 그 대신 Framer-motion을 사용해서 한 번 구현해보기로 했다. 어떻게 해야할지 감은 잘 잡히진 않았지만, 내게는 Claude가 있으니까. 계속 질문하고, 수정하고. 내가 원하는 결과가 나오기까지 반복했다..
1. SSG(Static Site Generation) + Headless CMS로 제작해볼까동아리 온보딩 페이지를 제작 중이다. CSR로 제작할까, SSR로 제작할까 고민 중이었는데, SSG(Static Site Generation)을 사용하면 좋다는 의견이 있어서 Next.js로 SSG를 구현하기로 했다. 왜냐하면 동아리 온보딩 페이지는 내용이 거의 바뀌지 않으니까. 그래도 컨텐츠를 업데이트해야할 수도 있다. 그럴 때마다 코드를 수정해서 배포하면 되지 않을까 생각했는데, 코드를 수정하지 않고도 컨텐츠를 업데이트할 수 있는, 콘텐츠 관리만을 위한 서비스인 Headless CMS를 활용하면 된다! 어떤 Headless CMS를 활용할까 생각하다가, strapi가 좋다는 사람들의 의견이 많아서 strapi..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/86491 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 코드function solution(sizes) { var arr1 = []; var arr2 = []; for(let card of sizes) { if(card[0] arr1 배열과 arr2 배열을 생성한다.sizes 배열을 순회한다.가로 길이가 세로 길이보다 작다면 둘을 뒤바꾼다.arr1에 가로 길이를, arr2에 세로 길이를 push한다..
문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 풀이function solution(array, commands) { var answer = []; for(let arr of commands) { var newArr = []; for(let i = arr[0]; i a-b); answer.push(newArr[arr[2] - 1]); } ..
문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/428851. 나의 풀이function solution(people, limit) { var sortedPeople = people.sort((a,b) => a-b); let cnt = 0; var i = 0; var j = sortedPeople.length - 1; while(i people 배열을 정렬한, sortedPeople 배열을 생성한다.포인터 두 개를 생성한다. (i는 0, j는 sortedPeople의 맨 끝에)i가 j보다 작거나 같을 동안 계속 순회를 하면서배열에서 가장 큰 값과 작은 값을 더한 값이 limit보다 작거나 같으면 i..
