티스토리

User-centered Developer

검색하기

블로그 홈

User-centered Developer

yoonjong-park.tistory.com/m

Product manager to Front-end developer

구독자: 3

방명록 방문하기

주요 글 목록

[JavaScript] 클린 코드 요약 1️⃣ 변수(Variables) - 의미있고 발음하기 쉬운 변수 이름을 사용 - 동일한 유형의 변수에 동일한 어휘를 사용 - 검색가능한 이름을 사용 - 의도를 나타내는 변수들을 사용 2️⃣ 함수(Functions) - 함수 인자는 2개 이하가 이상적 (대부분 1개면 충분) - 1개의 함수, 1개의 행동 ⭐️ - 함수명은 함수가 무엇을 하는지 알 수 있어야 함 - 함수는 단일 행동을 추상화 - 중복된 코드를 작성하지 말 것 - Object.assign을 사용해 기본 객체를 만들 것 - 매개변수로 플래그를 사용하지 말 것 - 사이드 이펙트를 피할 것 (변수, 함수 역할 분리) - 전역함수 말 것 (prototype 연결 -> class 상속) - 명령형 -> 함수형 프로그래밍 - 조건문은 캡슐화 - 부정조.. 공감수 0 댓글수 2 2023. 12. 2.
[코딩테스트] JadenCase 문자열 만들기 문제 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 s는 길이 1 이상 200 이하인 문자열입니다. s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 입출력 예s / return "3people unFollowed me" "3people Unfollowed Me" "for the last wee.. 공감수 0 댓글수 0 2023. 10. 31.
[코딩테스트] 올바른 괄호 문제 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 (s / answer) "()()" true "(())()" true ")()(" false "(()(" false .. 공감수 0 댓글수 0 2023. 10. 27.
[코딩테스트] 최솟값의 곱 구하기 문제 최솟값 만들기 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4).. 공감수 0 댓글수 0 2023. 10. 20.
[JavaScript] day.js locale (key, name) - i18n 매번 어디가서 검색하기 좀 그래서 걍 기록해둠. 한국 key : "ko" [ { key: "af", name: "Afrikaans" }, { key: "am", name: "Amharic" }, { key: "ar-dz", name: "Arabic (Algeria)" }, { key: "ar-iq", name: " Arabic (Iraq)" }, { key: "ar-kw", name: "Arabic (Kuwait)" }, { key: "ar-ly", name: "Arabic (Lybia)" }, { key: "ar-ma", name: "Arabic (Morocco)" }, { key: "ar-sa", name: "Arabic (Saudi Arabia)" }, { key: "ar-tn", name: " A.. 공감수 0 댓글수 0 2023. 1. 31.
[JavaScript] imgbb 이미지 업로드 api Post 코드 무료 이미지 서버 사용하는 방법이다. { var formData = new FormData(); formData.append( "image", "iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAIAAACzY+a1AAAS/0lEQVR42u2deZQURZrAvy8iK6u6jj7og26wAWU4BhRlcFaBGcEFVsUn6qK+dRyP8VhnnFFxZzxGdx10jh2YnTfKk6fjG1cdkXVYVx3FGwVRPBAB8UQUlYa+6Luquo7MiG//iKrqBqu7svpOXvxe0+81XZ0ZGb+MyIjIiC8w9uU40LgZNtwJ0PQXrdD1aIWuRyt0PVqh69EKXY9W6Hq0QtejFboerdD1aIWuRyt0PVqh69EKXY9W6Hq0QtejFboerdD1aIWuRyt0P.. 공감수 0 댓글수 0 2023. 1. 6.
[JavaScript] ES6 알아야 할 기능 노션으로 정리해두었다. 이런 저런 자료 찾아보면서 나도 자세히 이해하느라 3일 정도 소요되었던 것 같다. 이미 알고 있던 기능도 있고, 트렌드의 변화도 함께 알아야 했던 것들도 있었다. JS는 정말 급변하고 있다... 7.ES6 업그레이드 기능 + promise await async 등 ES6 업그레이드 기능 seeik.notion.site 공감수 1 댓글수 0 2022. 6. 15.
[코딩테스트/배열] Two Sum by LeetCode 문제 Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. 정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 더합니다. 각 입력에 정확히 하나의 솔루션이 있다고 가정하고 동일한 요소를 두 번 사용할 수 없습니다. 답변은 어떤 순서로든 반환할 수 있습니다. .. 공감수 0 댓글수 0 2022. 3. 12.
[javascript/basic] import / export 구문과 코딩 스타일 짧은 정리 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com import 하는 방식이 너무 여러가지여서, 솔직히 좀 헷갈릴 때가 많았다. App Component export from 이후에 있는 R004_LifecycleEx 부분은 R004_LifecycleEx Component 에서 export한 식별자를 적은 것이다. R004_LifecycleEx.js 라는 파일명과는 무관하다. 사실 파일명을 써도 무관하다. 왜냐하면, 파일명을 써도 파일내부에서 export한 모듈을 인식.. 공감수 0 댓글수 0 2022. 1. 6.
[Basic] for …in 반복문을 처리하는 배열과 객체 (obj & array for looping) The developer say code. 배열인 경우는 index를 출력한다. 객체인 경우는 key 값을 순서대로 출력한다. 객체를 만약 {a:1, c:2, b:3} 이렇게 입력했으면, a,c,b 순서로 출력을 행한다. 이런 특성을 Enumerable 이라고 한다고 한다. Enumerable 이라는 것 자체가 순서를 열거할 수 있는 것에 대한 것을 말한다. 사실 find나 map, filter 같은 것도 모두 동일한 특성을 갖고 있다. (추가적인 자료는 밑에 참조 경로를 참조) index 나 key를 string 으로 받기 때문에 index가 있거나, key가 있을 때, 예를 들어, if(Array.key=== "a") { /* codes */} 같은 방식으로 실행이 가능 할 것 같다. input co.. 공감수 0 댓글수 0 2021. 6. 23.
try / catch 를 사용해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 아래 handleClick() 내부에 try Catch 같은 것을 처리하는 것이 좋다. 이벤트핸들러의 경우에만 try / catch 를 사용한다. 그동안 예외 처리에 대해 그다지 신경을 안썼는데, 이제는 이렇게 했을 때, 문제를 인식하기 시작하게 되었다...(나름 성장한 것인가...?) 암튼, 앞으로는 이벤트핸들러를 동작할 때는 사용하기로... class MyComponent extends React.Component.. 공감수 0 댓글수 0 2021. 6. 10.
[JavaScript] 자바스크립트 배열 추가, 삭제 방법 (push, pop, splice) [펌] 자바스크립트 배열 추가, 삭제 함수 배열 추가 : Array.push(), Array.unshift(), Array.splice() 배열 삭제 : Array.pop(), Array.shift(), Array.splice() 배열 요소를 추가하는 방법 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'c', 'd'] arr.push('d'); // 배열의 끝에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['d', 'a', 'b', 'c'] arr.unshift('d'); // 배열의 앞쪽에 요소를 추가 var arr = ['a', 'b', 'c']; // arr = ['a', 'b', 'd', 'c'] arr.splice(2, 0, 'd.. 공감수 0 댓글수 0 2021. 5. 28.
[javascript] try..catch & 에러 핸들링 try { // 코드... } catch (err) { // 에러 핸들링 } finally { // 에러 발생 여부와 상관없이 try/catch 이후에 실행됨 } 위와 같은 방식으로 작성한다. 어떤 코드가 에러가 발생할 수 있기 때문에 그에 대한 대비책으로 코드를 작성해둘 수 있다. useEffect 안에서 무조건 실행되지 않는 구문이 있을 수 있다. 그런 경우에 catch 문을 활용해서 로그인 화면으로 이동시키거나, 특정 String으로 적용시키는 게 좋을 수 있다. 코드라는 게 완벽할 수 없다. 어떤 상황에 에러가 발생할지 예상은 하지만 모든 예상이 불가능하다. 그렇기 때문에 위 코드를 작성하는 것이다. 스크립트가 중단되는 것을 막는 것이다. 과용하면 코드가 복잡해질 가능성이 매우 크다. 중요한 핵심.. 공감수 0 댓글수 0 2021. 5. 27.
[Basic] 특정 기간 내 배너 띄우기, 현재 시각 확인 하기 배경 홈페이지가 업데이트되면서 리뉴얼을 시작하게 되었다. 이에 따라 배너를 특정 기간에 띄워야 할 필요가 있었다. 이를 해결하기 위해서 코드를 찾아보았었다. 코드 const startDate = new Date ("2021-05-24T00:00:00z"); // 뒤에 z를 안붙이면 IE10 > 일 경우, 에러. 꼭 붙이자 const endDate = new Date ("2021-05-31T23:59:59z"); const now = new Date(); // 현재 날짜 확인 const readyStartDate = new Date ("2021-06-01T00:00:00z"); const readyEndDate = new Date ("2021-06-01T10:00:00z"); if(endDate > now.. 공감수 0 댓글수 0 2021. 5. 21.
[Basic] 깊은 복사, 얕은 복사 shallow copy, deep copy, slice, JSON.parse, JSON.stringify 개요 자바스크립트는 근본적으로 깊은 복사가 불가능하다. 이를 해결하기 위해 아래와 같은 짓을 한다. 기초적 방법 let tempJson = JSON.parse(JSON.stringify(json)); 위 방법이 깊은 복사를 하기 위한 가장 기초적인 방법이다. 배열은 slice로도 깊은 복사가 가능하다. (1 depth 배열인 경우) 그러나, 객체인 경우는 위 방식을 택하거나, 현재 기준으로 2가지 라이브러리를 사용하는 방법이 있다. Lodash 와 Ramda 깊은 복사를 할 수 없어서 만들어진 라이브러리인데, 기본적으로 처리하는 방식은 같은 것으로 보인다. (자바스크립트의 언어적 특성 때문에 이런 돌려차리를 해야 한다는 게 우습긴하다.) 자세한 내용은 아래 출처를 이용합시다. 출처: https://bba.. 공감수 0 댓글수 0 2021. 5. 20.
[javascript] reference 사이트 MDN developer.mozilla.org/ko/docs/Web/JavaScript Jscript docs.microsoft.com/ko-kr/previous-versions/visualstudio/visual-studio-2010/72bd815a(v=vs.100) Javascript 사전 (생활코딩) www.opentutorials.org/course/50 공감수 0 댓글수 0 2021. 4. 9.
[javascript] 프로토타입으로 생긴 특징들.. (prototype based programming) 나중에 이해해두어야겠다.... 일단 자료는 퍼왔다. 자바스크립트는 일단 이 개념부터 이해할 수 있어야 편할 것 같다. 각종 생기는 effect가 이때문에 생기는 경우가 많다. 프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍이라고도 한다. 프로토타입 기반 언어의 가장 원조격인 프로그래밍 언어인 셀프는 데이비드 엉거와 랜덜 스미스가 개발했다. 클래스리스 .. 공감수 0 댓글수 0 2021. 4. 9.
[javascript] class 문법 - super() 정의 아래 내용을 잘 읽으면 알 수 있다. super() 문법은 상위 클래스를 참조할 수 있게 하는 것이다. 여기서 this에 대한 궁금증도 생길 수 있는데, this는 작성하는 동안 구조의 맥락에 맞추어져서 상위 개체나, 생성자, 소속된 것에 대해 인스턴스화하는 구문이다. this를 통해 instance화 하고, 클래스의 구조를 엮어서 사용하는 것이다. (완전 정확하지는 않을 것 같다. javascript는 prototype언어이기 때문에 좀 더 정확히 알아볼 필요가 있다. 현재 나의 이해가 여기까지 닿을 뿐이다.) class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width.. 공감수 0 댓글수 0 2021. 4. 7.
[Dev] CallBack 콜백함수 콜백함수란 이름 그대로 나중에 호출되는 함수를 말한다. 콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 콜백함수도 일반적인 자바스크립트 함수일 뿐이다. 예를 들어, 이벤트 핸들러 같은 것을 콜백함수라고 할 수 있다. CallBack을 활용한 비동기적 프로그래밍 이 부분이 가장 큰 장점이다. 그리고 사실, 이 부분 때문에 사용하는 것이다. 1. 사용자 이벤트 처리 2. 네트워크 응답 처리 - A 응답이 있을 때, 그 다음 처리를 해야할 함수가 있을 때 사용된다. 3. 파일을 읽고 쓰는 등의 파일 시스템 작업 4. 의도적으로 시간 지연을 사용하는 기능 (알람 등) 대표적으로, setTimeout, setInterval, clearInterval 함수 같은 것이 있다. 출처 :.. 공감수 0 댓글수 0 2021. 3. 29.
[JavaScript] 검색 기능 만들기 [펌] 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com const value = "search keyword"; for (let i = 0; i -1) { console.log(videos[i].snippet.title); } else { } } 내가 아래의 블로그 내용을 토대로 작성한 내용이다. videos[i].snippet.title까지가 문자열.. 공감수 1 댓글수 2 2021. 2. 10.
[javascript] import 에 대한 이해 *간단한 건데, 의외로 검색어에 이 내용이 노출이 안되는 것 같아서 기록해둔다. 나처럼 의문을 갖고 헤매고 있었을 사람을 위해서ㅋㅋㅋㅋ 힘내라 용자여! import React, { useEffect } from "react"; import "./app.css"; import VideoList from "./components/video_list/video_list"; function App() { const [videos, setVideos] = React.useState([]); //null video 위와 같이 작성해도 되고, 아래와 같이 작성해도 된다. import React, { useState, useEffect } from "react"; import "./app.css"; import Vid.. 공감수 0 댓글수 0 2021. 2. 8.
[javascript] typeof, instanceof 설명 사용되는 것과 생성(instance)되는 것 사이에 차이가 있다. 생성까지 맞추려면 new Type(value); 형식으로 입력하는 것이 일치하게 하는 방법이다. 임의로 편하다고 대충 변수명 쓰고 value 를 넣는 방식은 지양하도록 하자 공감수 0 댓글수 0 2021. 1. 26.
ECMAscript != Javascript 두 개는 서로 다르다. ECMAscript 는 script 언어를 이렇게 만들자 하는 표준 규격서 같은 것이다. 예를 들면, ISO 7규칙 같은 표준화라고 할까나... 4G, 5G 표준화 규격을 세우고, 이걸 구현하는 기술은 여러가지다. (4G도 LTE-Advanced, Wibro evolution... ) 암튼, 둘은 다르다. Javascript는 ECMAscript를 준수해서 개발된 LTE-Advanced 같은 기술(언어)이라고 보면 된다. 공감수 0 댓글수 0 2021. 1. 14.
[Javascript] 화살표 함수 간략 설명 짧은 함수 일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요: var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; // 이 문장은 배열을 반환함: [8, 6, 7, 9] elements.map(function(element) { return element.length; }); // 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다. elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다. elements.map(element => { return element.length; }); //.. 공감수 0 댓글수 0 2021. 1. 13.
Print 기능 구현 방법 (영역인쇄, javascript) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 인쇄할 버튼을 만들고 버튼을 클릭하면 인쇄가 되도록 구현하였다. #첫번째시도 window.print() => header 부분을 비롯하여 모바일에서 설정된 영역까지 인쇄된다. 문제가 심각하다. 영역을 설정해서 인쇄하는 방법을 찾기 시작했다. #두번째시도 0. document.body를 따로 저장해둔다. 1. 인쇄할 영역을 querySelector로 잡는다. 2. 인쇄하지 않을 영역을 querySelector로 잡는다... 공감수 2 댓글수 2 2020. 12. 3.
php 와 javascript 차이 & 상호 간의 호출 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com php 언어는 대표적인 서버 사이드 스크립트 언어중 하나입니다. 즉, 서버에서 실행되는 언어입니다. 서버에서 실행되는 언어라는 의미를 이해하기 위해서는 우선, 서버에 대해서 알아야할 것 같습니다. 우와 그래서 Server가 뭐야~ 예 그렇습니다. 서버는 어떤 '업무'를 수행하기 위해 설정되어있는 컴퓨터라고 볼 수 있습니다. 여러분이 웹 사이트를 하나 운영한다고 해보겠습니다. 이처럼 Client로 부터 요청이 오면 Se.. 공감수 2 댓글수 0 2020. 11. 20.
addEventListener 이벤트리스너 종류 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 출처: https://abc1211.tistory.com/201 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 오늘 코드하다가 resize를 처음 써보면서 이런 것도 있다 싶어서 정리해둔다. MDN 보니까 신기한 게 많다. 자주쓰는 건 몇 개 없겠지만, 알면서 안쓸 필요는 없겠지. 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 .. 공감수 3 댓글수 0 2020. 10. 23.
내장함수 built in Function Vanilla Javascript Framework 자체에 내장되어 있는 함수를 built in function 이라고 함. console을 찍어보면, 다양한 Function의 집합인 걸 알 수 있음. 공감수 0 댓글수 0 2020. 8. 16.
Map, Reduce, Filter : Javascript 예제를 봐도 잘 이해가 안 갔었는데, 좋은 글을 찾게 되어 기록한다. 들어가기 전에 이 포스팅은 https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4 에 있는 포스팅들을 번역한 것입니다. 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 정정하겠습니다. original source of this posting is from https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4 If the original author requests deletion, it will be delete.. 공감수 0 댓글수 0 2020. 8. 13.
화살표 함수 출처 : https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-functionvelog.io/@ki_blank/JavaScript-화살표-함수Arrow-function 화살표 함수는 ES6문법입니다. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다. // 일반 함수 const foo = function () { console.log("foo") }; // foo 화살표 함수 const bar = () => console.log("bar"); // bar 1. 화살표 함수의 기본문법 2. 화살표 함수 this 일반 함수와 화살표 함.. 공감수 0 댓글수 0 2020. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.