티스토리

웹 개발자 승민

검색하기

블로그 홈

웹 개발자 승민

dudghsx.tistory.com/m

내 마음대로 하는 블로그

구독자: 1

방명록 방문하기

주요 글 목록

만 3년 프론트엔드 개발자 회고록 새해를 맞이하여 기념으로 그간의 경험을 정리하면서 느끼고 배웠던 것들을 정리하고 돌아보는 시간을 가지려 한다.~2022년, 진로를 정하게 되는 과정2022년, 사회 초년생의 의욕2023년, 2년차의 우울2024년, 더 성숙해지기2025년 4년차, 앞으로는 무엇일까 ~2022년, 진로를 정하게 되는 과정2학년 때 나서 전공 필수였던 C프로그래밍 수업을 듣게 되었다. 당시 지도교수님이 담당하던 수업이었기 때문에 나는 그에게 인정받기 위해서 정말 열심히 공부했었다. 매일 밤을 새고 힘들었지만 돌아오는 인정이 나에게 뿌듯함을 줬다. 내가 좋아하는 것 중에 직업으로 삼을 수 있겠다는 생각을 하게 되었다. 좀 더 공부를 해보기 위해서 소프트웨어 공학 복수 전공을 진행하였다.주변의 권유에도 불구하고 당시에는 남들보다.. 공감수 2 댓글수 0 2025. 1. 17.
[JS] Promise.race를 사용하여 timeout 구현하기 // 1초 후에 실행되는 Timeout Promise 객체 const timeoutPromise = new Promise((resolve, reject) => { setTimeout(reject, 1000, "timeout"); }); // 2초 후에 실행되는 Promise 객체 const myPromise = new Promise((resolve, reject) => { setTimeout(resolve, 2000, "resolve"); }); // Promise 실행 함수 const race = async () => { try { // 프로미스 배열 중에 가장 먼저 resolve/reject가 실행되는 결과를 출력한다. const response = await Promise.race([myPromis.. 공감수 0 댓글수 0 2023. 10. 15.
[CSS] HTML table element 행렬 pivot하기 2x4의 형태의 HTML table을 CSS를 간결하게 사용해서 4x2 행렬로 바꿀 수 없을까 연구해봤다. H1 H2 H3 H4 R1 R2 R3 R4 css script를 추가한 결과는 아래와 같다. 이제 pivot을 위해서 존재하는 복잡한 데이터 계산 로직을 제거할 수 있다. 다만 flex를 통해 table element의 예외 경우를 만든 것이기 때문에, 화면 개발 측면에서 유지보수는 필요하다. 공감수 0 댓글수 0 2023. 10. 11.
ESLint, Prettier 적용하기 ESLint, Prettier란 무엇이고 어떻게 사용할 수 있을까? 개발자들은 각자의 개발 스타일을 갖고 있다. (들여쓰기의 정도, async/await 사용 여부 등...) 많은 코드 스타일들이 프로젝트 한곳에서 모이면 코드가 제각각이 되어 어플리케이션 품질이 저하될 수 있다. 이를 해결하기 위해서 Linter/Formatter를 사용하여 코드 컨벤션 통일을 강제화한다. 대표적인 Linter인 ESLint의 공식 문서에는 아래와 같이 정의한다. ESLint is an open source project that helps you find and fix problems with your JavaScript code. It doesn't matter if you're writing JavaScript in.. 공감수 0 댓글수 0 2023. 3. 16.
[Next.js] next build warn 문구 제거 warn 문구 1 info - Linting and checking validity of types ...warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config 해결 어플리케이션에서 별도의 eslint 설정파일을 사용하는 경우 명시해줘야한다. // .eslintrc.js module.exports = { extends: ['plugin:@next/next/recommended'], }; 참조 https://nextjs.org/docs/basic-features/eslint#migrating-exi.. 공감수 0 댓글수 0 2023. 2. 15.
정규표현식으로 사이에 있는 내용 가져오기 요구사항 태그 내부의 태그 내부의 내용 가져오기 Input const input = ` 나비 치즈 바둑이 냥냥이 `; 구현 function getNamesIncludeTag(input, type) { const reg = new RegExp(`()(.*?)()`, "gs"); const result = input.match(reg); return result; } function getNamesExcludeTag(input, type) { const reg = new RegExp(`(? 공감수 0 댓글수 0 2023. 2. 12.
[Git] 실무에서 자주 사용되는 commands git branch // 현재 브랜치를 기준으로 "feature"란 브랜치 명으로 생성함 $ git branch feature // "feature2" 브랜치의 내용을 "feature1"이란 브랜치 명으로 생성함 $ git branch feature1 feature2 // "feature" 이름을 가진 로컬 브랜치를 삭제함 $ git branch -d feature // "feature1", "feature2", "feature3" 이름을 가진 브랜치를 삭제함 $ git branch -d feature1 feature2 feature3 // 브랜치 이름에 "feature" 단어를 포함한 브랜치들을 삭제함 $ git branch | grep feature | xargs git branch -d // "fe.. 공감수 0 댓글수 0 2023. 2. 8.
MSA 한번에 이해하기 MSA의 등장 배경 MSA의 등장은 모놀리식 아키텍처(Monolithic Architecture)에서 부터 시작됩니다. Monolithic이라는 단어는 "하나의 암석으로 된", "한 덩어리의"라는 뜻을 가지고 있습니다. 그동안 대부분의 소프트웨어들은 모놀리식 아키텍처로 개발되었습니다. 이들은 단단한 암석이지만, 하나의 저장소에 모든 코드가 담겨있어 획일화 된 구조를 갖고 있었습니다. 모놀리식 아키텍처의 장점은 다음과 같습니다. 프로그램 전체의 개발 스택이 동일하여 복잡하지 않습니다. 고가용성 서버 환경을 쉽게 만들 수 있습니다. End-to-End 테스트가 용이합니다. 전통적인 소프트웨어 아키텍처로 개발자들에게 익숙합니다. 작은 규모의 서비스에서부터 개발하기가 쉽습니다. 단점은 다음과 같습니다. 프로그램.. 공감수 8 댓글수 0 2021. 11. 16.
[AWS 7] AWS 서비스 후기 공부 - 실습 - 포스팅으로 계획했던 프로젝트가 8일에 걸쳐 모두 완료됐습니다. 뿌듯하네요. 이번 포스팅에서는 과정을 회고하며 편하게 작성해보겠습니다. 아래의 내용으로 구성하였습니다. # 계기 # 어려웠던 점 # 배운 점 # 참조 # 계기 GS SHOP IT 직군 직무 소개 영상 프로젝트를 계획하게 된 계기는 GS SHOP 실무 면접입니다. GS SHOP 실무 면접에서는 IT 산업의 전반적인 관심도를 질문 받았습니다. 예상하지 못했던 질문들이었기에 배경지식으로 대답하는 것이 최선이었습니다. 그동안의 저는 풀스택 개발 능력과 디자이너와의 협업 경험을 바탕으로, 프론트엔드 개발자로서 강점을 어필했었습니다. 그래서인지 면접관님께서 해주신 "신입이면 다양한 경험에 도전해보는 것이 좋다"는 조언이 크게 와닿았습니.. 공감수 3 댓글수 0 2021. 1. 17.
[AWS 6] Route 53을 이용하여 도메인 적용하기 지금까지의 프로젝트 결과로 클라우드 인스턴스에 서버를 설치하였고 사용자는 퍼블릭 IP/도메인:3000을 통해 서비스를 제공받을 수 있게 되었습니다. 그렇지만 사람들이 긴 주소명을 외우기는 쉽지 않겠죠. 그래서 이번 포스팅에서는 www.naver.com처럼 도메인 이름을 간단하게 설정해보겠습니다. DNS(Domain Name System)를 사용해야합니다. DNS는 사람이 읽을 수 있는 도메인 이름(예: www.naver.com)을)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환해줍니다. DNS가 트래픽을 웹 애플리케이션에 라우팅하는 과정은 다음과 같습니다. 1. 그림과 같이 PC 브라우저에서 www.naver.com을 입력합니다. 그러면 PC는 미리 설정되어 있는 DNS (단말에 설.. 공감수 2 댓글수 0 2021. 1. 16.
[AWS 5] EC2 인스턴스와 RDS 데이터베이스 연동하기 AWS의 RDS 서비스를 이용하면 클라우드에서 데이터베이스 확장이 용이하고, 전문적인 업체가 보안 및 관리를 담당하기 때문에 유지하기 쉬워진다는 것이 장점입니다. 이번 포스팅에는 AWS의 RDS 서비스를 통해 클라우드 데이터베이스를 구축하고, EC2의 인스턴스와 연결해보도록 하겠습니다. 1) 데이터베이스를 생성하기 전에 해야하는 작업들이 있습니다. 데이터베이스를 생성할 때 입력해야되는 EC2 보안 그룹, 서브넷 그룹을 설정하는 과정입니다. 연결할 인스턴스의 가용 영역, 보안 그룹 이름을 기억한 뒤에 해당 인스턴스를 클릭합니다. 서브넷은 VPC 보다 작고, EC2 인스턴스들을 묶어놓은 단위를 말합니다. 2) 인스턴스의 VPC ID, 서브넷 ID를 기억합니다. 3) 보안 그룹 탭으로 이동한 뒤, 보안 그룹 .. 공감수 0 댓글수 0 2021. 1. 16.
[AWS 4] S3 서비스 적용하기 이번 포스팅에서는 AWS S3 서비스 프로젝트에 적용시켜보겠습니다. 지금까지 제 프로젝트에서는 서버 컴퓨터 디렉토리에 이미지, 오디오 파일을 같이 관리하고 있었습니다. 이 경우에, 만약 예상치 못한 사건이 발생해서 파일들이 삭제가 될 수가 있다는 문제점이 있습니다. 동일한 데이터를 다른 컴퓨터에서 참조해야한다면 데이터 무결성을 관리해야된다는 문제도 있었습니다. 하지만 이러한 이슈들은 AWS의 S3 서비스를 사용한다면 해결할 수 있습니다. 클라우드 저장소에 파일들을 업로드 함으로써 데이터들을 안전하게 관리 및 참조할 수 있습니다. 사용법은 매우 간단합니다. https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 s3.console.aws.amazo.. 공감수 0 댓글수 0 2021. 1. 15.
[AWS 3] git, node.js 환경 구축하기 이번 글에서는 생성된 우분투 인스턴스에서 웹 서비스를 배포하는 것이 목표입니다. 그렇기 위해서 git과 node.js를 설치하고 코드를 실행시키는 과정을 작성해보겠습니다. 우선 PuTTY를 통해 우분투 인스턴스에 접속하겠습니다. $ sudo apt-get update 1) 명령어를 실행하여 현재 우분투 관리하고 있는 소프트웨어들을 최신 버전으로 업데이트 시켜줍니다. $ sudo apt-get install git 1) 명령어를 실행하여 git을 설치해줍니다. $ git --version 1) 명령어를 실행하여 깃이 설치되었는지 확인합니다. cheonseungmin/portfolio 기술 스택을 소개하는 웹 페이지 개발. Contribute to cheonseungmin/portfolio developme.. 공감수 0 댓글수 0 2021. 1. 15.
[AWS 2] EC2 우분투 인스턴스 생성하기 지금부터는 본격적으로 환경 구축 실습을 시작해보도록 하겠습니다. 사용자들에게 서비스를 배포하려면 무엇이 필요할까? 우선 파일이 저장되어있고 서버 코드를 실행할 수 있는 서버 컴퓨터가 필요할 것이다. 서버를 위해 로컬 컴퓨터를 준비한 뒤 파일 및 데이터를 저장시켜놓고, 포트포워딩을 통해 사용자의 요청을 처리할 수 있을 것이다. 지금까지의 나도 그렇게 토이 프로젝트들을 준비했었다. 그렇지만 접속자가 늘어날 수록 학생 및 스타트업에게는 인프라 구축을 위한 비용이 많이 까다로울 수 있다. 그래서 이를 해결하기 위한 것이 AWS의 EC2(Elastic Compute Cloud) 서비스이다. 아마존 클라우드 서버 호스팅 | Amazon Web Services 다양한 구매 모델 온디맨드, 스팟 인스턴스, Saving.. 공감수 0 댓글수 0 2021. 1. 14.
[AWS 1] AWS(Amazon Web Service) 개요 프로그래밍을 직업으로 삼는 사람이라면 아마존 웹 서비스(AWS: Amazon Web Services)에 대해서 한번쯤은 들어봤을 것이다. 아마존에서 처음부터 클라우드 서비스 플랫폼을 만들 생각을 하고 있던 것은 아니었다고 한다. 2000년도 초반 인터넷 쇼핑몰을 운영하던 아마존은 늘어난 트래픽과 주문량을 감당하기 위해서 굉장히 뛰어난 수준의 내부 인프라 시스템을 구축하게 되었다. 그러다가 컴퓨팅, 스토리지, 데이터베이스 등 운영 서버에 필요한 인프라를 누구보다 안정적이고 저렴하게 운영할 수 있는 능력을 아마존 쇼핑몰 하나가 아닌 전 세계 모든 회사를 대상으로 제공하자는 생각을 하게 됐고, 2006년부터 EC2를 서비스하기 시작했다. 아마존 웹 서비스는 아마존 닷컴의 클라우드 컴퓨팅 사업부다. 아마존 웹 .. 공감수 0 댓글수 0 2021. 1. 14.
[AWS 0] 프로젝트 개요 GS SHOP 직무 면접 중에 내가 프론트엔드 개발자가 되기 위해 어떠한 준비들을 해왔는지에 대해 강조했다. 그런데 면접관님께서 말씀하셨다. "그럼 프론트엔드 개발자만 하실 건가요?" 생각치도 못한 질문에 머리를 한 대 얻어맞은 기분이 들었다. 지원 자격과 우대사항에서 프론트엔드, 백엔드에 대해 공고했기 때문에 그 분야에 대해서만 강점을 내세우고 있었기 때문이다. 일단 그 순간에는 당황한 나머지 제가 왜 프론트엔드 개발자를 목표로 삼았는지에 대해서 횡설수설 했던 것 같다. 그러자 면접관님께서는 "신입이면 다양한 경험을 해보는게 좋을텐데.. " 혼잣말을 하며 넘어가셨다. 면접이 다른 지원자와 진행되는 동안 내 마음을 진정시켰다. 곰곰히 생각해보니까 면접관님들께서 프론트, 백엔드 분야가 아니라 인프라 플랫폼.. 공감수 1 댓글수 1 2021. 1. 13.
HTML 문서 렌더링 옛날부터 HTML 파일이 어떻게 렌더링 되는지에 대해서 궁금증만 있었지 제대로 알아본 적은 없었다. 프론트엔드 개발자로서 더 이상 넘어갈 수 없다. 이번 글을 통해서 브라우저의 HTML 렌더링 순서를 각 잡고 정리해보겠다. 1. 불러오기 로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정. 읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등을 결정한다. 2. 파싱 (Phasing) 브라우저 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다. -> 순서로 파싱이 진행한다. 그런데 만약 내부의 , 태그를 만나게 된다면 해당 파일이 로드, 파싱이 완료 될 때까지 HTML의 파싱이 중단된다. 이는 DOM 트리가 만들어지는 것을 지연시키기 때문에.. 공감수 0 댓글수 0 2020. 11. 19.
fetch 저번 시간에 XHR에 대하여 공부 및 실습을 해보았다. 그렇다면 이번에는 이후에 탄생한 fetch에 대하여 정리해보도록 하겠다. 우선 fetch가 생겨난 배경부터 설명해보겠다. 그동안 비동기 요청을 위해서는 XHR을 이용해야했다. 하지만 XHR객체를 이용해야하고, EVENT에 따라서 등록된 변경사항을 받아야 했고, 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 보기 좋지 않았다고 한다. 이를 보완하기 위해 fetch가 생겨났고, 그 결과 http 요청에 최적화 할 수 있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 추가 로직을 다루는대에 최적화 할 수 있게 되었다고 한다. 우선, 기본적인 사용 방법이다. // https://developer.mozilla.org/ko/.. 공감수 0 댓글수 0 2020. 11. 15.
XMLHttpRequest a, form 태그를 이용하지 않고 get, post 요청이 가능한지 궁금했다. 그래서 fetch api를 공부하던 중, internet Explorer에서는 fetch가 동작하지 않음을 발견했다. 이러한 발견은 fetch, axios 이전에는 서버에 새 페이지를 요청하지 않고 어떻게 데이터를 받아 페이지를 갱신할 수 있었을까? 하는 궁금증으로 이어졌다. explorer에서는 그것이 불가능 했던 것일까? 이러한 이유로 (XHR은 ajax, axios의 기반이 된다고 한다!), fetch를 정리하기 전에 XMLHttpRequest를 먼저 정리해보려고 한다. 이름만 보면 XML 데이터가 큰 역할을 하는 것 같지만, 예전 api들이 xml방식을 주로 썼어서 그런게 아닐지라는 추측이 남아있다고 한다. (최근에는.. 공감수 0 댓글수 0 2020. 11. 10.
2020 Winter Coding 후기 dudghsx.tistory.com/2 2020.05.26 나름 열심히 살았다고 생각하는데 내가 온 길을 돌아보니 막상 아무 것도 없었다. 남들이 어디서 무엇인가를 이뤄냈다는 소식을 들으면 "보여주지 않았을 뿐이지 내가 쟤들보다 나아" 하는 dudghsx.tistory.com 프로그래머스 코딩 테스트에 불합격이 블로그를 만들게 된 계기가 됐다. 저건 2020년 섬머 캠프였는데 이번에는 2020년 윈터캠프가 돌아왔다. 우선 결과부터 말하자면 합격했다!! 섬머 코딩에서는 160점으로 마무리 했었다. 결과로 총 합계 점수만 알 수 있었다. 문제를 풀고 제출해도 몇점인지 내가 맞았는지 틀렸는지 알 수가 없었다. 그런데 이번에는 점수를 바로 알 수가 있어서 마음도 편하고 틀린 코드를 수정하기에도 편했다(3번을 빼.. 공감수 0 댓글수 0 2020. 11. 3.
Promise fetch api를 보던 중, Promise에 대한 이해가 부족하다는 것을 알게 되었다. 써볼 일이 없었기 때문에 나에겐 어색한 친구였다. 그래서 이번 글을 통해 막연하게 알고 있던, 하지만 javascript의 중요한 개념 중 하나인 Promise에 대해서 간단하게 정리 및 실습을 해보고자 한다. Promise는 javascript의 표준 내장 객체/ 제어 추상화 객체 중 하나이다. (대표적인 친구로는 제네레이터가 있다.) 아래의 링크를 들어가면 Promise의 정보, 속성, 메소드를 볼 수 있다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise Promise 객체는 비동기 작업이 맞이할 미래의 완.. 공감수 0 댓글수 0 2020. 11. 3.
정보처리기사 실기, 스마일게이트 STOVE DEV CAMP 후기 돌아온 현타시간입니다,,, 한동안 나름 바쁘게 지내느라 블로그에 글을 못 올렸는데 어느정도 정리가 되서 다시 글을 끄적여 봅니다. 우선 정보처리기사 시험을 봤습니다. 선배들이 공부할 거 별로 없다고 해서 시험 준비는 별로 안하고 있었습니다. 시나공 책으로 일주일 공부했고 점수는 75 75 75 85 85 받고 합격했습니다. 느낀점은,,,, 이렇게 닥치고 암기만 하는 공부는 오랜만이었습니다. 일주일 동안 밤새면서 외우는데 공부하는 보람 하나도 안느껴지고 스트레스만 엄청 받았습니다. 그리고 남들이 쉽다고 해서 그런가 떨어지면 어떡하지 라는 심리적 압박감이 장난 아니었습니다. 그래도 전공자라 어느정도 아는게 있어서 완벽 암기는 못해도 문제를 보면 답을 찾을 수는 있는 수준으로 공부했습니다. 이후에 실기 시험 .. 공감수 0 댓글수 0 2020. 10. 28.
[Node.js][mySQL] ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; mysql installer > server 옆에 reconfigure > Auth 설정가서 legacy 선택 > 완료 www.inflearn.com/questions/3637 nodejs와 mysql 연동 에러 - 인프런 질문 - nodejs와 mysql 연동 에러 Connection.connect(); 를 추가한 후 저장하면 다음과 같은 에러가 뜹니다. Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by serv.. 공감수 0 댓글수 0 2020. 10. 13.
정리할 web api 목록 많다 많아~~ 언제 다 읽어보냐 ㅠㅠㅠ developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능�� developer.mozilla.org developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org developer.mozi.. 공감수 0 댓글수 0 2020. 9. 16.
useContext 실습 컴포넌트 A, B, C, ... ,Z가 있다. 만약 A에서의 어떤 값을 Z까지 전달해주려면 어떻게 해야할까? 쉽게, 아래의 방법이 있을 것이다. const A = () => { const data = 'data'; return ( ) } const B = (props) => { return ( ) } const C = (props) => { return ( ) } // ..... const Z = (props) => { return ( props.data ) } A 컴포넌트의 data 값을 Z에서 사용하기 위해서, 중간 컴포넌트들의 props를 통해 계속 내려보내는 것이다. 이 방법을 prop drilling이라고 한다. 문제없이 잘 작동된다. 그런데 중간 컴포넌트들의 갯수가 1000개라면? 어느 세월에.. 공감수 0 댓글수 0 2020. 9. 16.
useMemo 실습 useMemo에서 Memo는 메모이제이션을 의미한다. 예를 들어 설명하자면, 알고리즘 해결 방법중 동적 계획법과 비슷하다고 생각하면 된다. 렌더링 시에 같은 값을 반복해서 계산해야될 때, 무의미한 연산 수를 줄이기 위한 훅이다. 메모리에 값을 저장해놓았다가 렌더링 시에 저장된 값을 비교하여 변화가 생겼을 때만 함수를 실행시켜주는 훅이다. // useMemo를 사용하지 않은 코드 import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const App = () => { const [ text, setText ] = useState('default'); const handleChange = e => { const { value }.. 공감수 0 댓글수 0 2020. 9. 16.
[React] Uncaught TypeError: Invalid attempt to destructure non-iterable instance. const handleChange = e => { const [ value ] = e.target; // error!! 객체를 배열로 구조분해할당 시도함!! setText(value); } // 수정 const handleChange = e => { const { value } = e.target; // [] 를 {}로 바꿔줌 setText(value); } e.target은 객체이지만 배열의 형태로 구조분해할당 시도했기 때문에 에러가 생겼다. []를 {}로 바꿔주어 해결하였다. stackoverflow.com/questions/42141393/react-js-error-invalid-attempt-to-destructure-non-iterable-instance React JS Error: Invali.. 공감수 0 댓글수 0 2020. 9. 15.
[React] Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 문제 해결 방법: import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log('effect') }); return ( {count} click // ERROR!! ) } ReactDOM.render( , document.getElementById('root') ) 위의 .. 공감수 1 댓글수 0 2020. 9. 13.
;(세미콜론)생략 알고리즘 문제를 풀다가, 가독성이 좋게 String에 반복문으로 접근하는 방법을 찾고 싶었다. 카카오톡 javascript 오픈 채팅방에서 고수님들과 이야기를 통해 아래의 방법들을 알게 되었다. let test = 'test' // 방법 1 Array.from(test).forEach(() => { // console.log(c) }) // 방법 2 for(let c in test) { // console.log(c) } // 방법 3 [...test].forEach((c) => { // console.log(c) }) 방법 3가 제일 마음에 들어서 따라해봤는데, 실행되지않아서 당황했었다. 처음에는 고수님께서 실수로 잘못 알려주신게 아닐까 하고 생각했었다. (원숭이도 나무에서 떨어질 떄가 있으니까!!) .. 공감수 0 댓글수 0 2020. 9. 10.
hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces ko.reactjs.org import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); // setCount를 통해 count 값이 바뀌는데 어째서 count인가? return ( You clicked {count} t.. 공감수 7 댓글수 0 2020. 9. 7.

문의안내

티스토리
로그인
고객센터

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