전체 글 37

[React] JSX에서 텍스트 줄바꿈 하는 방법

리액트 프로젝트를 진행하다보면 텍스트 태그를 사용할 일이 많은데요, 리액트에서 사용하는 JSX에서는 개행 문자 ('\n')이 적용되지 않습니다. 예를 들어 아래와 같이 작성해도 import React from 'react'; export default function Test() { return JSX에서 줄바꿈은 적용되지 않습니다. \n바로 이렇게요. } 개행문자가 그대로 텍스트로 출력된 것을 확인할 수 있습니다. 이를 해결하기 위해서 해결방법을 찾아보았는데, CSS에서 해당 태그에 white-space를 pre-line으로 설정해주면 된다고 합니다. 그러나 아무리 p 태그에 white-space: pre-line으로 설정해도 줄바꿈이 적용되지 않았는데요, 해결방법은 정말 간단했습니다. import R..

[React] "먹거리 기록" 리액트 프로젝트 개발환경 구축⭐️

안녕하세요! 최근 가장 기초라고 볼 수 있는 바닐라 자바스크립트에 대해 학습하고 있었는데요, 어느정도 DOM 요소를 가지고 놀 수 있게 되다보니 객체지향에 대해서도 큰 관심이 생겨 타입스크립트와 객체지향에 대한 강의를 수강했습니다. 👀 연습용 프로젝트도 하고 나니 생각보다 큰 장벽은 없다는 생각이 들었어요. 항상 타입스크립트가 중요하다, 한번 쓰면 헤어나오질 못하는 매력이 있다는 것을 말로만 들어 체감이 되지 않았어요. 그러나 실제로 사용해보니 협업 시에 매우 중요한 스킬이 될 것 같다는 느낌이 들었습니다. 굉장히 많은 타입과 객체지향 개념을 적용하는데 편리했고, 무엇보다 원하는 타입을 만들어 사용할 수 있다는 점이 가장 마음에 들었습니다. 타입스크립트를 사용하니 개발자를 풀어두는 듯한 자바스크립트보다 ..

[Javascript] className, classList, 그리고 toggle!

자바스크립트에서 style를 바꾸고 싶을 때 바로. style로 변경해도 되지만, 코드도 길어지고 무엇보다 JS파일에서 CSS를 쓰고 있다는 게 마음에 걸린다. 이럴 때는 미리 css 파일에 변경해둘 스타일을 지정된 이름으로 선언해두고 자바스크립트에서 class를 변경만 해주면 된다! 1. className className은 HTML에서 불러온 Element의 class 이름을 css에서 지정한 선택자 이름으로 변경한다. Element를 가져오는 것은 document.getElementsByClassName이나 querySelector로 가져온다. // Javascript function changeStyle() { 가져온Element.className = "변경할 이름"; } // CSS .변경할 이..

[2022] 네이버 부스트캠프 7기 1차,2차 코딩테스트 후기(2차 불합격)

소개 링크 https://boostcamp.connect.or.kr/guide_wm.html 부스트캠프 개발자의 지속 가능한 성장을 위한 학습 커뮤니티 boostcamp.connect.or.kr 소통하던 개발자 친구의 추천으로 네이버 부스트 캠프를 알게 되어 지원하게 됐다! 백엔드에서 프론트엔드로 진로를 전향한 케이스라 풀 스택 개발에 대해서도 관심을 두고 있었는데, 합격하게 된다면 정말 얻을 것이 많아 보이는 교육 과정이었다. 네이버 부스트 캠프는 따로 면접 전형은 없이 서류-1차 코딩 테스트-2차 코딩 테스트로 진행하는데 서류 지원 시 작성했던 문항들이 나 자신을 되돌아볼 수 있어 좋았다. 어느 기업에 무엇으로 지원하든 지원 문항을 보면 기업만의 이미지가 녹아있는 것 같아 신기하고 설렌다. 1차 코딩..

[Python3] 백준 2941 : 크로아티아 알파벳

2941번 크로아티아 알파벳 Language: PYTHON https://www.acmicpc.net/problem/2941 2941번: 크로아티아 알파벳 예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다. 크로아티아 알파벳 변경 č c= ć c- dž dz= đ d- lj lj nj nj š s= ž z= www.acmicpc.net 문제 크로아티아 알파벳 변경 č c= ć c- dž dz= đ d- lj lj nj nj š s= ž z= 입력된 100글자 이내의 단어를 몇 개의 크로아티아 알파벳으로 이루어져 있는지, 길이를 출력하는 문제입니다. 즉, 'c='이 알파벳 하나로 카운트되어야 합니다. 풀이 arr = input() te..

