본문 바로가기

전체 글

[React] 리액트란? 리액트의 4가지 특성 "A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES” "리액트는 유저 인터페이스를 만드는 자바스크립트 라이브러리이다." 나는 문득 리액트가 라이브러리라는 점이 의아했다. 나는 리액트가 자바스크립트의 프레임워크라고 생각했고 꽤 많은 문서에서 리액트를 프레임워크라고 칭하고 있었다. 프레임워크 --(호출)--> 내코드 프레임워크는 뼈대나 구조기반과 같다고 볼 수 있다. 특정 개념을 추상화하는 클래스와 컴포넌트들로 구성되어있으며 해당 클래스나 컴포넌트는 문제를 해결하기 위한 방법을 제공한다. 개발자는 프레임워크에서 정의된 흐름과 규칙에 따라 코드를 작성해야한다. 즉 코드의 흐름에 대한 제어를 프레임워크가 가지고 있는 것이다. 프레임워크를 사용하면 코드의 일관성, 통합성을 .. 더보기
[Javascript] Promise 프로미스를 사용하면 비동기적으로 수행되는 작업의 성공과 실패를 분리해 그에 맞는 처리를 할 수 있게 된다. - 프로미스 생성 let promise = new Promise(function(resolve, reject) { // 실행 코드(성공하면 resolve함수 실행 / 실패하면 reject함수 실행) }); 프로미스 객체는 new Promise() 명령을 통해 생성할 수 있다. 프로미스 생성자의 인자는 반드시 함수(executor)여야하며 이 함수는 프로미스 객체가 생성되면 자동적으로 실행된다. 이 함수의 인자인 resolve, reject함수는 자바스크립트에서 자체적으로 제공된다. resolve함수는 실행 코드가 성공하면 실행시키는 함수이고 reject함수는 실행코드가 실패했을 때 실행시켜야 하는 .. 더보기
[Algorithm] 프로그래머스 - level1 <신규아이디 추천> 문제명 : 신규 아이디 추천 사이트 : 프로그래머스 난이도 : level 1 사용 언어 : javascript 접근 방식 1. 인자로 받은 new_id를 단계별로 수정한다 function solution(new_id) { let newIdArray = []; // 1단계 new_id = new_id.toLowerCase(); newIdArray = [...new_id]; // 2단계 const alphabet = "abcdefghijklmnopqrstuvrwyz".split(""); const number = "0123456789".split(""); const specialCharacter = "-_.".split(""); const availableCharacters = specialCharacter.. 더보기
[Algorithm] 프로그래머스 - level1 <모의고사> 문제명 : 모의고사 사이트 : 프로그래머스 난이도 : level 1 사용 언어 : javascript 접근 방식 1. 학생 각각이 찍을 답을 패턴화한다 2. 학생의 답과 주어진 답을 비교하여 점수를 구한다. 3. 점수가 가장 높은 학생을 배열에 담아 반환한다. function solution(answers) { const result = []; const answersCount = answers.length; const firstAnswers = [1, 2, 3, 4, 5]; const secondAnswers = [2, 1, 2, 3, 2, 4, 2, 5]; const thirdAnswers = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; const firstGrade = answers.f.. 더보기
[Algorithm] 프로그래머스 - level1 <폰켓몬> 문제명 : 폰켓몬 사이트 : 프로그래머스 난이도 : level 1 사용 언어 : javascript 접근 방식 1. 주어진 nums 배열에서 nums의 길이 / 2( = maxChoise)만큼의 길이의 배열을 만드는 데 서로 다른 원소를 고를 수 있는 경우의 수가 몇 가지인지 계산 (= countChoise) 2. countChoise가 maxChoise보다 많으면 답은 maxChoise 3. countChoise가 maxChoise보다 적으면 답은 countChoise function solution(nums) { const countNums = nums.length; const maxChoise= countNums / 2; const choise = []; for (let i = 0; i < coun.. 더보기
[PROJECT] WWTD - 기본 레이아웃 만들기 프로젝트명 : WWTD(What to wear today?) 설명 : 어지러운 옷장 속을 한 눈에 보여주고 나만의 코디를 저장하는 사이트 목표 프로젝트 기간 : 2021.05.10 ~ 2021.06.10 사용 언어 : javascript Progress 더보기 0. 프로젝트 기획 (done) 2021.05.10 1. 간단한 html,css 레이아웃 만들기 (progress) 2021.05.16 2. 프로젝트 구현을 위한 도구 선택하고 환경 세팅하기 2021.06.01 3. 새로운 옷 추가하기 3. 1. 이미지 업로드 및 미리보기 구현하기 3. 2. 이미지 업로드 폼 수정하여 옷 이름, 설명 등 추가 데이터 받기 4. 새로운 룩 추가하기 4. 1. 업로드된 이미지 조합하여 새로운 룩 만들기 4. 2. 조합.. 더보기
[PROJECT] 나의 첫 번째 사이드 프로젝트 - W.W.T.D. - 프로젝트 깃허브 주소 https://github.com/stitchy11/WWTD stitchy11/WWTD What to Wear ToDay. Contribute to stitchy11/WWTD development by creating an account on GitHub. github.com W.W.T.D.는 'What to wear today?'의 약자로 한국말로 하면 '오늘 뭐입지?'라는 의미이다. 나는 그날그날의 TPO에 맞게 편안하면서도 센스있게 옷을 입는 사람이 참 멋지다고 생각한다. 또 내 마음에 쏙 드는 옷을 입은 날은 그렇지 않는 날보다 왠지 자신감이 생기고 당당해지는 기분이 들어 매일 입을 옷을 고르는 데 꽤 많은 시간과 에너지를 쓰고 있다. 그러나 아침에 급하게 옷을 정하기 위.. 더보기
[JavaScript] 객체 내에 존재하는 속성에 접근하기 자바스크립트에서 속성은 열거가능한(enumerable) 속성과 열거가능하지 않은(non-enumerable) 속성으로 나뉜다. 또한 객체 자신이 소유하고 있는 속성과 부모에게서 상속받은 속성으로도 구분할 수 있다. 메서드에 따라 객체의 속성에 접근할 수 있는 범위가 달라진다. 다음 코드의 예제로 살펴보자. const Person = function (name, height) { this.name = name; this.height = height; this.eye = 2; }; Person.prototype.age = 50; const person1 = new Person("eunbin", 200); person1의 상속받은 속성들은 모두 Person.prototype 객체에서 상속받은 속성들이다. 이 .. 더보기

티스토리툴바