개발자 지망생의 블로그

[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상 React로 나만의 이력서 & 포트폴리오 페이지를 만들던 중 작은 오류가 발생했다. p 태그 안에 들어갈 텍스트에 개행을 넣기 위해 stirng을 백틱으로 감싸고 줄바꿈을 입력했는데 페이지에 적용되지 않았다. const aboutme = { EN: `Hi, I'm blahblah. I started learning software development with interest in mobile application development. Now I'm trying to progress as an agile and systematic front-end developer.`, KO: '안녕하세요, 앱 개발에 흥미를 느껴 개발을 시작했으며 민첩하고 체..

[자바스크립트] 이벤트 위임을 활용한 Event Listener 중복 해결 드림코딩에서 '프론트엔드 필수 브라우저 101' 강의를 듣다가, 쇼핑 리스트 만들기 실습 문제를 풀어보았다. input 창에 내용을 입력하고 추가 버튼을 누르거나 엔터 키를 누르면 목록에 아이템이 추가되고, 추가된 목록에서 오른쪽 삭제 버튼을 누르면 해당 아이템이 삭제되는 간단한 웹사이트이다. 추가/삭제 기능은 원하는 대로 이루어지지만, 위와 같이 삭제 버튼에 Event Listener가 여러 개 쌓이는 문제가 있었다. 이는 아이템을 추가할 때마다 document에서 삭제 버튼을 모두 찾고, 찾은 모든 삭제 버튼에 Event Listener를 각각 추가해주도록 구현했기 때문이다. 겉보기에는 문제가 없어보이지만, 현재 프로그램의 경..

[JS] 단축 평가(Short-Circuit Evaluation) 쉽게 이해하기 논리곱(&&), 논리합(||) 연산자를 사용한 단축 평가(단락 평가) 대해 쉽게 이해해보자. 자바스크립트에서 && 또는 ||를 사용한 표현식은 그 피연산자 중 하나로 평가된다. 표현식(expression)이란 값으로 평가될 수 있는 코드이다. 대부분의 프로그래밍 언어에서, 논리곱(&&) 또는 논리합(||) 연산자를 이용한 표현식은 true 또는 false로 평가된다. 하지만, 자바스크립트에서는 표현식의 피연산자 중 하나로 평가된다. 일단 &&, || 연산자의 결합성은 좌결합성이므로 왼쪽에서 오른쪽으로 연산이 진행된다. 논리곱(&&) 연산자 피연산자를 왼쪽에서 오른쪽으로 확인하며 하나라도 falsy인 경우, 해당 falsy 값..

42서울 라피신 최종 후기 42 Seoul La Piscine final review 2022년 1월 31일부터 2월 25일까지 진행된 42서울 6기 2차 라피신의 최종 후기이다. 이 글을 쓰는 시점은 금요일 Final Exam을 마치고 3일 뒤! 기억이 휘발/왜곡되기 전에 얼른 적는다. # 개인과제 C11을 끝냈다. 그 이상의 진도는 나갈 수 없었다.. C10, C12, C13이 남아있었지만 C10이 너무 어려웠다. C12는 특정 개념의 기초에 관련된 문제라 그렇게 어렵지 않았는데, C10을 통과하지 않으면 C12는 풀 수 없었다. 마지막 주에 반 이상은 C10, C12, C13을 제외한 모든 개인과제를 100점으로 만드는 것 같았다. 즉, 이 정도 진도로는 딱히 경쟁력을 기대할 수는 없을 것 같다. ..

42서울 라피신 3주차 후기 42 Seoul La Piscine third week review 2022년 1월 31일부터 2월 25일까지 진행되는 42서울 6기 2차 라피신의 3주차 후기이다. 이 글을 쓰는 시점은 4주차 화요일인데, 이제 3일 후면 끝난다는 사실이 믿기지 않는다 🥺 정말 밀도 높은 한 달이었고... 전체적인 후기는 완전히 끝난 뒤에 또 쓰는 걸로! # 개인과제 월요일에 C03, 화요일에 C04, C05, 수요일에 C06, 토요일에 C07, C08, 일요일에 C09를 끝냈다. C05, C06, C08은 첫 시도만에 100점을 받아서 기분이 정말 좋았다!! 운이 좋았다 🍀 앞 과제들을 풀며 예외처리가 중요하다는 것을 알게 돼서 테스트 케이스를 빡세게 돌리게 되긴 했다. 개인과제 진도를 빠..

42서울 라피신 2주차 후기 42 Seoul La Piscine second week review 2022년 1월 31일부터 2월 25일까지 진행되는 42서울 6기 2차 라피신의 2주차 후기이다. 이번에는 요일별로 말고, 과제별로 기록을 해보려 한다! # 개인과제 이번 주 개인과제.. 쉽지 않았다 🙃 C01은 운 좋게 첫 번째 시도만에 100점을 받았다. 그러나 C02는 마지막 문제가 정말 난해했다. 어려운 알고리즘이 필요한 것은 아닌데 지정한 형식을 맞추려면 어느 정도의 노가다가 필요했다. printf 등을 쓸 수 있고, 만들 수 있는 함수의 개수가 제한되지 않고, 함수 안의 최대 줄 수가 제한되지 않았다면 쉽게 풀었을 것 같은데 물론 전부 불가능했다! write만 이용해서 이걸..? 정말 쉽지 않다 ..

42서울 라피신 1주차 후기 42 Seoul La Piscine first week review 2022년 1월 31일부터 2월 25일까지 진행되는 42서울 6기 2차 라피신의 1주차 후기이다. 42서울에 대한 자세한 설명은 생략하겠다. 6기 2차 라피신은 설연휴(1/31~2/2)와 겹쳤지만 일정 수정 없이 진행되었다. 42답다! (욕 아님) 장소는 대륭서초타워에서 진행되었는데, 본가와의 거리가 멀어 고시원을 한 달 잡아 살게 되었다. # 월요일(1/31) 9시 반쯤 대륭서초타워 건물에 도착했다. 많은 사람들이 줄을 서 등록 절차가 진행되었다. 등록 절차는 이런저런 서류(개인정보 제공 동의서, 비밀유지 서약서 등)에 싸인을 하고, intra ID를 발급받고, 웹캠으로 프로필 사진을 촬영하는 등의 과정으로..

안녕하세요 여러분! 코로나가 2년째 지속되고 있는 상황이라, 각종 수업과 행사들이 Zoom 등의 화상 회의 서비스를 통해 진행되고 있습니다. 줌을 이용하다 보면 가끔 줌의 소리만 줄이거나 늘이고 싶은 경우가 생깁니다. 윈도우의 경우 '볼륨 믹서' 기능을 사용해서 줌 볼륨만 조절할 수 있는데, 맥의 경우 운영체제 자체에 내장된 기능은 없는 것 같아 저는 'Background Music'이라는 프로그램을 사용했습니다. Background Music은 윈도우 볼륨 믹서처럼 응용 프로그램 별 음량을 조절할 수 있게 해주는 프로그램입니다. 무료이므로 인터넷에 검색해서 설치하시면 됩니다. 근데 저는 이 Background Music과 에어팟을 함께 사용할 때 문제가 생겼습니다. 소리가 나오긴 하는데 지지직 거리며 ..

안녕하세요! 초알입니다. 저는 여전히 멋쟁이사자처럼 프론트엔드 스쿨에서 공부중입니다. 프론트엔드 스쿨이 무엇인지, 지원 과정은 어떻게 되는지 등은 1달차 후기 포스팅에서 확인하실 수 있습니다. [멋쟁이사자처럼 프론트엔드 스쿨 1기] 합격 및 1달차 후기 안녕하세요! 초알입니다. 저는 요즘 '멋쟁이사자처럼 프론트엔드 스쿨' 과정에서 공부하느라 아주 정신이 없습니다. 🤩 이 과정이 무엇인지 궁금하시면 위의 링크를 클릭해서 살펴보시면 됩니 choar816.tistory.com 1달차 회고 제 TIL을 보시면 아시겠지만, 1달차까지는 주로 HTML, CSS를 배웠습니다. HTML 요소, CSS 요소를 하나하나 써보면서 개념을 확실히 익히는 시간이 많았어요. CSS의 연장선으로 SASS/SCSS, 간단한 터미널 ..

CSS의 막강한 레이아웃 기능인 Flex! 그중 조금 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념을 완벽히 이해해보도록 하자. box1 box2 box3 box4 box5 box6 body { box-sizing: border-box; font-family: sans-serif; font-weight: 600; } .container { display: flex; background: #f9f1f0; border: 2px solid black; width: 90vw; height: 200px; } .box { background-color: pink; border: 2px solid black; width: 100px; height: 100px; margin: 10..