[코드업 CodeUp] C언어 기초 100제 1096번 ~ 1099번 풀이

📌 빠른 바로가기 1096번 1097번 1098번 1099번 📝 지난 글 2021.09.19 - [🖤 Algorithm/CodeUp : C언어 기초 100제] - [코드업 CodeUp] C언어 기초 100제 1093번 ~ 1095번 풀이 [코드업 CodeUp] C언어 기초 100제 1093번 ~ 1095번 풀이 📌 빠른 바로가기 1093번 1094번 1095번 📝 지난 글 2021.09.14 - [🖤 Algorithm/CodeUp : C언어 기초 100제] - [코드업 CodeUp] C언어 기초 100제 1089번 ~ 1092번 풀이 [코드업 CodeUp] C언어 기초 100제 1089.. hyj3463.tistory.com 아래 코드들은 제 깃허브에서도 확인하실 수 있습니다. :-) 이 포스팅을 마지막..

[코드업 CodeUp] C언어 기초 100제 1093번 ~ 1095번 풀이

📌 빠른 바로가기 1093번 1094번 1095번 📝 지난 글 2021.09.14 - [🖤 Algorithm/CodeUp : C언어 기초 100제] - [코드업 CodeUp] C언어 기초 100제 1089번 ~ 1092번 풀이 [코드업 CodeUp] C언어 기초 100제 1089번 ~ 1092번 풀이 📌 빠른 바로가기 1089번 1090번 1091번 1092번 📝 지난 글 2021.09.05 - [🖤 Algorithm/CodeUp : C언어 기초 100제] - [코드업 CodeUp] C언어 기초 100제 1084번 ~ 1088번 풀이 [코드업 CodeUp] C언어 기초 100.. hyj3463.tistory.com 아래 코드들은 제 깃허브에서도 확인하실 수 있습니다. :-) 현재 코드업 100제 1099..

플라스크(Flask) | 웹 개발을 위한 파이썬(Python) 가상 환경 설치

최근 플라스크(Flask)를 이용한 웹 개발을 진행하고 있어서 파이썬 가상 환경을 준비했습니다. 파이썬 가상 환경은 다양한 버전의 파이썬을 각각 사용하고 관리할 수 있도록 독립된 환경을 제공해줍니다. 가상 환경을 사용하면 제 1 가상 환경에서는 2.7 버전을, 제2 가상 환경에서는 3.8, 3.9 버전을 사용할 수 있어 정말 편리합니다! 참고로 저는 macOS와 Windows 모두 사용하고 있지만 개발에 주로 사용하는 것은 macOS입니다. 가상 환경 생성 먼저 가상 환경을 만들 폴더를 생성합니다. 직접 파일 관리자에서 폴더를 만드셔도 되고, 맥이라면 터미널에서 생성하셔도 무관합니다. 저는project1으로 생성해보겠습니다. $ mkdir '폴더이름' 저는 간단히 project1 로 설정했습니다. (ex..

파이썬Python | 리스트(list) 중복 제거

최근 백준(https://www.acmicpc.net/)에서 알고리즘 공부를 하고 있는데, 언어를 파이썬으로 정하는 바람에 모르는 부분이 많아 매우 헤매고 있는 중입니다..🥲 며칠 전 리스트의 중복 제거 문제를 봤는데, 기존하던 대로 당연히 for 반복문을 이용해 요소를 순회하려 했습니다. 그러나 정말 여러 가지 방법이 있다는 것을 알고 굉장히 신기했습니다. 집합 자료형 SET() 이용하기 집합 자료형의 특징 중 하나가 중복이 없다는 점입니다. 이 특징을 이용하면 쉽게 중복이 없는 set 타입으로 변경됩니다. 제가 본 문제처럼 중복이 안된 수의 개수를 알고 싶다면 여기서 len() 함수만 이용하면 됩니다. 그러나 만약 기존 순서를 유지한 채 중복 제거를 하고 싶다면 순서가 무작위로 바뀌는 SET을 사용하..